fix(editor): 修复 StyleSetter Box/Position 输入框无法正确显示 model 值

原生 input 应使用 :value 而非 :model-value,并补充值显示与同步更新的单元测试。
This commit is contained in:
roymondchen 2026-08-04 19:01:51 +08:00
parent a9cda719bc
commit af157fcda9
3 changed files with 39 additions and 2 deletions

View File

@ -4,7 +4,7 @@
<span class="help-txt" v-if="item.text">{{ item.text }}</span> <span class="help-txt" v-if="item.text">{{ item.text }}</span>
<span class="next-input"> <span class="next-input">
<input <input
:model-value="model[item.name]" :value="model[item.name]"
placeholder="0" placeholder="0"
:title="model[item.name]" :title="model[item.name]"
:disabled="disabled" :disabled="disabled"

View File

@ -3,7 +3,7 @@
<div v-for="(item, index) in list" :key="index" :class="item.class"> <div v-for="(item, index) in list" :key="index" :class="item.class">
<span class="next-input"> <span class="next-input">
<input <input
:model-value="model[item.name]" :value="model[item.name]"
placeholder="0" placeholder="0"
:title="model[item.name]" :title="model[item.name]"
:disabled="disabled" :disabled="disabled"

View File

@ -15,6 +15,36 @@ describe('StyleSetter Box', () => {
expect(wrapper.findAll('input').length).toBe(8); expect(wrapper.findAll('input').length).toBe(8);
}); });
test('根据 model 显示 margin/padding 值', () => {
const wrapper = mount(Box, {
props: {
model: {
marginTop: '10',
marginRight: '20',
marginBottom: '30',
marginLeft: '40',
paddingTop: '1',
paddingRight: '2',
paddingBottom: '3',
paddingLeft: '4',
},
},
});
const values = wrapper.findAll('input').map((i) => (i.element as HTMLInputElement).value);
expect(values).toEqual(['10', '20', '30', '40', '1', '2', '3', '4']);
});
test('model 变更时输入框值同步更新', async () => {
const wrapper = mount(Box, {
props: { model: { marginTop: '10', marginRight: '20' } },
});
expect((wrapper.findAll('input')[0].element as HTMLInputElement).value).toBe('10');
await wrapper.setProps({ model: { marginTop: '50', marginRight: '60' } });
expect((wrapper.findAll('input')[0].element as HTMLInputElement).value).toBe('50');
expect((wrapper.findAll('input')[1].element as HTMLInputElement).value).toBe('60');
});
test('change 事件携带值与对应字段名', async () => { test('change 事件携带值与对应字段名', async () => {
const wrapper = mount(Box, { props: { model: { marginTop: '10' } } }); const wrapper = mount(Box, { props: { model: { marginTop: '10' } } });
const input = wrapper.findAll('input')[0]; const input = wrapper.findAll('input')[0];
@ -40,6 +70,13 @@ describe('StyleSetter Position', () => {
expect(wrapper.findAll('input').length).toBe(4); expect(wrapper.findAll('input').length).toBe(4);
}); });
test('model 变更时输入框值同步更新', async () => {
const wrapper = mount(Position, { props: { model: { top: '0', right: '10' } } });
await wrapper.setProps({ model: { top: '20', right: '30' } });
expect((wrapper.findAll('input')[0].element as HTMLInputElement).value).toBe('20');
expect((wrapper.findAll('input')[1].element as HTMLInputElement).value).toBe('30');
});
test('change 事件触发并携带 modifyKey', async () => { test('change 事件触发并携带 modifyKey', async () => {
const wrapper = mount(Position, { props: { model: { top: '0' } } }); const wrapper = mount(Position, { props: { model: { top: '0' } } });
const input = wrapper.findAll('input')[1]; const input = wrapper.findAll('input')[1];