github/tmagic-editor
1
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2026-09-25 13:26:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(editor): 边框方向有配置时显示高亮状态

Browse Source
This commit is contained in:
roymondchen 2026-06-15 17:10:55 +08:00
parent 921188d2da
commit b35132e93e
2 changed files with 19 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
packages/editor/src/fields/StyleSetter/components/Border.vue
View File

@ -4,27 +4,31 @@
<div class="border-icon-container-row"> <div class="border-icon-container-row">
<div <div
class="border-icon border-icon-top" class="border-icon border-icon-top"
:class="{ active: direction === 'Top' }" :class="{ active: direction === 'Top', configured: isConfigured('Top') }"
@click="selectDirection('Top')" @click="selectDirection('Top')"
></div> ></div>
</div> </div>
<div class="border-icon-container-row"> <div class="border-icon-container-row">
<div <div
class="border-icon border-icon-left" class="border-icon border-icon-left"
:class="{ active: direction === 'Left' }" :class="{ active: direction === 'Left', configured: isConfigured('Left') }"
@click="selectDirection('Left')" @click="selectDirection('Left')"
></div> ></div>
<div class="border-icon" :class="{ active: direction === '' }" @click="selectDirection()"></div> <div
class="border-icon"
:class="{ active: direction === '', configured: isConfigured('') }"
@click="selectDirection()"
></div>
<div <div
class="border-icon border-icon-right" class="border-icon border-icon-right"
:class="{ active: direction === 'Right' }" :class="{ active: direction === 'Right', configured: isConfigured('Right') }"
@click="selectDirection('Right')" @click="selectDirection('Right')"
></div> ></div>
</div> </div>
<div class="border-icon-container-row"> <div class="border-icon-container-row">
<div <div
class="border-icon border-icon-bottom" class="border-icon border-icon-bottom"
:class="{ active: direction === 'Bottom' }" :class="{ active: direction === 'Bottom', configured: isConfigured('Bottom') }"
@click="selectDirection('Bottom')" @click="selectDirection('Bottom')"
></div> ></div>
</div> </div>
@ -98,7 +102,7 @@ const emit = defineEmits<{
addDiffCount: []; addDiffCount: [];
}>(); }>();
withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
model: FormValue; model: FormValue;
lastValues?: FormValue; lastValues?: FormValue;
@ -109,6 +113,11 @@ withDefaults(
{}, {},
); );
const hasValue = (value: unknown) => value !== undefined && value !== null && value !== '';
const isConfigured = (d: string) =>
['Width', 'Color', 'Style'].some((key) => hasValue(props.model?.[`border${d}${key}`]));
const change = (value: StyleSchema, eventData: ContainerChangeEventData) => { const change = (value: StyleSchema, eventData: ContainerChangeEventData) => {
eventData.changeRecords?.forEach((record) => { eventData.changeRecords?.forEach((record) => {
emit('change', record.value, { emit('change', record.value, {

5
packages/editor/src/theme/style-setter/border.scss
View File

@ -24,9 +24,12 @@
& + .border-icon { & + .border-icon {
margin-left: 8px; margin-left: 8px;
} }
&.configured {
border-color: var(--el-color-success, var(--td-success-color, #2ba471));
}
&.active { &.active {
border-width: 1px; border-width: 1px;
border-color: var(--el-color-primary); border-color: var(--el-color-primary, var(--td-brand-color, #0052d9));
} }
&.border-icon-top { &.border-icon-top {
border-top-width: 2px; border-top-width: 2px;