文档改版 (#55)
This commit is contained in:
neverland
张敏
@@ -1,81 +0,0 @@
|
||||
<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>
|
||||
@@ -1,50 +0,0 @@
|
||||
<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>
|
||||
@@ -1,92 +0,0 @@
|
||||
<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-col span="24">
|
||||
<van-button size="normal">normal</van-button>
|
||||
</van-col>
|
||||
<van-col span="24">
|
||||
<van-button size="small">small</van-button>
|
||||
</van-col>
|
||||
<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-button {
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
user-select: none;
|
||||
}
|
||||
.van-row {
|
||||
padding: 0 15px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.van-col-24 {
|
||||
margin-bottom: 20px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||
@@ -1,23 +0,0 @@
|
||||
<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>
|
||||
@@ -1,39 +0,0 @@
|
||||
<template><section class="demo-cell"><h1 class="demo-title">Cell Swipe 滑动单元格</h1><example-block title="基础用法">
|
||||
<van-cell-swipe :right-width="65" :left-width="65">
|
||||
<van-cell-group>
|
||||
<van-cell title="单元格1" value="单元格1内容"></van-cell>
|
||||
</van-cell-group>
|
||||
|
||||
<span slot="right" class="swipe-delete-btn">
|
||||
删除
|
||||
</span>
|
||||
<span slot="left" class="swipe-check-btn">
|
||||
选择
|
||||
</span>
|
||||
</van-cell-swipe>
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
.swipe-delete-btn {
|
||||
background-color: #FF4444;
|
||||
color: #FFFFFF;
|
||||
font-size: 16px;
|
||||
width: 65px;
|
||||
height: 44px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
line-height: 44px;
|
||||
}
|
||||
.swipe-check-btn {
|
||||
background-color: #84c483;
|
||||
color: #FFFFFF;
|
||||
font-size: 16px;
|
||||
width: 65px;
|
||||
height: 44px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
line-height: 44px;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||
@@ -1,58 +0,0 @@
|
||||
<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="只设置value">
|
||||
<van-cell-group>
|
||||
<van-cell value="单元格1内容"></van-cell>
|
||||
<van-cell value="单元格2内容"></van-cell>
|
||||
</van-cell-group>
|
||||
|
||||
</example-block><example-block title="标题带描述信息">
|
||||
<van-cell-group>
|
||||
<van-cell title="单元格1" label="描述信息" value="查看专栏" is-link="" url="javascript:void(0)" @click="handleClick"></van-cell>
|
||||
<van-cell title="单元格2" label="描述信息" value="查看专栏" is-link=""></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 title="其他">
|
||||
<template slot="right-icon">
|
||||
<van-icon name="passed" class="van-cell__right-icon" style="font-size: 16px;"></van-icon>
|
||||
</template>
|
||||
</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>
|
||||
@@ -1,80 +0,0 @@
|
||||
<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" disabled>复选框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, index) in list" :key="index" :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, index) in list" :key="index" :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, index) in list" :key="index">
|
||||
<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>
|
||||
@@ -1,42 +0,0 @@
|
||||
<template><section class="demo-datetime"><h1 class="demo-title">Datetime Picker 时间选择</h1><example-block title="基础用法">
|
||||
<van-datetime-picker v-model="currentDate" type="datetime" format="yyyy.mm.dd hh时 mm分" :min-hour="minHour" :max-hour="maxHour" :min-date="minDate" @change="handlePickerChange">
|
||||
</van-datetime-picker>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="选择日期">
|
||||
<van-datetime-picker v-model="currentDate" type="date" format="yyyy.mm.dd hh时 mm分" :min-hour="minHour" :max-hour="maxHour" :min-date="minDate" @change="handlePickerChange">
|
||||
</van-datetime-picker>
|
||||
|
||||
</example-block><example-block title="选择时间">
|
||||
<van-datetime-picker v-model="currentDate" type="time" format="yyyy.mm.dd hh时 mm分" :min-hour="minHour" :max-hour="maxHour" :min-date="minDate" @change="handlePickerChange">
|
||||
</van-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>
|
||||
@@ -1,60 +0,0 @@
|
||||
<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>
|
||||
@@ -1,52 +0,0 @@
|
||||
<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>
|
||||
@@ -1,290 +0,0 @@
|
||||
<template><section class="demo-icon"><h1 class="demo-title">Icon 图标</h1><example-block title="所有Icon">
|
||||
<van-icon name="qr-invalid" style="text-align: center"></van-icon>
|
||||
|
||||
</example-block><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-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-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-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-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-col span="8">
|
||||
<van-icon name="photo"></van-icon>
|
||||
<span>photo</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="edit"></van-icon>
|
||||
<span>edit</span>
|
||||
</van-col>
|
||||
<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-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-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-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-col span="8">
|
||||
<van-icon name="password-view"></van-icon>
|
||||
<span>password-view</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="wap-nav"></van-icon>
|
||||
<span>wap-nav</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="password-not-view"></van-icon>
|
||||
<span>password-not-view</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="wap-home"></van-icon>
|
||||
<span>wap-home</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="ecard-pay"></van-icon>
|
||||
<span>ecard-pay</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="balance-pay"></van-icon>
|
||||
<span>balance-pay</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="peer-pay"></van-icon>
|
||||
<span>peer-pay</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="credit-pay"></van-icon>
|
||||
<span>credit-pay</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="debit-pay"></van-icon>
|
||||
<span>debit-pay</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="other-pay"></van-icon>
|
||||
<span>other-pay</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="browsing-history"></van-icon>
|
||||
<span>browsing-history</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="goods-collect"></van-icon>
|
||||
<span>goods-collect</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="shop-collect"></van-icon>
|
||||
<span>shop-collect</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="receive-gift"></van-icon>
|
||||
<span>receive-gift</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="send-gift"></van-icon>
|
||||
<span>send-gift</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="setting"></van-icon>
|
||||
<span>setting</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="points"></van-icon>
|
||||
<span>points</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="coupon"></van-icon>
|
||||
<span>coupon</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="free-postage"></van-icon>
|
||||
<span>free-postage</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="discount"></van-icon>
|
||||
<span>discount</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="birthday-privilege"></van-icon>
|
||||
<span>birthday-privilege</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="member-day-privilege"></van-icon>
|
||||
<span>member-day-privilege</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="balance-details"></van-icon>
|
||||
<span>balance-details</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="cash-back-record"></van-icon>
|
||||
<span>cash-back-record</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="points-mall"></van-icon>
|
||||
<span>points-mall</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="exchange-record"></van-icon>
|
||||
<span>exchange-record</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="pending-payment"></van-icon>
|
||||
<span>pending-payment</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="pending-orders"></van-icon>
|
||||
<span>pending-orders</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="pending-deliver"></van-icon>
|
||||
<span>pending-deliver</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="pending-evaluate"></van-icon>
|
||||
<span>pending-evaluate</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="cash-on-deliver"></van-icon>
|
||||
<span>cash-on-deliver</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="gift-card-pay"></van-icon>
|
||||
<span>gift-card-pay</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="underway"></van-icon>
|
||||
<span>underway</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="point-gift"></van-icon>
|
||||
<span>point-gift</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="after-sale"></van-icon>
|
||||
<span>after-sale</span>
|
||||
</van-col>
|
||||
</van-row>
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b icon {
|
||||
.examples {
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
.van-col {
|
||||
text-align: center;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.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>
|
||||
@@ -1,34 +0,0 @@
|
||||
<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>
|
||||
@@ -1,71 +0,0 @@
|
||||
<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="20">
|
||||
<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>
|
||||
@@ -1,78 +0,0 @@
|
||||
<template><section class="demo-lazyload"><h1 class="demo-title">Lazyload 图片懒加载</h1><example-block title="基础用法">
|
||||
<ul class="image-list" ref="container">
|
||||
<li v-for="(img, index) in imageList" :key="index">
|
||||
<img class="lazy-img" v-lazy="img">
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="背景图懒加载">
|
||||
<ul class="image-list" ref="container">
|
||||
<li v-for="(img, index) in backgroundImageList" :key="index">
|
||||
<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, index) in componentImageList" :key="index">
|
||||
<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>
|
||||
@@ -1,38 +0,0 @@
|
||||
<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(17, 17, 17, 0.7);
|
||||
margin: 0 auto;
|
||||
width: 120px;
|
||||
padding: 45px 0;
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||
@@ -1,65 +0,0 @@
|
||||
<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>
|
||||
@@ -1,50 +0,0 @@
|
||||
<template><section class="demo-picker"><h1 class="demo-title">Picker 选择器</h1><example-block title="基础用法">
|
||||
<van-picker :columns="pickerColumns" @change="handlePickerChange"></van-picker>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="带toolbar的Picker">
|
||||
<van-picker :title="title" :columns="pickerColumns" show-toolbar="" @change="handlePickerChange" @cancel="handlePickerCancel" @confirm="handlePickerConfirm"></van-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 {
|
||||
title: '地区选择',
|
||||
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>
|
||||
@@ -1,112 +0,0 @@
|
||||
<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>
|
||||
@@ -1,46 +0,0 @@
|
||||
<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="" :percentage="0"></van-progress>
|
||||
</div>
|
||||
<div class="demo-progress__wrapper">
|
||||
<van-progress class="demo-progress__demo2" inactive="" :percentage="46"></van-progress>
|
||||
</div>
|
||||
<div class="demo-progress__wrapper">
|
||||
<van-progress class="demo-progress__demo1" inactive="" :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>
|
||||
@@ -1,36 +0,0 @@
|
||||
<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 || 9 }}</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>
|
||||
@@ -1,63 +0,0 @@
|
||||
<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>
|
||||
@@ -1,31 +0,0 @@
|
||||
<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="搜索商品" type="showcase"></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>
|
||||
@@ -1,76 +0,0 @@
|
||||
<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><example-block title="只显示步骤条">
|
||||
<van-steps direction="vertical" :active="0" active-color="#f60">
|
||||
<van-step>
|
||||
<h3>【城市】最新的物流状态之类的表述哈哈哈哈</h3>
|
||||
<p>2016-07-12 12:12:12</p>
|
||||
</van-step>
|
||||
<van-step>
|
||||
<h3>【城市】已经过了的物流状态我是折行我是折行我是折行联系电话：158630099999</h3>
|
||||
<p>2016-07-12 12:12:12</p>
|
||||
</van-step>
|
||||
<van-step>
|
||||
<h3>未发货</h3>
|
||||
<p>2016-07-12 12:12:12</p>
|
||||
</van-step>
|
||||
</van-steps>
|
||||
|
||||
</example-block><example-block title="高级用法">
|
||||
<van-steps :active="active" title="等待商家发货">
|
||||
<van-icon slot="icon" name="like"></van-icon>
|
||||
<p slot="message-extra">流程</p>
|
||||
<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>
|
||||
@@ -1,57 +0,0 @@
|
||||
<template><section class="demo-swipe"><h1 class="demo-title">Swipe 轮播</h1><example-block title="基础用法">
|
||||
<van-swipe>
|
||||
<van-swipe-item v-for="(img, index) in images" :key="index">
|
||||
<a href="https://youzan.com" target="_blank">
|
||||
<img v-lazy="img" alt="">
|
||||
</a>
|
||||
</van-swipe-item>
|
||||
</van-swipe>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="自动轮播">
|
||||
<van-swipe auto-play="" @pagechange:end="handlePageEnd">
|
||||
<van-swipe-item v-for="(img, index) in autoImages" :key="index">
|
||||
<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>
|
||||
@@ -1,89 +0,0 @@
|
||||
<template><section class="demo-switch"><h1 class="demo-title">Switch 开关</h1><example-block title="基础用法">
|
||||
<van-row>
|
||||
<van-col span="12">
|
||||
<van-switch class="some-customized-class" v-model="switchState1"></van-switch>
|
||||
<div class="demo-switch__text">{{ switchState1 ? ' 打开' : '关闭' }}</div>
|
||||
</van-col>
|
||||
<van-col span="12">
|
||||
<van-switch class="some-customized-class" v-model="switchState2" :on-change="updateState"></van-switch>
|
||||
<div class="demo-switch__text">{{ switchState2 ? ' 打开' : '关闭' }}</div>
|
||||
</van-col>
|
||||
</van-row>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="禁用状态">
|
||||
<van-row>
|
||||
<van-col span="12">
|
||||
<van-switch class="some-customized-class" v-model="switchStateTrue" disabled></van-switch>
|
||||
<div class="demo-switch__text">打开</div>
|
||||
</van-col>
|
||||
<van-col span="12">
|
||||
<van-switch class="some-customized-class" v-model="switchStateFalse" disabled></van-switch>
|
||||
<div class="demo-switch__text">关闭</div>
|
||||
</van-col>
|
||||
</van-row>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="loading状态">
|
||||
<van-row>
|
||||
<van-col span="12">
|
||||
<van-switch class="some-customized-class" v-model="switchStateTrue" loading=""></van-switch>
|
||||
<div class="demo-switch__text">打开</div>
|
||||
</van-col>
|
||||
<van-col span="12">
|
||||
<van-switch class="some-customized-class" v-model="switchStateFalse" loading=""></van-switch>
|
||||
<div class="demo-switch__text">关闭</div>
|
||||
</van-col>
|
||||
</van-row>
|
||||
|
||||
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b switch {
|
||||
.van-switch {
|
||||
float: left;
|
||||
margin: 0 15px;
|
||||
}
|
||||
|
||||
@e text {
|
||||
display: inline-block;
|
||||
line-height: 32px;
|
||||
float: left;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
</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: false,
|
||||
switchStateTrue: true,
|
||||
switchStateFalse: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
updateState(newState) {
|
||||
const state = newState ? '打开' : '关闭';
|
||||
Dialog.confirm({
|
||||
title: '提醒',
|
||||
message: '是否' + state + '开关？'
|
||||
}).then((action) => {
|
||||
this.switchState2 = newState;
|
||||
}, (error) => {});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -1,136 +0,0 @@
|
||||
<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-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-tabs>
|
||||
|
||||
</example-block><example-block title="设置切换tab的动画时间">
|
||||
<van-tabs :duration="0.6">
|
||||
<van-tab title="选项一">内容一</van-tab>
|
||||
<van-tab title="选项二">内容二</van-tab>
|
||||
<van-tab title="选项三">内容三</van-tab>
|
||||
</van-tabs>
|
||||
|
||||
</example-block><example-block title="多于4个tab时">
|
||||
<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-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-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-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-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-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>
|
||||
@@ -1,40 +0,0 @@
|
||||
<template><section class="demo-tag"><h1 class="demo-title">Tag 标记</h1><example-block title="基础用法">
|
||||
<div class="tags-container">
|
||||
<van-tag>返现</van-tag>
|
||||
</div>
|
||||
<div class="tags-container">
|
||||
<van-tag type="danger">返现</van-tag>
|
||||
<van-tag type="success">四字标签</van-tag>
|
||||
<van-tag type="primary">一</van-tag>
|
||||
</div>
|
||||
|
||||
</example-block><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 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>
|
||||
|
||||
</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>
|
||||
@@ -1,86 +0,0 @@
|
||||
<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>
|
||||
@@ -1,25 +0,0 @@
|
||||
<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>
|
||||
@@ -1,73 +0,0 @@
|
||||
<template><section class="demo-waterfall"><h1 class="demo-title">Waterfall 瀑布流</h1><example-block title="基础用法">
|
||||
<p class="page-desc">当即将滚动到元素底部时，会自动加载更多</p>
|
||||
<div class="waterfall">
|
||||
<div v-waterfall-lower="loadMore" waterfall-disabled="isWaterfallDisabled" waterfall-offset="400">
|
||||
<div class="waterfall-item" v-for="(item, index) in list" :key="index" style="text-align: center;">
|
||||
{{ item }}
|
||||
</div>
|
||||
<van-loading v-if="loading" :type="'circle'" :color="'black'"></van-loading>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b waterfall {
|
||||
.waterfall {
|
||||
max-height: 360px;
|
||||
overflow: scroll;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
}
|
||||
.waterfall-item {
|
||||
line-height: 50px;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
background: #fff;
|
||||
}
|
||||
.page-desc {
|
||||
padding: 5px 0;
|
||||
line-height: 1.4;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
color: #666;
|
||||
}
|
||||
.van-loading {
|
||||
margin: 10px auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
</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;
|
||||
}, 2000);
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isWaterfallDisabled: function() {
|
||||
return this.loading || this.finished;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -1,7 +1,8 @@
|
||||
## Vant
|
||||
|
||||
一套基于`Vue.js 2.0`的Mobile组件库
|
||||
<br>A Vue.js 2.0 Mobile UI
|
||||
一套基于`Vue.js 2.0`的 Mobile 组件库
|
||||
|
||||
[查看业务组件库 Captain-UI](https://www.youzanyun.com/zanui/captain/component/quickstart)
|
||||
|
||||
### 安装
|
||||
|
||||
|
||||
@@ -1,40 +1,30 @@
|
||||
<template>
|
||||
<div class="app">
|
||||
<page-header></page-header>
|
||||
<div class="main-content">
|
||||
<div class="page-container clearfix">
|
||||
<side-nav :data="navConfig['zh-CN']" base="/component"></side-nav>
|
||||
<div class="page-content">
|
||||
<router-view></router-view>
|
||||
<footer-nav></footer-nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<page-footer></page-footer>
|
||||
<zan-doc :simulator="simulatorSrc" :config="config">
|
||||
<router-view></router-view>
|
||||
</zan-doc>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue';
|
||||
import 'highlight.js/styles/color-brewer.css';
|
||||
import navConfig from './nav.config.js';
|
||||
import SideNav from './components/side-nav';
|
||||
import DemoBlock from './components/demo-block';
|
||||
import FooterNav from './components/footer-nav';
|
||||
import PageHeader from './components/page-header';
|
||||
import PageFooter from './components/page-footer';
|
||||
|
||||
Vue.component('side-nav', SideNav);
|
||||
Vue.component('demo-block', DemoBlock);
|
||||
Vue.component('footer-nav', FooterNav);
|
||||
Vue.component('page-header', PageHeader);
|
||||
Vue.component('page-footer', PageFooter);
|
||||
import docConfig from './doc.config';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
navConfig: navConfig
|
||||
config: docConfig['zh-CN']
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
simulatorSrc() {
|
||||
const dir = this.$route.path.split('/').pop();
|
||||
if (dir === 'quickstart' || dir === 'changelog') {
|
||||
return '/zanui/vue/examples';
|
||||
} else {
|
||||
return `/zanui/vue/examples/component/${dir}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import navConfig from '../nav.config.js';
|
||||
import docConfig from '../doc.config.js';
|
||||
import MobileNav from './mobile-nav';
|
||||
|
||||
export default {
|
||||
@@ -21,7 +21,7 @@ export default {
|
||||
return {
|
||||
highlights: [],
|
||||
navState: [],
|
||||
data: navConfig['zh-CN'],
|
||||
data: docConfig['zh-CN'].nav,
|
||||
base: '/component'
|
||||
};
|
||||
},
|
||||
|
||||
@@ -1,130 +0,0 @@
|
||||
<template>
|
||||
<div class="footer-nav">
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
v-if="leftNav"
|
||||
class="footer-nav__link footer-nav__left"
|
||||
@click="handleNavClick('prev')">
|
||||
<van-icon name="arrow"></van-icon>
|
||||
<span>{{ leftNav.title }}</span>
|
||||
</a>
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
v-if="rightNav"
|
||||
class="footer-nav__link footer-nav__right"
|
||||
@click="handleNavClick('next')">
|
||||
<van-icon name="arrow"></van-icon>
|
||||
<span>{{ rightNav.title }}</span>
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import navConfig from '../nav.config.js';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentPath: null,
|
||||
nav: [],
|
||||
leftNav: null,
|
||||
rightNav: null
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
'$route.path'() {
|
||||
this.setNav();
|
||||
this.updateNav();
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
setNav() {
|
||||
let nav = navConfig['zh-CN'];
|
||||
for (let i = 0; i < nav.length; i++) {
|
||||
let navItem = nav[i];
|
||||
if (!navItem.groups) {
|
||||
this.nav.push(nav[i]);
|
||||
} else {
|
||||
for (let j = 0; j < navItem.groups.length; j++) {
|
||||
this.nav = this.nav.concat(navItem.groups[j].list);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
updateNav() {
|
||||
let baseUrl = '/component';
|
||||
let currentIndex;
|
||||
|
||||
this.currentPath = this.$route.path.slice(baseUrl.length);
|
||||
|
||||
for (let i = 0, len = this.nav.length; i < len; i++) {
|
||||
if (this.nav[i].path === this.currentPath) {
|
||||
currentIndex = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
this.leftNav = this.nav[currentIndex - 1];
|
||||
this.rightNav = this.nav[currentIndex + 1];
|
||||
},
|
||||
|
||||
handleNavClick(direction) {
|
||||
this.$router.push(`/component${ direction === 'prev' ? this.leftNav.path : this.rightNav.path }`);
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.setNav();
|
||||
this.updateNav();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@component-namespace footer {
|
||||
@b nav {
|
||||
padding: 24px 40px;
|
||||
overflow: hidden;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
|
||||
@e link {
|
||||
color: #3388FF;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
font-size: 20px;
|
||||
line-height: 1.5;
|
||||
|
||||
.van-icon {
|
||||
width: 20px;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
border: 2px solid #3388FF;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
margin-top: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
@e left {
|
||||
float: left;
|
||||
|
||||
.van-icon {
|
||||
float: left;
|
||||
transform: rotate(180deg);
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@e right {
|
||||
float: right;
|
||||
|
||||
.van-icon {
|
||||
float: right;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,59 +0,0 @@
|
||||
<template>
|
||||
<div class="page-footer">
|
||||
<ul class="page-footer__navs">
|
||||
<li class="page-footer__item">
|
||||
<a href="https://www.youzan.com/" class="page-footer__link" target="_blank">有赞官网</a>
|
||||
</li>
|
||||
<li class="page-footer__item">
|
||||
<a href="https://www.youzanyun.com/" class="page-footer__link" target="_blank">有赞云</a>
|
||||
</li>
|
||||
<li class="page-footer__item">
|
||||
<a href="https://job.youzan.com/" class="page-footer__link" target="_blank">加入我们</a>
|
||||
</li>
|
||||
</ul>
|
||||
<p class="page-footer__copyright">
|
||||
2012-{{ curYear }} © youzanyun.com - 浙公网安备 33010602004354号 增值电信业务经营许可证：浙B2-20140331 - 浙ICP备13037466号
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
curYear: (new Date()).getFullYear()
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@component-namespace page {
|
||||
@b footer {
|
||||
height: 72px;
|
||||
margin-top: 40px;
|
||||
background-color: #34383B;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
@e item {
|
||||
float: left;
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
@e link {
|
||||
display: block;
|
||||
color: #E5E5E5;
|
||||
font-size: 12px;
|
||||
line-height: 72px;
|
||||
}
|
||||
|
||||
@e copyright {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
line-height: 72px;
|
||||
margin-left: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,146 +0,0 @@
|
||||
<template>
|
||||
<div class="page-header">
|
||||
<div class="page-header__top">
|
||||
<h1 class="page-header__logo">
|
||||
<a href="https://www.youzanyun.com/zanui"></a>
|
||||
</h1>
|
||||
<ul class="page-header__navs">
|
||||
<li class="page-header__item">
|
||||
<a href="https://www.youzanyun.com/zanui" class="page-header__link">首页</a>
|
||||
</li>
|
||||
<li class="page-header__item">
|
||||
<a href="https://www.youzanyun.com/zanui/react" class="page-header__link">Zent - PC端</a>
|
||||
</li>
|
||||
<li class="page-header__item">
|
||||
<a href="https://www.youzanyun.com/zanui/vue" class="page-header__link page-header__link--active">Vant - 移动端</a>
|
||||
</li>
|
||||
<li class="page-header__item">
|
||||
<a href="https://github.com/youzan/zanui-weapp" class="page-header__link">ZanUi-WeApp - 微信小程序</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<ul class="page-header__subnavs" :class="{ 'page-header__subnavs--shadow': scrollTop > 0 }">
|
||||
<li class="page-header__item">
|
||||
<a href="https://www.youzanyun.com/zanui/vue" class="page-header__link page-header__link--active">基础组件</a>
|
||||
</li>
|
||||
<li class="page-header__item">
|
||||
<a href="https://www.youzanyun.com/zanui/captain" class="page-header__link">业务组件</a>
|
||||
</li>
|
||||
<li class="page-header__item">
|
||||
<span class="page-header__link">V{{ version }}</span>
|
||||
</li>
|
||||
<li class="page-header__item">
|
||||
<a href="https://github.com/youzan/vant" class="page-header__github" target="_blank"></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
version: window._global.version,
|
||||
scrollTop: 0
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
const _this = this;
|
||||
let timer;
|
||||
window.addEventListener('scroll', () => {
|
||||
clearTimeout(timer);
|
||||
const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
|
||||
timer = setTimeout(() => {
|
||||
_this.scrollTop = scrollTop;
|
||||
}, 500);
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@component-namespace page {
|
||||
@b header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
|
||||
@e top {
|
||||
overflow: hidden;
|
||||
height: 80px;
|
||||
background-color: #fbfbfb;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
|
||||
}
|
||||
|
||||
@e logo {
|
||||
float: left;
|
||||
|
||||
> a {
|
||||
display: block;
|
||||
width: 78px;
|
||||
height: 20px;
|
||||
background-image: url(https://img.yzcdn.cn/upload_files/2017/04/20/FjwR1mraVIqtHWb8YWDW_YzQ_Kh2.png);
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
margin: 30px 0 0 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@e navs {
|
||||
float: right;
|
||||
}
|
||||
|
||||
@e item {
|
||||
float: left;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
@e subnavs {
|
||||
line-height: 50px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background-color: #f2f2f2;
|
||||
position: relative;
|
||||
z-index: -1;
|
||||
|
||||
@m shadow {
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
|
||||
}
|
||||
|
||||
a,
|
||||
span {
|
||||
line-height: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
@e link {
|
||||
display: block;
|
||||
line-height: 80px;
|
||||
color: #333;
|
||||
font-size: 16px;
|
||||
margin: 0 20px;
|
||||
|
||||
&:hover {
|
||||
color: #3388FF;
|
||||
}
|
||||
|
||||
@m active {
|
||||
color: #3388FF;
|
||||
}
|
||||
}
|
||||
|
||||
@e github {
|
||||
display: inline-block;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
overflow: hidden;
|
||||
background-image: url(https://img.yzcdn.cn/upload_files/2017/03/30/Fil9peDfgzvk3kj-oFCsElS4FS1x.png);
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
margin: 14px 20px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,124 +0,0 @@
|
||||
<template>
|
||||
<div class="side-nav">
|
||||
<ul>
|
||||
<li class="nav-item" v-for="(item, index) in data" :key="index">
|
||||
<a href="javascript:void(0)" v-if="!item.path" @click="handleTitleClick(item)">{{item.name}}</a>
|
||||
<router-link
|
||||
v-else
|
||||
active-class="active"
|
||||
:to="base + item.path"
|
||||
exact
|
||||
v-text="item.title || item.name">
|
||||
</router-link>
|
||||
<ul class="pure-menu-list sub-nav" v-if="item.children">
|
||||
<li class="nav-item" v-for="(navItem, index) in item.children" :key="index">
|
||||
<router-link
|
||||
active-class="active"
|
||||
:to="base + navItem.path"
|
||||
v-text="navItem.title || navItem.name">
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
<template v-if="item.groups">
|
||||
<div class="nav-group" v-for="(group, index) in item.groups" :key="index">
|
||||
<div class="nav-group__title">{{group.groupName}}</div>
|
||||
<ul class="pure-menu-list">
|
||||
<template v-for="(navItem, index) in group.list">
|
||||
<li
|
||||
:key="index"
|
||||
class="nav-item"
|
||||
v-if="!navItem.disabled">
|
||||
<router-link
|
||||
active-class="active"
|
||||
:to="base + navItem.path"
|
||||
v-text="navItem.title">
|
||||
</router-link>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
data: Array,
|
||||
base: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleTitleClick(item) {
|
||||
const firstGroup = item.groups && item.groups[0];
|
||||
if (firstGroup && firstGroup.list && firstGroup.list.length !== 0) {
|
||||
return this.$router.replace(this.base + firstGroup.list[0].path);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="css">
|
||||
.side-nav {
|
||||
flex: 0 0 250px;
|
||||
box-sizing: border-box;
|
||||
padding: 40px 0;
|
||||
border-right: 1px solid #e5e5e5;
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
a {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
line-height: 40px;
|
||||
height: 40px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
position: relative;
|
||||
transition: all .3s;
|
||||
padding: 0 20px;
|
||||
|
||||
&.active {
|
||||
color: #3388FF;
|
||||
background-color: #F2F2F2;
|
||||
}
|
||||
}
|
||||
.nav-item {
|
||||
a {
|
||||
display: block;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
font-size: 14px;
|
||||
padding-left: 44px;
|
||||
|
||||
&:hover {
|
||||
color: #3388FF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav-group__title {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
padding-left: 28px;
|
||||
line-height: 26px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,181 @@
|
||||
/* eslint-disable */
|
||||
module.exports = {
|
||||
"zh-CN": {
|
||||
header: {
|
||||
'首页': 'https://www.youzanyun.com/zanui',
|
||||
'PC端': 'https://www.youzanyun.com/zanui/react',
|
||||
'移动端': 'https://www.youzanyun.com/zanui/vue',
|
||||
'微信小程序': 'https://github.com/youzan/zanui-weapp'
|
||||
},
|
||||
footer: {
|
||||
copyright: `2012-${(new Date()).getFullYear()} © youzanyun.com - 浙公网安备 33010602004354号 增值电信业务经营许可证：浙B2-20140331 - 浙ICP备13037466号`,
|
||||
nav: {
|
||||
'有赞官网': 'https://www.youzan.com/',
|
||||
'有赞云': 'http://www.youzanyun.com/zanui',
|
||||
'加入我们': 'https://job.youzan.com/'
|
||||
}
|
||||
},
|
||||
nav: [
|
||||
{
|
||||
"name": "开发指南",
|
||||
"groups": [
|
||||
{
|
||||
"list": [
|
||||
{
|
||||
"path": "/quickstart",
|
||||
"title": "快速上手",
|
||||
noExample: true
|
||||
},
|
||||
{
|
||||
"path": "/changelog",
|
||||
"title": "更新日志",
|
||||
noExample: true
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Vant组件",
|
||||
"showInMobile": true,
|
||||
"groups": [
|
||||
{
|
||||
"groupName": "基础组件",
|
||||
"list": [
|
||||
{
|
||||
"path": "/layout",
|
||||
"title": "Layout 布局"
|
||||
},
|
||||
{
|
||||
"path": "/button",
|
||||
"title": "Button 按钮"
|
||||
},
|
||||
{
|
||||
"path": "/icon",
|
||||
"title": "Icon 图标"
|
||||
},
|
||||
{
|
||||
"path": "/cell",
|
||||
"title": "Cell 单元格"
|
||||
},
|
||||
{
|
||||
"path": "/cell-swipe",
|
||||
"title": "Cell Swipe 滑动单元格"
|
||||
},
|
||||
{
|
||||
"path": "/progress",
|
||||
"title": "Progress 进度条"
|
||||
},
|
||||
{
|
||||
"path": "/card",
|
||||
"title": "Card 图文组件"
|
||||
},
|
||||
{
|
||||
"path": "/panel",
|
||||
"title": "Panel 面板"
|
||||
},
|
||||
{
|
||||
"path": "/loading",
|
||||
"title": "Loading 加载"
|
||||
},
|
||||
{
|
||||
"path": "/steps",
|
||||
"title": "Steps 步骤条"
|
||||
},
|
||||
{
|
||||
"path": "/tag",
|
||||
"title": "Tag 标记"
|
||||
},
|
||||
{
|
||||
"path": "/badge",
|
||||
"title": "Badge 徽章"
|
||||
},
|
||||
{
|
||||
"path": "/tab",
|
||||
"title": "Tab 标签"
|
||||
},
|
||||
{
|
||||
"path": "/popup",
|
||||
"title": "Popup 弹出菜单"
|
||||
},
|
||||
{
|
||||
"path": "/swipe",
|
||||
"title": "Swipe 轮播"
|
||||
},
|
||||
{
|
||||
"path": "/search",
|
||||
"title": "Search 搜索"
|
||||
},
|
||||
{
|
||||
"path": "/quantity",
|
||||
"title": "Quantity 数量选择"
|
||||
},
|
||||
{
|
||||
"path": "/waterfall",
|
||||
"title": "Waterfall 瀑布流"
|
||||
},
|
||||
{
|
||||
"path": "/image-preview",
|
||||
"title": "ImagePreview 图片预览"
|
||||
},
|
||||
{
|
||||
"path": "/lazyload",
|
||||
"title": "Lazyload 图片懒加载"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"groupName": "表单",
|
||||
"list": [
|
||||
{
|
||||
"path": "/switch",
|
||||
"title": "Switch 开关"
|
||||
},
|
||||
{
|
||||
"path": "/field",
|
||||
"title": "Field 输入框"
|
||||
},
|
||||
{
|
||||
"path": "/radio",
|
||||
"title": "Radio 单选框"
|
||||
},
|
||||
{
|
||||
"path": "/checkbox",
|
||||
"title": "Checkbox 复选框"
|
||||
},
|
||||
{
|
||||
"path": "/uploader",
|
||||
"title": "Uploader 图片上传"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"groupName": "操作反馈",
|
||||
"list": [
|
||||
{
|
||||
"path": "/actionsheet",
|
||||
"title": "Actionsheet 行动按钮"
|
||||
},
|
||||
{
|
||||
"path": "/toast",
|
||||
"title": "Toast 轻提示"
|
||||
},
|
||||
{
|
||||
"path": "/picker",
|
||||
"title": "Picker 选择器"
|
||||
},
|
||||
{
|
||||
"path": "/datetime-picker",
|
||||
"title": "Datetime Picker 时间选择"
|
||||
},
|
||||
{
|
||||
"path": "/dialog",
|
||||
"title": "Dialog 弹出框"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -1,21 +1,21 @@
|
||||
import Vue from 'vue';
|
||||
import VueRouter from 'vue-router';
|
||||
import App from './ExamplesApp';
|
||||
import navConfig from './nav.config.js';
|
||||
import routes from './router.config';
|
||||
import ZanUI from 'src/index';
|
||||
|
||||
import ZanDoc from 'zan-doc';
|
||||
import 'packages/vant-css/src/index.css';
|
||||
|
||||
import DemoList from './components/demo-list.vue';
|
||||
|
||||
Vue.use(ZanUI);
|
||||
Vue.use(ZanDoc);
|
||||
Vue.use(ZanUI.Lazyload, {
|
||||
lazyComponent: true
|
||||
});
|
||||
Vue.use(VueRouter);
|
||||
|
||||
const routesConfig = routes(navConfig, true);
|
||||
const routesConfig = routes(true);
|
||||
routesConfig.push({
|
||||
path: '/',
|
||||
component: DemoList.default || DemoList
|
||||
|
||||
+5
-2
@@ -1,10 +1,11 @@
|
||||
import Vue from 'vue';
|
||||
import VueRouter from 'vue-router';
|
||||
import App from './ExamplesDocsApp';
|
||||
import navConfig from './nav.config.js';
|
||||
import routes from './router.config';
|
||||
import ZanUI from 'src/index.js';
|
||||
import ZanDoc from 'zan-doc';
|
||||
import packageJson from '../../package.json';
|
||||
import DemoBlock from './components/demo-block';
|
||||
|
||||
const global = {
|
||||
version: packageJson.version
|
||||
@@ -22,11 +23,13 @@ function isMobile() {
|
||||
|
||||
Vue.use(VueRouter);
|
||||
Vue.use(ZanUI);
|
||||
Vue.use(ZanDoc);
|
||||
Vue.use(ZanUI.Lazyload, {
|
||||
lazyComponent: true
|
||||
});
|
||||
Vue.component('demo-block', DemoBlock);
|
||||
|
||||
const routesConfig = routes(navConfig);
|
||||
const routesConfig = routes();
|
||||
routesConfig.push({
|
||||
path: '/',
|
||||
redirect: '/component/quickstart'
|
||||
|
||||
@@ -1,163 +0,0 @@
|
||||
/* eslint-disable */
|
||||
module.exports = {
|
||||
"zh-CN": [
|
||||
{
|
||||
"name": "开发指南",
|
||||
"groups": [
|
||||
{
|
||||
"list": [
|
||||
{
|
||||
"path": "/quickstart",
|
||||
"title": "快速上手"
|
||||
},
|
||||
{
|
||||
"path": "/changelog",
|
||||
"title": "更新日志"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Vant组件",
|
||||
"showInMobile": true,
|
||||
"groups": [
|
||||
{
|
||||
"groupName": "基础组件",
|
||||
"list": [
|
||||
{
|
||||
"path": "/layout",
|
||||
"title": "Layout 布局"
|
||||
},
|
||||
{
|
||||
"path": "/button",
|
||||
"title": "Button 按钮"
|
||||
},
|
||||
{
|
||||
"path": "/icon",
|
||||
"title": "Icon 图标"
|
||||
},
|
||||
{
|
||||
"path": "/cell",
|
||||
"title": "Cell 单元格"
|
||||
},
|
||||
{
|
||||
"path": "/cell-swipe",
|
||||
"title": "Cell Swipe 滑动单元格"
|
||||
},
|
||||
{
|
||||
"path": "/progress",
|
||||
"title": "Progress 进度条"
|
||||
},
|
||||
{
|
||||
"path": "/card",
|
||||
"title": "Card 图文组件"
|
||||
},
|
||||
{
|
||||
"path": "/panel",
|
||||
"title": "Panel 面板"
|
||||
},
|
||||
{
|
||||
"path": "/loading",
|
||||
"title": "Loading 加载"
|
||||
},
|
||||
{
|
||||
"path": "/steps",
|
||||
"title": "Steps 步骤条"
|
||||
},
|
||||
{
|
||||
"path": "/tag",
|
||||
"title": "Tag 标记"
|
||||
},
|
||||
{
|
||||
"path": "/badge",
|
||||
"title": "Badge 徽章"
|
||||
},
|
||||
{
|
||||
"path": "/tab",
|
||||
"title": "Tab 标签"
|
||||
},
|
||||
{
|
||||
"path": "/popup",
|
||||
"title": "Popup 弹出菜单"
|
||||
},
|
||||
{
|
||||
"path": "/swipe",
|
||||
"title": "Swipe 轮播"
|
||||
},
|
||||
{
|
||||
"path": "/search",
|
||||
"title": "Search 搜索"
|
||||
},
|
||||
{
|
||||
"path": "/quantity",
|
||||
"title": "Quantity 数量选择"
|
||||
},
|
||||
{
|
||||
"path": "/waterfall",
|
||||
"title": "Waterfall 瀑布流"
|
||||
},
|
||||
{
|
||||
"path": "/image-preview",
|
||||
"title": "ImagePreview 图片预览"
|
||||
},
|
||||
{
|
||||
"path": "/lazyload",
|
||||
"title": "Lazyload 图片懒加载"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"groupName": "表单",
|
||||
"list": [
|
||||
{
|
||||
"path": "/switch",
|
||||
"title": "Switch 开关"
|
||||
},
|
||||
{
|
||||
"path": "/field",
|
||||
"title": "Field 输入框"
|
||||
},
|
||||
{
|
||||
"path": "/radio",
|
||||
"title": "Radio 单选框"
|
||||
},
|
||||
{
|
||||
"path": "/checkbox",
|
||||
"title": "Checkbox 复选框"
|
||||
},
|
||||
{
|
||||
"path": "/uploader",
|
||||
"title": "Uploader 图片上传"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"groupName": "操作反馈",
|
||||
"list": [
|
||||
{
|
||||
"path": "/actionsheet",
|
||||
"title": "Actionsheet 行动按钮"
|
||||
},
|
||||
{
|
||||
"path": "/toast",
|
||||
"title": "Toast 轻提示"
|
||||
},
|
||||
{
|
||||
"path": "/picker",
|
||||
"title": "Picker 选择器"
|
||||
},
|
||||
{
|
||||
"path": "/datetime-picker",
|
||||
"title": "Datetime Picker 时间选择"
|
||||
},
|
||||
{
|
||||
"path": "/dialog",
|
||||
"title": "Dialog 弹出框"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -1,6 +1,7 @@
|
||||
const registerRoute = (navConfig, isExample) => {
|
||||
const navs = require('./doc.config')['zh-CN'].nav;
|
||||
|
||||
const registerRoute = (isExample) => {
|
||||
let route = [];
|
||||
let navs = navConfig['zh-CN'];
|
||||
navs.forEach(nav => {
|
||||
if (isExample && !nav.showInMobile) {
|
||||
return;
|
||||
|
||||
Reference in New Issue
Block a user