mirror of
https://github.com/Tencent/tmagic-editor.git
synced 2026-08-07 05:18:38 +00:00
fix(editor): 修复 StyleSetter Box/Position 输入框无法正确显示 model 值
原生 input 应使用 :value 而非 :model-value,并补充值显示与同步更新的单元测试。
This commit is contained in:
parent
a9cda719bc
commit
af157fcda9
@ -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"
|
||||||
|
|||||||
@ -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"
|
||||||
|
|||||||
@ -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];
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user