mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-05 19:41:45 +08:00
test(Tabbar): add demo test
This commit is contained in:
nemo-shen
neverland
parent
efbc3a9ce6
commit
eda2100dfa
@ -127,6 +127,7 @@
|
||||
"van-tab-demo": "./dist/tab/demo/index",
|
||||
"van-tabs": "./dist/tabs/index",
|
||||
"van-tabbar": "./dist/tabbar/index",
|
||||
"van-tabbar-demo": "./dist/tabbar/demo/index",
|
||||
"van-tabbar-item": "./dist/tabbar-item/index",
|
||||
"van-tag": "./dist/tag/index",
|
||||
"van-toast": "./dist/toast/index",
|
||||
|
||||
@ -1,27 +1,3 @@
|
||||
import Page from '../../common/page';
|
||||
|
||||
Page({
|
||||
data: {
|
||||
active: 0,
|
||||
active2: 'home',
|
||||
active3: 0,
|
||||
active4: 0,
|
||||
active5: 0,
|
||||
active6: 0,
|
||||
icon: {
|
||||
normal: 'https://img.yzcdn.cn/vant/user-inactive.png',
|
||||
active: 'https://img.yzcdn.cn/vant/user-active.png'
|
||||
}
|
||||
},
|
||||
|
||||
onChange(event) {
|
||||
const { key } = event.currentTarget.dataset;
|
||||
this.setData({ [key]: event.detail });
|
||||
},
|
||||
|
||||
handleChange(event) {
|
||||
const { key } = event.currentTarget.dataset;
|
||||
this.setData({ [key]: event.detail });
|
||||
wx.showToast({ title: `点击标签 ${event.detail + 1}`, icon: 'none' });
|
||||
}
|
||||
});
|
||||
Page();
|
||||
|
||||
@ -1,105 +1 @@
|
||||
<demo-block title="基础用法">
|
||||
<van-tabbar
|
||||
active="{{ active }}"
|
||||
data-key="active"
|
||||
custom-class="tabbar-position"
|
||||
safe-area-inset-bottom="{{ false }}"
|
||||
bind:change="onChange"
|
||||
>
|
||||
<van-tabbar-item icon="home-o">标签</van-tabbar-item>
|
||||
<van-tabbar-item icon="search">标签</van-tabbar-item>
|
||||
<van-tabbar-item icon="friends-o">标签</van-tabbar-item>
|
||||
<van-tabbar-item icon="setting-o">标签</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="通过名称匹配">
|
||||
<van-tabbar
|
||||
active="{{ active2 }}"
|
||||
data-key="active2"
|
||||
custom-class="tabbar-position"
|
||||
safe-area-inset-bottom="{{ false }}"
|
||||
bind:change="onChange"
|
||||
>
|
||||
<van-tabbar-item name="home" icon="home-o">标签</van-tabbar-item>
|
||||
<van-tabbar-item name="search" icon="search">标签</van-tabbar-item>
|
||||
<van-tabbar-item name="friends" icon="friends-o">标签</van-tabbar-item>
|
||||
<van-tabbar-item name="setting" icon="setting-o">标签</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="显示徽标">
|
||||
<van-tabbar
|
||||
active="{{ active3 }}"
|
||||
data-key="active3"
|
||||
custom-class="tabbar-position"
|
||||
safe-area-inset-bottom="{{ false }}"
|
||||
bind:change="onChange"
|
||||
>
|
||||
<van-tabbar-item icon="home-o">标签</van-tabbar-item>
|
||||
<van-tabbar-item icon="search" dot>标签</van-tabbar-item>
|
||||
<van-tabbar-item icon="friends-o" info="5">标签</van-tabbar-item>
|
||||
<van-tabbar-item icon="setting-o" info="20">标签</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="自定义图标">
|
||||
<van-tabbar
|
||||
active="{{ active4 }}"
|
||||
data-key="active4"
|
||||
custom-class="tabbar-position"
|
||||
safe-area-inset-bottom="{{ false }}"
|
||||
bind:change="onChange"
|
||||
>
|
||||
<van-tabbar-item info="3">
|
||||
<image
|
||||
slot="icon"
|
||||
src="{{ icon.normal }}"
|
||||
mode="aspectFit"
|
||||
style="width: 30px; height: 18px;"
|
||||
/>
|
||||
<image
|
||||
slot="icon-active"
|
||||
src="{{ icon.active }}"
|
||||
mode="aspectFit"
|
||||
style="width: 30px; height: 18px;"
|
||||
/>
|
||||
自定义
|
||||
</van-tabbar-item>
|
||||
<van-tabbar-item icon="search">标签</van-tabbar-item>
|
||||
<van-tabbar-item icon="setting-o">标签</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="自定义颜色">
|
||||
<van-tabbar
|
||||
active="{{ active5 }}"
|
||||
data-key="active5"
|
||||
custom-class="tabbar-position"
|
||||
active-color="#07c160"
|
||||
inactive-color="#000"
|
||||
safe-area-inset-bottom="{{ false }}"
|
||||
bind:change="onChange"
|
||||
>
|
||||
<van-tabbar-item icon="home-o">标签</van-tabbar-item>
|
||||
<van-tabbar-item icon="search">标签</van-tabbar-item>
|
||||
<van-tabbar-item icon="friends-o">标签</van-tabbar-item>
|
||||
<van-tabbar-item icon="setting-o">标签</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
</demo-block>
|
||||
|
||||
|
||||
<demo-block title="切换标签事件">
|
||||
<van-tabbar
|
||||
active="{{ active6 }}"
|
||||
data-key="active6"
|
||||
custom-class="tabbar-position"
|
||||
safe-area-inset-bottom="{{ false }}"
|
||||
bind:change="handleChange"
|
||||
>
|
||||
<van-tabbar-item icon="home-o">标签1</van-tabbar-item>
|
||||
<van-tabbar-item icon="search">标签2</van-tabbar-item>
|
||||
<van-tabbar-item icon="friends-o">标签3</van-tabbar-item>
|
||||
<van-tabbar-item icon="setting-o">标签4</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
</demo-block>
|
||||
<van-tabbar-demo />
|
||||
|
||||
8
packages/tabbar/demo/index.json
Normal file
8
packages/tabbar/demo/index.json
Normal file
@ -0,0 +1,8 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"van-tabbar": "../../tabbar/index",
|
||||
"van-tabbar-item": "../../tabbar-item/index",
|
||||
"demo-block": "../../../example/components/demo-block/index"
|
||||
}
|
||||
}
|
||||
29
packages/tabbar/demo/index.ts
Normal file
29
packages/tabbar/demo/index.ts
Normal file
@ -0,0 +1,29 @@
|
||||
import { VantComponent } from '../../common/component';
|
||||
|
||||
VantComponent({
|
||||
data: {
|
||||
active: 0,
|
||||
active2: 'home',
|
||||
active3: 0,
|
||||
active4: 0,
|
||||
active5: 0,
|
||||
active6: 0,
|
||||
icon: {
|
||||
normal: 'https://img.yzcdn.cn/vant/user-inactive.png',
|
||||
active: 'https://img.yzcdn.cn/vant/user-active.png',
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
onChange(event) {
|
||||
const { key } = event.currentTarget.dataset;
|
||||
this.setData({ [key]: event.detail });
|
||||
},
|
||||
|
||||
handleChange(event) {
|
||||
const { key } = event.currentTarget.dataset;
|
||||
this.setData({ [key]: event.detail });
|
||||
wx.showToast({ title: `点击标签 ${event.detail + 1}`, icon: 'none' });
|
||||
},
|
||||
},
|
||||
});
|
||||
105
packages/tabbar/demo/index.wxml
Normal file
105
packages/tabbar/demo/index.wxml
Normal file
@ -0,0 +1,105 @@
|
||||
<demo-block title="基础用法">
|
||||
<van-tabbar
|
||||
active="{{ active }}"
|
||||
data-key="active"
|
||||
custom-class="tabbar-position"
|
||||
safe-area-inset-bottom="{{ false }}"
|
||||
bind:change="onChange"
|
||||
>
|
||||
<van-tabbar-item icon="home-o">标签</van-tabbar-item>
|
||||
<van-tabbar-item icon="search">标签</van-tabbar-item>
|
||||
<van-tabbar-item icon="friends-o">标签</van-tabbar-item>
|
||||
<van-tabbar-item icon="setting-o">标签</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="通过名称匹配">
|
||||
<van-tabbar
|
||||
active="{{ active2 }}"
|
||||
data-key="active2"
|
||||
custom-class="tabbar-position"
|
||||
safe-area-inset-bottom="{{ false }}"
|
||||
bind:change="onChange"
|
||||
>
|
||||
<van-tabbar-item name="home" icon="home-o">标签</van-tabbar-item>
|
||||
<van-tabbar-item name="search" icon="search">标签</van-tabbar-item>
|
||||
<van-tabbar-item name="friends" icon="friends-o">标签</van-tabbar-item>
|
||||
<van-tabbar-item name="setting" icon="setting-o">标签</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="显示徽标">
|
||||
<van-tabbar
|
||||
active="{{ active3 }}"
|
||||
data-key="active3"
|
||||
custom-class="tabbar-position"
|
||||
safe-area-inset-bottom="{{ false }}"
|
||||
bind:change="onChange"
|
||||
>
|
||||
<van-tabbar-item icon="home-o">标签</van-tabbar-item>
|
||||
<van-tabbar-item icon="search" dot>标签</van-tabbar-item>
|
||||
<van-tabbar-item icon="friends-o" info="5">标签</van-tabbar-item>
|
||||
<van-tabbar-item icon="setting-o" info="20">标签</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="自定义图标">
|
||||
<van-tabbar
|
||||
active="{{ active4 }}"
|
||||
data-key="active4"
|
||||
custom-class="tabbar-position"
|
||||
safe-area-inset-bottom="{{ false }}"
|
||||
bind:change="onChange"
|
||||
>
|
||||
<van-tabbar-item info="3">
|
||||
<image
|
||||
slot="icon"
|
||||
src="{{ icon.normal }}"
|
||||
mode="aspectFit"
|
||||
style="width: 30px; height: 18px;"
|
||||
/>
|
||||
<image
|
||||
slot="icon-active"
|
||||
src="{{ icon.active }}"
|
||||
mode="aspectFit"
|
||||
style="width: 30px; height: 18px;"
|
||||
/>
|
||||
自定义
|
||||
</van-tabbar-item>
|
||||
<van-tabbar-item icon="search">标签</van-tabbar-item>
|
||||
<van-tabbar-item icon="setting-o">标签</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="自定义颜色">
|
||||
<van-tabbar
|
||||
active="{{ active5 }}"
|
||||
data-key="active5"
|
||||
custom-class="tabbar-position"
|
||||
active-color="#07c160"
|
||||
inactive-color="#000"
|
||||
safe-area-inset-bottom="{{ false }}"
|
||||
bind:change="onChange"
|
||||
>
|
||||
<van-tabbar-item icon="home-o">标签</van-tabbar-item>
|
||||
<van-tabbar-item icon="search">标签</van-tabbar-item>
|
||||
<van-tabbar-item icon="friends-o">标签</van-tabbar-item>
|
||||
<van-tabbar-item icon="setting-o">标签</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
</demo-block>
|
||||
|
||||
|
||||
<demo-block title="切换标签事件">
|
||||
<van-tabbar
|
||||
active="{{ active6 }}"
|
||||
data-key="active6"
|
||||
custom-class="tabbar-position"
|
||||
safe-area-inset-bottom="{{ false }}"
|
||||
bind:change="handleChange"
|
||||
>
|
||||
<van-tabbar-item icon="home-o">标签1</van-tabbar-item>
|
||||
<van-tabbar-item icon="search">标签2</van-tabbar-item>
|
||||
<van-tabbar-item icon="friends-o">标签3</van-tabbar-item>
|
||||
<van-tabbar-item icon="setting-o">标签4</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
</demo-block>
|
||||
11
packages/tabbar/test/demo.spec.ts
Normal file
11
packages/tabbar/test/demo.spec.ts
Normal file
@ -0,0 +1,11 @@
|
||||
import path from 'path';
|
||||
import simulate from 'miniprogram-simulate';
|
||||
|
||||
test('should render demo and match snapshot', () => {
|
||||
const id = simulate.load(path.resolve(__dirname, '../demo/index'), {
|
||||
rootPath: path.resolve(__dirname, '../../'),
|
||||
});
|
||||
const comp = simulate.render(id);
|
||||
comp.attach(document.createElement('parent-wrapper'));
|
||||
expect(comp.toJSON()).toMatchSnapshot();
|
||||
});
|
||||
Loading…
x
Reference in New Issue
Block a user