Skip to content

Commit

Permalink
fix(collapse): 修复未设置 v-model 时无法触发事件问题 (#2340)
Browse files Browse the repository at this point in the history
  • Loading branch information
@eiinu
eiinu authored Jun 9, 2023
1 parent 9a8a3cb commit c985f82
Show file tree
Hide file tree
Showing 4 changed files with 69 additions and 28 deletions.
6 changes: 3 additions & 3 deletions src/packages/__VUE/collapse/__tests__/__snapshots__/collapse.spec.tsx.snap
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`should event change 1`] = `[Function]`;
exports[`Collapse: should event change 1`] = `[Function]`;

exports[`should icon props 1`] = `
exports[`Collapse: should icon props 1`] = `
"<view class=\\"nut-collapse\\">
<view class=\\"nut-collapse-item nut-collapse-item__border\\">
<view class=\\"nut-collapse-item__title\\">
Expand Down Expand Up @@ -43,7 +43,7 @@ exports[`should icon props 1`] = `
</view>"
`;
exports[`should props active 1`] = `
exports[`Collapse: should props active 1`] = `
"<view class=\\"nut-collapse\\">
<view class=\\"nut-collapse-item nut-collapse-item__border\\">
<view class=\\"nut-collapse-item__title\\">
Expand Down
39 changes: 34 additions & 5 deletions src/packages/__VUE/collapse/__tests__/collapse.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ function sleep(delay = 0): Promise<void> {
});
}

