mirror of
https://github.com/youzan/vant.git
synced 2025-10-17 16:44:21 +00:00
vant components
This commit is contained in:
cookfront
@@ -1,22 +1,22 @@
|
||||
<template><section class="demo-actionsheet"><h1 class="demo-title">Actionsheet 行动按钮</h1><example-block title="基础用法">
|
||||
<zan-button @click="show1 = true">弹出actionsheet</zan-button>
|
||||
<zan-actionsheet v-model="show1" :actions="actions1">
|
||||
</zan-actionsheet>
|
||||
<van-button @click="show1 = true">弹出actionsheet</van-button>
|
||||
<van-actionsheet v-model="show1" :actions="actions1">
|
||||
</van-actionsheet>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="带取消按钮的ActionSheet">
|
||||
<zan-button @click="show2 = true">弹出带取消按钮的actionsheet</zan-button>
|
||||
<zan-actionsheet v-model="show2" :actions="actions1" cancel-text="取消">
|
||||
</zan-actionsheet>
|
||||
<van-button @click="show2 = true">弹出带取消按钮的actionsheet</van-button>
|
||||
<van-actionsheet v-model="show2" :actions="actions1" cancel-text="取消">
|
||||
</van-actionsheet>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="带标题的ActionSheet">
|
||||
<zan-button @click="show3 = true">弹出带标题的actionsheet</zan-button>
|
||||
<zan-actionsheet v-model="show3" title="支持以下配送方式" class="title-actionsheet">
|
||||
<van-button @click="show3 = true">弹出带标题的actionsheet</van-button>
|
||||
<van-actionsheet v-model="show3" title="支持以下配送方式" class="title-actionsheet">
|
||||
<p>一些内容</p>
|
||||
</zan-actionsheet>
|
||||
</van-actionsheet>
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
@@ -26,7 +26,7 @@
|
||||
color: #06BF04;
|
||||
}
|
||||
|
||||
.zan-button {
|
||||
.van-button {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,21 +1,21 @@
|
||||
<template><section class="demo-badge"><h1 class="demo-title">Badge 徽章</h1><example-block title="基础用法">
|
||||
<div class="badge-group-wrapper">
|
||||
<zan-badge-group>
|
||||
<zan-badge title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></zan-badge>
|
||||
<zan-badge title="花式寿司" info="99" @click="onItemClick"></zan-badge>
|
||||
<zan-badge title="火炽寿司" @click="onItemClick"></zan-badge>
|
||||
<zan-badge title="手握寿司" info="199" @click="onItemClick"></zan-badge>
|
||||
</zan-badge-group>
|
||||
<van-badge-group>
|
||||
<van-badge title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></van-badge>
|
||||
<van-badge title="花式寿司" info="99" @click="onItemClick"></van-badge>
|
||||
<van-badge title="火炽寿司" @click="onItemClick"></van-badge>
|
||||
<van-badge title="手握寿司" info="199" @click="onItemClick"></van-badge>
|
||||
</van-badge-group>
|
||||
</div>
|
||||
|
||||
</example-block><example-block title="选中某个badge">
|
||||
<div class="badge-group-wrapper">
|
||||
<zan-badge-group :active-key="2">
|
||||
<zan-badge title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></zan-badge>
|
||||
<zan-badge title="花式寿司" info="99" @click="onItemClick"></zan-badge>
|
||||
<zan-badge title="火炽寿司" @click="onItemClick"></zan-badge>
|
||||
<zan-badge title="手握寿司" info="199" @click="onItemClick"></zan-badge>
|
||||
</zan-badge-group>
|
||||
<van-badge-group :active-key="2">
|
||||
<van-badge title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></van-badge>
|
||||
<van-badge title="花式寿司" info="99" @click="onItemClick"></van-badge>
|
||||
<van-badge title="火炽寿司" @click="onItemClick"></van-badge>
|
||||
<van-badge title="手握寿司" info="199" @click="onItemClick"></van-badge>
|
||||
</van-badge-group>
|
||||
</div>
|
||||
|
||||
</example-block></section></template>
|
||||
@@ -27,7 +27,7 @@
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.zan-badge-group {
|
||||
.van-badge-group {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,85 +1,85 @@
|
||||
<template><section class="demo-button"><h1 class="demo-title">Button 按钮</h1><example-block title="按钮功能">
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
<zan-button block="">default</zan-button>
|
||||
</zan-col>
|
||||
<zan-col span="24">
|
||||
<zan-button type="primary" block="">primary</zan-button>
|
||||
</zan-col>
|
||||
<zan-col span="24">
|
||||
<zan-button type="danger" block="">danger</zan-button>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<van-row>
|
||||
<van-col span="24">
|
||||
<van-button block="">default</van-button>
|
||||
</van-col>
|
||||
<van-col span="24">
|
||||
<van-button type="primary" block="">primary</van-button>
|
||||
</van-col>
|
||||
<van-col span="24">
|
||||
<van-button type="danger" block="">danger</van-button>
|
||||
</van-col>
|
||||
</van-row>
|
||||
|
||||
</example-block><example-block title="禁用状态">
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
<zan-button disabled block="">diabled</zan-button>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<van-row>
|
||||
<van-col span="24">
|
||||
<van-button disabled block="">diabled</van-button>
|
||||
</van-col>
|
||||
</van-row>
|
||||
|
||||
</example-block><example-block title="按钮尺寸">
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
<zan-button size="large">large</zan-button>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
<zan-button size="normal">normal</zan-button>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
<zan-button size="small">small</zan-button>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
<zan-button size="mini">mini</zan-button>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<van-row>
|
||||
<van-col span="24">
|
||||
<van-button size="large">large</van-button>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="24">
|
||||
<van-button size="normal">normal</van-button>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="24">
|
||||
<van-button size="small">small</van-button>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="24">
|
||||
<van-button size="mini">mini</van-button>
|
||||
</van-col>
|
||||
</van-row>
|
||||
|
||||
</example-block><example-block title="自定义按钮标签">
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
<zan-button tag="a" type="primary" href="https://www.youzan.com" target="_blank">a标签按钮</zan-button>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<van-row>
|
||||
<van-col span="24">
|
||||
<van-button tag="a" type="primary" href="https://www.youzan.com" target="_blank">a标签按钮</van-button>
|
||||
</van-col>
|
||||
</van-row>
|
||||
|
||||
</example-block><example-block title="loading按钮">
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
<zan-button type="primary" loading="" block="">loading</zan-button>
|
||||
</zan-col>
|
||||
<zan-col span="24">
|
||||
<zan-button loading="" block=""></zan-button>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<van-row>
|
||||
<van-col span="24">
|
||||
<van-button type="primary" loading="" block="">loading</van-button>
|
||||
</van-col>
|
||||
<van-col span="24">
|
||||
<van-button loading="" block=""></van-button>
|
||||
</van-col>
|
||||
</van-row>
|
||||
|
||||
</example-block><example-block title="">
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
<zan-button type="primary" bottom-action="">立即购买</zan-button>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col span="12">
|
||||
<zan-button bottom-action="">加入购物车</zan-button>
|
||||
</zan-col>
|
||||
<zan-col span="12">
|
||||
<zan-button type="primary" bottom-action="">立即购买</zan-button>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<van-row>
|
||||
<van-col span="24">
|
||||
<van-button type="primary" bottom-action="">立即购买</van-button>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="12">
|
||||
<van-button bottom-action="">加入购物车</van-button>
|
||||
</van-col>
|
||||
<van-col span="12">
|
||||
<van-button type="primary" bottom-action="">立即购买</van-button>
|
||||
</van-col>
|
||||
</van-row>
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b button {
|
||||
.zan-row {
|
||||
.van-row {
|
||||
padding: 0 15px;
|
||||
}
|
||||
.zan-col {
|
||||
.van-col {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,21 +1,21 @@
|
||||
<template><section class="demo-card"><h1 class="demo-title">Card 图文组件</h1><example-block title="基础用法">
|
||||
<zan-card title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余" desc="描述" thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
|
||||
</zan-card>
|
||||
<van-card title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余" desc="描述" thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
|
||||
</van-card>
|
||||
|
||||
</example-block><example-block title="高级用法">
|
||||
<zan-card thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
|
||||
<div class="zan-card__row" slot="title">
|
||||
<h4 class="zan-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
|
||||
<span class="zan-card__price">¥ 2.00</span>
|
||||
<van-card thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
|
||||
<div class="van-card__row" slot="title">
|
||||
<h4 class="van-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
|
||||
<span class="van-card__price">¥ 2.00</span>
|
||||
</div>
|
||||
<div class="zan-card__row" slot="desc">
|
||||
<span class="zan-card__num">x 2</span>
|
||||
<div class="van-card__row" slot="desc">
|
||||
<span class="van-card__num">x 2</span>
|
||||
</div>
|
||||
<div class="zan-card__footer" slot="footer">
|
||||
<zan-button size="mini">按钮一</zan-button>
|
||||
<zan-button size="mini">按钮二</zan-button>
|
||||
<div class="van-card__footer" slot="footer">
|
||||
<van-button size="mini">按钮一</van-button>
|
||||
<van-button size="mini">按钮二</van-button>
|
||||
</div>
|
||||
</zan-card>
|
||||
</van-card>
|
||||
|
||||
</example-block></section></template>
|
||||
|
||||
|
||||
@@ -1,38 +1,37 @@
|
||||
<template><section class="demo-cell"><h1 class="demo-title">Cell 单元格</h1><example-block title="基础用法">
|
||||
<zan-cell-group>
|
||||
<zan-cell title="单元格1" value="单元格1内容">
|
||||
</zan-cell>
|
||||
<zan-cell title="单元格2" value="单元格2内容"></zan-cell>
|
||||
</zan-cell-group>
|
||||
<van-cell-group>
|
||||
<van-cell title="单元格1" value="单元格1内容"></van-cell>
|
||||
<van-cell title="单元格2" value="单元格2内容"></van-cell>
|
||||
</van-cell-group>
|
||||
|
||||
</example-block><example-block title="标题带描述信息">
|
||||
<zan-cell-group>
|
||||
<zan-cell title="单元格1" label="描述信息" is-link="" url="javascript:void(0)" @click="handleClick"></zan-cell>
|
||||
<zan-cell title="单元格2" label="描述信息"></zan-cell>
|
||||
</zan-cell-group>
|
||||
<van-cell-group>
|
||||
<van-cell title="单元格1" label="描述信息" is-link="" url="javascript:void(0)" @click="handleClick"></van-cell>
|
||||
<van-cell title="单元格2" label="描述信息"></van-cell>
|
||||
</van-cell-group>
|
||||
|
||||
</example-block><example-block title="带图标">
|
||||
<zan-cell-group>
|
||||
<zan-cell title="起码运动馆" icon="home"></zan-cell>
|
||||
<zan-cell title="线下门店" icon="location"></zan-cell>
|
||||
</zan-cell-group>
|
||||
<van-cell-group>
|
||||
<van-cell title="起码运动馆" icon="home"></van-cell>
|
||||
<van-cell title="线下门店" icon="location"></van-cell>
|
||||
</van-cell-group>
|
||||
|
||||
</example-block><example-block title="可点击的链接">
|
||||
<zan-cell-group>
|
||||
<zan-cell title="起码运动馆" value="进入店铺" icon="home" url="http://youzan.com" is-link=""></zan-cell>
|
||||
<zan-cell title="线下门店" icon="location" url="http://youzan.com" is-link=""></zan-cell>
|
||||
</zan-cell-group>
|
||||
<van-cell-group>
|
||||
<van-cell title="起码运动馆" value="进入店铺" icon="home" url="http://youzan.com" is-link=""></van-cell>
|
||||
<van-cell title="线下门店" icon="location" url="http://youzan.com" is-link=""></van-cell>
|
||||
</van-cell-group>
|
||||
|
||||
</example-block><example-block title="高级用法">
|
||||
<zan-cell-group>
|
||||
<zan-cell value="进入店铺" icon="home" url="http://youzan.com" is-link="">
|
||||
<van-cell-group>
|
||||
<van-cell value="进入店铺" icon="home" url="http://youzan.com" is-link="">
|
||||
<template slot="title">
|
||||
<span class="zan-cell-text">起码运动馆</span>
|
||||
<zan-tag type="danger">官方</zan-tag>
|
||||
<span class="van-cell-text">起码运动馆</span>
|
||||
<van-tag type="danger">官方</van-tag>
|
||||
</template>
|
||||
</zan-cell>
|
||||
<zan-cell title="线下门店" icon="location" url="http://youzan.com" is-link=""></zan-cell>
|
||||
</zan-cell-group>
|
||||
</van-cell>
|
||||
<van-cell title="线下门店" icon="location" url="http://youzan.com" is-link=""></van-cell>
|
||||
</van-cell-group>
|
||||
|
||||
</example-block></section></template>
|
||||
|
||||
|
||||
@@ -1,43 +1,43 @@
|
||||
<template><section class="demo-checkbox"><h1 class="demo-title">Checkbox 复选框</h1><example-block title="基础用法">
|
||||
<div class="zan-checkbox-wrapper">
|
||||
<zan-checkbox v-model="checkbox1">复选框1</zan-checkbox>
|
||||
<div class="van-checkbox-wrapper">
|
||||
<van-checkbox v-model="checkbox1">复选框1</van-checkbox>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="禁用状态">
|
||||
<div class="zan-checkbox-wrapper">
|
||||
<zan-checkbox v-model="checkbox2">复选框2</zan-checkbox>
|
||||
<div class="van-checkbox-wrapper">
|
||||
<van-checkbox v-model="checkbox2">复选框2</van-checkbox>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="Checkbox组">
|
||||
<div class="zan-checkbox-wrapper">
|
||||
<zan-checkbox-group v-model="result">
|
||||
<zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
|
||||
</zan-checkbox-group>
|
||||
<div class="van-checkbox-wrapper">
|
||||
<van-checkbox-group v-model="result">
|
||||
<van-checkbox v-for="item in list" :name="item">复选框{{item}}</van-checkbox>
|
||||
</van-checkbox-group>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="禁用Checkbox组">
|
||||
<div class="zan-checkbox-wrapper">
|
||||
<zan-checkbox-group v-model="result" disabled>
|
||||
<zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
|
||||
</zan-checkbox-group>
|
||||
<div class="van-checkbox-wrapper">
|
||||
<van-checkbox-group v-model="result" disabled>
|
||||
<van-checkbox v-for="item in list" :name="item">复选框{{item}}</van-checkbox>
|
||||
</van-checkbox-group>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="与Cell组件一起使用">
|
||||
<zan-checkbox-group v-model="result">
|
||||
<zan-cell-group>
|
||||
<zan-cell v-for="item in list">
|
||||
<zan-checkbox :name="item">复选框{{item}}</zan-checkbox>
|
||||
</zan-cell>
|
||||
</zan-cell-group>
|
||||
</zan-checkbox-group>
|
||||
<van-checkbox-group v-model="result">
|
||||
<van-cell-group>
|
||||
<van-cell v-for="item in list">
|
||||
<van-checkbox :name="item">复选框{{item}}</van-checkbox>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</van-checkbox-group>
|
||||
|
||||
|
||||
|
||||
@@ -45,10 +45,10 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b checkbox {
|
||||
.zan-checkbox-wrapper {
|
||||
.van-checkbox-wrapper {
|
||||
padding: 0 20px;
|
||||
|
||||
.zan-checkbox {
|
||||
.van-checkbox {
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
<template><section class="demo-dialog"><h1 class="demo-title">Dialog 弹出框</h1><example-block title="消息提示">
|
||||
<zan-button @click="handleAlertClick">alert</zan-button>
|
||||
<zan-button @click="handleAlert2Click">无标题alert</zan-button>
|
||||
<van-button @click="handleAlertClick">alert</van-button>
|
||||
<van-button @click="handleAlert2Click">无标题alert</van-button>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="消息确认">
|
||||
<zan-button @click="handleConfirmClick">confirm</zan-button>
|
||||
<van-button @click="handleConfirmClick">confirm</van-button>
|
||||
|
||||
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b dialog {
|
||||
.zan-button {
|
||||
.van-button {
|
||||
margin: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,40 +1,40 @@
|
||||
<template><section class="demo-field"><h1 class="demo-title">Field 输入框</h1><example-block title="基础用法">
|
||||
<zan-cell-group>
|
||||
<zan-field type="text" label="用户名：" placeholder="请输入用户名" v-model="username" required></zan-field>
|
||||
<zan-field type="password" label="密码：" placeholder="请输入密码" required></zan-field>
|
||||
<zan-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍" required></zan-field>
|
||||
</zan-cell-group>
|
||||
<van-cell-group>
|
||||
<van-field type="text" label="用户名：" placeholder="请输入用户名" v-model="username" required></van-field>
|
||||
<van-field type="password" label="密码：" placeholder="请输入密码" required></van-field>
|
||||
<van-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍" required></van-field>
|
||||
</van-cell-group>
|
||||
|
||||
</example-block><example-block title="无label的输入框">
|
||||
<zan-cell-group>
|
||||
<zan-field type="text" placeholder="请输入用户名"></zan-field>
|
||||
</zan-cell-group>
|
||||
<van-cell-group>
|
||||
<van-field type="text" placeholder="请输入用户名"></van-field>
|
||||
</van-cell-group>
|
||||
|
||||
</example-block><example-block title="带border的输入框">
|
||||
<div class="zan-field-wrapper">
|
||||
<zan-field type="text" placeholder="请输入用户名" border=""></zan-field>
|
||||
<div class="van-field-wrapper">
|
||||
<van-field type="text" placeholder="请输入用户名" border=""></van-field>
|
||||
</div>
|
||||
|
||||
</example-block><example-block title="禁用的输入框">
|
||||
<zan-cell-group>
|
||||
<zan-field label="用户名：" type="text" placeholder="请输入用户名" v-model="username" disabled></zan-field>
|
||||
</zan-cell-group>
|
||||
<van-cell-group>
|
||||
<van-field label="用户名：" type="text" placeholder="请输入用户名" v-model="username" disabled></van-field>
|
||||
</van-cell-group>
|
||||
|
||||
</example-block><example-block title="错误的输入框">
|
||||
<zan-cell-group>
|
||||
<zan-field label="用户名：" type="text" placeholder="请输入用户名" error=""></zan-field>
|
||||
</zan-cell-group>
|
||||
<van-cell-group>
|
||||
<van-field label="用户名：" type="text" placeholder="请输入用户名" error=""></van-field>
|
||||
</van-cell-group>
|
||||
|
||||
</example-block><example-block title="错误的输入框">
|
||||
<zan-cell-group>
|
||||
<zan-field label="留言：" type="textarea" placeholder="请输入留言" rows="1" autosize=""></zan-field>
|
||||
</zan-cell-group>
|
||||
<van-cell-group>
|
||||
<van-field label="留言：" type="textarea" placeholder="请输入留言" rows="1" autosize=""></van-field>
|
||||
</van-cell-group>
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b field {
|
||||
.zan-field-wrapper {
|
||||
.van-field-wrapper {
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,150 +1,150 @@
|
||||
<template><section class="demo-icon"><h1 class="demo-title">Icon 图标</h1><example-block title="所有Icon">
|
||||
<zan-row>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="qr-invalid"></zan-icon>
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<van-icon name="qr-invalid"></van-icon>
|
||||
<span>qr-invalid</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="qr"></zan-icon>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="qr"></van-icon>
|
||||
<span>qr</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="exchange"></zan-icon>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="exchange"></van-icon>
|
||||
<span>exchange</span>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="close"></zan-icon>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<van-icon name="close"></van-icon>
|
||||
<span>close</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="location"></zan-icon>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="location"></van-icon>
|
||||
<span>location</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="upgrade"></zan-icon>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="upgrade"></van-icon>
|
||||
<span>upgrade</span>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="check"></zan-icon>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<van-icon name="check"></van-icon>
|
||||
<span>check</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="checked"></zan-icon>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="checked"></van-icon>
|
||||
<span>checked</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="like-o"></zan-icon>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="like-o"></van-icon>
|
||||
<span>like-o</span>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="like" style="color: red;"></zan-icon>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<van-icon name="like" style="color: red;"></van-icon>
|
||||
<span>like</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="chat"></zan-icon>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="chat"></van-icon>
|
||||
<span>chat</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="shop"></zan-icon>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="shop"></van-icon>
|
||||
<span>shop</span>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="photograph"></zan-icon>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<van-icon name="photograph"></van-icon>
|
||||
<span>photograph</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="add"></zan-icon>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="add"></van-icon>
|
||||
<span>add</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="add2"></zan-icon>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="add2"></van-icon>
|
||||
<span>add2</span>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="photo"></zan-icon>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<van-icon name="photo"></van-icon>
|
||||
<span>photo</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="logistics"></zan-icon>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="logistics"></van-icon>
|
||||
<span>logistics</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="edit"></zan-icon>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="edit"></van-icon>
|
||||
<span>edit</span>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="passed"></zan-icon>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<van-icon name="passed"></van-icon>
|
||||
<span>passed</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="cart"></zan-icon>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="cart"></van-icon>
|
||||
<span>cart</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="arrow"></zan-icon>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="arrow"></van-icon>
|
||||
<span>arrow</span>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="gift"></zan-icon>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<van-icon name="gift"></van-icon>
|
||||
<span>gift</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="search"></zan-icon>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="search"></van-icon>
|
||||
<span>search</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="clear"></zan-icon>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="clear"></van-icon>
|
||||
<span>clear</span>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="success"></zan-icon>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<van-icon name="success"></van-icon>
|
||||
<span>success</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="fail"></zan-icon>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="fail"></van-icon>
|
||||
<span>fail</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="contact"></zan-icon>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="contact"></van-icon>
|
||||
<span>contact</span>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="wechat"></zan-icon>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<van-icon name="wechat"></van-icon>
|
||||
<span>wechat</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="alipay"></zan-icon>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="alipay"></van-icon>
|
||||
<span>alipay</span>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
</van-col>
|
||||
</van-row>
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b icon {
|
||||
.zan-col {
|
||||
.van-col {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.zan-icon {
|
||||
.van-icon {
|
||||
font-size: 45px;
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template><section class="demo-image-preview"><h1 class="demo-title">ImagePreview 图片预览</h1><example-block title="基础用法">
|
||||
<zan-button @click="handleImagePreview">预览图片</zan-button>
|
||||
<van-button @click="handleImagePreview">预览图片</van-button>
|
||||
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b image-preview {
|
||||
.zan-button {
|
||||
.van-button {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,50 +1,50 @@
|
||||
<template><section class="demo-layout"><h1 class="demo-title">Layout 布局</h1><example-block title="常规用法">
|
||||
<zan-row>
|
||||
<zan-col span="8">
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<div class="gray">span: 8</div>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<div class="white">span: 8</div>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<div class="gray">span: 8</div>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col span="4">
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="4">
|
||||
<div class="gray">span: 4</div>
|
||||
</zan-col>
|
||||
<zan-col span="10" offset="4">
|
||||
</van-col>
|
||||
<van-col span="10" offset="4">
|
||||
<div class="gray">offset: 4, span: 10</div>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col offset="12" span="12">
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col offset="12" span="12">
|
||||
<div class="gray">offset: 12, span: 12</div>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
</van-col>
|
||||
</van-row>
|
||||
|
||||
</example-block><example-block title="在列元素之间增加间距">
|
||||
<zan-row gutter="10">
|
||||
<zan-col span="8">
|
||||
<van-row gutter="10">
|
||||
<van-col span="8">
|
||||
<div class="gray">span: 8</div>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<div class="gray">span: 8</div>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<div class="gray">span: 8</div>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
</van-col>
|
||||
</van-row>
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b layout {
|
||||
.zan-row {
|
||||
.van-row {
|
||||
padding: 0 20px;
|
||||
}
|
||||
.zan-col {
|
||||
.van-col {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,20 +1,20 @@
|
||||
<template><section class="demo-loading"><h1 class="demo-title">Loading 加载</h1><example-block title="渐变深色spinner">
|
||||
<zan-loading class="some-customized-class"></zan-loading>
|
||||
<van-loading class="some-customized-class"></van-loading>
|
||||
|
||||
</example-block><example-block title="渐变浅色spinner">
|
||||
<div class="demo-loading__example demo-loading__example--with-bg">
|
||||
<zan-loading class="some-customized-class" :color="'white'"></zan-loading>
|
||||
<van-loading class="some-customized-class" :color="'white'"></van-loading>
|
||||
</div>
|
||||
|
||||
</example-block><example-block title="单色spinner">
|
||||
<zan-loading class="circle-loading" :type="'circle'" :color="'white'"></zan-loading>
|
||||
<zan-loading class="circle-loading" :type="'circle'" :color="'black'"></zan-loading>
|
||||
<van-loading class="circle-loading" :type="'circle'" :color="'white'"></van-loading>
|
||||
<van-loading class="circle-loading" :type="'circle'" :color="'black'"></van-loading>
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b loading {
|
||||
.zan-loading {
|
||||
.van-loading {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,40 +1,40 @@
|
||||
<template><section class="demo-panel"><h1 class="demo-title">Panel 面板</h1><example-block title="基础用法">
|
||||
<zan-panel title="标题" desc="标题描述" status="状态">
|
||||
<van-panel title="标题" desc="标题描述" status="状态">
|
||||
<div class="panel-content">
|
||||
panel内容
|
||||
</div>
|
||||
</zan-panel>
|
||||
</van-panel>
|
||||
|
||||
</example-block><example-block title="高级用法">
|
||||
<zan-panel title="标题" desc="标题描述" status="状态">
|
||||
<zan-card title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余" desc="商品SKU1，商品SKU2" thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
|
||||
<div class="zan-card__row" slot="title">
|
||||
<h4 class="zan-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
|
||||
<span class="zan-card__price">¥ 2.00</span>
|
||||
<van-panel title="标题" desc="标题描述" status="状态">
|
||||
<van-card title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余" desc="商品SKU1，商品SKU2" thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
|
||||
<div class="van-card__row" slot="title">
|
||||
<h4 class="van-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
|
||||
<span class="van-card__price">¥ 2.00</span>
|
||||
</div>
|
||||
<div class="zan-card__row" slot="desc">
|
||||
<h4 class="zan-card__desc">商品sku</h4>
|
||||
<span class="zan-card__num">x 2</span>
|
||||
<div class="van-card__row" slot="desc">
|
||||
<h4 class="van-card__desc">商品sku</h4>
|
||||
<span class="van-card__num">x 2</span>
|
||||
</div>
|
||||
<div class="zan-card__footer" slot="footer">
|
||||
<zan-button size="mini">按钮一</zan-button>
|
||||
<zan-button size="mini">按钮二</zan-button>
|
||||
<div class="van-card__footer" slot="footer">
|
||||
<van-button size="mini">按钮一</van-button>
|
||||
<van-button size="mini">按钮二</van-button>
|
||||
</div>
|
||||
</zan-card>
|
||||
<div class="zan-panel-sum">
|
||||
</van-card>
|
||||
<div class="van-panel-sum">
|
||||
合计：<span>¥ 1999.90</span>
|
||||
</div>
|
||||
<div class="zan-panel-buttons" slot="footer">
|
||||
<zan-button size="small">按钮一</zan-button>
|
||||
<zan-button size="small" type="danger">按钮二</zan-button>
|
||||
<div class="van-panel-buttons" slot="footer">
|
||||
<van-button size="small">按钮一</van-button>
|
||||
<van-button size="small" type="danger">按钮二</van-button>
|
||||
</div>
|
||||
</zan-panel>
|
||||
</van-panel>
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b panel {
|
||||
.zan-panel-sum {
|
||||
.van-panel-sum {
|
||||
background: #fff;
|
||||
text-align: right;
|
||||
font-size: 14px;
|
||||
@@ -47,10 +47,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
.zan-panel-buttons {
|
||||
.van-panel-buttons {
|
||||
text-align: right;
|
||||
|
||||
.zan-button {
|
||||
.van-button {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,32 +1,32 @@
|
||||
<template><section class="demo-popup"><h1 class="demo-title">Popup 弹出菜单</h1><example-block title="基础用法">
|
||||
<zan-button @click="popupShow1 = true">从中间弹出popup</zan-button>
|
||||
<zan-popup v-model="popupShow1" class="zan-popup-1" :lock-on-scroll="true">
|
||||
<van-button @click="popupShow1 = true">从中间弹出popup</van-button>
|
||||
<van-popup v-model="popupShow1" class="van-popup-1" :lock-on-scroll="true">
|
||||
从中间弹出popup
|
||||
</zan-popup>
|
||||
</van-popup>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="从不同位置弹出菜单">
|
||||
<zan-button @click="popupShow2 = true;">从下方弹出popup</zan-button>
|
||||
<zan-popup v-model="popupShow2" position="bottom" class="zan-popup-2">
|
||||
<zan-button @click="showDialog">弹出dialog</zan-button>
|
||||
</zan-popup>
|
||||
<van-button @click="popupShow2 = true;">从下方弹出popup</van-button>
|
||||
<van-popup v-model="popupShow2" position="bottom" class="van-popup-2">
|
||||
<van-button @click="showDialog">弹出dialog</van-button>
|
||||
</van-popup>
|
||||
|
||||
<zan-button @click="popupShow3 = true">从上方弹出popup</zan-button>
|
||||
<zan-popup v-model="popupShow3" position="top" class="zan-popup-3" :overlay="false">
|
||||
<van-button @click="popupShow3 = true">从上方弹出popup</van-button>
|
||||
<van-popup v-model="popupShow3" position="top" class="van-popup-3" :overlay="false">
|
||||
更新成功
|
||||
</zan-popup>
|
||||
</van-popup>
|
||||
|
||||
<zan-button @click="popupShow4 = true">从右方弹出popup</zan-button>
|
||||
<zan-popup v-model="popupShow4" position="right" class="zan-popup-4" :overlay="false">
|
||||
<zan-button @click.native="popupShow4 = false">关闭 popup</zan-button>
|
||||
</zan-popup>
|
||||
<van-button @click="popupShow4 = true">从右方弹出popup</van-button>
|
||||
<van-popup v-model="popupShow4" position="right" class="van-popup-4" :overlay="false">
|
||||
<van-button @click.native="popupShow4 = false">关闭 popup</van-button>
|
||||
</van-popup>
|
||||
|
||||
|
||||
<zan-button @click="popupShow5 = true">从左方弹出popup</zan-button>
|
||||
<zan-popup v-model="popupShow5" position="left" class="zan-popup-5" :overlay="false">
|
||||
<zan-button @click.native="popupShow5 = false">关闭 popup</zan-button>
|
||||
</zan-popup>
|
||||
<van-button @click="popupShow5 = true">从左方弹出popup</van-button>
|
||||
<van-popup v-model="popupShow5" position="left" class="van-popup-5" :overlay="false">
|
||||
<van-button @click.native="popupShow5 = false">关闭 popup</van-button>
|
||||
</van-popup>
|
||||
|
||||
|
||||
|
||||
@@ -34,11 +34,11 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b popup {
|
||||
.zan-button {
|
||||
.van-button {
|
||||
margin: 10px 15px;
|
||||
}
|
||||
|
||||
.zan-popup-1 {
|
||||
.van-popup-1 {
|
||||
width: 60%;
|
||||
box-sizing: border-box;
|
||||
padding: 20px;
|
||||
@@ -46,22 +46,22 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.zan-popup-2 {
|
||||
.van-popup-2 {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
box-sizing: border-box;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.zan-popup-3 {
|
||||
.van-popup-3 {
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
background-color: rgba(0, 0, 0, 0.701961);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.zan-popup-4,
|
||||
.zan-popup-5 {
|
||||
.van-popup-4,
|
||||
.van-popup-5 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@@ -1,34 +1,34 @@
|
||||
<template><section class="demo-progress"><h1 class="demo-title">Progress 进度条</h1><example-block title="基础用法">
|
||||
<div class="demo-progress__wrapper">
|
||||
<zan-progress class="demo-progress__demo1" :percentage="0"></zan-progress>
|
||||
<van-progress class="demo-progress__demo1" :percentage="0"></van-progress>
|
||||
</div>
|
||||
<div class="demo-progress__wrapper">
|
||||
<zan-progress class="demo-progress__demo2" :percentage="46"></zan-progress>
|
||||
<van-progress class="demo-progress__demo2" :percentage="46"></van-progress>
|
||||
</div>
|
||||
<div class="demo-progress__wrapper">
|
||||
<zan-progress class="demo-progress__demo1" :percentage="100"></zan-progress>
|
||||
<van-progress class="demo-progress__demo1" :percentage="100"></van-progress>
|
||||
</div>
|
||||
|
||||
</example-block><example-block title="Inactive">
|
||||
<div class="demo-progress__wrapper">
|
||||
<zan-progress class="demo-progress__demo1" :inactive="true" :percentage="0"></zan-progress>
|
||||
<van-progress class="demo-progress__demo1" :inactive="true" :percentage="0"></van-progress>
|
||||
</div>
|
||||
<div class="demo-progress__wrapper">
|
||||
<zan-progress class="demo-progress__demo2" :inactive="true" :percentage="46"></zan-progress>
|
||||
<van-progress class="demo-progress__demo2" :inactive="true" :percentage="46"></van-progress>
|
||||
</div>
|
||||
<div class="demo-progress__wrapper">
|
||||
<zan-progress class="demo-progress__demo1" :inactive="true" :percentage="100"></zan-progress>
|
||||
<van-progress class="demo-progress__demo1" :inactive="true" :percentage="100"></van-progress>
|
||||
</div>
|
||||
|
||||
</example-block><example-block title="自定义颜色和文字">
|
||||
<div class="demo-progress__wrapper">
|
||||
<zan-progress class="demo-progress__demo1" pivot-text="红色" color="#ed5050" :percentage="26"></zan-progress>
|
||||
<van-progress class="demo-progress__demo1" pivot-text="红色" color="#ed5050" :percentage="26"></van-progress>
|
||||
</div>
|
||||
<div class="demo-progress__wrapper">
|
||||
<zan-progress class="demo-progress__demo1" pivot-text="橙色" color="#f60" :percentage="46"></zan-progress>
|
||||
<van-progress class="demo-progress__demo1" pivot-text="橙色" color="#f60" :percentage="46"></van-progress>
|
||||
</div>
|
||||
<div class="demo-progress__wrapper">
|
||||
<zan-progress class="demo-progress__demo1" pivot-text="黄色" color="#f09000" :percentage="66"></zan-progress>
|
||||
<van-progress class="demo-progress__demo1" pivot-text="黄色" color="#f09000" :percentage="66"></van-progress>
|
||||
</div>
|
||||
|
||||
</example-block></section></template>
|
||||
|
||||
@@ -1,19 +1,19 @@
|
||||
<template><section class="demo-quantity"><h1 class="demo-title">Quantity 数量选择</h1><example-block title="基础用法">
|
||||
<zan-quantity v-model="quantity1"></zan-quantity>
|
||||
<van-quantity v-model="quantity1"></van-quantity>
|
||||
<p class="curr-quantity">当前值：{{ quantity1 }}</p>
|
||||
|
||||
</example-block><example-block title="禁用Quantity">
|
||||
<zan-quantity v-model="quantity1" disabled></zan-quantity>
|
||||
<van-quantity v-model="quantity1" disabled></van-quantity>
|
||||
|
||||
</example-block><example-block title="高级用法">
|
||||
<zan-quantity v-model="quantity2" min="5" max="40" step="2" default-value="9"></zan-quantity>
|
||||
<van-quantity v-model="quantity2" min="5" max="40" step="2" default-value="9"></van-quantity>
|
||||
<p class="curr-quantity">当前值：{{ quantity2 }}</p>
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b quantity {
|
||||
.zan-quantity {
|
||||
.van-quantity {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,36 +1,36 @@
|
||||
<template><section class="demo-radio"><h1 class="demo-title">Radio 单选框</h1><example-block title="基础用法">
|
||||
<div class="zan-radios">
|
||||
<zan-radio name="1" v-model="radio1">单选框1</zan-radio>
|
||||
<zan-radio name="2" v-model="radio1">单选框2</zan-radio>
|
||||
<div class="van-radios">
|
||||
<van-radio name="1" v-model="radio1">单选框1</van-radio>
|
||||
<van-radio name="2" v-model="radio1">单选框2</van-radio>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="禁用状态">
|
||||
<div class="zan-radios">
|
||||
<zan-radio name="1" v-model="radio2" disabled>未选中禁用</zan-radio>
|
||||
<zan-radio name="2" v-model="radio2" disabled>选中且禁用</zan-radio>
|
||||
<div class="van-radios">
|
||||
<van-radio name="1" v-model="radio2" disabled>未选中禁用</van-radio>
|
||||
<van-radio name="2" v-model="radio2" disabled>选中且禁用</van-radio>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="radio组">
|
||||
<div class="zan-radios">
|
||||
<zan-radio-group v-model="radio3">
|
||||
<zan-radio name="1">单选框1</zan-radio>
|
||||
<zan-radio name="2">单选框2</zan-radio>
|
||||
</zan-radio-group>
|
||||
<div class="van-radios">
|
||||
<van-radio-group v-model="radio3">
|
||||
<van-radio name="1">单选框1</van-radio>
|
||||
<van-radio name="2">单选框2</van-radio>
|
||||
</van-radio-group>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="与Cell组件一起使用">
|
||||
<zan-radio-group v-model="radio4">
|
||||
<zan-cell-group>
|
||||
<zan-cell><zan-radio name="1">单选框1</zan-radio></zan-cell>
|
||||
<zan-cell><zan-radio name="2">单选框2</zan-radio></zan-cell>
|
||||
</zan-cell-group>
|
||||
</zan-radio-group>
|
||||
<van-radio-group v-model="radio4">
|
||||
<van-cell-group>
|
||||
<van-cell><van-radio name="1">单选框1</van-radio></van-cell>
|
||||
<van-cell><van-radio name="2">单选框2</van-radio></van-cell>
|
||||
</van-cell-group>
|
||||
</van-radio-group>
|
||||
|
||||
|
||||
|
||||
@@ -38,10 +38,10 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b radio {
|
||||
.zan-radios {
|
||||
.van-radios {
|
||||
padding: 0 20px;
|
||||
|
||||
.zan-radio {
|
||||
.van-radio {
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
<template><section class="demo-search"><h1 class="demo-title">Search 搜索</h1><example-block title="基础用法">
|
||||
<zan-search placeholder="商品名称" @search="goSearch"></zan-search>
|
||||
<van-search placeholder="商品名称" @search="goSearch"></van-search>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="监听对应事件">
|
||||
<zan-search placeholder="商品名称" @search="goSearch" @change="handleChange" @cancel="handleCancel"></zan-search>
|
||||
<van-search placeholder="商品名称" @search="goSearch" @change="handleChange" @cancel="handleCancel"></van-search>
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -1,22 +1,22 @@
|
||||
<template><section class="demo-steps"><h1 class="demo-title">Steps 步骤条</h1><example-block title="基础用法">
|
||||
<zan-steps :active="active" icon="logistics" icon-class="steps-success" title="等待商家发货" description="等待商家发货等待商家发货等待商家发货等待商家发货等待商家发货">
|
||||
<zan-step>买家下单</zan-step>
|
||||
<zan-step>商家接单</zan-step>
|
||||
<zan-step>买家提货</zan-step>
|
||||
<zan-step>交易完成</zan-step>
|
||||
</zan-steps>
|
||||
<van-steps :active="active" icon="logistics" icon-class="steps-success" title="等待商家发货" description="等待商家发货等待商家发货等待商家发货等待商家发货等待商家发货">
|
||||
<van-step>买家下单</van-step>
|
||||
<van-step>商家接单</van-step>
|
||||
<van-step>买家提货</van-step>
|
||||
<van-step>交易完成</van-step>
|
||||
</van-steps>
|
||||
|
||||
<zan-button @click="nextStep">下一步</zan-button>
|
||||
<van-button @click="nextStep">下一步</van-button>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="只显示步骤条">
|
||||
<zan-steps :active="active">
|
||||
<zan-step>买家下单</zan-step>
|
||||
<zan-step>商家接单</zan-step>
|
||||
<zan-step>买家提货</zan-step>
|
||||
<zan-step>交易完成</zan-step>
|
||||
</zan-steps>
|
||||
<van-steps :active="active">
|
||||
<van-step>买家下单</van-step>
|
||||
<van-step>商家接单</van-step>
|
||||
<van-step>买家提货</van-step>
|
||||
<van-step>交易完成</van-step>
|
||||
</van-steps>
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
@@ -26,7 +26,7 @@
|
||||
color: #06bf04;
|
||||
}
|
||||
|
||||
.zan-button {
|
||||
.van-button {
|
||||
margin: 15px 0 0 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
<template><section class="demo-swipe"><h1 class="demo-title">Swipe 轮播</h1><example-block title="基础用法">
|
||||
<zan-swipe>
|
||||
<zan-swipe-item v-for="img in images">
|
||||
<van-swipe>
|
||||
<van-swipe-item v-for="img in images">
|
||||
<img v-lazy="img" alt="">
|
||||
</zan-swipe-item>
|
||||
</zan-swipe>
|
||||
</van-swipe-item>
|
||||
</van-swipe>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="自动轮播">
|
||||
<zan-swipe auto-play="" @pagechange:end="handlePageEnd">
|
||||
<zan-swipe-item v-for="img in autoImages">
|
||||
<van-swipe auto-play="" @pagechange:end="handlePageEnd">
|
||||
<van-swipe-item v-for="img in autoImages">
|
||||
<img v-lazy="img" alt="">
|
||||
</zan-swipe-item>
|
||||
</zan-swipe>
|
||||
</van-swipe-item>
|
||||
</van-swipe>
|
||||
|
||||
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b swipe {
|
||||
.zan-swipe {
|
||||
.van-swipe {
|
||||
height: 200px;
|
||||
|
||||
img {
|
||||
|
||||
@@ -1,31 +1,31 @@
|
||||
<template><section class="demo-switch"><h1 class="demo-title">Switch 开关</h1><example-block title="基础用法">
|
||||
<zan-switch class="some-customized-class" v-model="switchState1"></zan-switch>
|
||||
<van-switch class="some-customized-class" v-model="switchState1"></van-switch>
|
||||
<div class="demo-switch__text">{{ switchState1 ? ' ON' : 'OFF' }}</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="">
|
||||
<zan-switch class="some-customized-class" v-model="switchState2" :on-change="updateState"></zan-switch>
|
||||
<van-switch class="some-customized-class" v-model="switchState2" :on-change="updateState"></van-switch>
|
||||
<div class="demo-switch__text">{{ switchState2 ? ' ON' : 'OFF' }}</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="禁用状态">
|
||||
<zan-switch class="some-customized-class" v-model="switchStateTrue" :disabled="true"></zan-switch>
|
||||
<van-switch class="some-customized-class" v-model="switchStateTrue" :disabled="true"></van-switch>
|
||||
<div class="demo-switch__text">ON, DISABLED</div>
|
||||
|
||||
<zan-switch class="some-customized-class" v-model="switchStateFalse" :disabled="true"></zan-switch>
|
||||
<van-switch class="some-customized-class" v-model="switchStateFalse" :disabled="true"></van-switch>
|
||||
<div class="demo-switch__text">OFF, DISABLED</div>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="loading状态">
|
||||
<zan-switch class="some-customized-class" v-model="switchStateTrue" :loading="true"></zan-switch>
|
||||
<van-switch class="some-customized-class" v-model="switchStateTrue" :loading="true"></van-switch>
|
||||
<div class="demo-switch__text">ON, LOADING</div>
|
||||
|
||||
<zan-switch class="some-customized-class" v-model="switchStateFalse" :loading="true"></zan-switch>
|
||||
<van-switch class="some-customized-class" v-model="switchStateFalse" :loading="true"></van-switch>
|
||||
<div class="demo-switch__text">OFF, LOADING</div>
|
||||
|
||||
|
||||
|
||||
@@ -1,60 +1,60 @@
|
||||
<template><section class="demo-tab"><h1 class="demo-title">Tab 标签</h1><example-block title="基础用法">
|
||||
<zan-tabs>
|
||||
<zan-tab title="选项一">内容一</zan-tab>
|
||||
<zan-tab title="选项二">内容二</zan-tab>
|
||||
<zan-tab title="选项三">内容三</zan-tab>
|
||||
<zan-tab title="选项四">内容四</zan-tab>
|
||||
<zan-tab title="选项五">内容五</zan-tab>
|
||||
</zan-tabs>
|
||||
<van-tabs>
|
||||
<van-tab title="选项一">内容一</van-tab>
|
||||
<van-tab title="选项二">内容二</van-tab>
|
||||
<van-tab title="选项三">内容三</van-tab>
|
||||
<van-tab title="选项四">内容四</van-tab>
|
||||
<van-tab title="选项五">内容五</van-tab>
|
||||
</van-tabs>
|
||||
|
||||
</example-block><example-block title="基础用法">
|
||||
<zan-tabs :active="active">
|
||||
<zan-tab title="选项一">内容一</zan-tab>
|
||||
<zan-tab title="选项二">内容二</zan-tab>
|
||||
<zan-tab title="选项三">内容三</zan-tab>
|
||||
<zan-tab title="选项四">内容四</zan-tab>
|
||||
<zan-tab title="选项五">内容五</zan-tab>
|
||||
</zan-tabs>
|
||||
<van-tabs :active="active">
|
||||
<van-tab title="选项一">内容一</van-tab>
|
||||
<van-tab title="选项二">内容二</van-tab>
|
||||
<van-tab title="选项三">内容三</van-tab>
|
||||
<van-tab title="选项四">内容四</van-tab>
|
||||
<van-tab title="选项五">内容五</van-tab>
|
||||
</van-tabs>
|
||||
|
||||
</example-block><example-block title="禁用tab">
|
||||
<zan-tabs>
|
||||
<zan-tab title="选项一">内容一</zan-tab>
|
||||
<zan-tab title="选项二" disabled @disabled="popalert">内容二</zan-tab>
|
||||
<zan-tab title="选项三">内容三</zan-tab>
|
||||
<zan-tab title="选项四">内容四</zan-tab>
|
||||
<zan-tab title="选项五">内容五</zan-tab>
|
||||
</zan-tabs>
|
||||
<van-tabs>
|
||||
<van-tab title="选项一">内容一</van-tab>
|
||||
<van-tab title="选项二" disabled @disabled="popalert">内容二</van-tab>
|
||||
<van-tab title="选项三">内容三</van-tab>
|
||||
<van-tab title="选项四">内容四</van-tab>
|
||||
<van-tab title="选项五">内容五</van-tab>
|
||||
</van-tabs>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="card样式">
|
||||
<zan-tabs type="card">
|
||||
<zan-tab title="选项一">内容一</zan-tab>
|
||||
<zan-tab title="选项二">内容二</zan-tab>
|
||||
<zan-tab title="选项三">内容三</zan-tab>
|
||||
<zan-tab title="选项四">内容四</zan-tab>
|
||||
<zan-tab title="选项五">内容五</zan-tab>
|
||||
</zan-tabs>
|
||||
<van-tabs type="card">
|
||||
<van-tab title="选项一">内容一</van-tab>
|
||||
<van-tab title="选项二">内容二</van-tab>
|
||||
<van-tab title="选项三">内容三</van-tab>
|
||||
<van-tab title="选项四">内容四</van-tab>
|
||||
<van-tab title="选项五">内容五</van-tab>
|
||||
</van-tabs>
|
||||
|
||||
</example-block><example-block title="自定义样式">
|
||||
<zan-tabs active="2" class="custom-tabwrap">
|
||||
<zan-tab title="选项一" class="custom-pane">内容一</zan-tab>
|
||||
<zan-tab title="选项二" class="custom-pane">内容二</zan-tab>
|
||||
<zan-tab title="选项三" class="custom-pane">内容三</zan-tab>
|
||||
<zan-tab title="选项四" class="custom-pane">内容四</zan-tab>
|
||||
<zan-tab title="选项五" class="custom-pane">内容五</zan-tab>
|
||||
</zan-tabs>
|
||||
<van-tabs active="2" class="custom-tabwrap">
|
||||
<van-tab title="选项一" class="custom-pane">内容一</van-tab>
|
||||
<van-tab title="选项二" class="custom-pane">内容二</van-tab>
|
||||
<van-tab title="选项三" class="custom-pane">内容三</van-tab>
|
||||
<van-tab title="选项四" class="custom-pane">内容四</van-tab>
|
||||
<van-tab title="选项五" class="custom-pane">内容五</van-tab>
|
||||
</van-tabs>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="click事件">
|
||||
<zan-tabs @click="handleTabClick">
|
||||
<zan-tab title="选项一">内容一</zan-tab>
|
||||
<zan-tab title="选项二">内容二</zan-tab>
|
||||
<zan-tab title="选项三">内容三</zan-tab>
|
||||
<zan-tab title="选项四">内容四</zan-tab>
|
||||
<zan-tab title="选项五">内容五</zan-tab>
|
||||
</zan-tabs>
|
||||
<van-tabs @click="handleTabClick">
|
||||
<van-tab title="选项一">内容一</van-tab>
|
||||
<van-tab title="选项二">内容二</van-tab>
|
||||
<van-tab title="选项三">内容三</van-tab>
|
||||
<van-tab title="选项四">内容四</van-tab>
|
||||
<van-tab title="选项五">内容五</van-tab>
|
||||
</van-tabs>
|
||||
|
||||
|
||||
|
||||
@@ -62,19 +62,19 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b tab {
|
||||
.zan-tab__pane {
|
||||
.van-tab__pane {
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.zan-tabs--card .zan-tab__pane {
|
||||
.van-tabs--card .van-tab__pane {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.custom-tabwrap .zan-tab-active {
|
||||
.custom-tabwrap .van-tab-active {
|
||||
color: #20a0ff;
|
||||
}
|
||||
.custom-tabwrap .zan-tabs-nav-bar {
|
||||
.custom-tabwrap .van-tabs-nav-bar {
|
||||
background: #20a0ff;
|
||||
}
|
||||
.custom-pane {
|
||||
@@ -85,10 +85,10 @@
|
||||
}
|
||||
}
|
||||
</style><style>
|
||||
.custom-tabwrap .zan-tab-active {
|
||||
.custom-tabwrap .van-tab-active {
|
||||
color: #20a0ff;
|
||||
}
|
||||
.custom-tabwrap .zan-tabs-nav-bar {
|
||||
.custom-tabwrap .van-tabs-nav-bar {
|
||||
background: #20a0ff;
|
||||
}
|
||||
.custom-pane {
|
||||
|
||||
@@ -1,29 +1,29 @@
|
||||
<template><section class="demo-tag"><h1 class="demo-title">Tag 标记</h1><example-block title="基础用法">
|
||||
<div class="tags-container">
|
||||
<zan-tag>返现</zan-tag>
|
||||
<zan-tag plain="">返现</zan-tag>
|
||||
<van-tag>返现</van-tag>
|
||||
<van-tag plain="">返现</van-tag>
|
||||
</div>
|
||||
<div class="tags-container">
|
||||
<zan-tag type="danger">返现</zan-tag>
|
||||
<zan-tag type="danger">四字标签</zan-tag>
|
||||
<zan-tag type="danger">一</zan-tag>
|
||||
<van-tag type="danger">返现</van-tag>
|
||||
<van-tag type="danger">四字标签</van-tag>
|
||||
<van-tag type="danger">一</van-tag>
|
||||
</div>
|
||||
|
||||
</example-block><example-block title="高级用法">
|
||||
<div class="tags-container">
|
||||
<zan-tag type="danger">返现</zan-tag>
|
||||
<zan-tag plain="" type="danger">返现</zan-tag>
|
||||
<van-tag type="danger">返现</van-tag>
|
||||
<van-tag plain="" type="danger">返现</van-tag>
|
||||
</div>
|
||||
<div class="tags-container">
|
||||
<zan-tag type="primary">返现</zan-tag>
|
||||
<zan-tag plain="" type="primary">返现</zan-tag>
|
||||
<van-tag type="primary">返现</van-tag>
|
||||
<van-tag plain="" type="primary">返现</van-tag>
|
||||
</div>
|
||||
<div class="tags-container">
|
||||
<zan-tag type="success">返现</zan-tag>
|
||||
<zan-tag plain="" type="success">返现</zan-tag>
|
||||
<van-tag type="success">返现</van-tag>
|
||||
<van-tag plain="" type="success">返现</van-tag>
|
||||
</div>
|
||||
<div class="tags-container">
|
||||
<zan-tag type="danger" mark="">返现</zan-tag>
|
||||
<van-tag type="danger" mark="">返现</van-tag>
|
||||
</div>
|
||||
|
||||
</example-block></section></template>
|
||||
@@ -31,7 +31,7 @@
|
||||
.tags-container {
|
||||
padding: 5px 15px;
|
||||
|
||||
.zan-tag + .zan-tag {
|
||||
.van-tag + .van-tag {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,21 +1,21 @@
|
||||
<template><section class="demo-toast"><h1 class="demo-title">Toast 轻提示</h1><example-block title="基础用法">
|
||||
<zan-button @click="showSimpleToast">普通文字提示</zan-button>
|
||||
<zan-button @click="showLoadingToast">加载Toast</zan-button>
|
||||
<zan-button @click="showSuccessToast">成功</zan-button>
|
||||
<zan-button @click="showFailToast">失败</zan-button>
|
||||
<zan-button @click="showForbidClickToast">背景不能点击</zan-button>
|
||||
<zan-button @click="showCustomizedToast(5000)">倒数5秒</zan-button>
|
||||
<van-button @click="showSimpleToast">普通文字提示</van-button>
|
||||
<van-button @click="showLoadingToast">加载Toast</van-button>
|
||||
<van-button @click="showSuccessToast">成功</van-button>
|
||||
<van-button @click="showFailToast">失败</van-button>
|
||||
<van-button @click="showForbidClickToast">背景不能点击</van-button>
|
||||
<van-button @click="showCustomizedToast(5000)">倒数5秒</van-button>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="手动关闭">
|
||||
<zan-button @click="showToast">打开</zan-button>
|
||||
<zan-button @click="closeToast">关闭</zan-button>
|
||||
<van-button @click="showToast">打开</van-button>
|
||||
<van-button @click="closeToast">关闭</van-button>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="手动关闭">
|
||||
<zan-button @click="showHtmlToast">打开</zan-button>
|
||||
<van-button @click="showHtmlToast">打开</van-button>
|
||||
|
||||
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b toast {
|
||||
.zan-button {
|
||||
.van-button {
|
||||
margin: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<template><section class="demo-uploader"><h1 class="demo-title">Uploader 图片上传</h1><example-block title="基础用法">
|
||||
<div class="uploader-container">
|
||||
<zan-uploader :after-read="logContent">
|
||||
<zan-icon name="photograph"></zan-icon>
|
||||
</zan-uploader>
|
||||
<van-uploader :after-read="logContent">
|
||||
<van-icon name="photograph"></van-icon>
|
||||
</van-uploader>
|
||||
</div>
|
||||
|
||||
</example-block></section></template>
|
||||
|
||||
Reference in New Issue
Block a user