alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

add auto generate example js

Browse Source
This commit is contained in:
cookfront
2017-03-06 18:56:23 +08:00
parent b388aeaa02
commit 6b825e0718
39 changed files with 639 additions and 779 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/examples/badge.vue
+12 -18
View File
@@ -1,18 +1,12 @@
<template>
<div class="page-badge">
<h1 class="page-title">Badge</h1>
<h2 class="page-sub-title">基础用法</h2>
<zan-badge-group active-key="2">
<zan-badge mark="0" title="热销榜" info="8" url="http://baidu.com"></zan-badge>
<zan-badge mark="1" title="花式寿司" info="99"></zan-badge>
<zan-badge mark="2" title="火炽寿司"></zan-badge>
<zan-badge mark="3" title="手握寿司" info="199"></zan-badge>
</zan-badge-group>
</div>
</template>
<style>
.page-badge {
padding: 0 15px;
}
</style>
<template><section class="demo-badge"><h1 class="demo-title">badge</h1><example-block title="基础用法">
<zan-badge-group active-key="2">
<zan-badge mark="0" title="热销榜" info="8" url="http://baidu.com"></zan-badge>
<zan-badge mark="1" title="花式寿司" info="99"></zan-badge>
<zan-badge mark="2" title="火炽寿司"></zan-badge>
<zan-badge mark="3" title="手握寿司" info="199"></zan-badge>
</zan-badge-group>
</example-block></section></template>
<script>
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
docs/examples/button.vue
+70 -71
View File
@@ -1,82 +1,81 @@
<template>
<div class="page-button">
<h1 class="page-title">Button</h1>
<h2 class="page-sub-title">按钮功能</h2>
<zan-row>
<zan-col span="24">
<zan-button block>default</zan-button>
</zan-col>
<zan-col span="24">
<zan-button type="primary" block>primary</zan-button>
</zan-col>
<zan-col span="24">
<zan-button type="danger" block>danger</zan-button>
</zan-col>
</zan-row>
<template><section class="demo-button"><h1 class="demo-title">button</h1><example-block title="按钮功能">
<zan-row>
<zan-col span="24">
<zan-button block="">default</zan-button>
</zan-col>
<zan-col span="24">
<zan-button type="primary" block="">primary</zan-button>
</zan-col>
<zan-col span="24">
<zan-button type="danger" block="">danger</zan-button>
</zan-col>
</zan-row>
<h2 class="page-sub-title">禁用状态</h2>
<zan-row>
<zan-col span="24">
<zan-button disabled block>diabled</zan-button>
</zan-col>
</zan-row>
</example-block><example-block title="禁用状态">
<zan-row>
<zan-col span="24">
<zan-button disabled block="">diabled</zan-button>
</zan-col>
</zan-row>
<h2 class="page-sub-title">按钮尺寸</h2>
<zan-row>
<zan-col span="24">
<zan-button size="large">large</zan-button>
</zan-col>
</zan-row>
<zan-row gutter="10">
<zan-col span="8">
<zan-button type="primary" block>normal</zan-button>
</zan-col>
<zan-col span="8">
<zan-button size="small" block>small</zan-button>
</zan-col>
<zan-col span="8">
<zan-button size="mini" block>mini</zan-button>
</zan-col>
</zan-row>
</example-block><example-block title="按钮尺寸">
<zan-row>
<zan-col span="24">
<zan-button size="large">large</zan-button>
</zan-col>
</zan-row>
<zan-row gutter="10">
<zan-col span="8">
<zan-button type="primary" block="">normal</zan-button>
</zan-col>
<zan-col span="8">
<zan-button size="small" block="">small</zan-button>
</zan-col>
<zan-col span="8">
<zan-button size="mini" block="">mini</zan-button>
</zan-col>
</zan-row>
<h2 class="page-sub-title">自定义按钮标签</h2>
<zan-row>
<zan-col span="24">
<zan-button tag="a" type="primary" href="https://www.youzan.com" target="_blank">a标签按钮</zan-button>
</zan-col>
</zan-row>
</example-block><example-block title="自定义按钮标签">
<zan-row>
<zan-col span="24">
<zan-button tag="a" type="primary" href="https://www.youzan.com" target="_blank">a标签按钮</zan-button>
</zan-col>
</zan-row>
<h2 class="page-sub-title">loading</h2>
<zan-row>
<zan-col span="24">
<zan-button type="primary" loading block>loading</zan-button>
</zan-col>
<zan-col span="24">
<zan-button loading block></zan-button>
</zan-col>
</zan-row>
</example-block><example-block title="loading按钮">
<zan-row>
<zan-col span="24">
<zan-button type="primary" loading="" block="">loading</zan-button>
</zan-col>
<zan-col span="24">
<zan-button loading="" block=""></zan-button>
</zan-col>
</zan-row>
<h2 class="page-sub-title">button group</h2>
<div class="button-group">
<zan-button type="primary" size="small">确认付款</zan-button>
<zan-button size="small">确认收货</zan-button>
<zan-button size="small">取消订单</zan-button>
</div>
</div>
</template>
</example-block><example-block title="button group">
<div class="button-group">
<zan-button type="primary" size="small">确认付款</zan-button>
<zan-button size="small">确认收货</zan-button>
<zan-button size="small">取消订单</zan-button>
</div>
</example-block></section></template>
<style>
@component-namespace page {
@b button {
@component-namespace demo {
@b button {
.zan-row {
padding: 0 20px;
}
.zan-col {
margin-bottom: 10px;
}
.button-group {
font-size: 0;
padding: 0 20px;
}
}
@component-namespace zan {
@b col {
margin-bottom: 10px;
}
}
.button-group {
font-size: 0;
}
}
</style>
<script>
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
docs/examples/card.vue
+21 -34
View File
@@ -1,37 +1,24 @@
<template>
<div class="page-card">
<h1 class="page-title">Card</h1>
<template><section class="demo-card"><h1 class="demo-title">card</h1><example-block title="基础用法">
<zan-card title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余" desc="描述" thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
</zan-card>
<h2 class="page-sub-title">基础用法</h2>
<zan-card
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
desc="描述"
thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
</zan-card>
<h2 class="page-sub-title">高级用法</h2>
<zan-card
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
desc="商品SKU1，商品SKU2"
thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
<div class="zan-card__row" slot="title">
<h4 class="zan-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
<span class="zan-card__price">¥ 2.00</span>
</div>
<div class="zan-card__row" slot="desc">
<h4 class="zan-card__desc">商品sku</h4>
<span class="zan-card__num">x 2</span>
</div>
<div class="zan-card__footer" slot="footer">
<zan-button size="mini">按钮一</zan-button>
<zan-button size="mini">按钮二</zan-button>
</div>
</zan-card>
</example-block><example-block title="高级用法">
<zan-card title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余" desc="商品SKU1，商品SKU2" thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
<div class="zan-card__row" slot="title">
<h4 class="zan-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
<span class="zan-card__price">¥ 2.00</span>
</div>
</template>
<div class="zan-card__row" slot="desc">
<h4 class="zan-card__desc">商品sku</h4>
<span class="zan-card__num">x 2</span>
</div>
<div class="zan-card__footer" slot="footer">
<zan-button size="mini">按钮一</zan-button>
<zan-button size="mini">按钮二</zan-button>
</div>
</zan-card>
<style>
.page-sub-title {
padding: 15px;
}
</style>
</example-block></section></template>
<script>
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
docs/examples/cell.vue
+40 -49
View File
@@ -1,45 +1,48 @@
<template>
<div class="page-cell">
<h1 class="page-title">Cell</h1>
<h2 class="page-sub-title">基础用法</h2>
<zan-cell-group>
<zan-cell title="单元格1" value="单元格1内容"></zan-cell>
<zan-cell title="单元格2" value="单元格2内容"></zan-cell>
</zan-cell-group>
<template><section class="demo-cell"><h1 class="demo-title">cell</h1><example-block title="基础用法">
<zan-cell-group>
<zan-cell title="单元格1" value="单元格1内容"></zan-cell>
<zan-cell title="单元格2" value="单元格2内容"></zan-cell>
</zan-cell-group>
<h2 class="page-sub-title">标题带描述信息</h2>
<zan-cell-group>
<zan-cell title="单元格1" label="描述信息" is-link url="javascript:void(0)" @click="handleClick"></zan-cell>
<zan-cell title="单元格2" label="描述信息"></zan-cell>
</zan-cell-group>
</example-block><example-block title="标题带描述信息">
<zan-cell-group>
<zan-cell title="单元格1" label="描述信息" is-link="" url="javascript:void(0)" @click="handleClick"></zan-cell>
<zan-cell title="单元格2" label="描述信息"></zan-cell>
</zan-cell-group>
<h2 class="page-sub-title">带图标</h2>
<zan-cell-group>
<zan-cell title="起码运动馆" icon="home"></zan-cell>
<zan-cell title="线下门店" icon="location"></zan-cell>
</zan-cell-group>
</example-block><example-block title="带图标">
<zan-cell-group>
<zan-cell title="起码运动馆" icon="home"></zan-cell>
<zan-cell title="线下门店" icon="location"></zan-cell>
</zan-cell-group>
<h2 class="page-sub-title">可点击的链接</h2>
<zan-cell-group>
<zan-cell title="起码运动馆" value="进入店铺" icon="home" url="http://youzan.com" is-link></zan-cell>
<zan-cell title="线下门店" icon="location" url="http://youzan.com" is-link></zan-cell>
</zan-cell-group>
</example-block><example-block title="可点击的链接">
<zan-cell-group>
<zan-cell title="起码运动馆" value="进入店铺" icon="home" url="http://youzan.com" is-link=""></zan-cell>
<zan-cell title="线下门店" icon="location" url="http://youzan.com" is-link=""></zan-cell>
</zan-cell-group>
<h2 class="page-sub-title">高级用法</h2>
<zan-cell-group>
<zan-cell value="进入店铺" icon="home" url="http://youzan.com" is-link>
<template slot="title">
<span class="zan-cell-text">起码运动馆</span>
<img src="//su.yzcdn.cn/v2/image/account/icon_guan_160421.png" class="official-img">
</template>
</zan-cell>
<zan-cell title="线下门店" icon="location" url="http://youzan.com" is-link></zan-cell>
</zan-cell-group>
</div>
</template>
</example-block><example-block title="高级用法">
<zan-cell-group>
<zan-cell value="进入店铺" icon="home" url="http://youzan.com" is-link="">
<template slot="title">
<span class="zan-cell-text">起码运动馆</span>
<img src="//su.yzcdn.cn/v2/image/account/icon_guan_160421.png" class="official-img">
</template>
</zan-cell>
<zan-cell title="线下门店" icon="location" url="http://youzan.com" is-link=""></zan-cell>
</zan-cell-group>
</example-block></section></template>
<style>
.official-img {
width: 31px;
vertical-align: middle;
border: 0;
}
</style>
<script>
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
export default {
methods: {
handleClick() {
@@ -47,16 +50,4 @@ export default {
}
}
};
</script>
<style>
.official-img {
width: 31px;
vertical-align: middle;
border: 0;
}
.page-sub-title {
padding: 25px 15px;
}
</style>
</script>
docs/examples/checkbox.vue
+52 -38
View File
@@ -1,38 +1,62 @@
<template>
<div class="page-checkbox">
<h1 class="page-title">Checkbox</h1>
<template><section class="demo-checkbox"><h1 class="demo-title">checkbox</h1><example-block title="基础用法">
<div class="zan-checkbox-wrapper">
<zan-checkbox v-model="checkbox1">复选框1</zan-checkbox>
</div>
<div class="checkbox-demo-wrapper">
<h2 class="page-sub-title">基础用法</h2>
<zan-checkbox v-model="checkbox1">复选框1</zan-checkbox>
<h2 class="page-sub-title">禁用状态</h2>
<zan-checkbox v-model="checkbox2" disabled>复选框2</zan-checkbox>
<h2 class="page-sub-title">Checkbox组</h2>
<zan-checkbox-group v-model="result">
<zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
</zan-checkbox-group>
</example-block><example-block title="禁用状态">
<div class="zan-checkbox-wrapper">
<zan-checkbox v-model="checkbox2">复选框2</zan-checkbox>
</div>
<h2 class="page-sub-title">禁用Checkbox组</h2>
<zan-checkbox-group v-model="result" disabled>
<zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
</zan-checkbox-group>
<h2 class="page-sub-title">与Cell组件一起使用</h2>
</div>
<zan-checkbox-group v-model="result">
<zan-cell-group>
<zan-cell v-for="item in list">
<zan-checkbox :name="item">复选框{{item}}</zan-checkbox>
</zan-cell>
</zan-cell-group>
</zan-checkbox-group>
</div>
</template>
</example-block><example-block title="Checkbox组">
<div class="zan-checkbox-wrapper">
<zan-checkbox-group v-model="result">
<zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
</zan-checkbox-group>
</div>
</example-block><example-block title="禁用Checkbox组">
<div class="zan-checkbox-wrapper">
<zan-checkbox-group v-model="result" disabled>
<zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
</zan-checkbox-group>
</div>
</example-block><example-block title="与Cell组件一起使用">
<zan-checkbox-group v-model="result">
<zan-cell-group>
<zan-cell v-for="item in list">
<zan-checkbox :name="item">复选框{{item}}</zan-checkbox>
</zan-cell>
</zan-cell-group>
</zan-checkbox-group>
</example-block></section></template>
<style>
@component-namespace demo {
@b checkbox {
.zan-checkbox-wrapper {
padding: 0 20px;
.zan-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 {
@@ -53,14 +77,4 @@ export default {
}
}
};
</script>
<style>
.checkbox-demo-wrapper {
padding: 0 15px;
.zan-checkbox {
margin: 10px 0;
}
}
</style>
</script>
docs/examples/dialog.vue
+7 -24
View File
@@ -1,19 +1,14 @@
<template>
<div class="page-dialog">
<h1 class="page-title">Dialog</h1>
<template><section class="demo-dialog"><h1 class="demo-title">dialog</h1><example-block title="基础用法">
<zan-button @click="handleAlertClick">alert</zan-button>
<div class="zan-button-1">
<zan-button @click="handleAlertClick">点击我打开alert提示框</zan-button>
</div>
<zan-button @click="handleConfirmClick">confirm</zan-button>
<div class="zan-button-1">
<zan-button @click="handleConfirmClick">点击我打开confirm提示框</zan-button>
</div>
</div>
</template>
</example-block></section></template>
<script>
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
import { Dialog } from 'src/index';
export default {
@@ -39,16 +34,4 @@ export default {
}
}
};
</script>
<style>
@component-namespace page {
@b dialog {
padding: 0 15px;
.zan-button-1 {
margin-bottom: 10px;
}
}
}
</style>
</script>
docs/examples/field.vue
+16 -39
View File
@@ -1,44 +1,21 @@
<template>
<div class="page-field">
<h1 class="page-title">Field</h1>
<template><section class="demo-field"><h1 class="demo-title">field</h1><example-block title="基础用法">
<zan-cell-group>
<zan-field type="text" label="用户名：" placeholder="请输入用户名"></zan-field>
<zan-field type="password" label="密码：" placeholder="请输入密码"></zan-field>
<zan-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍"></zan-field>
</zan-cell-group>
<h2 class="page-sub-title">基础用法</h2>
<zan-cell-group>
<zan-field type="text" label="用户名：" placeholder="请输入用户名"></zan-field>
<zan-field type="password" label="密码：" placeholder="请输入密码"></zan-field>
<zan-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍"></zan-field>
</zan-cell-group>
</example-block><example-block title="无label的输入框">
<zan-cell-group>
<zan-field type="text" placeholder="请输入用户名"></zan-field>
</zan-cell-group>
<h2 class="page-sub-title">无label的输入框</h2>
<zan-cell-group>
<zan-field type="text" placeholder="请输入用户名"></zan-field>
</zan-cell-group>
</example-block><example-block title="监听change事件">
<zan-cell-group>
<zan-field type="text" label="用户名：" placeholder="请输入用户名" @change="handleChange"></zan-field>
</zan-cell-group>
<h2 class="page-sub-title">监听change事件</h2>
<zan-cell-group>
<zan-field type="text" label="用户名：" placeholder="请输入用户名" @change="handleChange"></zan-field>
</zan-cell-group>
</div>
</template>
</example-block></section></template>
<script>
export default {
data() {
return {
name: ''
};
},
methods: {
handleChange() {
console.log(this.name);
}
}
};
</script>
<style>
.page-sub-title {
padding: 20px 15px;
}
</style>
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
docs/examples/image-preview.vue
+2 -28
View File
@@ -1,30 +1,4 @@
<template>
<div class="page-image-pewview">
<h1 class="page-title">Image Preview</h1>
<h2 class="page-sub-title">基础用法</h2>
<zan-button @click="previewImage">click me</zan-button>
<zan-button @click="previewImage2">click me</zan-button>
</div>
</template>
<template><section class="demo-image-preview"><h1 class="demo-title">image-preview</h1></section></template>
<script>
import { ImagePreview } from 'src/index';
export default {
data() {
return {
preview: true
};
},
methods: {
previewImage() {
ImagePreview('https://img.yzcdn.cn/upload_files/2017/03/03/FjVBWm29JBob2gj9RC86MOD38RNf.jpg');
},
previewImage2() {
ImagePreview('https://img.yzcdn.cn/upload_files/2017/03/03/FseigsLj7DceULRKWhXsIsrkq1vT.jpg');
}
}
};
</script>
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
docs/examples/layout.vue
View File
docs/examples/loading.vue
+24 -24
View File
@@ -1,28 +1,26 @@
<template>
<div class="page-loading">
<h1 class="page-title">Loading</h1>
<h2 class="page-sub-title">渐变深色spinner</h2>
<div class="page-loading__example">
<zan-loading class="some-customized-class"></zan-loading>
</div>
<h2 class="page-sub-title">渐变浅色spinner</h2>
<div class="page-loading__example page-loading__example--with-bg">
<zan-loading class="some-customized-class" :color="'white'"></zan-loading>
</div>
<h2 class="page-sub-title">单色spinner</h2>
<div class="page-loading__example">
<zan-loading class="some-customized-class" :type="'circle'" :color="'white'"></zan-loading>
</div>
<h2 class="page-sub-title">单色spinner</h2>
<div class="page-loading__example">
<zan-loading class="some-customized-class" :type="'circle'" :color="'black'"></zan-loading>
</div>
<template><section class="demo-loading"><h1 class="demo-title">loading</h1><example-block title="基础用法">
<div class="demo-loading">
<h2 class="demo-sub-title">渐变深色spinner</h2>
<div class="demo-loading__example">
<zan-loading class="some-customized-class"></zan-loading>
</div>
</template>
<h2 class="demo-sub-title">渐变浅色spinner</h2>
<div class="demo-loading__example demo-loading__example--with-bg">
<zan-loading class="some-customized-class" :color="'white'"></zan-loading>
</div>
<h2 class="demo-sub-title">单色spinner</h2>
<div class="demo-loading__example">
<zan-loading class="some-customized-class" :type="'circle'" :color="'white'"></zan-loading>
</div>
<h2 class="demo-sub-title">单色spinner</h2>
<div class="demo-loading__example">
<zan-loading class="some-customized-class" :type="'circle'" :color="'black'"></zan-loading>
</div>
</div>
</example-block></section></template>
<style>
.page-loading__example{
.demo-loading__example{
width: 30px;
height: 30px;
padding: 20px;
@@ -31,11 +29,13 @@
border: 1px solid transparent;
}
.page-loading__example--with-bg {
.demo-loading__example--with-bg {
background-color: rgba(0, 0, 0, 0.5);
}
.page-loading {
.demo-loading {
padding: 0 20px;
}
</style>
<script>
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
docs/examples/panel.vue
+56 -71
View File
@@ -1,80 +1,65 @@
<template>
<div class="page-panel">
<h1 class="page-title">Panel</h1>
<template><section class="demo-panel"><h1 class="demo-title">panel</h1><example-block title="基础用法">
<zan-panel title="标题" desc="标题描述" status="状态">
<div class="panel-content">
panel内容
</div>
</zan-panel>
<h2 class="page-sub-title">基础用法</h2>
<zan-panel title="标题" desc="标题描述" status="状态">
<zan-card
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
desc="商品SKU1，商品SKU2"
thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
<div class="zan-card__row" slot="title">
<h4 class="zan-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
<span class="zan-card__price">¥ 2.00</span>
</div>
<div class="zan-card__row" slot="desc">
<h4 class="zan-card__desc">商品sku</h4>
<span class="zan-card__num">x 2</span>
</div>
<div class="zan-card__footer" slot="footer">
<zan-button size="mini">按钮一</zan-button>
<zan-button size="mini">按钮二</zan-button>
</div>
</zan-card>
<div class="zan-panel-sum">
合计：<span>¥ 1999.90</span>
</div>
</zan-panel>
<h2 class="page-sub-title">高级用法</h2>
<zan-panel title="标题" desc="标题描述" status="状态">
<zan-card
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
desc="商品SKU1，商品SKU2"
thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
<div class="zan-card__row" slot="title">
<h4 class="zan-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
<span class="zan-card__price">¥ 2.00</span>
</div>
<div class="zan-card__row" slot="desc">
<h4 class="zan-card__desc">商品sku</h4>
<span class="zan-card__num">x 2</span>
</div>
<div class="zan-card__footer" slot="footer">
<zan-button size="mini">按钮一</zan-button>
<zan-button size="mini">按钮二</zan-button>
</div>
</zan-card>
<div class="zan-panel-sum">
合计：<span>¥ 1999.90</span>
</div>
<div class="zan-panel-buttons" slot="footer">
<zan-button size="small">按钮一</zan-button>
<zan-button size="small" type="danger">按钮二</zan-button>
</div>
</zan-panel>
</div>
</template>
</example-block><example-block title="高级用法">
<zan-panel title="标题" desc="标题描述" status="状态">
<zan-card title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余" desc="商品SKU1，商品SKU2" thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
<div class="zan-card__row" slot="title">
<h4 class="zan-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
<span class="zan-card__price">¥ 2.00</span>
</div>
<div class="zan-card__row" slot="desc">
<h4 class="zan-card__desc">商品sku</h4>
<span class="zan-card__num">x 2</span>
</div>
<div class="zan-card__footer" slot="footer">
<zan-button size="mini">按钮一</zan-button>
<zan-button size="mini">按钮二</zan-button>
</div>
</zan-card>
<div class="zan-panel-sum">
合计：<span>¥ 1999.90</span>
</div>
<div class="zan-panel-buttons" slot="footer">
<zan-button size="small">按钮一</zan-button>
<zan-button size="small" type="danger">按钮二</zan-button>
</div>
</zan-panel>
</example-block></section></template>
<style>
.zan-panel-sum {
background: #fff;
text-align: right;
font-size: 14px;
color: #333;
line-height: 30px;
padding-right: 15px;
@component-namespace demo {
@b panel {
.zan-panel-sum {
background: #fff;
text-align: right;
font-size: 14px;
color: #333;
line-height: 30px;
padding-right: 15px;
span {
color: red;
}
}
span {
color: red;
}
}
.zan-panel-buttons {
text-align: right;
.zan-panel-buttons {
text-align: right;
.zan-button {
margin-left: 5px;
.zan-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>
docs/examples/picker.vue
+5 -8
View File
@@ -1,13 +1,10 @@
<template>
<div class="page-picker">
<h1 class="page-title">Picker</h1>
<template><section class="demo-picker"><h1 class="demo-title">picker</h1><example-block title="基础用法">
<zan-picker :columns="pickerColumns" @change="handlePickerChange"></zan-picker>
<h2 class="page-sub-title">基础用法</h2>
<zan-picker :columns="pickerColumns" @change="handlePickerChange"></zan-picker>
</div>
</template>
</example-block></section></template>
<script>
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
const citys = {
'浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
'福建': ['福州', '厦门', '莆田', '三明', '泉州', '漳州', '南平', '龙岩', '宁德'],
@@ -36,4 +33,4 @@ export default {
}
}
};
</script>
</script>
docs/examples/popup.vue
+29 -87
View File
@@ -1,93 +1,35 @@
<template>
<div class="page-popup">
<h1 class="page-title">Popup</h1>
<template><section class="demo-popup"><h1 class="demo-title">popup</h1><example-block title="基础用法">
<div class="zan-button-1">
<zan-button @click="popupShow1 = true">从下方弹出popup</zan-button>
</div>
<zan-popup v-model="popupShow1" position="bottom" class="zan-popup-1">
xxxx
</zan-popup>
<h2 class="page-sub-title">基础用法</h2>
<div class="zan-button-1">
<zan-button @click="popupShow1 = true">从下方弹出popup</zan-button>
</div>
<zan-popup v-model="popupShow1" position="bottom" class="zan-popup-1">
xxxx
</zan-popup>
<div class="zan-button-1">
<zan-button @click="popupShow2 = true">从上方方弹出popup</zan-button>
</div>
<zan-popup v-model="popupShow2" position="top" class="zan-popup-2" :overlay="false">
更新成功
</zan-popup>
<div class="zan-button-1">
<zan-button @click="popupShow2 = true">从上方方弹出popup</zan-button>
</div>
<zan-popup v-model="popupShow2" position="top" class="zan-popup-2" :overlay="false">
更新成功
</zan-popup>
<div class="zan-button-1">
<zan-button @click="popupShow3 = true">从右方弹出popup</zan-button>
</div>
<zan-popup v-model="popupShow3" position="right" class="zan-popup-3" :overlay="false">
<zan-button @click.native="popupShow3 = false">关闭 popup</zan-button>
</zan-popup>
<div class="zan-button-1">
<zan-button @click="popupShow3 = true">从右方弹出popup</zan-button>
</div>
<zan-popup v-model="popupShow3" position="right" class="zan-popup-3" :overlay="false">
<zan-button @click.native="popupShow3 = false">关闭 popup</zan-button>
</zan-popup>
<div class="zan-button-1">
<zan-button @click="popupShow4 = true">从中间弹出popup</zan-button>
</div>
<zan-popup v-model="popupShow4" transition="popup-fade" class="zan-popup-4">
一些内容
</zan-popup>
<div class="zan-button-1">
<zan-button @click="popupShow4 = true">从中间弹出popup</zan-button>
</div>
<zan-popup v-model="popupShow4" transition="popup-fade" class="zan-popup-4">
一些内容
</zan-popup>
</div>
</template>
</example-block></section></template>
<script>
export default {
data() {
return {
popupShow1: false,
popupShow2: false,
popupShow3: false,
popupShow4: false
}
},
watch: {
popupShow2(val) {
if (val) {
setTimeout(() => {
this.popupShow2 = false;
}, 2000);
}
}
}
};
</script>
<style>
.zan-popup-1 {
width: 100%;
height: 200px;
}
.zan-popup-2 {
width: 100%;
line-height: 44px;
background-color: rgba(0, 0, 0, 0.701961);
text-align: center;
color: #fff;
}
.zan-popup-3 {
width: 100%;
height: 100%;
background-color: #fff;
}
.zan-popup-4 {
width: 50%;
height: 200px;
background: #fff;
border-radius: 10px;
}
.page-popup .zan-button-1 {
margin-bottom: 10px;
}
.page-sub-title {
padding: 20px 15px;
}
</style>
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
docs/examples/radio.vue
+45 -41
View File
@@ -1,41 +1,55 @@
<template>
<div class="page-radio">
<h1 class="page-title">Radio</h1>
<template><section class="demo-radio"><h1 class="demo-title">radio</h1><example-block title="基础用法">
<div class="zan-radios">
<zan-radio name="1" v-model="radio1">单选框1</zan-radio>
<zan-radio name="2" v-model="radio1">单选框2</zan-radio>
</div>
<div class="radio-demo-wrapper">
<h2 class="page-sub-title">基础用法</h2>
<zan-radio name="1" v-model="radio1">单选框1</zan-radio>
<zan-radio name="2" v-model="radio1">单选框2</zan-radio>
<h2 class="page-sub-title">禁用状态</h2>
<zan-radio name="1" v-model="radio2" disabled>未选中禁用</zan-radio>
<zan-radio name="2" v-model="radio2" disabled>选中且禁用</zan-radio>
<h2 class="page-sub-title">radio组</h2>
<zan-radio-group v-model="radio3">
<zan-radio name="1">单选框1</zan-radio>
<zan-radio name="2">单选框2</zan-radio>
</zan-radio-group>
</example-block><example-block title="禁用状态">
<div class="zan-radios">
<zan-radio name="1" v-model="radio2" disabled>未选中禁用</zan-radio>
<zan-radio name="2" v-model="radio2" disabled>选中且禁用</zan-radio>
</div>
<h2 class="page-sub-title">禁用radio组</h2>
<zan-radio-group v-model="radio3" disabled>
<zan-radio name="1">单选框1</zan-radio>
<zan-radio name="2">单选框2</zan-radio>
</zan-radio-group>
<h2 class="page-sub-title">与Cell组件一起使用</h2>
</div>
<zan-radio-group v-model="radio4">
<zan-cell-group>
<zan-cell><zan-radio name="1">单选框1</zan-radio></zan-cell>
<zan-cell><zan-radio name="2">单选框2</zan-radio></zan-cell>
</zan-cell-group>
</zan-radio-group>
</div>
</template>
</example-block><example-block title="radio组">
<div class="zan-radios">
<zan-radio-group v-model="radio3">
<zan-radio name="1">单选框1</zan-radio>
<zan-radio name="2">单选框2</zan-radio>
</zan-radio-group>
</div>
</example-block><example-block title="与Cell组件一起使用">
<zan-radio-group v-model="radio4">
<zan-cell-group>
<zan-cell><zan-radio name="1">单选框1</zan-radio></zan-cell>
<zan-cell><zan-radio name="2">单选框2</zan-radio></zan-cell>
</zan-cell-group>
</zan-radio-group>
</example-block></section></template>
<style>
@component-namespace demo {
@b radio {
.zan-radios {
padding: 0 20px;
.zan-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 {
@@ -46,14 +60,4 @@ export default {
};
}
};
</script>
<style>
.radio-demo-wrapper {
padding: 0 15px;
.zan-radio {
margin: 10px 0;
}
}
</style>
</script>
docs/examples/search.vue
+8 -17
View File
@@ -1,4 +1,11 @@
<template><section class="demo-search"><h1 class="demo-title">search</h1><example-block title="基础用法">
<zan-search placeholder="商品名称" @search="goSearch"></zan-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) {
@@ -6,20 +13,4 @@ export default {
}
}
};
</script>
<template>
<div class="page-search">
<h1 class="page-title">Search</h1>
<h2 class="page-sub-title">基础用法</h2>
<zan-search placeholder="商品名称" @search="goSearch">
</zan-search>
</div>
</template>
<style>
.page-badge {
padding: 0 15px;
}
</style>
</script>
docs/examples/steps.vue
+33 -37
View File
@@ -1,27 +1,39 @@
<template>
<div class="page-steps">
<h1 class="page-title">Steps</h1>
<template><section class="demo-steps"><h1 class="demo-title">steps</h1><example-block title="基础用法">
<zan-steps :active="active" icon="certificate" icon-class="steps-success" title="等待商家发货" description="等待商家发货等待商家发货等待商家发货等待商家发货等待商家发货">
<zan-step>买家下单</zan-step>
<zan-step>商家接单</zan-step>
<zan-step>买家提货</zan-step>
<zan-step>交易完成</zan-step>
</zan-steps>
<h2 class="page-sub-title">基础用法</h2>
<zan-steps :active="active" icon="certificate" icon-class="steps-success" title="等待商家发货" description="等待商家发货等待商家发货等待商家发货等待商家发货等待商家发货">
<zan-step>买家下单</zan-step>
<zan-step>商家接单</zan-step>
<zan-step>买家提货</zan-step>
<zan-step>交易完成</zan-step>
</zan-steps>
<zan-button @click="nextStep">下一步</zan-button>
<zan-button @click="nextStep">下一步</zan-button>
<h2 class="page-sub-title">只显示步骤条</h2>
<zan-steps :active="active">
<zan-step>买家下单</zan-step>
<zan-step>商家接单</zan-step>
<zan-step>买家提货</zan-step>
<zan-step>交易完成</zan-step>
</zan-steps>
</div>
</template>
</example-block><example-block title="只显示步骤条">
<zan-steps :active="active">
<zan-step>买家下单</zan-step>
<zan-step>商家接单</zan-step>
<zan-step>买家提货</zan-step>
<zan-step>交易完成</zan-step>
</zan-steps>
</example-block></section></template>
<style>
@component-namespace demo {
@b steps {
.steps-success {
color: #06bf04;
}
.zan-button {
margin-left: 15px;
}
}
}
</style>
<script>
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
export default {
data() {
return {
@@ -35,20 +47,4 @@ export default {
}
}
}
</script>
<style>
.steps-success {
color: #06bf04;
}
.page-steps {
.page-sub-title {
padding: 20px 15px;
}
.zan-button {
margin-left: 15px;
}
}
</style>
</script>
docs/examples/switch.vue
+28 -51
View File
@@ -1,67 +1,44 @@
<template>
<div class="page-switch">
<h1 class="page-title">Switch</h1>
<template><section class="demo-switch"><h1 class="demo-title">switch</h1><example-block title="基础用法">
<div class="demo-switch__wrapper">
<zan-switch class="some-customized-class" :checked="switchState" :on-change="updateState"></zan-switch>
<div class="demo-switch__text">{{switchStateText}}</div>
</div>
<div class="demo-switch__wrapper">
<zan-switch class="some-customized-class" :checked="true" :disabled="true"></zan-switch>
<div class="demo-switch__text">ON, DISABLED</div>
</div>
<div class="demo-switch__wrapper">
<zan-switch class="some-customized-class" :checked="false" :disabled="true"></zan-switch>
<div class="demo-switch__text">OFF, DISABLED</div>
</div>
<div class="demo-switch__wrapper">
<zan-switch class="some-customized-class" :checked="true" :loading="true"></zan-switch>
<div class="demo-switch__text">ON, LOADING</div>
</div>
<div class="demo-switch__wrapper">
<zan-switch class="some-customized-class" :checked="false" :loading="true"></zan-switch>
<div class="demo-switch__text">OFF, LOADING</div>
</div>
<h2 class="page-sub-title">基础用法</h2>
<div class="page-switch">
<div class="page-switch__wrapper">
<zan-switch class="some-customized-class" :checked="switchState" :on-change="updateState"></zan-switch>
<div class="page-switch__text">{{switchStateText}}</div>
</div>
<div class="page-switch__wrapper">
<zan-switch class="some-customized-class" :checked="true" :disabled="true"></zan-switch>
<div class="page-switch__text">ON, DISABLED</div>
</div>
<div class="page-switch__wrapper">
<zan-switch class="some-customized-class" :checked="false" :disabled="true"></zan-switch>
<div class="page-switch__text">OFF, DISABLED</div>
</div>
<div class="page-switch__wrapper">
<zan-switch class="some-customized-class" :checked="true" :loading="true"></zan-switch>
<div class="page-switch__text">ON, LOADING</div>
</div>
<div class="page-switch__wrapper">
<zan-switch class="some-customized-class" :checked="false" :loading="true"></zan-switch>
<div class="page-switch__text">OFF, LOADING</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
switchState: true
};
},
computed: {
switchStateText() {
return this.switchState ? 'ON' : 'OFF';
}
},
methods: {
updateState(newState) {
this.switchState = newState;
}
}
};
</script>
</example-block></section></template>
<style>
@component-namespace page {
@component switch {
@component-namespace demo {
@b switch {
padding: 0 15px 15px;
@descendent wrapper {
@e wrapper {
width: 33.33%;
float: left;
text-align: center;
}
@descendent text {
@e text {
margin: 20px 0;
}
}
}
</style>
<script>
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
docs/examples/tag.vue
+29 -41
View File
@@ -1,47 +1,33 @@
<template>
<div class="page-cell">
<h1 class="page-title">Tag</h1>
<template><section class="demo-tag"><h1 class="demo-title">tag</h1><example-block title="基础用法">
<div class="tags-container">
<zan-tag>返现</zan-tag>
<zan-tag :plain="true">返现</zan-tag>
</div>
<div class="tags-container">
<zan-tag type="danger">返现</zan-tag>
<zan-tag type="danger">四字标签</zan-tag>
<zan-tag type="danger">一</zan-tag>
</div>
<h2 class="page-sub-title">基础用法</h2>
<div>
<div class="tags-container">
<zan-tag>返现</zan-tag>
<zan-tag :plain="true">返现</zan-tag>
</div>
<div class="tags-container">
<zan-tag type="danger">返现</zan-tag>
<zan-tag type="danger">四字标签</zan-tag>
<zan-tag type="danger">一</zan-tag>
</div>
<div class="tags-container">
<zan-tag type="danger">返现</zan-tag>
<zan-tag :plain="true" type="danger">返现</zan-tag>
</div>
<div class="tags-container">
<zan-tag type="primary">返现</zan-tag>
<zan-tag :plain="true" type="primary">返现</zan-tag>
</div>
<div class="tags-container">
<zan-tag type="success">返现</zan-tag>
<zan-tag :plain="true" type="success">返现</zan-tag>
</div>
<div class="tags-container">
<zan-tag type="danger" :mark="true">返现</zan-tag>
</div>
</div>
</div>
</template>
<script>
export default {
methods: {}
};
</script>
</example-block><example-block title="高级用法">
<div class="tags-container">
<zan-tag type="danger">返现</zan-tag>
<zan-tag :plain="true" type="danger">返现</zan-tag>
</div>
<div class="tags-container">
<zan-tag type="primary">返现</zan-tag>
<zan-tag :plain="true" type="primary">返现</zan-tag>
</div>
<div class="tags-container">
<zan-tag type="success">返现</zan-tag>
<zan-tag :plain="true" type="success">返现</zan-tag>
</div>
<div class="tags-container">
<zan-tag type="danger" :mark="true">返现</zan-tag>
</div>
</example-block></section></template>
<style>
.page-sub-title {
padding: 25px 15px;
}
.tags-container {
padding: 5px 15px;
@@ -50,3 +36,5 @@ export default {
}
}
</style>
<script>
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
docs/examples/waterfall.vue
+14 -60
View File
@@ -1,64 +1,18 @@
<template>
<div class="page-card">
<h1 class="page-title">Waterfall</h1>
<h2 class="page-sub-title">基础用法</h2>
<div>
<div
v-waterfall-lower="loadMore"
v-waterfall-upper="loadMoreUpper"
waterfall-disabled="isWaterfallDisabled"
waterfall-offset="400"
>
<div v-for="item in list" class="zan-cell" style="text-align: center;">{{ item }}</div>
<!-- <zan-loading v-if="loading" style="text-align: center;"></zan-loading> -->
<div style="text-align: center;">loading</div>
</div>
<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>
</template>
</div>
</example-block></section></template>
<script>
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>
<style>
.page-sub-title {
padding: 15px;
}
</style>
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>