test('should props active', async () => {
test('Collapse: should props active', async () => {
const wrapper = mount(() => {
return (
<Collapse modelValue={['1', '2']}>
Expand All @@ -34,7 +34,7 @@ test('should props active', async () => {
expect(icons.length).toEqual(2);
});

test('should props accordion', async () => {
test('Collapse: should props accordion', async () => {
const wrapper = mount(() => {
return (
<Collapse modelValue={2} accordion>
Expand All @@ -55,7 +55,7 @@ test('should props accordion', async () => {
expect(wrapper.findAll('.nut-collapse-item__title-icon--expanded')).toHaveLength(1);
});

test('should icon props', async () => {
test('Collapse: should icon props', async () => {
const wrapper = mount(() => {
return (
<Collapse modelValue={1}>
Expand All @@ -72,7 +72,7 @@ test('should icon props', async () => {
expect(wrapper.html()).toMatchSnapshot();
});

test('should nut-collapse-item props ', async () => {
test('Collapse: should nut-collapse-item props ', async () => {
const wrapper = mount(() => {
return (
<Collapse modelValue="activeName">
Expand All @@ -96,7 +96,7 @@ test('should nut-collapse-item props ', async () => {
expect(collapseWrapper[2].classes()).toContain('nut-collapse-item__title--disabled');
});

test('should event change', async () => {
test('Collapse: should event change', async () => {
const wrapper = mount(() => {
return (
<Collapse modelValue={1} accordion>
Expand All @@ -116,3 +116,32 @@ test('should event change', async () => {
await sleep(1000);
expect(wrapper.emitted).toMatchSnapshot();
});

test('Collapse: v-model is undefined', async () => {
const onChange = vitest.fn();
const wrapper = mount(() => {
return (
<Collapse onChange={onChange}>
<CollapseItem title="title1" name={111111}>
引入Vue3新特性 Composition API、Teleport、Emits 等
</CollapseItem>
<CollapseItem title="title2" name={222222}>
全面使用 TypeScipt
</CollapseItem>
</Collapse>
);
});
// trigger change
await nextTick();
const collapseTitles = wrapper.findAll('.nut-collapse-item__title');
expect(collapseTitles.length).toBe(2);
collapseTitles[1].trigger('click');
expect(onChange).toBeCalledWith([222222], 222222, true);

// collapse-item can expand
await sleep(1000);
const collapseWrappers = wrapper.findAll('.nut-collapse__item-wrapper');
expect(collapseWrappers.length).toBe(2);
expect(collapseWrappers[0].html()).includes('height: 0px;');
expect(collapseWrappers[1].html()).includes('height: auto;');
});
26 changes: 16 additions & 10 deletions src/packages/__VUE/collapse/index.taro.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,14 @@
</view>
</template>
<script lang="ts">
import { computed, provide, ref } from 'vue';
import { computed, provide, ref, watch } from 'vue';
import { createComponent } from '@/packages/utils/create';
const { create, componentName } = createComponent('collapse');
export default create({
props: {
modelValue: {
type: [String, Number, Array<string | number>],
default: () => []
default: ''
},
accordion: {
type: Boolean,
Expand All @@ -21,32 +21,38 @@ export default create({
emits: ['update:modelValue', 'change'],
setup(props, { emit }) {
const collapseDom: any = ref(null);
const innerValue = ref(props.modelValue || (props.accordion ? '' : []));
const classes = computed(() => {
const prefixCls = componentName;
return {
[prefixCls]: true
};
});
watch(() => props.modelValue, (val) => {
innerValue.value = val
})
const changeVal = (val: string | number | Array<string | number>, name: string | number, status = true) => {
innerValue.value = val;
emit('update:modelValue', val);
emit('change', val, name, status);
};
const updateVal = (name: string | number) => {
if (props.accordion) {
if (props.modelValue === name) {
if (innerValue.value === name) {
changeVal("", name, false);
} else {
changeVal(name, name, true);
}
} else {
if (Array.isArray(props.modelValue)) {
if (props.modelValue.includes(name)) {
const newValue = props.modelValue.filter((v: string | number) => v !== name);
if (Array.isArray(innerValue.value)) {
if (innerValue.value.includes(name)) {
const newValue = innerValue.value.filter((v: string | number) => v !== name);
changeVal(newValue, name, false);
} else {
const newValue = props.modelValue.concat([name]);
const newValue = innerValue.value.concat([name]);
changeVal(newValue, name, true);
}
} else {
Expand All @@ -57,9 +63,9 @@ export default create({
const isExpanded = (name: string | number) => {
if (props.accordion) {
return props.modelValue === name;
} else if (Array.isArray(props.modelValue)) {
return props.modelValue.includes(name);
return innerValue.value === name;
} else if (Array.isArray(innerValue.value)) {
return innerValue.value.includes(name);
}
return false;
};
Expand Down
26 changes: 16 additions & 10 deletions src/packages/__VUE/collapse/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,14 @@
</view>
</template>
<script lang="ts">
import { computed, provide, ref } from 'vue';
import { computed, provide, ref, watch } from 'vue';
import { createComponent } from '@/packages/utils/create';
const { create, componentName } = createComponent('collapse');
export default create({
props: {
modelValue: {
type: [String, Number, Array<string | number>],
default: () => []
default: ''
},
accordion: {
type: Boolean,
Expand All @@ -21,32 +21,38 @@ export default create({
emits: ['update:modelValue', 'change'],
setup(props, { emit }) {
const collapseDom: any = ref(null);
const innerValue = ref(props.modelValue || (props.accordion ? '' : []));
const classes = computed(() => {
const prefixCls = componentName;
return {
[prefixCls]: true
};
});
watch(() => props.modelValue, (val) => {
innerValue.value = val
})
const changeVal = (val: string | number | Array<string | number>, name: string | number, status = true) => {
innerValue.value = val;
emit('update:modelValue', val);
emit('change', val, name, status);
};
const updateVal = (name: string | number) => {
if (props.accordion) {
if (props.modelValue === name) {
if (innerValue.value === name) {
changeVal("", name, false);
} else {
changeVal(name, name, true);
}
} else {
if (Array.isArray(props.modelValue)) {
if (props.modelValue.includes(name)) {
const newValue = props.modelValue.filter((v: string | number) => v !== name);
if (Array.isArray(innerValue.value)) {
if (innerValue.value.includes(name)) {
const newValue = innerValue.value.filter((v: string | number) => v !== name);
changeVal(newValue, name, false);
} else {
const newValue = props.modelValue.concat([name]);
const newValue = innerValue.value.concat([name]);
changeVal(newValue, name, true);
}
} else {
Expand All @@ -57,9 +63,9 @@ export default create({
const isExpanded = (name: string | number) => {
if (props.accordion) {
return props.modelValue === name;
} else if (Array.isArray(props.modelValue)) {
return props.modelValue.includes(name);
return innerValue.value === name;
} else if (Array.isArray(innerValue.value)) {
return innerValue.value.includes(name);
}
return false;
};
Expand Down

0 comments on commit c985f82

Please sign in to comment.