From bd5f92bbbdb4ccbb147dd44c0074094bc9572123 Mon Sep 17 00:00:00 2001 From: Ymm0008 Date: Fri, 22 Oct 2021 17:44:00 +0800 Subject: [PATCH 01/64] =?UTF-8?q?fix:=20countup=E4=BC=98=E5=8C=96=E6=BB=9A?= =?UTF-8?q?=E5=8A=A8=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/__VUE/address/index.taro.vue | 1 + src/packages/__VUE/barrage/demo.vue | 13 +- src/packages/__VUE/barrage/index.scss | 8 +- src/packages/__VUE/barrage/index.taro.vue | 137 +++++++++--------- src/packages/__VUE/countup/demo.vue | 28 +--- src/packages/__VUE/countup/index.scss | 2 +- src/packages/__VUE/countup/index.taro.vue | 100 ++++--------- src/packages/__VUE/countup/index.vue | 100 ++++--------- src/packages/__VUE/elevator/index.taro.vue | 5 +- .../vue/src/business/pages/barrage/index.vue | 13 +- .../vue/src/dentry/pages/countup/index.vue | 28 +--- 11 files changed, 156 insertions(+), 279 deletions(-) diff --git a/src/packages/__VUE/address/index.taro.vue b/src/packages/__VUE/address/index.taro.vue index 5479026018..065dd8f02b 100644 --- a/src/packages/__VUE/address/index.taro.vue +++ b/src/packages/__VUE/address/index.taro.vue @@ -137,6 +137,7 @@ import Taro from '@tarojs/taro'; const { create, componentName } = createComponent('address'); interface RegionData { + id: string; name: string; [key: string]: any; } diff --git a/src/packages/__VUE/barrage/demo.vue b/src/packages/__VUE/barrage/demo.vue index 6523a96f95..8d2f42a809 100644 --- a/src/packages/__VUE/barrage/demo.vue +++ b/src/packages/__VUE/barrage/demo.vue @@ -5,9 +5,7 @@
- +
@@ -21,14 +19,7 @@ export default createDemo({ setup() { const inputVal = ref(''); const danmu = ref(null); - let list = ref([ - '画美不看', - '不明觉厉', - '喜大普奔', - '男默女泪', - '累觉不爱', - '爷青结' - ]); + let list = ref(['画美不看', '不明觉厉', '喜大普奔', '男默女泪', '累觉不爱', '爷青结-']); function addDanmu() { let n = Math.random(); danmu.value.add('随机——' + String(n).substr(2, 10)); diff --git a/src/packages/__VUE/barrage/index.scss b/src/packages/__VUE/barrage/index.scss index 53823c37e2..f7f2045b35 100644 --- a/src/packages/__VUE/barrage/index.scss +++ b/src/packages/__VUE/barrage/index.scss @@ -8,6 +8,8 @@ box-sizing: border-box; background-color: #f7f8fa; .dmitem { + width: 100px; + // max-width: 150px; display: block; position: absolute; right: 0; @@ -30,7 +32,9 @@ transform: translateX(100%); } to { - transform: translateX(var(--move-distance)); + transform: translateX(-250%); + // transform: translateX(-180%); + // transform: translateX(var(--move-distance)); } } @-webkit-keyframes moving { @@ -38,7 +42,7 @@ -webkit-transform: translateX(100%); } to { - -webkit-transform: translateX(var(--move-distance)); + transform: translateX(-250%); } } } diff --git a/src/packages/__VUE/barrage/index.taro.vue b/src/packages/__VUE/barrage/index.taro.vue index 3bb29db00d..3723b98154 100644 --- a/src/packages/__VUE/barrage/index.taro.vue +++ b/src/packages/__VUE/barrage/index.taro.vue @@ -1,9 +1,15 @@ diff --git a/src/packages/__VUE/countup/demo.vue b/src/packages/__VUE/countup/demo.vue index 3192e18394..bcea7c3b6e 100644 --- a/src/packages/__VUE/countup/demo.vue +++ b/src/packages/__VUE/countup/demo.vue @@ -3,26 +3,12 @@

基础用法

- - + +

数字滚动

- +

自定义滚动图片展示

@@ -52,12 +38,8 @@ >
- 抽奖 - 不中奖 + 抽奖 + 不中奖
diff --git a/src/packages/__VUE/countup/index.scss b/src/packages/__VUE/countup/index.scss index 3f2c74e2d1..c8928be610 100644 --- a/src/packages/__VUE/countup/index.scss +++ b/src/packages/__VUE/countup/index.scss @@ -9,7 +9,7 @@ .run-number { display: inline-block; width: 100%; - margin: 0 auto; + // margin: 0 auto; padding: 0; overflow: hidden; // height: 50px; diff --git a/src/packages/__VUE/countup/index.taro.vue b/src/packages/__VUE/countup/index.taro.vue index ae829e4208..c2b8817505 100644 --- a/src/packages/__VUE/countup/index.taro.vue +++ b/src/packages/__VUE/countup/index.taro.vue @@ -2,10 +2,7 @@ + ``` - +::: ## API ### Props diff --git a/src/packages/__VUE/textarea/doc.md b/src/packages/__VUE/textarea/doc.md index 87368b1971..1ba4a26c2d 100644 --- a/src/packages/__VUE/textarea/doc.md +++ b/src/packages/__VUE/textarea/doc.md @@ -20,42 +20,55 @@ app.use(TextArea); ## 代码演示 ### 基础用法 - +:::demo ```html - -``` -``` javascript + + ``` +::: ### 显示字数统计 +:::demo ```html - + ``` +::: ### 高度自定义，拉伸 - +:::demo ```html - + ``` +::: ### 只读、禁用 +:::demo ```html - - + ``` +::: ### Prop From 09adce016c1e79f0d4b862c556ea76ae877a8c62 Mon Sep 17 00:00:00 2001 From: Ymm0008 Date: Wed, 2 Mar 2022 11:29:24 +0800 Subject: [PATCH 05/64] =?UTF-8?q?feat:=20=E6=8A=98=E5=8F=A0=E9=9D=A2?= =?UTF-8?q?=E6=9D=BF=20collapse=20=E5=8D=95=E5=85=83=E6=B5=8B=E8=AF=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- .../__VUE/collapse/__tests__/collapse.spec.ts | 251 ++++++++++++++++++ src/packages/__VUE/collapse/demo.vue | 2 +- src/packages/__VUE/collapseitem/index.vue | 4 +- 4 files changed, 256 insertions(+), 3 deletions(-) create mode 100644 src/packages/__VUE/collapse/__tests__/collapse.spec.ts diff --git a/package.json b/package.json index aacf08b13f..f84e4ebfc9 100644 --- a/package.json +++ b/package.json @@ -81,7 +81,6 @@ "@vue/eslint-config-typescript": "^7.0.0", "@vue/test-utils": "^2.0.0-rc.18", "autoprefixer": "^10.3.4", - "remark-codesandbox": "^0.10.1", "axios": "^0.21.0", "eslint": "^7.23.2", "eslint-plugin-prettier": "^3.3.1", @@ -96,6 +95,7 @@ "lzutf8": "^0.6.0", "markdown-it-container": "^3.0.0", "prettier": "^2.0.0", + "remark-codesandbox": "^0.10.1", "standard-version": "^9.3.0", "swiper": "6.5.1", "transliteration": "^2.2.0", diff --git a/src/packages/__VUE/collapse/__tests__/collapse.spec.ts b/src/packages/__VUE/collapse/__tests__/collapse.spec.ts new file mode 100644 index 0000000000..82281c865b --- /dev/null +++ b/src/packages/__VUE/collapse/__tests__/collapse.spec.ts @@ -0,0 +1,251 @@ +import { config, mount } from '@vue/test-utils'; +import NutIcon from '../../icon/index.vue'; +import Collapse from '../index.vue'; +import CollapseItem from '../../collapseitem/index.vue'; +import { nextTick, reactive, ref, toRefs } from 'vue'; +function sleep(delay = 0): Promise { + return new Promise((resolve) => { + setTimeout(resolve, delay); + }); +} +// 所有的测试用例之前执行一次 +beforeAll(() => { + config.global.components = { + NutCollapse: Collapse, + NutCollapseItem: CollapseItem, + NutIcon + }; +}); +// 所有的测试用例之后执行一次 +afterAll(() => { + config.global.components = {}; +}); +test('should props active disabled', async () => { + const component = { + template: ` + + + NutUI是一套拥有京东风格的轻量级的 Vue 组件库 + + + 在产品的功能、体验、易用性和灵活性等各个方面做了全面的升级！ + + `, + data() { + return { + active: [1, 2], + title1: '标题1', + title2: '标题2' + }; + } + }; + const wrapper = mount(component); + expect(wrapper.findAll('.nut-collapse-item')).toHaveLength(3); + const collapseWrapper = wrapper.findAll('.collapse-item'); + await nextTick(); + expect(collapseWrapper[0].classes()).toContain('item-expanded'); + expect(collapseWrapper[1].classes()).toContain('item-expanded'); +}); + +test('should props accordion', async () => { + const component = { + template: ` + + NutUI是一套拥有京东风格的轻量级的 Vue 组件库 + + + 在产品的功能、体验、易用性和灵活性等各个方面做了全面的升级！ + + `, + data() { + return { + active: 1 + }; + } + }; + const wrapper = mount(component); + await nextTick(); + expect(wrapper.findAll('.item-expanded')).toHaveLength(1); + const collapseWrapper = wrapper.findAll('.collapse-item'); + collapseWrapper[0].trigger('click'); + await nextTick(); + expect(wrapper.findAll('.item-expanded')).toHaveLength(0); +}); + +test('should title props ', async () => { + const wrapper = mount({ + template: ` + + + 组件 emits 事件单独提取，增强代码可读性 + + + 使用 Teleport 新特性重构挂载类组件 + + + `, + setup() { + const activeName = ref(1); + const title = reactive({ + title1: '标题1', + title2: '标题2', + titleIcon: 'issue', + titleIconSize: '20px', + titleIconColor: 'red', + titleIconPos: 'left' + }); + return { + activeName, + ...toRefs(title) + }; + } + }); + await nextTick(); + const collapseIcon = wrapper.findAll('.nut-icon'); + expect(collapseIcon[0].classes()).toContain('nut-icon-issue'); + + const collapseIconEle = collapseIcon[0].element as HTMLElement; + expect(collapseIconEle.style.color).toEqual(wrapper.vm.titleIconColor); + expect(collapseIconEle.style.fontSize).toEqual(wrapper.vm.titleIconSize); + expect(collapseIcon[0].classes()).toContain('titleIconLeft'); +}); + +test('should icon props ', async () => { + const wrapper = mount({ + template: ` + + + 组件 emits 事件单独提取，增强代码可读性 + + + 使用 Teleport 新特性重构挂载类组件 + + + `, + setup() { + const activeName = ref(1); + const title = reactive({ + title1: '标题1', + title2: '标题2', + icon: 'down-arrow', + iconSize: '16px', + iconColor: 'red', + rotate: '90' + }); + return { + activeName, + ...toRefs(title) + }; + } + }); + await nextTick(); + const collapseIcon = wrapper.findAll('.nut-icon'); + expect(collapseIcon[0].classes()).toContain('nut-icon-' + wrapper.vm.icon); + + const collapseIconEle = collapseIcon[0].element as HTMLElement; + expect(collapseIconEle.style.fontSize).toEqual(wrapper.vm.iconSize); + expect(collapseIconEle.style.color).toEqual(wrapper.vm.iconColor); + expect(collapseIconEle.style.transform).toEqual(`rotate(${wrapper.vm.rotate}deg)`); +}); + +test('should nut-collapse-item props ', async () => { + const wrapper = mount({ + template: ` + + + 组件 emits 事件单独提取，增强代码可读性 + + + 使用 Teleport 新特性重构挂载类组件 + + + + `, + setup() { + const activeName = ref(1); + const title = reactive({ + title1: '标题1', + title2: '标题2', + title3: '标题3', + subTitle: '文本内容', + disabled: true + }); + return { + activeName, + ...toRefs(title) + }; + } + }); + await nextTick(); + const collapseItemTitle = wrapper.findAll('.collapse-title-value'); + const collapseIconEle1 = collapseItemTitle[0].element as HTMLElement; + expect(collapseIconEle1.textContent).toEqual(wrapper.vm.title1); + const collapseIconEle2 = collapseItemTitle[1].element as HTMLElement; + expect(collapseIconEle2.textContent).toEqual(wrapper.vm.title2); + + const collapseItemSubTitle = wrapper.findAll('.subTitle')[1].element as HTMLElement; + expect(collapseItemSubTitle.textContent).toEqual(wrapper.vm.subTitle); + + const collapseWrapper = wrapper.findAll('.collapse-item'); + expect(collapseWrapper[2].classes()).toContain('nut-collapse-item-disabled'); +}); + +test('should event change', async () => { + const wrapper = mount({ + components: { + 'nut-collapse': Collapse, + 'nut-collapse-item': CollapseItem + }, + template: ` + + + 引入Vue3新特性 Composition API、Teleport、Emits 等 + + 全面使用 TypeScipt + + `, + setup() { + const state = reactive({ + activeName: 1 + }); + const title = reactive({ + active: 1, + title1: '标题1', + title2: '标题2' + }); + const change = (name: any) => { + state.activeName = name; + }; + return { + ...toRefs(title), + ...toRefs(state), + change + }; + } + }); + + await nextTick(); + const collapseWrapper = wrapper.findAll('.collapse-item'); + collapseWrapper[1].trigger('click'); + await sleep(1000); + expect(wrapper.vm.activeName).toBe(2); +}); diff --git a/src/packages/__VUE/collapse/demo.vue b/src/packages/__VUE/collapse/demo.vue index e62e467edf..68c84908e9 100644 --- a/src/packages/__VUE/collapse/demo.vue +++ b/src/packages/__VUE/collapse/demo.vue @@ -14,7 +14,7 @@

无icon样式

- + 引入Vue3新特性 Composition API、Teleport、Emits 等 diff --git a/src/packages/__VUE/collapseitem/index.vue b/src/packages/__VUE/collapseitem/index.vue index bdca5297cf..84342dd31f 100644 --- a/src/packages/__VUE/collapseitem/index.vue +++ b/src/packages/__VUE/collapseitem/index.vue @@ -127,7 +127,9 @@ export default create({ // 清除 willChange 减少性能浪费 const onTransitionEnd = () => { const wrapperRefEle: any = document.getElementsByClassName('collapse-wrapper')[0]; - wrapperRefEle.style.willChange = 'auto'; + if (wrapperRefEle) { + wrapperRefEle.style.willChange = 'auto'; + } // const query = wx.createSelectorQuery(); // query.select('#productServe').boundingClientRect(); From bb298c84c52bcad89fcf61c2912a9f04a61e4cf8 Mon Sep 17 00:00:00 2001 From: Ymm0008 Date: Wed, 9 Mar 2022 20:02:55 +0800 Subject: [PATCH 06/64] =?UTF-8?q?feat:=20countUp=20=E5=8D=95=E5=85=83?= =?UTF-8?q?=E6=B5=8B=E8=AF=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../__VUE/countup/__test__/countup.spec.ts | 234 +++++++++++------- src/packages/__VUE/countup/demo.vue | 1 + src/packages/__VUE/countup/doc.md | 2 +- src/packages/__VUE/countup/index.vue | 6 +- 4 files changed, 147 insertions(+), 96 deletions(-) diff --git a/src/packages/__VUE/countup/__test__/countup.spec.ts b/src/packages/__VUE/countup/__test__/countup.spec.ts index 9e31d1063e..2f43bbc595 100644 --- a/src/packages/__VUE/countup/__test__/countup.spec.ts +++ b/src/packages/__VUE/countup/__test__/countup.spec.ts @@ -17,98 +17,98 @@ beforeAll(() => { afterAll(() => { config.global.components = {}; }); -// test('basic usage props init-num end-num speed', async () => { -// const component = { -// template: ``, -// setup() { -// const data = reactive({ -// initNum: 0, -// endNum: 4, -// speed: 3 -// }); -// return { -// ...toRefs(data) -// }; -// } -// }; -// const wrapper = mount(component); -// const countupWrapper = wrapper.find('.nut-countup').element as Element; -// await nextTick(); -// expect(countupWrapper.textContent).toBe(wrapper.vm.initNum + ''); +test('basic usage props init-num end-num speed', async () => { + const component = { + template: ``, + setup() { + const data = reactive({ + initNum: 0, + endNum: 4, + speed: 3 + }); + return { + ...toRefs(data) + }; + } + }; + const wrapper = mount(component); + const countupWrapper = wrapper.find('.nut-countup').element as Element; + await nextTick(); + expect(countupWrapper.textContent).toBe(wrapper.vm.initNum + ''); -// await sleep(1000); -// const cur = countupWrapper.textContent; -// const differenceNum = Number(cur) - wrapper.vm.initNum; -// expect(differenceNum % wrapper.vm.speed).toBe(0); + await sleep(1000); + const cur = countupWrapper.textContent; + const differenceNum = Number(cur) - wrapper.vm.initNum; + expect(differenceNum % wrapper.vm.speed).toBe(0); -// await sleep(3000); -// expect(countupWrapper.textContent).toBe(wrapper.vm.endNum + ''); -// }); + await sleep(3000); + expect(countupWrapper.textContent).toBe(wrapper.vm.endNum + ''); +}); -// test('basic usage props decimal places', async () => { -// const component = { -// template: ``, -// setup() { -// const data = reactive({ -// toFixed: 2 -// }); -// return { -// ...toRefs(data) -// }; -// } -// }; -// const wrapper = mount(component); -// await nextTick(); -// const countupWrapper = wrapper.find('.nut-countup').element as Element; -// await sleep(4000); -// const num = countupWrapper.textContent; -// const len = num?.toString().split('.')[1]; -// expect(len?.length).toBe(wrapper.vm.toFixed); -// }); +test('basic usage props decimal places', async () => { + const component = { + template: ``, + setup() { + const data = reactive({ + toFixed: 2 + }); + return { + ...toRefs(data) + }; + } + }; + const wrapper = mount(component); + await nextTick(); + const countupWrapper = wrapper.find('.nut-countup').element as Element; + await sleep(4000); + const num = countupWrapper.textContent; + const len = num?.toString().split('.')[1]; + expect(len?.length).toBe(wrapper.vm.toFixed); +}); -// test('digital scrolling during props', async () => { -// const component = { -// template: ``, -// setup() { -// const data = reactive({ -// during: 600, -// numWidth: 30, -// numHeight: 30 -// }); -// return { -// ...toRefs(data) -// }; -// } -// }; -// const wrapper = mount(component); -// await nextTick(); -// await sleep(1000); +test('digital scrolling during props', async () => { + const component = { + template: ``, + setup() { + const data = reactive({ + during: 600, + numWidth: 30, + numHeight: 30 + }); + return { + ...toRefs(data) + }; + } + }; + const wrapper = mount(component); + await nextTick(); + await sleep(1000); -// expect(wrapper.findAll('.run-number')).toHaveLength(1); + expect(wrapper.findAll('.run-number')).toHaveLength(1); -// const numberItemList = wrapper.findAll('.numberItem'); -// const numItem = numberItemList[numberItemList.length - 1].element as HTMLElement; -// expect(numItem.style.transition).toEqual(`all linear ${wrapper.vm.during}ms`); + const numberItemList = wrapper.findAll('.numberItem'); + const numItem = numberItemList[numberItemList.length - 1].element as HTMLElement; + expect(numItem.style.transition).toEqual(`all linear ${wrapper.vm.during}ms`); -// const itemSpan = wrapper.find('.itemSpan').element as HTMLElement; -// expect(itemSpan.style.width).toBe(`${wrapper.vm.numWidth}px`); -// expect(itemSpan.style.height).toBe(`${wrapper.vm.numHeight}px`); -// }); + const itemSpan = wrapper.find('.itemSpan').element as HTMLElement; + expect(itemSpan.style.width).toBe(`${wrapper.vm.numWidth}px`); + expect(itemSpan.style.height).toBe(`${wrapper.vm.numHeight}px`); +}); -test('digital scrolling during props', async () => { +test('custom img size props', async () => { const component = { template: ``, setup() { const data = reactive({ @@ -116,7 +116,7 @@ test('digital scrolling during props', async () => { customChangeNum: 618, customBgImg: 'https://img10.360buyimg.com/imagetools/jfs/t1/121466/20/6784/28830/5f06e7f2Edbb8998c/9bdd9e7b24dff9fe.png', - customSpaceImg: 5 + customSpaceNum: 5 }); return { ...toRefs(data) @@ -128,18 +128,68 @@ test('digital scrolling during props', async () => { await sleep(2000); const numberItemList = wrapper.findAll('.run-number-img-li'); const ele = numberItemList[0].element as HTMLElement; - console.log(ele.style.backgroundPositionY); - // numberItemList.forEach((item) => { - // const ele = item.element as HTMLElement; - // console.log(ele.style); - // const url: string[] = ele.style.backgroundImage.split(/\(|\)/); - // expect(url[1]).toBe(wrapper.vm.customBgImg); - // }); - - // const numItem = numberItemList[numberItemList.length - 1].element as HTMLElement; - // expect(numItem.style.transition).toEqual(`all linear ${wrapper.vm.during}ms`); + const _y = Math.abs(parseFloat(ele.style.backgroundPositionY)); + const _num = Number(String(wrapper.vm.customChangeNum).charAt(0)); + const __y = _num * wrapper.vm.numHeight + wrapper.vm.customSpaceNum * _num; + expect(_y).toBe(__y); +}); - // const itemSpan = wrapper.find('.itemSpan').element as HTMLElement; - // expect(itemSpan.style.width).toBe(`${wrapper.vm.numWidth}px`); - // expect(itemSpan.style.height).toBe(`${wrapper.vm.numHeight}px`); +test('game machine props', async () => { + const component = { + template: ``, + setup() { + const countupMachineDom: any = ref(null); + const data = reactive({ + machineNum: 3, + machinePrizeNum: 5, + bgImage: + 'https://img10.360buyimg.com/imagetools/jfs/t1/121466/20/6784/28830/5f06e7f2Edbb8998c/9bdd9e7b24dff9fe.png', + machinePrizeLevel: -1, + machineTrunMore: 3, + cbFlag: '' + }); + const scrollAniEnd = () => { + data.cbFlag = 'end'; + }; + const startRole = () => { + data.machinePrizeLevel = Math.floor(Math.random() * 5 + 1); + countupMachineDom.value.machineLuck(); + }; + return { + countupMachineDom, + ...toRefs(data), + startRole, + scrollAniEnd + }; + } + }; + const wrapper = mount(component); + await nextTick(); + // await sleep(2000); + const machine = wrapper.findAll('.run-number-machine-img'); + expect(machine).toHaveLength(1); + const machineItemList = wrapper.findAll('.run-number-machine-img-li'); + expect(machineItemList).toHaveLength(wrapper.vm.machineNum); + wrapper.vm.startRole(); + await sleep(4000); + const ele = machineItemList[0].element as HTMLElement; + const _y = Math.abs(parseFloat(ele.style.backgroundPositionY)); + const dis = wrapper.vm.machinePrizeNum * parseFloat(ele.style.height) * 2; + expect(_y).toBeGreaterThan(dis); + const scrollY = (wrapper.vm.machinePrizeNum - wrapper.vm.machinePrizeLevel + 1) * parseFloat(ele.style.height); + expect(_y).toBeGreaterThan(scrollY); + const circle = wrapper.vm.machineTrunMore * parseFloat(ele.style.height); + expect(_y).toBeGreaterThan(circle); }); diff --git a/src/packages/__VUE/countup/demo.vue b/src/packages/__VUE/countup/demo.vue index 8fc9625767..ac73a15ce2 100644 --- a/src/packages/__VUE/countup/demo.vue +++ b/src/packages/__VUE/countup/demo.vue @@ -30,6 +30,7 @@ :machine-num="machineNum" :machine-prize-num="5" :machine-prize-level="prizeLevel" + :machine-turn-more="5" :custom-bg-img="bgImage2" :num-width="100" :num-height="100" diff --git a/src/packages/__VUE/countup/doc.md b/src/packages/__VUE/countup/doc.md index bab13cd960..ca5c430a14 100644 --- a/src/packages/__VUE/countup/doc.md +++ b/src/packages/__VUE/countup/doc.md @@ -163,7 +163,7 @@ export default { | machine-prize-num | 奖品个数，一共多少个奖品，必传 | number | 4 | machine-num | 抽奖位，即滚动几个，必传 | number | 3 | machine-prize-level | 中奖图标，图标在雪碧图中的位置 | number | 0 -| machine-trun-more | 滚动圈数 | number | 0 +| machine-turn-more | 滚动圈数 | number | 0 > 说明：抽奖功能需要结合图标位置计算，故需传入雪碧图中单个图标的高度 num-height；中奖奖品根据雪碧图中的奖品位数来定位，从 1 到 N； diff --git a/src/packages/__VUE/countup/index.vue b/src/packages/__VUE/countup/index.vue index d8efb683a8..500c853df3 100644 --- a/src/packages/__VUE/countup/index.vue +++ b/src/packages/__VUE/countup/index.vue @@ -209,7 +209,7 @@ export default create({ type: Number, default: 0 }, - machineTrunMore: { + machineTurnMore: { type: Number, default: 0 } @@ -567,14 +567,14 @@ export default create({ }; // 抽奖 const machineLuck = () => { - const machineTrunMoreNum = props.machineTrunMore < 0 ? 0 : props.machineTrunMore; + const machineTurnMoreNum = props.machineTurnMore < 0 ? 0 : props.machineTurnMore; let distance = props.numHeight * props.machinePrizeNum; // 所有奖品的高度，雪碧图的高度 if (data.prizeLevelTrun < 0) { generateRandom(); } for (let i = 0; i < props.machineNum; i++) { setTimeout(() => { - let turn = distance * (i + 1 + parseFloat(String(machineTrunMoreNum))); + let turn = distance * (i + 1 + parseFloat(String(machineTurnMoreNum))); if (data.prizeYPrev.length != 0) { // this.machineTransition = 'none'; // console.log(this.prizeYPrev[i]-(this.numHeight * this.machinePrizeNum)); From 730df912854036fabcb0ab42242f45a24750e877 Mon Sep 17 00:00:00 2001 From: Ymm0008 Date: Thu, 10 Mar 2022 11:21:22 +0800 Subject: [PATCH 07/64] =?UTF-8?q?feat:=20barrage=20=E5=8D=95=E5=85=83?= =?UTF-8?q?=E6=B5=8B=E8=AF=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../__VUE/barrage/__tests__/barrage.spec.ts | 78 +++++++++++++++++++ 1 file changed, 78 insertions(+) create mode 100644 src/packages/__VUE/barrage/__tests__/barrage.spec.ts diff --git a/src/packages/__VUE/barrage/__tests__/barrage.spec.ts b/src/packages/__VUE/barrage/__tests__/barrage.spec.ts new file mode 100644 index 0000000000..3e63241449 --- /dev/null +++ b/src/packages/__VUE/barrage/__tests__/barrage.spec.ts @@ -0,0 +1,78 @@ +import { config, mount } from '@vue/test-utils'; +import Barrage from '../index.vue'; +import { nextTick, reactive, ref, toRefs } from 'vue'; +function sleep(delay = 0): Promise { + return new Promise((resolve) => { + setTimeout(resolve, delay); + }); +} +// 所有的测试用例之前执行一次 +beforeAll(() => { + config.global.components = { + NutBarrage: Barrage + }; +}); +// 所有的测试用例之后执行一次 +afterAll(() => { + config.global.components = {}; +}); +test('should danmu list props', async () => { + const wrapper = mount({ + template: ``, + setup() { + const danmu = ref(null); + const list = ref(['画美不看', '不明觉厉', '喜大普奔', '男默女泪', '累觉不爱', '爷青结']); + const speeds = ref(300); + return { + list, + danmu, + speeds + }; + } + }); + await nextTick(); + await sleep(4000); + const danmuList = wrapper.findAll('.dmitem'); + danmuList.forEach((item) => { + expect(Number(item.attributes('data-index'))).toBeLessThan(wrapper.vm.list.length); + }); + const ele = danmuList[0].element as HTMLElement; + expect(ele.style.animationDuration).toEqual(`${wrapper.vm.speeds}ms`); +}); + +test('should danmu rows top', async () => { + const wrapper = mount({ + template: ``, + setup() { + const danmu: any = ref(null); + const list = ref(['画美不看', '不明觉厉', '喜大普奔', '男默女泪', '累觉不爱', '爷青结']); + const rows = ref(3); + const top = ref(30); + const addDanmu = () => { + const n: number = Math.random(); + danmu.value.add('随机——' + String(n).substr(2, 10)); + }; + return { + list, + danmu, + rows, + top, + addDanmu + }; + } + }); + await nextTick(); + wrapper.vm.addDanmu(); + await sleep(4500); + const danmuList = wrapper.findAll('.dmitem'); + const ele = danmuList[1].element as HTMLElement; + const top = parseFloat(ele.style.top); + expect(top - 26 + 6).toBe(wrapper.vm.top); + // const danmuitem = danmuList.filter(item => Number(item.attributes('data-index')) >= wrapper.vm.list.length); + danmuList.forEach((item) => { + if (Number(item.attributes('data-index')) + 1 >= wrapper.vm.list.length) { + const idx = Number(item.attributes('data-index')); + expect(idx).toBe(wrapper.vm.list.length - 1); + } + }); +}); From 70a8a1f265b45cce4989f9dbebe50096325f0680 Mon Sep 17 00:00:00 2001 From: Ymm0008 Date: Wed, 16 Mar 2022 17:20:31 +0800 Subject: [PATCH 08/64] =?UTF-8?q?fix:=20=E7=AD=BE=E5=90=8D=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E5=8D=95=E5=85=83=E6=B5=8B=E8=AF=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + .../__VUE/barrage/__tests__/barrage.spec.ts | 2 +- .../__snapshots__/signature.spec.ts.snap | 21 +++++++ .../signature/__tests__/signature.spec.ts | 57 +++++++++++++++++++ src/packages/__VUE/signature/demo.vue | 7 +-- src/packages/__VUE/signature/index.taro.vue | 2 +- src/packages/__VUE/signature/index.vue | 39 ++++--------- 7 files changed, 94 insertions(+), 35 deletions(-) create mode 100644 src/packages/__VUE/signature/__tests__/__snapshots__/signature.spec.ts.snap create mode 100644 src/packages/__VUE/signature/__tests__/signature.spec.ts diff --git a/package.json b/package.json index ed3665ae47..1477ff2e41 100644 --- a/package.json +++ b/package.json @@ -82,6 +82,7 @@ "@vue/test-utils": "^2.0.0-rc.18", "autoprefixer": "^10.3.4", "axios": "^0.21.0", + "canvas": "^2.9.0", "eslint": "^7.23.2", "eslint-plugin-prettier": "^3.3.1", "eslint-plugin-vue": "^7.8.0", diff --git a/src/packages/__VUE/barrage/__tests__/barrage.spec.ts b/src/packages/__VUE/barrage/__tests__/barrage.spec.ts index 3e63241449..ffe00f15af 100644 --- a/src/packages/__VUE/barrage/__tests__/barrage.spec.ts +++ b/src/packages/__VUE/barrage/__tests__/barrage.spec.ts @@ -1,6 +1,6 @@ import { config, mount } from '@vue/test-utils'; import Barrage from '../index.vue'; -import { nextTick, reactive, ref, toRefs } from 'vue'; +import { nextTick, ref } from 'vue'; function sleep(delay = 0): Promise { return new Promise((resolve) => { setTimeout(resolve, delay); diff --git a/src/packages/__VUE/signature/__tests__/__snapshots__/signature.spec.ts.snap b/src/packages/__VUE/signature/__tests__/__snapshots__/signature.spec.ts.snap new file mode 100644 index 0000000000..129a514c9a --- /dev/null +++ b/src/packages/__VUE/signature/__tests__/__snapshots__/signature.spec.ts.snap @@ -0,0 +1,21 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`props custom-class 1`] = ` +"
+
+ + + + + 重签 + + + + + + + 确认 + + +
" +`; diff --git a/src/packages/__VUE/signature/__tests__/signature.spec.ts b/src/packages/__VUE/signature/__tests__/signature.spec.ts new file mode 100644 index 0000000000..dbb1295eed --- /dev/null +++ b/src/packages/__VUE/signature/__tests__/signature.spec.ts @@ -0,0 +1,57 @@ +import { mount, config } from '@vue/test-utils'; +import Signature from '../index.vue'; +import NutIcon from '../../icon/index.vue'; +import NutButton from '../../button/index.vue'; +import { nextTick, reactive, toRefs } from 'vue'; +import { createCanvas, loadImage } from 'canvas'; + +function sleep(delay = 0): Promise { + return new Promise((resolve) => { + setTimeout(resolve, delay); + }); +} +// 所有的测试用例之前执行一次 +beforeAll(() => { + config.global.components = { + NutSignature: Signature, + NutIcon, + NutButton + }; +}); +// 所有的测试用例之后执行一次 +afterAll(() => { + config.global.components = {}; +}); + +test('props custom-class', async () => { + const component = { + template: ``, + setup() { + const data = reactive({ + customClass: 'test', + lineWidth: 5, + strokeStyle: '#333' + }); + return { + ...toRefs(data) + }; + } + }; + const wrapper = mount(component); + await nextTick(); + const signatureWrapper = wrapper.findAll('.nut-signature'); + expect(signatureWrapper[0].classes()).toContain(wrapper.vm.customClass); + + const canvas = createCanvas(200, 200); + const ctx = canvas.getContext('2d'); + ctx.lineWidth = wrapper.vm.lineWidth; + ctx.strokeStyle = wrapper.vm.strokeStyle; + ctx.beginPath(); + ctx.lineTo(10, 50); + ctx.lineTo(80, 120); + ctx.stroke(); + const _img = document.createElement('img'); + _img.src = canvas.toDataURL(); + expect(canvas.toDataURL()).not.toBeNull(); + expect(wrapper.html()).toMatchSnapshot(); +}); diff --git a/src/packages/__VUE/signature/demo.vue b/src/packages/__VUE/signature/demo.vue index 4db76264e9..331932c7fc 100644 --- a/src/packages/__VUE/signature/demo.vue +++ b/src/packages/__VUE/signature/demo.vue @@ -2,15 +2,12 @@

基础用法

- +

Tips: 点击确认按钮,下方显示签名图片

修改颜色和签字粗细

- +
diff --git a/src/packages/__VUE/signature/index.taro.vue b/src/packages/__VUE/signature/index.taro.vue index ecbcafde85..be02be907b 100644 --- a/src/packages/__VUE/signature/index.taro.vue +++ b/src/packages/__VUE/signature/index.taro.vue @@ -12,7 +12,7 @@ @touchmove="moveEventHandler" @touchend="endEventHandler" @touchleave="leaveEventHandler" - /> + > 重签 确认 diff --git a/src/packages/__VUE/signature/index.vue b/src/packages/__VUE/signature/index.vue index 7d89cdeaf3..6f67db0e91 100644 --- a/src/packages/__VUE/signature/index.vue +++ b/src/packages/__VUE/signature/index.vue @@ -1,25 +1,16 @@ From 1b0b8ab92e9684cd3982e8bb43d314c7982dd13e Mon Sep 17 00:00:00 2001 From: Ymm0008 Date: Thu, 17 Mar 2022 16:35:59 +0800 Subject: [PATCH 09/64] =?UTF-8?q?feat:=20textarea=20=E5=8D=95=E5=85=83?= =?UTF-8?q?=E6=B5=8B=E8=AF=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../signature/__tests__/signature.spec.ts | 27 ++-- .../__VUE/textarea/__tests__/textarea.spec.ts | 120 ++++++++++++++++++ src/packages/__VUE/textarea/index.vue | 10 +- 3 files changed, 147 insertions(+), 10 deletions(-) create mode 100644 src/packages/__VUE/textarea/__tests__/textarea.spec.ts diff --git a/src/packages/__VUE/signature/__tests__/signature.spec.ts b/src/packages/__VUE/signature/__tests__/signature.spec.ts index dbb1295eed..a79cb5fcc9 100644 --- a/src/packages/__VUE/signature/__tests__/signature.spec.ts +++ b/src/packages/__VUE/signature/__tests__/signature.spec.ts @@ -3,13 +3,8 @@ import Signature from '../index.vue'; import NutIcon from '../../icon/index.vue'; import NutButton from '../../button/index.vue'; import { nextTick, reactive, toRefs } from 'vue'; -import { createCanvas, loadImage } from 'canvas'; +import { Canvas, createCanvas } from 'canvas'; -function sleep(delay = 0): Promise { - return new Promise((resolve) => { - setTimeout(resolve, delay); - }); -} // 所有的测试用例之前执行一次 beforeAll(() => { config.global.components = { @@ -30,10 +25,26 @@ test('props custom-class', async () => { const data = reactive({ customClass: 'test', lineWidth: 5, - strokeStyle: '#333' + strokeStyle: '#333', + imgUrl: '' }); + + const confirm = (canvas: any, url: string) => { + const img = document.createElement('img'); + img.src = url; + data.imgUrl = url; + (document.querySelector('.test') as Element).appendChild(img); + }; + const clear = () => { + const img = document.querySelector('.test img'); + if (img) { + img.remove(); + } + }; return { - ...toRefs(data) + ...toRefs(data), + confirm, + clear }; } }; diff --git a/src/packages/__VUE/textarea/__tests__/textarea.spec.ts b/src/packages/__VUE/textarea/__tests__/textarea.spec.ts new file mode 100644 index 0000000000..d875d11cb2 --- /dev/null +++ b/src/packages/__VUE/textarea/__tests__/textarea.spec.ts @@ -0,0 +1,120 @@ +import { mount, config } from '@vue/test-utils'; +import Textarea from '../index.vue'; +import { nextTick, ref } from 'vue'; + +// 所有的测试用例之前执行一次 +beforeAll(() => { + config.global.components = { + NutTextarea: Textarea + }; +}); +// 所有的测试用例之后执行一次 +afterAll(() => { + config.global.components = {}; +}); + +test('props v-model', async () => { + const component = { + template: ``, + setup() { + const value = ref('618'); + return { + value + }; + } + }; + const wrapper = mount(component); + await nextTick(); + const txtWrapper = wrapper.find('.nut-textarea__textarea').element as HTMLTextAreaElement; + expect(txtWrapper.value).toBe('618'); +}); + +test('props placeholder max-length rows limit-show', async () => { + const component = { + template: ``, + setup() { + const value = ref('123456'); + const placeholder = ref('test'); + const maxLength = ref(3); + const limitShow = ref(true); + const rows = ref('5'); + return { + value, + placeholder, + maxLength, + limitShow, + rows + }; + } + }; + const wrapper = mount(component); + await nextTick(); + const txtWrapper = wrapper.find('.nut-textarea__textarea').element as HTMLTextAreaElement; + expect(txtWrapper.placeholder).toBe(wrapper.vm.placeholder); + expect(txtWrapper.value).toBe('123'); + expect(wrapper.find('.nut-textarea__textarea').attributes('rows')).toBe(wrapper.vm.rows); + expect(wrapper.findAll('.nut-textarea__limit')).toHaveLength(1); +}); + +test('props autosize text-align autofocus', async () => { + const component = { + template: ``, + setup() { + const value = ref('123456'); + const autosize = ref(true); + const textAlign = ref('right'); + const autofocus = ref(true); + return { + value, + autosize, + textAlign, + autofocus + }; + } + }; + const wrapper = mount(component); + await nextTick(); + const txtWrapper = wrapper.find('.nut-textarea__textarea').element as HTMLTextAreaElement; + expect(txtWrapper.style.resize).toBe(wrapper.vm.autosize ? 'vertical' : 'none'); + expect(txtWrapper.style.textAlign).toBe(wrapper.vm.textAlign); + expect(wrapper.find('.nut-textarea__textarea').attributes('autofocus')).not.toBeUndefined(); +}); + +test('props readonly disabled', async () => { + const component = { + template: ``, + setup() { + const value = ref('123456'); + const readonly = ref(true); + const disabled = ref(true); + return { + value, + readonly, + disabled + }; + } + }; + const wrapper = mount(component); + await nextTick(); + const txtWrapper = wrapper.find('.nut-textarea__textarea'); + expect(txtWrapper.attributes('readonly')).not.toBeUndefined(); + expect(txtWrapper.attributes('disabled')).not.toBeUndefined(); +}); + +test('should emit change event when textarea is change', () => { + const wrapper = mount(Textarea); + wrapper.find('textarea').trigger('input'); + expect(wrapper.emitted('change')).toBeTruthy(); +}); + +test('should emit focuse event when textarea is focus', () => { + const wrapper = mount(Textarea); + wrapper.find('textarea').trigger('focus'); + expect(wrapper.emitted('focus')).toBeTruthy(); +}); + +test('should emit blur event when textarea is blur', () => { + const wrapper = mount(Textarea); + wrapper.find('textarea').trigger('blur'); + expect(wrapper.emitted('blur')).toBeTruthy(); +}); diff --git a/src/packages/__VUE/textarea/index.vue b/src/packages/__VUE/textarea/index.vue index abfa0991df..96b788ce0d 100644 --- a/src/packages/__VUE/textarea/index.vue +++ b/src/packages/__VUE/textarea/index.vue @@ -18,7 +18,7 @@ From 8cfa13753ee73f30f6be2bfcb6b9239245161eb6 Mon Sep 17 00:00:00 2001 From: Ymm0008 Date: Fri, 22 Apr 2022 10:30:01 +0800 Subject: [PATCH 19/64] =?UTF-8?q?fix:=20demo=20=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/__VUE/notify/demo.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/packages/__VUE/notify/demo.vue b/src/packages/__VUE/notify/demo.vue index b3d93637e1..e4286d57c3 100644 --- a/src/packages/__VUE/notify/demo.vue +++ b/src/packages/__VUE/notify/demo.vue @@ -58,7 +58,7 @@ export default createDemo({ Notify.text(msg, { color: '#ad0000', background: '#ffe1e1' }); }; const timeNotify = (msg: string) => { - Notify.text(msg, { duration: 10000 }); + Notify.text(msg, { duration: 1000 }); }; const positionNotify = (msg: string) => { Notify.text(msg, { position: 'bottom' }); @@ -68,7 +68,7 @@ export default createDemo({ show.value = true; setTimeout(() => { show.value = false; - }, 200000); + }, 2000); }; return { baseNotify, From c5be488af261744e03c72128eb4998a9b73dd5ae Mon Sep 17 00:00:00 2001 From: Ymm0008 Date: Sun, 24 Apr 2022 17:40:03 +0800 Subject: [PATCH 20/64] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9Ecollapse?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E8=87=AA=E5=AE=9A=E4=B9=89=E5=86=85=E5=AE=B9?= =?UTF-8?q?=EF=BC=88=E4=B8=8D=E6=8A=98=E5=8F=A0=EF=BC=89=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/__VUE/collapse/demo.vue | 17 ++++++++- src/packages/__VUE/collapse/doc.md | 36 +++++++++++++++++++ src/packages/__VUE/collapseitem/index.scss | 14 ++++++-- .../__VUE/collapseitem/index.taro.vue | 5 +++ src/packages/__VUE/collapseitem/index.vue | 5 +++ .../src/exhibition/pages/collapse/index.vue | 11 ++++++ 6 files changed, 85 insertions(+), 3 deletions(-) diff --git a/src/packages/__VUE/collapse/demo.vue b/src/packages/__VUE/collapse/demo.vue index 37c68c2d3d..151d25255d 100644 --- a/src/packages/__VUE/collapse/demo.vue +++ b/src/packages/__VUE/collapse/demo.vue @@ -29,7 +29,6 @@

自定义折叠图标

- @@ -54,6 +53,16 @@ 使用 Teleport 新特性重构挂载类组件 +

设置固定内容（不折叠）

+ + + + NutUI是一套拥有京东风格的轻量级的 Vue 组件库 + + + 在产品的功能、体验、易用性和灵活性等各个方面做了全面的升级！ + + + diff --git a/src/packages/__VUE/collapse/doc.md b/src/packages/__VUE/collapse/doc.md index 8b5d208d1f..70e8e219dc 100644 --- a/src/packages/__VUE/collapse/doc.md +++ b/src/packages/__VUE/collapse/doc.md @@ -221,6 +221,41 @@ export default { ``` ::: +### 设置固定内容（不折叠） + +通过 slot:extraRender 设置内容 +:::demo + +```html + + +``` +::: ## Collapse Prop | 字段 | 说明 | 类型 | 默认值 @@ -244,6 +279,7 @@ export default { | title | 标题栏左侧内容，支持插槽传入（props传入的优先级更高） | string | - | | sub-title | 标题栏副标题，支持插槽传入（props传入的优先级更高） | string | - | | disabled | 标题栏是否禁用 | boolean | false | +| slot:extraRender | 设置标题下固定内容（不折叠） | - | ’‘ | ### Events diff --git a/src/packages/__VUE/collapseitem/index.scss b/src/packages/__VUE/collapseitem/index.scss index ac1fdde127..8fe7cbddac 100644 --- a/src/packages/__VUE/collapseitem/index.scss +++ b/src/packages/__VUE/collapseitem/index.scss @@ -68,13 +68,15 @@ // .extraRender { // display: block; // } - .collapse-wrapper { + .collapse-wrapper, + .collapse-extraWrapper { display: block; position: relative; height: 0; overflow: hidden; transition: height 0.3s ease-in-out; - .collapse-content { + .collapse-content, + .collapse-extraRender { display: block; padding: $collapse-wrapper-content-padding; color: $collapse-wrapper-content-color; @@ -86,6 +88,14 @@ padding: $collapse-wrapper-empty-content-padding; } } + .collapse-extraWrapper { + height: auto; + .collapse-extraRender { + word-wrap: break-word; + word-break: break-all; + overflow: hidden; + } + } .open-style { will-change: height; height: auto; diff --git a/src/packages/__VUE/collapseitem/index.taro.vue b/src/packages/__VUE/collapseitem/index.taro.vue index c1927101e9..115dd80a20 100644 --- a/src/packages/__VUE/collapseitem/index.taro.vue +++ b/src/packages/__VUE/collapseitem/index.taro.vue @@ -36,6 +36,11 @@ :style="iconStyle" > + +
+ +
+ + +
+ +
+ diff --git a/src/sites/mobile-taro/vue/src/exhibition/pages/collapse/index.vue b/src/sites/mobile-taro/vue/src/exhibition/pages/collapse/index.vue index a984c0380b..d43bedef3d 100644 --- a/src/sites/mobile-taro/vue/src/exhibition/pages/collapse/index.vue +++ b/src/sites/mobile-taro/vue/src/exhibition/pages/collapse/index.vue @@ -46,6 +46,16 @@ 快看漫画与全球潮玩集合店X11达成战略合作 +

设置固定内容（不折叠部分）

+ + + + NutUI是一套拥有京东风格的轻量级的 Vue 组件库 + + + 在产品的功能、体验、易用性和灵活性等各个方面做了全面的升级！ + + +``` +::: +### 手风琴 + +You can set accordion mode through 'accordion', and expand up to one panel. At this time, 'activename' is in string format` Subtitle ` you can set the content of a subtitle + +:::demo +```html + + +``` + +::: +### 自定义折叠图标 + +Set custom icons through icon and rotate to set the rotation angle of icons + +:::demo + +```html + + +``` +::: + +### Custom title Icon + +Set custom icons through icon and rotate to set the rotation angle of icons +:::demo + +```html + + +``` +::: +### Set fixed content (do not collapse) + +Set content through slot: extrarender + +```html + + +``` +::: +## Collapse Prop + +| Attribute | Description | Type | Default | +|----- | ----- | ----- | ----- +| v-model | Of the currently expanded panel name | Accordion mode：string \| number
Non accordion mode：(string \| number)[] | - | +| accordion | Whether to turn on accordion mode | boolean | false | +| icon | Icon link and / or icon using nutui | string | ‘’ | +| icon-size | Icon size | string | 16px | +| icon-color | Icon color | string | '' | +| title-icon | Title icon link and / or icon using nutui | string | ‘’ | +| title-icon-size | Title icon size | string | 16px | +| title-icon-color | Title icon color | string | ’‘ | +| title-icon-position | Title icon location | string | ‘left' | +| rotate | Click the rotation angle of collapse and expansion to take effect in the custom icon mode | string \ number | 180 | + + +### CollapseItem Prop +| Attribute | Description | Type | Default | +|------|------|------|------| +|name | unique identifier, required | string \ number | - 1| +|title | the content on the left side of the title bar supports slot incoming (props incoming has higher priority) | string | -| +|sub-title | subtitle of title bar, support slot incoming (props incoming has higher priority) | string | -| +|disabled | whether the title bar is disabled | Boolean | false| +|slot:extrarender | set the fixed content under the title (no folding) | - | '| + + +### Events +| Attribute | Description | Callback Arguments | +|------|------|------| +| change | Triggered when the panel is switched | The type is consistent with the value bound by V-model| \ No newline at end of file diff --git a/src/packages/__VUE/layout/demo.vue b/src/packages/__VUE/layout/demo.vue index 125b4ea39e..fe5462301b 100644 --- a/src/packages/__VUE/layout/demo.vue +++ b/src/packages/__VUE/layout/demo.vue @@ -1,6 +1,6 @@