github/tmagic-editor
1
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2026-06-20 14:22:00 +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 border-icon-top"
:class="{ active: direction === 'Top' }"
:class="{ active: direction === 'Top', configured: isConfigured('Top') }"
@click="selectDirection('Top')"
></div>
</div>
<div class="border-icon-container-row">
<div
class="border-icon border-icon-left"
:class="{ active: direction === 'Left' }"
:class="{ active: direction === 'Left', configured: isConfigured('Left') }"
@click="selectDirection('Left')"
></div>
<div class="border-icon" :class="{ active: direction === '' }" @click="selectDirection()"></div>
<div
class="border-icon"
:class="{ active: direction === '', configured: isConfigured('') }"
@click="selectDirection()"
></div>
<div
class="border-icon border-icon-right"
:class="{ active: direction === 'Right' }"
:class="{ active: direction === 'Right', configured: isConfigured('Right') }"
@click="selectDirection('Right')"
></div>
</div>
<div class="border-icon-container-row">
<div
class="border-icon border-icon-bottom"
:class="{ active: direction === 'Bottom' }"
:class="{ active: direction === 'Bottom', configured: isConfigured('Bottom') }"
@click="selectDirection('Bottom')"
></div>
</div>
@ -98,7 +102,7 @@ const emit = defineEmits<{
addDiffCount: [];
}>();
withDefaults(
const props = withDefaults(
defineProps<{
model: 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) => {
eventData.changeRecords?.forEach((record) => {
emit('change', record.value, {

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

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