vant components
This commit is contained in:
cookfront
@@ -0,0 +1,81 @@
|
||||
<template><section class="demo-actionsheet"><h1 class="demo-title">Actionsheet 行动按钮</h1><example-block title="基础用法">
|
||||
<van-button @click="show1 = true">弹出actionsheet</van-button>
|
||||
<van-actionsheet v-model="show1" :actions="actions1">
|
||||
</van-actionsheet>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="带取消按钮的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">
|
||||
<van-button @click="show3 = true">弹出带标题的actionsheet</van-button>
|
||||
<van-actionsheet v-model="show3" title="支持以下配送方式" class="title-actionsheet">
|
||||
<p>一些内容</p>
|
||||
</van-actionsheet>
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b actionsheet {
|
||||
.actionsheet-wx {
|
||||
color: #06BF04;
|
||||
}
|
||||
|
||||
.van-button {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.title-actionsheet p {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
import MobileComputed from 'components/mobile-computed';
|
||||
|
||||
export default {
|
||||
mixins: [MobileComputed],
|
||||
|
||||
data() {
|
||||
return {
|
||||
show1: false,
|
||||
show2: false,
|
||||
show3: false,
|
||||
actions1: [
|
||||
{
|
||||
name: '微信安全支付',
|
||||
className: 'actionsheet-wx',
|
||||
callback: this.handleActionClick
|
||||
},
|
||||
{
|
||||
name: '支付宝支付',
|
||||
loading: true
|
||||
},
|
||||
{
|
||||
name: '有赞E卡',
|
||||
subname: '（剩余260.50元）'
|
||||
},
|
||||
{
|
||||
name: '信用卡支付'
|
||||
},
|
||||
{
|
||||
name: '其他支付方式'
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleActionClick(item) {
|
||||
console.log(item);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,50 @@
|
||||
<template><section class="demo-badge"><h1 class="demo-title">Badge 徽章</h1><example-block title="基础用法">
|
||||
<div class="badge-group-wrapper">
|
||||
<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">
|
||||
<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>
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b badge {
|
||||
.badge-group-wrapper {
|
||||
padding: 30px 20px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.van-badge-group {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeKey: '2'
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onItemClick(e, data) {
|
||||
this.activeKey = data.mark;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,89 @@
|
||||
<template><section class="demo-button"><h1 class="demo-title">Button 按钮</h1><example-block title="按钮功能">
|
||||
<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="禁用状态">
|
||||
<van-row>
|
||||
<van-col span="24">
|
||||
<van-button disabled block="">diabled</van-button>
|
||||
</van-col>
|
||||
</van-row>
|
||||
|
||||
</example-block><example-block title="按钮尺寸">
|
||||
<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="自定义按钮标签">
|
||||
<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按钮">
|
||||
<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="">
|
||||
<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 {
|
||||
.van-row {
|
||||
padding: 0 15px;
|
||||
}
|
||||
.van-col {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||
@@ -0,0 +1,23 @@
|
||||
<template><section class="demo-card"><h1 class="demo-title">Card 图文组件</h1><example-block title="基础用法">
|
||||
<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="高级用法">
|
||||
<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="van-card__row" slot="desc">
|
||||
<span class="van-card__num">x 2</span>
|
||||
</div>
|
||||
<div class="van-card__footer" slot="footer">
|
||||
<van-button size="mini">按钮一</van-button>
|
||||
<van-button size="mini">按钮二</van-button>
|
||||
</div>
|
||||
</van-card>
|
||||
|
||||
</example-block></section></template>
|
||||
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||
@@ -0,0 +1,47 @@
|
||||
<template><section class="demo-cell"><h1 class="demo-title">Cell 单元格</h1><example-block title="基础用法">
|
||||
<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="标题带描述信息">
|
||||
<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="带图标">
|
||||
<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="可点击的链接">
|
||||
<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="高级用法">
|
||||
<van-cell-group>
|
||||
<van-cell value="进入店铺" icon="home" url="http://youzan.com" is-link="">
|
||||
<template slot="title">
|
||||
<span class="van-cell-text">起码运动馆</span>
|
||||
<van-tag type="danger">官方</van-tag>
|
||||
</template>
|
||||
</van-cell>
|
||||
<van-cell title="线下门店" icon="location" url="http://youzan.com" is-link=""></van-cell>
|
||||
</van-cell-group>
|
||||
|
||||
</example-block></section></template>
|
||||
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
export default {
|
||||
methods: {
|
||||
handleClick() {
|
||||
console.log('cell click');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,80 @@
|
||||
<template><section class="demo-checkbox"><h1 class="demo-title">Checkbox 复选框</h1><example-block title="基础用法">
|
||||
<div class="van-checkbox-wrapper">
|
||||
<van-checkbox v-model="checkbox1">复选框1</van-checkbox>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="禁用状态">
|
||||
<div class="van-checkbox-wrapper">
|
||||
<van-checkbox v-model="checkbox2">复选框2</van-checkbox>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="Checkbox组">
|
||||
<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="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组件一起使用">
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b checkbox {
|
||||
.van-checkbox-wrapper {
|
||||
padding: 0 20px;
|
||||
|
||||
.van-checkbox {
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checkbox1: true,
|
||||
checkbox2: true,
|
||||
list: [
|
||||
'a',
|
||||
'b',
|
||||
'c'
|
||||
],
|
||||
result: ['a', 'b']
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
result(val) {
|
||||
console.log(val);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,34 @@
|
||||
<template><section class="demo-datetime"><h1 class="demo-title">Datetime Picker 时间选择</h1><example-block title="基础用法">
|
||||
<zan-datetime-picker v-model="currentDate" type="datetime" format="yyyy.mm.dd hh时 mm分" :min-hour="minHour" :max-hour="maxHour" :min-date="minDate" @change="handlePickerChange">
|
||||
</zan-datetime-picker>
|
||||
|
||||
|
||||
|
||||
</example-block></section></template>
|
||||
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
minHour: 10,
|
||||
maxHour: 20,
|
||||
minDate: new Date(),
|
||||
currentDate: null
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
handlePickerChange(picker, values) {
|
||||
// picker.setColumnValues(1, citys[values[0]]);
|
||||
console.log(values);
|
||||
},
|
||||
handlePickerCancel() {
|
||||
alert('picker cancel');
|
||||
},
|
||||
handlePickerConfirm() {
|
||||
alert('picker confirm');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,60 @@
|
||||
<template><section class="demo-dialog"><h1 class="demo-title">Dialog 弹出框</h1><example-block title="消息提示">
|
||||
<van-button @click="handleAlertClick">alert</van-button>
|
||||
<van-button @click="handleAlert2Click">无标题alert</van-button>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="消息确认">
|
||||
<van-button @click="handleConfirmClick">confirm</van-button>
|
||||
|
||||
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b dialog {
|
||||
.van-button {
|
||||
margin: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
import { Dialog } from 'src/index';
|
||||
import MobileComputed from 'components/mobile-computed';
|
||||
|
||||
export default {
|
||||
mixins: [MobileComputed],
|
||||
|
||||
methods: {
|
||||
handleAlertClick() {
|
||||
Dialog.alert({
|
||||
title: 'alert标题',
|
||||
message: '弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。'
|
||||
}).then((action) => {
|
||||
console.log(action);
|
||||
});
|
||||
},
|
||||
|
||||
handleAlert2Click() {
|
||||
Dialog.alert({
|
||||
message: '无标题alert'
|
||||
}).then((action) => {
|
||||
console.log(action);
|
||||
});
|
||||
},
|
||||
|
||||
handleConfirmClick() {
|
||||
Dialog.confirm({
|
||||
title: 'confirm标题',
|
||||
message: '弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。'
|
||||
}).then((action) => {
|
||||
console.log(action);
|
||||
}, (error) => {
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,52 @@
|
||||
<template><section class="demo-field"><h1 class="demo-title">Field 输入框</h1><example-block title="基础用法">
|
||||
<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的输入框">
|
||||
<van-cell-group>
|
||||
<van-field type="text" placeholder="请输入用户名"></van-field>
|
||||
</van-cell-group>
|
||||
|
||||
</example-block><example-block title="带border的输入框">
|
||||
<div class="van-field-wrapper">
|
||||
<van-field type="text" placeholder="请输入用户名" border=""></van-field>
|
||||
</div>
|
||||
|
||||
</example-block><example-block title="禁用的输入框">
|
||||
<van-cell-group>
|
||||
<van-field label="用户名：" type="text" placeholder="请输入用户名" v-model="username" disabled></van-field>
|
||||
</van-cell-group>
|
||||
|
||||
</example-block><example-block title="错误的输入框">
|
||||
<van-cell-group>
|
||||
<van-field label="用户名：" type="text" placeholder="请输入用户名" error=""></van-field>
|
||||
</van-cell-group>
|
||||
|
||||
</example-block><example-block title="错误的输入框">
|
||||
<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 {
|
||||
.van-field-wrapper {
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
username: 'zhangmin'
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,156 @@
|
||||
<template><section class="demo-icon"><h1 class="demo-title">Icon 图标</h1><example-block title="所有Icon">
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<van-icon name="qr-invalid"></van-icon>
|
||||
<span>qr-invalid</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="qr"></van-icon>
|
||||
<span>qr</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="exchange"></van-icon>
|
||||
<span>exchange</span>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<van-icon name="close"></van-icon>
|
||||
<span>close</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="location"></van-icon>
|
||||
<span>location</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="upgrade"></van-icon>
|
||||
<span>upgrade</span>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<van-icon name="check"></van-icon>
|
||||
<span>check</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="checked"></van-icon>
|
||||
<span>checked</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="like-o"></van-icon>
|
||||
<span>like-o</span>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<van-icon name="like" style="color: red;"></van-icon>
|
||||
<span>like</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="chat"></van-icon>
|
||||
<span>chat</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="shop"></van-icon>
|
||||
<span>shop</span>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<van-icon name="photograph"></van-icon>
|
||||
<span>photograph</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="add"></van-icon>
|
||||
<span>add</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="add2"></van-icon>
|
||||
<span>add2</span>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<van-icon name="photo"></van-icon>
|
||||
<span>photo</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="logistics"></van-icon>
|
||||
<span>logistics</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="edit"></van-icon>
|
||||
<span>edit</span>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<van-icon name="passed"></van-icon>
|
||||
<span>passed</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="cart"></van-icon>
|
||||
<span>cart</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="arrow"></van-icon>
|
||||
<span>arrow</span>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<van-icon name="gift"></van-icon>
|
||||
<span>gift</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="search"></van-icon>
|
||||
<span>search</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="clear"></van-icon>
|
||||
<span>clear</span>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<van-icon name="success"></van-icon>
|
||||
<span>success</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="fail"></van-icon>
|
||||
<span>fail</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="contact"></van-icon>
|
||||
<span>contact</span>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<van-icon name="wechat"></van-icon>
|
||||
<span>wechat</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="alipay"></van-icon>
|
||||
<span>alipay</span>
|
||||
</van-col>
|
||||
</van-row>
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b icon {
|
||||
.van-col {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.van-icon {
|
||||
font-size: 45px;
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||
@@ -0,0 +1,34 @@
|
||||
<template><section class="demo-image-preview"><h1 class="demo-title">ImagePreview 图片预览</h1><example-block title="基础用法">
|
||||
<van-button @click="handleImagePreview">预览图片</van-button>
|
||||
|
||||
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b image-preview {
|
||||
.van-button {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
import { ImagePreview } from 'src/index';
|
||||
import MobileComputed from 'components/mobile-computed';
|
||||
|
||||
export default {
|
||||
mixins: [MobileComputed],
|
||||
|
||||
methods: {
|
||||
handleImagePreview() {
|
||||
ImagePreview([
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/15/FkubrzN7AgGwLlTeb1E89-T_ZjBg.png',
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg',
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg'
|
||||
]);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,71 @@
|
||||
<template><section class="demo-layout"><h1 class="demo-title">Layout 布局</h1><example-block title="常规用法">
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<div class="gray">span: 8</div>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<div class="white">span: 8</div>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<div class="gray">span: 8</div>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="4">
|
||||
<div class="gray">span: 4</div>
|
||||
</van-col>
|
||||
<van-col span="10" offset="4">
|
||||
<div class="gray">offset: 4, span: 10</div>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col offset="12" span="12">
|
||||
<div class="gray">offset: 12, span: 12</div>
|
||||
</van-col>
|
||||
</van-row>
|
||||
|
||||
</example-block><example-block title="在列元素之间增加间距">
|
||||
<van-row gutter="10">
|
||||
<van-col span="8">
|
||||
<div class="gray">span: 8</div>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<div class="gray">span: 8</div>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<div class="gray">span: 8</div>
|
||||
</van-col>
|
||||
</van-row>
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b layout {
|
||||
.van-row {
|
||||
padding: 0 20px;
|
||||
}
|
||||
.van-col {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gray {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
font-size: 12px;
|
||||
background: #666;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
.white {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
font-size: 12px;
|
||||
background: #fff;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||
@@ -0,0 +1,78 @@
|
||||
<template><section class="demo-lazyload"><h1 class="demo-title">Lazyload 图片懒加载</h1><example-block title="基础用法">
|
||||
<ul class="image-list" ref="container">
|
||||
<li v-for="img in imageList">
|
||||
<img class="lazy-img" v-lazy="img">
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="背景图懒加载">
|
||||
<ul class="image-list" ref="container">
|
||||
<li v-for="img in backgroundImageList">
|
||||
<div class="lazy-background" v-lazy:background-image="img"></div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="懒加载模块">
|
||||
<lazy-component @show="handleComponentShow">
|
||||
<ul class="image-list">
|
||||
<li v-for="img in componentImageList">
|
||||
<img class="lazy-img" v-lazy="img">
|
||||
</li>
|
||||
</ul>
|
||||
</lazy-component>
|
||||
|
||||
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b lazyload {
|
||||
.lazy-img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.lazy-background {
|
||||
height: 300px;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
imageList: [
|
||||
'https://img.yzcdn.cn/upload_files/2016/01/27/Fo2dFWjXYzWDR9Jaa1AEqk1jt7e0',
|
||||
'https://img.yzcdn.cn/upload_files/2016/01/27/FkyhiZfVE8tx-4qjxR2VeiqsSZYL',
|
||||
'https://img.yzcdn.cn/upload_files/2016/01/27/FpWD3kX18w8qjM6faH-4JqOWHsF4',
|
||||
'https://img.yzcdn.cn/upload_files/2016/09/08/9ff28d555e5760fa830344f12efa0087.jpg',
|
||||
'https://img.yzcdn.cn/upload_files/2016/11/13/FlZIeSgbSANSPkmUHttMjoIgY3cv.jpg',
|
||||
'https://img.yzcdn.cn/upload_files/2016/12/12/FuxgsGPRnupGu_eaMuaR8W0DuSKp.jpeg'
|
||||
],
|
||||
backgroundImageList: [
|
||||
'https://img.yzcdn.cn/upload_files/2016/01/27/Fo2dFWjXYzWDR9Jaa1AEqk1jt7e0',
|
||||
'https://img.yzcdn.cn/upload_files/2016/01/27/FkyhiZfVE8tx-4qjxR2VeiqsSZYL'
|
||||
],
|
||||
componentImageList: [
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/09/FvkZahKoq1vkxLQFdVWeLf2UCqDz.png',
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/09/Fk0rpe_svu9d5Xk3MUCWd1QeMXOu.png'
|
||||
]
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleComponentShow() {
|
||||
console.log('component show');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,36 @@
|
||||
<template><section class="demo-loading"><h1 class="demo-title">Loading 加载</h1><example-block title="渐变深色spinner">
|
||||
<van-loading class="some-customized-class"></van-loading>
|
||||
|
||||
</example-block><example-block title="渐变浅色spinner">
|
||||
<div class="demo-loading__example demo-loading__example--with-bg">
|
||||
<van-loading class="some-customized-class" :color="'white'"></van-loading>
|
||||
</div>
|
||||
|
||||
</example-block><example-block title="单色spinner">
|
||||
<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 {
|
||||
.van-loading {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.circle-loading {
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.demo-loading__example--with-bg {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
margin: 0 auto;
|
||||
width: 80px;
|
||||
padding: 25px 0;
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||
@@ -0,0 +1,65 @@
|
||||
<template><section class="demo-panel"><h1 class="demo-title">Panel 面板</h1><example-block title="基础用法">
|
||||
<van-panel title="标题" desc="标题描述" status="状态">
|
||||
<div class="panel-content">
|
||||
panel内容
|
||||
</div>
|
||||
</van-panel>
|
||||
|
||||
</example-block><example-block title="高级用法">
|
||||
<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="van-card__row" slot="desc">
|
||||
<h4 class="van-card__desc">商品sku</h4>
|
||||
<span class="van-card__num">x 2</span>
|
||||
</div>
|
||||
<div class="van-card__footer" slot="footer">
|
||||
<van-button size="mini">按钮一</van-button>
|
||||
<van-button size="mini">按钮二</van-button>
|
||||
</div>
|
||||
</van-card>
|
||||
<div class="van-panel-sum">
|
||||
合计：<span>¥ 1999.90</span>
|
||||
</div>
|
||||
<div class="van-panel-buttons" slot="footer">
|
||||
<van-button size="small">按钮一</van-button>
|
||||
<van-button size="small" type="danger">按钮二</van-button>
|
||||
</div>
|
||||
</van-panel>
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b panel {
|
||||
.van-panel-sum {
|
||||
background: #fff;
|
||||
text-align: right;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
line-height: 30px;
|
||||
padding-right: 15px;
|
||||
|
||||
span {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
.van-panel-buttons {
|
||||
text-align: right;
|
||||
|
||||
.van-button {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-content {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||
@@ -0,0 +1,49 @@
|
||||
<template><section class="demo-picker"><h1 class="demo-title">Picker 选择器</h1><example-block title="基础用法">
|
||||
<zan-picker :columns="pickerColumns" @change="handlePickerChange"></zan-picker>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="带toolbar的Picker">
|
||||
<zan-picker :columns="pickerColumns" show-toolbar="" @change="handlePickerChange" @cancel="handlePickerCancel" @confirm="handlePickerConfirm"></zan-picker>
|
||||
|
||||
|
||||
|
||||
</example-block></section></template>
|
||||
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
const citys = {
|
||||
'浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
|
||||
'福建': ['福州', '厦门', '莆田', '三明', '泉州', '漳州', '南平', '龙岩', '宁德'],
|
||||
'湖南': ['长沙', '株洲', '湘潭', '衡阳', '邵阳', '岳阳', '常德', '张家界', '益阳', '郴州', '永州', '怀化', '娄底', '湘西土家族苗族自治州']
|
||||
};
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
pickerColumns: [
|
||||
{
|
||||
values: Object.keys(citys),
|
||||
className: 'column1'
|
||||
},
|
||||
{
|
||||
values: ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
|
||||
className: 'column2'
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
handlePickerChange(picker, values) {
|
||||
picker.setColumnValues(1, citys[values[0]]);
|
||||
},
|
||||
handlePickerCancel() {
|
||||
alert('picker cancel');
|
||||
},
|
||||
handlePickerConfirm() {
|
||||
alert('picker confirm');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,112 @@
|
||||
<template><section class="demo-popup"><h1 class="demo-title">Popup 弹出菜单</h1><example-block title="基础用法">
|
||||
<van-button @click="popupShow1 = true">从中间弹出popup</van-button>
|
||||
<van-popup v-model="popupShow1" class="van-popup-1" :lock-on-scroll="true">
|
||||
从中间弹出popup
|
||||
</van-popup>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="从不同位置弹出菜单">
|
||||
<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>
|
||||
|
||||
<van-button @click="popupShow3 = true">从上方弹出popup</van-button>
|
||||
<van-popup v-model="popupShow3" position="top" class="van-popup-3" :overlay="false">
|
||||
更新成功
|
||||
</van-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>
|
||||
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b popup {
|
||||
.van-button {
|
||||
margin: 10px 15px;
|
||||
}
|
||||
|
||||
.van-popup-1 {
|
||||
width: 60%;
|
||||
box-sizing: border-box;
|
||||
padding: 20px;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.van-popup-2 {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
box-sizing: border-box;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.van-popup-3 {
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
background-color: rgba(0, 0, 0, 0.701961);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.van-popup-4,
|
||||
.van-popup-5 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
import MobileComputed from 'components/mobile-computed';
|
||||
import Dialog from 'packages/dialog';
|
||||
|
||||
export default {
|
||||
mixins: [MobileComputed],
|
||||
|
||||
data() {
|
||||
return {
|
||||
popupShow1: false,
|
||||
popupShow2: false,
|
||||
popupShow3: false,
|
||||
popupShow4: false,
|
||||
popupShow5: false
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
popupShow3(val) {
|
||||
if (val) {
|
||||
setTimeout(() => {
|
||||
this.popupShow3 = false;
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
showDialog() {
|
||||
Dialog.confirm({
|
||||
title: 'confirm标题',
|
||||
message: '弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。'
|
||||
}).then((action) => {
|
||||
console.log(action);
|
||||
}, (error) => {
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,46 @@
|
||||
<template><section class="demo-progress"><h1 class="demo-title">Progress 进度条</h1><example-block title="基础用法">
|
||||
<div class="demo-progress__wrapper">
|
||||
<van-progress class="demo-progress__demo1" :percentage="0"></van-progress>
|
||||
</div>
|
||||
<div class="demo-progress__wrapper">
|
||||
<van-progress class="demo-progress__demo2" :percentage="46"></van-progress>
|
||||
</div>
|
||||
<div class="demo-progress__wrapper">
|
||||
<van-progress class="demo-progress__demo1" :percentage="100"></van-progress>
|
||||
</div>
|
||||
|
||||
</example-block><example-block title="Inactive">
|
||||
<div class="demo-progress__wrapper">
|
||||
<van-progress class="demo-progress__demo1" :inactive="true" :percentage="0"></van-progress>
|
||||
</div>
|
||||
<div class="demo-progress__wrapper">
|
||||
<van-progress class="demo-progress__demo2" :inactive="true" :percentage="46"></van-progress>
|
||||
</div>
|
||||
<div class="demo-progress__wrapper">
|
||||
<van-progress class="demo-progress__demo1" :inactive="true" :percentage="100"></van-progress>
|
||||
</div>
|
||||
|
||||
</example-block><example-block title="自定义颜色和文字">
|
||||
<div class="demo-progress__wrapper">
|
||||
<van-progress class="demo-progress__demo1" pivot-text="红色" color="#ed5050" :percentage="26"></van-progress>
|
||||
</div>
|
||||
<div class="demo-progress__wrapper">
|
||||
<van-progress class="demo-progress__demo1" pivot-text="橙色" color="#f60" :percentage="46"></van-progress>
|
||||
</div>
|
||||
<div class="demo-progress__wrapper">
|
||||
<van-progress class="demo-progress__demo1" pivot-text="黄色" color="#f09000" :percentage="66"></van-progress>
|
||||
</div>
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b progress {
|
||||
@e wrapper {
|
||||
padding: 5px;
|
||||
margin: 20px 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||
@@ -0,0 +1,36 @@
|
||||
<template><section class="demo-quantity"><h1 class="demo-title">Quantity 数量选择</h1><example-block title="基础用法">
|
||||
<van-quantity v-model="quantity1"></van-quantity>
|
||||
<p class="curr-quantity">当前值：{{ quantity1 }}</p>
|
||||
|
||||
</example-block><example-block title="禁用Quantity">
|
||||
<van-quantity v-model="quantity1" disabled></van-quantity>
|
||||
|
||||
</example-block><example-block title="高级用法">
|
||||
<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 {
|
||||
.van-quantity {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.curr-quantity {
|
||||
margin: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
quantity1: 1,
|
||||
quantity2: null,
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,63 @@
|
||||
<template><section class="demo-radio"><h1 class="demo-title">Radio 单选框</h1><example-block title="基础用法">
|
||||
<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="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="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组件一起使用">
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b radio {
|
||||
.van-radios {
|
||||
padding: 0 20px;
|
||||
|
||||
.van-radio {
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
radio1: '1',
|
||||
radio2: '2',
|
||||
radio3: '1',
|
||||
radio4: '1'
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,28 @@
|
||||
<template><section class="demo-search"><h1 class="demo-title">Search 搜索</h1><example-block title="基础用法">
|
||||
<van-search placeholder="商品名称" @search="goSearch"></van-search>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="监听对应事件">
|
||||
<van-search placeholder="商品名称" @search="goSearch" @change="handleChange" @cancel="handleCancel"></van-search>
|
||||
|
||||
|
||||
|
||||
</example-block></section></template>
|
||||
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
export default {
|
||||
methods: {
|
||||
goSearch(value) {
|
||||
alert(value)
|
||||
},
|
||||
handleChange(value) {
|
||||
console.log(value);
|
||||
},
|
||||
handleCancel() {
|
||||
alert('cancel');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,50 @@
|
||||
<template><section class="demo-steps"><h1 class="demo-title">Steps 步骤条</h1><example-block title="基础用法">
|
||||
<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>
|
||||
|
||||
<van-button @click="nextStep">下一步</van-button>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="只显示步骤条">
|
||||
<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>
|
||||
@component-namespace demo {
|
||||
@b steps {
|
||||
.steps-success {
|
||||
color: #06bf04;
|
||||
}
|
||||
|
||||
.van-button {
|
||||
margin: 15px 0 0 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
active: 0
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
nextStep() {
|
||||
if (++this.active > 3) this.active = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,55 @@
|
||||
<template><section class="demo-swipe"><h1 class="demo-title">Swipe 轮播</h1><example-block title="基础用法">
|
||||
<van-swipe>
|
||||
<van-swipe-item v-for="img in images">
|
||||
<img v-lazy="img" alt="">
|
||||
</van-swipe-item>
|
||||
</van-swipe>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="自动轮播">
|
||||
<van-swipe auto-play="" @pagechange:end="handlePageEnd">
|
||||
<van-swipe-item v-for="img in autoImages">
|
||||
<img v-lazy="img" alt="">
|
||||
</van-swipe-item>
|
||||
</van-swipe>
|
||||
|
||||
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b swipe {
|
||||
.van-swipe {
|
||||
height: 200px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
autoImages: [
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/09/FvkZahKoq1vkxLQFdVWeLf2UCqDz.png',
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/09/Fk0rpe_svu9d5Xk3MUCWd1QeMXOu.png'
|
||||
],
|
||||
images: [
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg',
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg'
|
||||
]
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
handlePageEnd(page, index) {
|
||||
console.log(page, index);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,79 @@
|
||||
<template><section class="demo-switch"><h1 class="demo-title">Switch 开关</h1><example-block title="基础用法">
|
||||
<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="">
|
||||
<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="禁用状态">
|
||||
<van-switch class="some-customized-class" v-model="switchStateTrue" :disabled="true"></van-switch>
|
||||
<div class="demo-switch__text">ON, DISABLED</div>
|
||||
|
||||
<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状态">
|
||||
<van-switch class="some-customized-class" v-model="switchStateTrue" :loading="true"></van-switch>
|
||||
<div class="demo-switch__text">ON, LOADING</div>
|
||||
|
||||
<van-switch class="some-customized-class" v-model="switchStateFalse" :loading="true"></van-switch>
|
||||
<div class="demo-switch__text">OFF, LOADING</div>
|
||||
|
||||
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b switch {
|
||||
.examples,
|
||||
.example-block {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.example-block {
|
||||
.demo-sub-title {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
@e text {
|
||||
margin: 20px auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
import Dialog from 'packages/dialog';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
switchState1: true,
|
||||
switchState2: true,
|
||||
switchStateTrue: true,
|
||||
switchStateFalse: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
updateState(newState) {
|
||||
const state = newState ? '打开' : '关闭';
|
||||
Dialog.confirm({
|
||||
title: '提醒',
|
||||
message: '是否' + state + '开关？'
|
||||
}).then((action) => {
|
||||
this.switchState2 = newState;
|
||||
}, (error) => {});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,123 @@
|
||||
<template><section class="demo-tab"><h1 class="demo-title">Tab 标签</h1><example-block title="基础用法">
|
||||
<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="基础用法">
|
||||
<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">
|
||||
<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样式">
|
||||
<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="自定义样式">
|
||||
<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事件">
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b tab {
|
||||
.van-tab__pane {
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.van-tabs--card .van-tab__pane {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.custom-tabwrap .van-tab-active {
|
||||
color: #20a0ff;
|
||||
}
|
||||
.custom-tabwrap .van-tabs-nav-bar {
|
||||
background: #20a0ff;
|
||||
}
|
||||
.custom-pane {
|
||||
text-align: center;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style><style>
|
||||
.custom-tabwrap .van-tab-active {
|
||||
color: #20a0ff;
|
||||
}
|
||||
.custom-tabwrap .van-tabs-nav-bar {
|
||||
background: #20a0ff;
|
||||
}
|
||||
.custom-pane {
|
||||
text-align: center;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
active: 2
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(() => {
|
||||
this.active = 3;
|
||||
}, 1000);
|
||||
},
|
||||
methods: {
|
||||
popalert() {
|
||||
alert('haha')
|
||||
},
|
||||
|
||||
handleTabClick(index) {
|
||||
alert(index);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,40 @@
|
||||
<template><section class="demo-tag"><h1 class="demo-title">Tag 标记</h1><example-block title="基础用法">
|
||||
<div class="tags-container">
|
||||
<van-tag>返现</van-tag>
|
||||
<van-tag plain="">返现</van-tag>
|
||||
</div>
|
||||
<div class="tags-container">
|
||||
<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">
|
||||
<van-tag type="danger">返现</van-tag>
|
||||
<van-tag plain="" type="danger">返现</van-tag>
|
||||
</div>
|
||||
<div class="tags-container">
|
||||
<van-tag type="primary">返现</van-tag>
|
||||
<van-tag plain="" type="primary">返现</van-tag>
|
||||
</div>
|
||||
<div class="tags-container">
|
||||
<van-tag type="success">返现</van-tag>
|
||||
<van-tag plain="" type="success">返现</van-tag>
|
||||
</div>
|
||||
<div class="tags-container">
|
||||
<van-tag type="danger" mark="">返现</van-tag>
|
||||
</div>
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
.tags-container {
|
||||
padding: 5px 15px;
|
||||
|
||||
.van-tag + .van-tag {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||
@@ -0,0 +1,86 @@
|
||||
<template><section class="demo-toast"><h1 class="demo-title">Toast 轻提示</h1><example-block title="基础用法">
|
||||
<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="手动关闭">
|
||||
<van-button @click="showToast">打开</van-button>
|
||||
<van-button @click="closeToast">关闭</van-button>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="手动关闭">
|
||||
<van-button @click="showHtmlToast">打开</van-button>
|
||||
|
||||
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b toast {
|
||||
.van-button {
|
||||
margin: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
import { Toast } from 'src/index';
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
showSimpleToast() {
|
||||
Toast('我是提示文案，建议不超过十五字~');
|
||||
},
|
||||
showLoadingToast() {
|
||||
Toast.loading();
|
||||
},
|
||||
showSuccessToast() {
|
||||
Toast.success('成功文案');
|
||||
},
|
||||
showFailToast() {
|
||||
Toast.fail('失败文案');
|
||||
},
|
||||
showForbidClickToast() {
|
||||
Toast({
|
||||
message: '背景不能点击',
|
||||
forbidClick: true
|
||||
})
|
||||
},
|
||||
showCustomizedToast(duration) {
|
||||
let leftSec = duration / 1000;
|
||||
let toast = Toast({
|
||||
duration: duration + 1000,
|
||||
type: 'success',
|
||||
message: leftSec.toString()
|
||||
});
|
||||
const id = window.setInterval(() => {
|
||||
if (leftSec <= 1) {
|
||||
window.clearInterval(id);
|
||||
toast.message = '跳转中...'
|
||||
return;
|
||||
}
|
||||
toast.message = (--leftSec).toString();
|
||||
}, 1000);
|
||||
},
|
||||
showToast() {
|
||||
this.toast = Toast('我是提示文案，建议不超过十五字~');
|
||||
},
|
||||
closeToast() {
|
||||
this.toast.clear();
|
||||
},
|
||||
showHtmlToast() {
|
||||
Toast({
|
||||
type: 'html',
|
||||
message: '<em>HTML<em>'
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,23 @@
|
||||
<template><section class="demo-uploader"><h1 class="demo-title">Uploader 图片上传</h1><example-block title="基础用法">
|
||||
<div class="uploader-container">
|
||||
<van-uploader :after-read="logContent">
|
||||
<van-icon name="photograph"></van-icon>
|
||||
</van-uploader>
|
||||
</div>
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
.uploader-container {
|
||||
padding: 5px 15px;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
export default {
|
||||
methods: {
|
||||
logContent(file) {
|
||||
console.log(file)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,58 @@
|
||||
<template><section class="demo-waterfall"><h1 class="demo-title">Waterfall 瀑布流</h1><example-block title="基础用法">
|
||||
<div class="waterfall">
|
||||
<div v-waterfall-lower="loadMore" v-waterfall-upper="loadMoreUpper" waterfall-disabled="isWaterfallDisabled" waterfall-offset="400">
|
||||
<div class="waterfall-item" v-for="item in list" style="text-align: center;">
|
||||
{{ item }}
|
||||
</div>
|
||||
<div v-if="loading" style="text-align: center;">
|
||||
loading
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
.waterfall {
|
||||
max-height: 300px;
|
||||
overflow: scroll;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: [1, 2, 3, 4, 5],
|
||||
loading: false,
|
||||
finished: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
loadMore() {
|
||||
if (this.list.length >= 200) {
|
||||
this.finished = true;
|
||||
return;
|
||||
}
|
||||
|
||||
this.loading = true;
|
||||
setTimeout(() => {
|
||||
let lastNumber = this.list[this.list.length - 1];
|
||||
for (let i = 0; i < 5; i ++) {
|
||||
lastNumber += 1;
|
||||
this.list.push(lastNumber);
|
||||
}
|
||||
this.loading = false;
|
||||
}, 2500);
|
||||
},
|
||||
loadMoreUpper() {
|
||||
if (this.list[0] < 0) return;
|
||||
this.list.unshift(-1);
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isWaterfallDisabled: function() {
|
||||
return this.loading || this.finished;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user