mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-05 19:41:45 +08:00
test(Tag): add demo test
This commit is contained in:
nemo-shen
neverland
parent
eda2100dfa
commit
a3787220c2
@ -129,7 +129,8 @@
|
||||
"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-tag": "./dist/tag/index",packages/tag/demo/index.less,
|
||||
"van-tag-demo": "./dist/tag/demo/index",
|
||||
"van-toast": "./dist/toast/index",
|
||||
"van-transition": "./dist/transition/index",
|
||||
"van-tree-select": "./dist/tree-select/index",
|
||||
|
||||
@ -1,16 +1,3 @@
|
||||
import Page from '../../common/page';
|
||||
|
||||
Page({
|
||||
data: {
|
||||
show: {
|
||||
success: true,
|
||||
primary: true
|
||||
}
|
||||
},
|
||||
|
||||
onClose(event) {
|
||||
this.setData({
|
||||
[`show.${event.target.id}`]: false
|
||||
});
|
||||
}
|
||||
});
|
||||
Page();
|
||||
|
||||
@ -1,65 +1 @@
|
||||
<demo-block title="基础用法" padding>
|
||||
<van-tag class="demo-margin-right" type="primary">标签</van-tag>
|
||||
<van-tag class="demo-margin-right" type="success">标签</van-tag>
|
||||
<van-tag class="demo-margin-right" type="danger">标签</van-tag>
|
||||
<van-tag class="demo-margin-right" type="warning">标签</van-tag>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="圆角样式" padding>
|
||||
<van-tag class="demo-margin-right" round type="primary">标签</van-tag>
|
||||
<van-tag class="demo-margin-right" round type="success">标签</van-tag>
|
||||
<van-tag class="demo-margin-right" round type="danger">标签</van-tag>
|
||||
<van-tag class="demo-margin-right" round type="warning">标签</van-tag>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="标记样式" padding>
|
||||
<van-tag class="demo-margin-right" mark type="primary">标签</van-tag>
|
||||
<van-tag class="demo-margin-right" mark type="success">标签</van-tag>
|
||||
<van-tag class="demo-margin-right" mark type="danger">标签</van-tag>
|
||||
<van-tag class="demo-margin-right" mark type="warning">标签</van-tag>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="空心样式" padding>
|
||||
<van-tag class="demo-margin-right" plain type="primary">标签</van-tag>
|
||||
<van-tag class="demo-margin-right" plain type="success">标签</van-tag>
|
||||
<van-tag class="demo-margin-right" plain type="danger">标签</van-tag>
|
||||
<van-tag class="demo-margin-right" plain type="warning">标签</van-tag>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="自定义颜色" padding>
|
||||
<van-tag class="demo-margin-right" color="#f2826a">标签</van-tag>
|
||||
<van-tag class="demo-margin-right" color="#7232dd">标签</van-tag>
|
||||
<van-tag class="demo-margin-right" color="#7232dd" plain>标签</van-tag>
|
||||
<van-tag class="demo-margin-right" color="#ffe1e1" text-color="#ad0000"
|
||||
>标签</van-tag
|
||||
>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="标签大小" padding>
|
||||
<van-tag class="demo-margin-right" type="danger">标签</van-tag>
|
||||
<van-tag class="demo-margin-right" type="danger" size="medium">标签</van-tag>
|
||||
<van-tag class="demo-margin-right" type="danger" size="large">标签</van-tag>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="可关闭标签" padding>
|
||||
<van-tag
|
||||
wx:if="{{ show.primary }}"
|
||||
class="demo-margin-right"
|
||||
type="primary"
|
||||
size="medium"
|
||||
closeable
|
||||
id="primary"
|
||||
bind:close="onClose"
|
||||
>标签</van-tag
|
||||
>
|
||||
<van-tag
|
||||
wx:if="{{ show.success }}"
|
||||
class="demo-margin-right"
|
||||
type="success"
|
||||
size="medium"
|
||||
closeable
|
||||
id="success"
|
||||
bind:close="onClose"
|
||||
>标签</van-tag
|
||||
>
|
||||
</demo-block>
|
||||
<van-tag-demo />
|
||||
|
||||
@ -1 +0,0 @@
|
||||
/* pages/tag/index.wxss */
|
||||
832
packages/tabbar/test/__snapshots__/demo.spec.ts.snap
Normal file
832
packages/tabbar/test/__snapshots__/demo.spec.ts.snap
Normal file
@ -0,0 +1,832 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`should render demo and match snapshot 1`] = `
|
||||
<main>
|
||||
<demo-block>
|
||||
<wx-view
|
||||
class="custom-class demo-block van-clearfix "
|
||||
>
|
||||
<wx-view
|
||||
class="demo-block__title"
|
||||
>
|
||||
基础用法
|
||||
</wx-view>
|
||||
<van-tabbar
|
||||
customClass="tabbar-position"
|
||||
data-key="active"
|
||||
bind:change="onChange"
|
||||
>
|
||||
<wx-view
|
||||
class="van-hairline--top-bottom van-tabbar van-tabbar--fixed custom-class"
|
||||
style="z-index: 1"
|
||||
>
|
||||
<van-tabbar-item>
|
||||
<wx-view
|
||||
class="van-tabbar-item van-tabbar-item--active custom-class"
|
||||
style="color: "
|
||||
bind:tap="onClick"
|
||||
>
|
||||
<wx-view
|
||||
class="van-tabbar-item__icon"
|
||||
>
|
||||
<van-icon
|
||||
customClass="van-tabbar-item__icon__inner"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-icon van-icon-home-o"
|
||||
style=""
|
||||
bind:tap="onClick"
|
||||
/>
|
||||
</van-icon>
|
||||
<van-info
|
||||
customClass="van-tabbar-item__info"
|
||||
/>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-tabbar-item__text"
|
||||
>
|
||||
标签
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</van-tabbar-item>
|
||||
<van-tabbar-item>
|
||||
<wx-view
|
||||
class="van-tabbar-item custom-class"
|
||||
style="color: "
|
||||
bind:tap="onClick"
|
||||
>
|
||||
<wx-view
|
||||
class="van-tabbar-item__icon"
|
||||
>
|
||||
<van-icon
|
||||
customClass="van-tabbar-item__icon__inner"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-icon van-icon-search"
|
||||
style=""
|
||||
bind:tap="onClick"
|
||||
/>
|
||||
</van-icon>
|
||||
<van-info
|
||||
customClass="van-tabbar-item__info"
|
||||
/>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-tabbar-item__text"
|
||||
>
|
||||
标签
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</van-tabbar-item>
|
||||
<van-tabbar-item>
|
||||
<wx-view
|
||||
class="van-tabbar-item custom-class"
|
||||
style="color: "
|
||||
bind:tap="onClick"
|
||||
>
|
||||
<wx-view
|
||||
class="van-tabbar-item__icon"
|
||||
>
|
||||
<van-icon
|
||||
customClass="van-tabbar-item__icon__inner"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-icon van-icon-friends-o"
|
||||
style=""
|
||||
bind:tap="onClick"
|
||||
/>
|
||||
</van-icon>
|
||||
<van-info
|
||||
customClass="van-tabbar-item__info"
|
||||
/>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-tabbar-item__text"
|
||||
>
|
||||
标签
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</van-tabbar-item>
|
||||
<van-tabbar-item>
|
||||
<wx-view
|
||||
class="van-tabbar-item custom-class"
|
||||
style="color: "
|
||||
bind:tap="onClick"
|
||||
>
|
||||
<wx-view
|
||||
class="van-tabbar-item__icon"
|
||||
>
|
||||
<van-icon
|
||||
customClass="van-tabbar-item__icon__inner"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-icon van-icon-setting-o"
|
||||
style=""
|
||||
bind:tap="onClick"
|
||||
/>
|
||||
</van-icon>
|
||||
<van-info
|
||||
customClass="van-tabbar-item__info"
|
||||
/>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-tabbar-item__text"
|
||||
>
|
||||
标签
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</van-tabbar-item>
|
||||
</wx-view>
|
||||
</van-tabbar>
|
||||
</wx-view>
|
||||
</demo-block>
|
||||
<demo-block>
|
||||
<wx-view
|
||||
class="custom-class demo-block van-clearfix "
|
||||
>
|
||||
<wx-view
|
||||
class="demo-block__title"
|
||||
>
|
||||
通过名称匹配
|
||||
</wx-view>
|
||||
<van-tabbar
|
||||
customClass="tabbar-position"
|
||||
data-key="active2"
|
||||
bind:change="onChange"
|
||||
>
|
||||
<wx-view
|
||||
class="van-hairline--top-bottom van-tabbar van-tabbar--fixed custom-class"
|
||||
style="z-index: 1"
|
||||
>
|
||||
<van-tabbar-item>
|
||||
<wx-view
|
||||
class="van-tabbar-item van-tabbar-item--active custom-class"
|
||||
style="color: "
|
||||
bind:tap="onClick"
|
||||
>
|
||||
<wx-view
|
||||
class="van-tabbar-item__icon"
|
||||
>
|
||||
<van-icon
|
||||
customClass="van-tabbar-item__icon__inner"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-icon van-icon-home-o"
|
||||
style=""
|
||||
bind:tap="onClick"
|
||||
/>
|
||||
</van-icon>
|
||||
<van-info
|
||||
customClass="van-tabbar-item__info"
|
||||
/>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-tabbar-item__text"
|
||||
>
|
||||
标签
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</van-tabbar-item>
|
||||
<van-tabbar-item>
|
||||
<wx-view
|
||||
class="van-tabbar-item custom-class"
|
||||
style="color: "
|
||||
bind:tap="onClick"
|
||||
>
|
||||
<wx-view
|
||||
class="van-tabbar-item__icon"
|
||||
>
|
||||
<van-icon
|
||||
customClass="van-tabbar-item__icon__inner"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-icon van-icon-search"
|
||||
style=""
|
||||
bind:tap="onClick"
|
||||
/>
|
||||
</van-icon>
|
||||
<van-info
|
||||
customClass="van-tabbar-item__info"
|
||||
/>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-tabbar-item__text"
|
||||
>
|
||||
标签
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</van-tabbar-item>
|
||||
<van-tabbar-item>
|
||||
<wx-view
|
||||
class="van-tabbar-item custom-class"
|
||||
style="color: "
|
||||
bind:tap="onClick"
|
||||
>
|
||||
<wx-view
|
||||
class="van-tabbar-item__icon"
|
||||
>
|
||||
<van-icon
|
||||
customClass="van-tabbar-item__icon__inner"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-icon van-icon-friends-o"
|
||||
style=""
|
||||
bind:tap="onClick"
|
||||
/>
|
||||
</van-icon>
|
||||
<van-info
|
||||
customClass="van-tabbar-item__info"
|
||||
/>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-tabbar-item__text"
|
||||
>
|
||||
标签
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</van-tabbar-item>
|
||||
<van-tabbar-item>
|
||||
<wx-view
|
||||
class="van-tabbar-item custom-class"
|
||||
style="color: "
|
||||
bind:tap="onClick"
|
||||
>
|
||||
<wx-view
|
||||
class="van-tabbar-item__icon"
|
||||
>
|
||||
<van-icon
|
||||
customClass="van-tabbar-item__icon__inner"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-icon van-icon-setting-o"
|
||||
style=""
|
||||
bind:tap="onClick"
|
||||
/>
|
||||
</van-icon>
|
||||
<van-info
|
||||
customClass="van-tabbar-item__info"
|
||||
/>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-tabbar-item__text"
|
||||
>
|
||||
标签
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</van-tabbar-item>
|
||||
</wx-view>
|
||||
</van-tabbar>
|
||||
</wx-view>
|
||||
</demo-block>
|
||||
<demo-block>
|
||||
<wx-view
|
||||
class="custom-class demo-block van-clearfix "
|
||||
>
|
||||
<wx-view
|
||||
class="demo-block__title"
|
||||
>
|
||||
显示徽标
|
||||
</wx-view>
|
||||
<van-tabbar
|
||||
customClass="tabbar-position"
|
||||
data-key="active3"
|
||||
bind:change="onChange"
|
||||
>
|
||||
<wx-view
|
||||
class="van-hairline--top-bottom van-tabbar van-tabbar--fixed custom-class"
|
||||
style="z-index: 1"
|
||||
>
|
||||
<van-tabbar-item>
|
||||
<wx-view
|
||||
class="van-tabbar-item van-tabbar-item--active custom-class"
|
||||
style="color: "
|
||||
bind:tap="onClick"
|
||||
>
|
||||
<wx-view
|
||||
class="van-tabbar-item__icon"
|
||||
>
|
||||
<van-icon
|
||||
customClass="van-tabbar-item__icon__inner"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-icon van-icon-home-o"
|
||||
style=""
|
||||
bind:tap="onClick"
|
||||
/>
|
||||
</van-icon>
|
||||
<van-info
|
||||
customClass="van-tabbar-item__info"
|
||||
/>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-tabbar-item__text"
|
||||
>
|
||||
标签
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</van-tabbar-item>
|
||||
<van-tabbar-item>
|
||||
<wx-view
|
||||
class="van-tabbar-item custom-class"
|
||||
style="color: "
|
||||
bind:tap="onClick"
|
||||
>
|
||||
<wx-view
|
||||
class="van-tabbar-item__icon"
|
||||
>
|
||||
<van-icon
|
||||
customClass="van-tabbar-item__icon__inner"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-icon van-icon-search"
|
||||
style=""
|
||||
bind:tap="onClick"
|
||||
/>
|
||||
</van-icon>
|
||||
<van-info
|
||||
customClass="van-tabbar-item__info"
|
||||
>
|
||||
<wx-view
|
||||
class="van-info van-info van-info--dot custom-class"
|
||||
style=""
|
||||
>
|
||||
|
||||
</wx-view>
|
||||
</van-info>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-tabbar-item__text"
|
||||
>
|
||||
标签
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</van-tabbar-item>
|
||||
<van-tabbar-item>
|
||||
<wx-view
|
||||
class="van-tabbar-item custom-class"
|
||||
style="color: "
|
||||
bind:tap="onClick"
|
||||
>
|
||||
<wx-view
|
||||
class="van-tabbar-item__icon"
|
||||
>
|
||||
<van-icon
|
||||
customClass="van-tabbar-item__icon__inner"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-icon van-icon-friends-o"
|
||||
style=""
|
||||
bind:tap="onClick"
|
||||
/>
|
||||
</van-icon>
|
||||
<van-info
|
||||
customClass="van-tabbar-item__info"
|
||||
>
|
||||
<wx-view
|
||||
class="van-info van-info custom-class"
|
||||
style=""
|
||||
>
|
||||
5
|
||||
</wx-view>
|
||||
</van-info>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-tabbar-item__text"
|
||||
>
|
||||
标签
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</van-tabbar-item>
|
||||
<van-tabbar-item>
|
||||
<wx-view
|
||||
class="van-tabbar-item custom-class"
|
||||
style="color: "
|
||||
bind:tap="onClick"
|
||||
>
|
||||
<wx-view
|
||||
class="van-tabbar-item__icon"
|
||||
>
|
||||
<van-icon
|
||||
customClass="van-tabbar-item__icon__inner"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-icon van-icon-setting-o"
|
||||
style=""
|
||||
bind:tap="onClick"
|
||||
/>
|
||||
</van-icon>
|
||||
<van-info
|
||||
customClass="van-tabbar-item__info"
|
||||
>
|
||||
<wx-view
|
||||
class="van-info van-info custom-class"
|
||||
style=""
|
||||
>
|
||||
20
|
||||
</wx-view>
|
||||
</van-info>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-tabbar-item__text"
|
||||
>
|
||||
标签
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</van-tabbar-item>
|
||||
</wx-view>
|
||||
</van-tabbar>
|
||||
</wx-view>
|
||||
</demo-block>
|
||||
<demo-block>
|
||||
<wx-view
|
||||
class="custom-class demo-block van-clearfix "
|
||||
>
|
||||
<wx-view
|
||||
class="demo-block__title"
|
||||
>
|
||||
自定义图标
|
||||
</wx-view>
|
||||
<van-tabbar
|
||||
customClass="tabbar-position"
|
||||
data-key="active4"
|
||||
bind:change="onChange"
|
||||
>
|
||||
<wx-view
|
||||
class="van-hairline--top-bottom van-tabbar van-tabbar--fixed custom-class"
|
||||
style="z-index: 1"
|
||||
>
|
||||
<van-tabbar-item>
|
||||
<wx-view
|
||||
class="van-tabbar-item van-tabbar-item--active custom-class"
|
||||
style="color: "
|
||||
bind:tap="onClick"
|
||||
>
|
||||
<wx-view
|
||||
class="van-tabbar-item__icon"
|
||||
>
|
||||
<wx-image
|
||||
mode="aspectFit"
|
||||
slot="icon"
|
||||
src="https://img.yzcdn.cn/vant/user-inactive.png"
|
||||
style="width: 30px; height: 18px;"
|
||||
/>
|
||||
<van-info
|
||||
customClass="van-tabbar-item__info"
|
||||
>
|
||||
<wx-view
|
||||
class="van-info van-info custom-class"
|
||||
style=""
|
||||
>
|
||||
3
|
||||
</wx-view>
|
||||
</van-info>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-tabbar-item__text"
|
||||
>
|
||||
|
||||
自定义
|
||||
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</van-tabbar-item>
|
||||
<van-tabbar-item>
|
||||
<wx-view
|
||||
class="van-tabbar-item custom-class"
|
||||
style="color: "
|
||||
bind:tap="onClick"
|
||||
>
|
||||
<wx-view
|
||||
class="van-tabbar-item__icon"
|
||||
>
|
||||
<van-icon
|
||||
customClass="van-tabbar-item__icon__inner"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-icon van-icon-search"
|
||||
style=""
|
||||
bind:tap="onClick"
|
||||
/>
|
||||
</van-icon>
|
||||
<van-info
|
||||
customClass="van-tabbar-item__info"
|
||||
/>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-tabbar-item__text"
|
||||
>
|
||||
标签
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</van-tabbar-item>
|
||||
<van-tabbar-item>
|
||||
<wx-view
|
||||
class="van-tabbar-item custom-class"
|
||||
style="color: "
|
||||
bind:tap="onClick"
|
||||
>
|
||||
<wx-view
|
||||
class="van-tabbar-item__icon"
|
||||
>
|
||||
<van-icon
|
||||
customClass="van-tabbar-item__icon__inner"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-icon van-icon-setting-o"
|
||||
style=""
|
||||
bind:tap="onClick"
|
||||
/>
|
||||
</van-icon>
|
||||
<van-info
|
||||
customClass="van-tabbar-item__info"
|
||||
/>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-tabbar-item__text"
|
||||
>
|
||||
标签
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</van-tabbar-item>
|
||||
</wx-view>
|
||||
</van-tabbar>
|
||||
</wx-view>
|
||||
</demo-block>
|
||||
<demo-block>
|
||||
<wx-view
|
||||
class="custom-class demo-block van-clearfix "
|
||||
>
|
||||
<wx-view
|
||||
class="demo-block__title"
|
||||
>
|
||||
自定义颜色
|
||||
</wx-view>
|
||||
<van-tabbar
|
||||
customClass="tabbar-position"
|
||||
data-key="active5"
|
||||
bind:change="onChange"
|
||||
>
|
||||
<wx-view
|
||||
class="van-hairline--top-bottom van-tabbar van-tabbar--fixed custom-class"
|
||||
style="z-index: 1"
|
||||
>
|
||||
<van-tabbar-item>
|
||||
<wx-view
|
||||
class="van-tabbar-item van-tabbar-item--active custom-class"
|
||||
style="color: #07c160"
|
||||
bind:tap="onClick"
|
||||
>
|
||||
<wx-view
|
||||
class="van-tabbar-item__icon"
|
||||
>
|
||||
<van-icon
|
||||
customClass="van-tabbar-item__icon__inner"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-icon van-icon-home-o"
|
||||
style=""
|
||||
bind:tap="onClick"
|
||||
/>
|
||||
</van-icon>
|
||||
<van-info
|
||||
customClass="van-tabbar-item__info"
|
||||
/>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-tabbar-item__text"
|
||||
>
|
||||
标签
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</van-tabbar-item>
|
||||
<van-tabbar-item>
|
||||
<wx-view
|
||||
class="van-tabbar-item custom-class"
|
||||
style="color: #000"
|
||||
bind:tap="onClick"
|
||||
>
|
||||
<wx-view
|
||||
class="van-tabbar-item__icon"
|
||||
>
|
||||
<van-icon
|
||||
customClass="van-tabbar-item__icon__inner"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-icon van-icon-search"
|
||||
style=""
|
||||
bind:tap="onClick"
|
||||
/>
|
||||
</van-icon>
|
||||
<van-info
|
||||
customClass="van-tabbar-item__info"
|
||||
/>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-tabbar-item__text"
|
||||
>
|
||||
标签
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</van-tabbar-item>
|
||||
<van-tabbar-item>
|
||||
<wx-view
|
||||
class="van-tabbar-item custom-class"
|
||||
style="color: #000"
|
||||
bind:tap="onClick"
|
||||
>
|
||||
<wx-view
|
||||
class="van-tabbar-item__icon"
|
||||
>
|
||||
<van-icon
|
||||
customClass="van-tabbar-item__icon__inner"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-icon van-icon-friends-o"
|
||||
style=""
|
||||
bind:tap="onClick"
|
||||
/>
|
||||
</van-icon>
|
||||
<van-info
|
||||
customClass="van-tabbar-item__info"
|
||||
/>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-tabbar-item__text"
|
||||
>
|
||||
标签
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</van-tabbar-item>
|
||||
<van-tabbar-item>
|
||||
<wx-view
|
||||
class="van-tabbar-item custom-class"
|
||||
style="color: #000"
|
||||
bind:tap="onClick"
|
||||
>
|
||||
<wx-view
|
||||
class="van-tabbar-item__icon"
|
||||
>
|
||||
<van-icon
|
||||
customClass="van-tabbar-item__icon__inner"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-icon van-icon-setting-o"
|
||||
style=""
|
||||
bind:tap="onClick"
|
||||
/>
|
||||
</van-icon>
|
||||
<van-info
|
||||
customClass="van-tabbar-item__info"
|
||||
/>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-tabbar-item__text"
|
||||
>
|
||||
标签
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</van-tabbar-item>
|
||||
</wx-view>
|
||||
</van-tabbar>
|
||||
</wx-view>
|
||||
</demo-block>
|
||||
<demo-block>
|
||||
<wx-view
|
||||
class="custom-class demo-block van-clearfix "
|
||||
>
|
||||
<wx-view
|
||||
class="demo-block__title"
|
||||
>
|
||||
切换标签事件
|
||||
</wx-view>
|
||||
<van-tabbar
|
||||
customClass="tabbar-position"
|
||||
data-key="active6"
|
||||
bind:change="handleChange"
|
||||
>
|
||||
<wx-view
|
||||
class="van-hairline--top-bottom van-tabbar van-tabbar--fixed custom-class"
|
||||
style="z-index: 1"
|
||||
>
|
||||
<van-tabbar-item>
|
||||
<wx-view
|
||||
class="van-tabbar-item van-tabbar-item--active custom-class"
|
||||
style="color: "
|
||||
bind:tap="onClick"
|
||||
>
|
||||
<wx-view
|
||||
class="van-tabbar-item__icon"
|
||||
>
|
||||
<van-icon
|
||||
customClass="van-tabbar-item__icon__inner"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-icon van-icon-home-o"
|
||||
style=""
|
||||
bind:tap="onClick"
|
||||
/>
|
||||
</van-icon>
|
||||
<van-info
|
||||
customClass="van-tabbar-item__info"
|
||||
/>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-tabbar-item__text"
|
||||
>
|
||||
标签1
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</van-tabbar-item>
|
||||
<van-tabbar-item>
|
||||
<wx-view
|
||||
class="van-tabbar-item custom-class"
|
||||
style="color: "
|
||||
bind:tap="onClick"
|
||||
>
|
||||
<wx-view
|
||||
class="van-tabbar-item__icon"
|
||||
>
|
||||
<van-icon
|
||||
customClass="van-tabbar-item__icon__inner"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-icon van-icon-search"
|
||||
style=""
|
||||
bind:tap="onClick"
|
||||
/>
|
||||
</van-icon>
|
||||
<van-info
|
||||
customClass="van-tabbar-item__info"
|
||||
/>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-tabbar-item__text"
|
||||
>
|
||||
标签2
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</van-tabbar-item>
|
||||
<van-tabbar-item>
|
||||
<wx-view
|
||||
class="van-tabbar-item custom-class"
|
||||
style="color: "
|
||||
bind:tap="onClick"
|
||||
>
|
||||
<wx-view
|
||||
class="van-tabbar-item__icon"
|
||||
>
|
||||
<van-icon
|
||||
customClass="van-tabbar-item__icon__inner"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-icon van-icon-friends-o"
|
||||
style=""
|
||||
bind:tap="onClick"
|
||||
/>
|
||||
</van-icon>
|
||||
<van-info
|
||||
customClass="van-tabbar-item__info"
|
||||
/>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-tabbar-item__text"
|
||||
>
|
||||
标签3
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</van-tabbar-item>
|
||||
<van-tabbar-item>
|
||||
<wx-view
|
||||
class="van-tabbar-item custom-class"
|
||||
style="color: "
|
||||
bind:tap="onClick"
|
||||
>
|
||||
<wx-view
|
||||
class="van-tabbar-item__icon"
|
||||
>
|
||||
<van-icon
|
||||
customClass="van-tabbar-item__icon__inner"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-icon van-icon-setting-o"
|
||||
style=""
|
||||
bind:tap="onClick"
|
||||
/>
|
||||
</van-icon>
|
||||
<van-info
|
||||
customClass="van-tabbar-item__info"
|
||||
/>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-tabbar-item__text"
|
||||
>
|
||||
标签4
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</van-tabbar-item>
|
||||
</wx-view>
|
||||
</van-tabbar>
|
||||
</wx-view>
|
||||
</demo-block>
|
||||
</main>
|
||||
`;
|
||||
7
packages/tag/demo/index.json
Normal file
7
packages/tag/demo/index.json
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"van-tag": "../../tag/index",
|
||||
"demo-block": "../../../example/components/demo-block/index"
|
||||
}
|
||||
}
|
||||
18
packages/tag/demo/index.ts
Normal file
18
packages/tag/demo/index.ts
Normal file
@ -0,0 +1,18 @@
|
||||
import { VantComponent } from '../../common/component';
|
||||
|
||||
VantComponent({
|
||||
data: {
|
||||
show: {
|
||||
success: true,
|
||||
primary: true,
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClose(event) {
|
||||
this.setData({
|
||||
[`show.${event.target.id}`]: false,
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
65
packages/tag/demo/index.wxml
Normal file
65
packages/tag/demo/index.wxml
Normal file
@ -0,0 +1,65 @@
|
||||
<demo-block title="基础用法" padding>
|
||||
<van-tag class="demo-margin-right" type="primary">标签</van-tag>
|
||||
<van-tag class="demo-margin-right" type="success">标签</van-tag>
|
||||
<van-tag class="demo-margin-right" type="danger">标签</van-tag>
|
||||
<van-tag class="demo-margin-right" type="warning">标签</van-tag>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="圆角样式" padding>
|
||||
<van-tag class="demo-margin-right" round type="primary">标签</van-tag>
|
||||
<van-tag class="demo-margin-right" round type="success">标签</van-tag>
|
||||
<van-tag class="demo-margin-right" round type="danger">标签</van-tag>
|
||||
<van-tag class="demo-margin-right" round type="warning">标签</van-tag>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="标记样式" padding>
|
||||
<van-tag class="demo-margin-right" mark type="primary">标签</van-tag>
|
||||
<van-tag class="demo-margin-right" mark type="success">标签</van-tag>
|
||||
<van-tag class="demo-margin-right" mark type="danger">标签</van-tag>
|
||||
<van-tag class="demo-margin-right" mark type="warning">标签</van-tag>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="空心样式" padding>
|
||||
<van-tag class="demo-margin-right" plain type="primary">标签</van-tag>
|
||||
<van-tag class="demo-margin-right" plain type="success">标签</van-tag>
|
||||
<van-tag class="demo-margin-right" plain type="danger">标签</van-tag>
|
||||
<van-tag class="demo-margin-right" plain type="warning">标签</van-tag>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="自定义颜色" padding>
|
||||
<van-tag class="demo-margin-right" color="#f2826a">标签</van-tag>
|
||||
<van-tag class="demo-margin-right" color="#7232dd">标签</van-tag>
|
||||
<van-tag class="demo-margin-right" color="#7232dd" plain>标签</van-tag>
|
||||
<van-tag class="demo-margin-right" color="#ffe1e1" text-color="#ad0000"
|
||||
>标签</van-tag
|
||||
>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="标签大小" padding>
|
||||
<van-tag class="demo-margin-right" type="danger">标签</van-tag>
|
||||
<van-tag class="demo-margin-right" type="danger" size="medium">标签</van-tag>
|
||||
<van-tag class="demo-margin-right" type="danger" size="large">标签</van-tag>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="可关闭标签" padding>
|
||||
<van-tag
|
||||
wx:if="{{ show.primary }}"
|
||||
class="demo-margin-right"
|
||||
type="primary"
|
||||
size="medium"
|
||||
closeable
|
||||
id="primary"
|
||||
bind:close="onClose"
|
||||
>标签</van-tag
|
||||
>
|
||||
<van-tag
|
||||
wx:if="{{ show.success }}"
|
||||
class="demo-margin-right"
|
||||
type="success"
|
||||
size="medium"
|
||||
closeable
|
||||
id="success"
|
||||
bind:close="onClose"
|
||||
>标签</van-tag
|
||||
>
|
||||
</demo-block>
|
||||
357
packages/tag/test/__snapshots__/demo.spec.ts.snap
Normal file
357
packages/tag/test/__snapshots__/demo.spec.ts.snap
Normal file
@ -0,0 +1,357 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`should render demo and match snapshot 1`] = `
|
||||
<main>
|
||||
<demo-block>
|
||||
<wx-view
|
||||
class="custom-class demo-block van-clearfix demo-block--padding"
|
||||
>
|
||||
<wx-view
|
||||
class="demo-block__title"
|
||||
>
|
||||
基础用法
|
||||
</wx-view>
|
||||
<van-tag
|
||||
class="demo-margin-right"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-tag van-tag--primary"
|
||||
style=""
|
||||
>
|
||||
标签
|
||||
</wx-view>
|
||||
</van-tag>
|
||||
<van-tag
|
||||
class="demo-margin-right"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-tag van-tag--success"
|
||||
style=""
|
||||
>
|
||||
标签
|
||||
</wx-view>
|
||||
</van-tag>
|
||||
<van-tag
|
||||
class="demo-margin-right"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-tag van-tag--danger"
|
||||
style=""
|
||||
>
|
||||
标签
|
||||
</wx-view>
|
||||
</van-tag>
|
||||
<van-tag
|
||||
class="demo-margin-right"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-tag van-tag--warning"
|
||||
style=""
|
||||
>
|
||||
标签
|
||||
</wx-view>
|
||||
</van-tag>
|
||||
</wx-view>
|
||||
</demo-block>
|
||||
<demo-block>
|
||||
<wx-view
|
||||
class="custom-class demo-block van-clearfix demo-block--padding"
|
||||
>
|
||||
<wx-view
|
||||
class="demo-block__title"
|
||||
>
|
||||
圆角样式
|
||||
</wx-view>
|
||||
<van-tag
|
||||
class="demo-margin-right"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-tag van-tag--primary van-tag--round"
|
||||
style=""
|
||||
>
|
||||
标签
|
||||
</wx-view>
|
||||
</van-tag>
|
||||
<van-tag
|
||||
class="demo-margin-right"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-tag van-tag--success van-tag--round"
|
||||
style=""
|
||||
>
|
||||
标签
|
||||
</wx-view>
|
||||
</van-tag>
|
||||
<van-tag
|
||||
class="demo-margin-right"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-tag van-tag--danger van-tag--round"
|
||||
style=""
|
||||
>
|
||||
标签
|
||||
</wx-view>
|
||||
</van-tag>
|
||||
<van-tag
|
||||
class="demo-margin-right"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-tag van-tag--warning van-tag--round"
|
||||
style=""
|
||||
>
|
||||
标签
|
||||
</wx-view>
|
||||
</van-tag>
|
||||
</wx-view>
|
||||
</demo-block>
|
||||
<demo-block>
|
||||
<wx-view
|
||||
class="custom-class demo-block van-clearfix demo-block--padding"
|
||||
>
|
||||
<wx-view
|
||||
class="demo-block__title"
|
||||
>
|
||||
标记样式
|
||||
</wx-view>
|
||||
<van-tag
|
||||
class="demo-margin-right"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-tag van-tag--primary van-tag--mark"
|
||||
style=""
|
||||
>
|
||||
标签
|
||||
</wx-view>
|
||||
</van-tag>
|
||||
<van-tag
|
||||
class="demo-margin-right"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-tag van-tag--success van-tag--mark"
|
||||
style=""
|
||||
>
|
||||
标签
|
||||
</wx-view>
|
||||
</van-tag>
|
||||
<van-tag
|
||||
class="demo-margin-right"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-tag van-tag--danger van-tag--mark"
|
||||
style=""
|
||||
>
|
||||
标签
|
||||
</wx-view>
|
||||
</van-tag>
|
||||
<van-tag
|
||||
class="demo-margin-right"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-tag van-tag--warning van-tag--mark"
|
||||
style=""
|
||||
>
|
||||
标签
|
||||
</wx-view>
|
||||
</van-tag>
|
||||
</wx-view>
|
||||
</demo-block>
|
||||
<demo-block>
|
||||
<wx-view
|
||||
class="custom-class demo-block van-clearfix demo-block--padding"
|
||||
>
|
||||
<wx-view
|
||||
class="demo-block__title"
|
||||
>
|
||||
空心样式
|
||||
</wx-view>
|
||||
<van-tag
|
||||
class="demo-margin-right"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-tag van-tag--primary van-tag--plain"
|
||||
style=""
|
||||
>
|
||||
标签
|
||||
</wx-view>
|
||||
</van-tag>
|
||||
<van-tag
|
||||
class="demo-margin-right"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-tag van-tag--success van-tag--plain"
|
||||
style=""
|
||||
>
|
||||
标签
|
||||
</wx-view>
|
||||
</van-tag>
|
||||
<van-tag
|
||||
class="demo-margin-right"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-tag van-tag--danger van-tag--plain"
|
||||
style=""
|
||||
>
|
||||
标签
|
||||
</wx-view>
|
||||
</van-tag>
|
||||
<van-tag
|
||||
class="demo-margin-right"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-tag van-tag--warning van-tag--plain"
|
||||
style=""
|
||||
>
|
||||
标签
|
||||
</wx-view>
|
||||
</van-tag>
|
||||
</wx-view>
|
||||
</demo-block>
|
||||
<demo-block>
|
||||
<wx-view
|
||||
class="custom-class demo-block van-clearfix demo-block--padding"
|
||||
>
|
||||
<wx-view
|
||||
class="demo-block__title"
|
||||
>
|
||||
自定义颜色
|
||||
</wx-view>
|
||||
<van-tag
|
||||
class="demo-margin-right"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-tag van-tag--default"
|
||||
style="background-color:#f2826a"
|
||||
>
|
||||
标签
|
||||
</wx-view>
|
||||
</van-tag>
|
||||
<van-tag
|
||||
class="demo-margin-right"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-tag van-tag--default"
|
||||
style="background-color:#7232dd"
|
||||
>
|
||||
标签
|
||||
</wx-view>
|
||||
</van-tag>
|
||||
<van-tag
|
||||
class="demo-margin-right"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-tag van-tag--default van-tag--plain"
|
||||
style="color:#7232dd"
|
||||
>
|
||||
标签
|
||||
</wx-view>
|
||||
</van-tag>
|
||||
<van-tag
|
||||
class="demo-margin-right"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-tag van-tag--default"
|
||||
style="background-color:#ffe1e1;color:#ad0000"
|
||||
>
|
||||
标签
|
||||
</wx-view>
|
||||
</van-tag>
|
||||
</wx-view>
|
||||
</demo-block>
|
||||
<demo-block>
|
||||
<wx-view
|
||||
class="custom-class demo-block van-clearfix demo-block--padding"
|
||||
>
|
||||
<wx-view
|
||||
class="demo-block__title"
|
||||
>
|
||||
标签大小
|
||||
</wx-view>
|
||||
<van-tag
|
||||
class="demo-margin-right"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-tag van-tag--danger"
|
||||
style=""
|
||||
>
|
||||
标签
|
||||
</wx-view>
|
||||
</van-tag>
|
||||
<van-tag
|
||||
class="demo-margin-right"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-tag van-tag--danger van-tag--medium"
|
||||
style=""
|
||||
>
|
||||
标签
|
||||
</wx-view>
|
||||
</van-tag>
|
||||
<van-tag
|
||||
class="demo-margin-right"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-tag van-tag--danger van-tag--large"
|
||||
style=""
|
||||
>
|
||||
标签
|
||||
</wx-view>
|
||||
</van-tag>
|
||||
</wx-view>
|
||||
</demo-block>
|
||||
<demo-block>
|
||||
<wx-view
|
||||
class="custom-class demo-block van-clearfix demo-block--padding"
|
||||
>
|
||||
<wx-view
|
||||
class="demo-block__title"
|
||||
>
|
||||
可关闭标签
|
||||
</wx-view>
|
||||
<van-tag
|
||||
class="demo-margin-right"
|
||||
id="primary"
|
||||
bind:close="onClose"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-tag van-tag--primary van-tag--medium"
|
||||
style=""
|
||||
>
|
||||
标签
|
||||
<van-icon
|
||||
customClass="van-tag__close"
|
||||
bind:click="onClose"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-icon van-icon-cross"
|
||||
style=""
|
||||
bind:tap="onClick"
|
||||
/>
|
||||
</van-icon>
|
||||
</wx-view>
|
||||
</van-tag>
|
||||
<van-tag
|
||||
class="demo-margin-right"
|
||||
id="success"
|
||||
bind:close="onClose"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-tag van-tag--success van-tag--medium"
|
||||
style=""
|
||||
>
|
||||
标签
|
||||
<van-icon
|
||||
customClass="van-tag__close"
|
||||
bind:click="onClose"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-icon van-icon-cross"
|
||||
style=""
|
||||
bind:tap="onClick"
|
||||
/>
|
||||
</van-icon>
|
||||
</wx-view>
|
||||
</van-tag>
|
||||
</wx-view>
|
||||
</demo-block>
|
||||
</main>
|
||||
`;
|
||||
11
packages/tag/test/demo.spec.ts
Normal file
11
packages/tag/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