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

zanui demos

Browse Source
This commit is contained in:
cookfront
2017-02-27 16:54:37 +08:00
parent 650dc01906
commit 8cc5fa5007
46 changed files with 1130 additions and 295 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/examples/button.vue
+65 -5
View File
@@ -1,10 +1,70 @@
<template>
<div class="button-demos">
<div class="page-button">
<h1 class="page-title">Button</h1>
<h2 class="page-sub-title">按钮功能</h2>
<div class="page-button__group">
<div class="z-button-1">
<z-button>default</z-button>
</div>
<div class="z-button-1">
<z-button type="primary">primary</z-button>
</div>
<div class="z-button-1">
<z-button type="danger">danger</z-button>
</div>
</div>
<h2 class="page-sub-title">禁用状态</h2>
<div class="page-button__group">
<div class="z-button-1">
<z-button disabled>diabled</z-button>
</div>
</div>
<h2 class="page-sub-title">按钮尺寸</h2>
<div class="page-button__group">
<div class="z-button-1">
<z-button size="large">large</z-button>
</div>
</div>
<div class="page-button__group">
<div class="z-button-3">
<z-button type="primary">normal</z-button>
</div>
<div class="z-button-3">
<z-button size="small">small</z-button>
</div>
<div class="z-button-3">
<z-button size="mini">mini</z-button>
</div>
</div>
<h2 class="page-sub-title">自定义按钮标签</h2>
<div class="page-button__group">
<div class="z-button-1">
<z-button tag="a" type="primary" href="https://www.youzan.com" target="_blank">a标签按钮</z-button>
</div>
</div>
<h2 class="page-sub-title">button group</h2>
<div class="page-button__group">
<z-button type="primary" size="small">确认付款</z-button>
<z-button size="small">确认收货</z-button>
<z-button size="small">取消订单</z-button>
</div>
</div>
</template>
<script>
export default {
<style>
@component-namespace page {
@b button {
padding: 0 20px;
};
</script>
@e group {
.z-button-1 {
margin-bottom: 10px;
}
}
}
}
</style>
docs/examples/card.vue
+37
View File
@@ -0,0 +1,37 @@
<template>
<div class="page-card">
<h1 class="page-title">Card</h1>
<h2 class="page-sub-title">基础用法</h2>
<z-card
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
desc="描述"
thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
</z-card>
<h2 class="page-sub-title">高级用法</h2>
<z-card
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
desc="商品SKU1，商品SKU2"
thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
<div class="z-card__row" slot="title">
<h4 class="z-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
<span class="z-card__price">¥ 2.00</span>
</div>
<div class="z-card__row" slot="desc">
<h4 class="z-card__desc">商品sku</h4>
<span class="z-card__num">x 2</span>
</div>
<div class="z-card__footer" slot="footer">
<z-button size="mini">按钮一</z-button>
<z-button size="mini">按钮二</z-button>
</div>
</z-card>
</div>
</template>
<style>
.page-sub-title {
padding: 15px;
}
</style>
docs/examples/cell.vue
+62
View File
@@ -0,0 +1,62 @@
<template>
<div class="page-cell">
<h1 class="page-title">Cell</h1>
<h2 class="page-sub-title">基础用法</h2>
<z-cell-group>
<z-cell title="单元格1" value="单元格1内容"></z-cell>
<z-cell title="单元格2" value="单元格2内容"></z-cell>
</z-cell-group>
<h2 class="page-sub-title">标题带描述信息</h2>
<z-cell-group>
<z-cell title="单元格1" label="描述信息" is-link url="javascript:void(0)" @click="handleClick"></z-cell>
<z-cell title="单元格2" label="描述信息"></z-cell>
</z-cell-group>
<h2 class="page-sub-title">带图标</h2>
<z-cell-group>
<z-cell title="起码运动馆" icon="home"></z-cell>
<z-cell title="线下门店" icon="location"></z-cell>
</z-cell-group>
<h2 class="page-sub-title">可点击的链接</h2>
<z-cell-group>
<z-cell title="起码运动馆" value="进入店铺" icon="home" url="http://youzan.com" is-link></z-cell>
<z-cell title="线下门店" icon="location" url="http://youzan.com" is-link></z-cell>
</z-cell-group>
<h2 class="page-sub-title">高级用法</h2>
<z-cell-group>
<z-cell value="进入店铺" icon="home" url="http://youzan.com" is-link>
<template slot="title">
<span class="z-cell-text">起码运动馆</span>
<img src="//su.yzcdn.cn/v2/image/account/icon_guan_160421.png" class="official-img">
</template>
</z-cell>
<z-cell title="线下门店" icon="location" url="http://youzan.com" is-link></z-cell>
</z-cell-group>
</div>
</template>
<script>
export default {
methods: {
handleClick() {
console.log('cell click');
}
}
};
</script>
<style>
.official-img {
width: 31px;
vertical-align: middle;
border: 0;
}
.page-sub-title {
padding: 25px 15px;
}
</style>
docs/examples/dialog.vue
+54
View File
@@ -0,0 +1,54 @@
<template>
<div class="page-dialog">
<h1 class="page-title">Dialog</h1>
<div class="z-button-1">
<z-button @click="handleAlertClick">点击我打开alert提示框</z-button>
</div>
<div class="z-button-1">
<z-button @click="handleConfirmClick">点击我打开confirm提示框</z-button>
</div>
</div>
</template>
<script>
import { Dialog } from 'src/index';
export default {
methods: {
handleAlertClick() {
Dialog.alert({
title: 'alert标题',
message: '弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。'
}).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>
<style>
@component-namespace page {
@b dialog {
padding: 0 15px;
.z-button-1 {
margin-bottom: 10px;
}
}
}
</style>
docs/examples/field.vue
+44
View File
@@ -0,0 +1,44 @@
<template>
<div class="page-field">
<h1 class="page-title">Field</h1>
<h2 class="page-sub-title">基础用法</h2>
<z-cell-group>
<z-field type="text" label="用户名：" placeholder="请输入用户名"></z-field>
<z-field type="password" label="密码：" placeholder="请输入密码"></z-field>
<z-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍"></z-field>
</z-cell-group>
<h2 class="page-sub-title">无label的输入框</h2>
<z-cell-group>
<z-field type="text" placeholder="请输入用户名"></z-field>
</z-cell-group>
<h2 class="page-sub-title">监听change事件</h2>
<z-cell-group>
<z-field type="text" label="用户名：" placeholder="请输入用户名" @change="handleChange"></z-field>
</z-cell-group>
</div>
</template>
<script>
export default {
data() {
return {
name: ''
};
},
methods: {
handleChange() {
console.log(this.name);
}
}
};
</script>
<style>
.page-sub-title {
padding: 20px 15px;
}
</style>
docs/examples/panel.vue
+80
View File
@@ -0,0 +1,80 @@
<template>
<div class="page-panel">
<h1 class="page-title">Panel</h1>
<h2 class="page-sub-title">基础用法</h2>
<z-panel title="标题" desc="标题描述" status="状态">
<z-card
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
desc="商品SKU1，商品SKU2"
thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
<div class="z-card__row" slot="title">
<h4 class="z-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
<span class="z-card__price">¥ 2.00</span>
</div>
<div class="z-card__row" slot="desc">
<h4 class="z-card__desc">商品sku</h4>
<span class="z-card__num">x 2</span>
</div>
<div class="z-card__footer" slot="footer">
<z-button size="mini">按钮一</z-button>
<z-button size="mini">按钮二</z-button>
</div>
</z-card>
<div class="z-panel-sum">
合计：<span>¥ 1999.90</span>
</div>
</z-panel>
<h2 class="page-sub-title">高级用法</h2>
<z-panel title="标题" desc="标题描述" status="状态">
<z-card
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
desc="商品SKU1，商品SKU2"
thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
<div class="z-card__row" slot="title">
<h4 class="z-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
<span class="z-card__price">¥ 2.00</span>
</div>
<div class="z-card__row" slot="desc">
<h4 class="z-card__desc">商品sku</h4>
<span class="z-card__num">x 2</span>
</div>
<div class="z-card__footer" slot="footer">
<z-button size="mini">按钮一</z-button>
<z-button size="mini">按钮二</z-button>
</div>
</z-card>
<div class="z-panel-sum">
合计：<span>¥ 1999.90</span>
</div>
<div class="z-panel-buttons" slot="footer">
<z-button size="small">按钮一</z-button>
<z-button size="small" type="danger">按钮二</z-button>
</div>
</z-panel>
</div>
</template>
<style>
.z-panel-sum {
background: #fff;
text-align: right;
font-size: 14px;
color: #333;
line-height: 30px;
padding-right: 15px;
span {
color: red;
}
}
.z-panel-buttons {
text-align: right;
.z-button {
margin-left: 5px;
}
}
</style>
docs/examples/picker.vue
+39
View File
@@ -0,0 +1,39 @@
<template>
<div class="page-picker">
<h1 class="page-title">Picker</h1>
<h2 class="page-sub-title">基础用法</h2>
<z-picker :columns="pickerColumns" @change="handlePickerChange"></z-picker>
</div>
</template>
<script>
const citys = {
'浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
'福建': ['福州', '厦门', '莆田', '三明', '泉州', '漳州', '南平', '龙岩', '宁德'],
'湖南': ['长沙', '株洲', '湘潭', '衡阳', '邵阳', '岳阳', '常德', '张家界', '益阳', '郴州', '永州', '怀化', '娄底', '湘西土家族苗族自治州']
};
export default {
data() {
return {
pickerColumns: [
{
values: Object.keys(citys),
className: 'column1'
},
{
values: ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
className: 'column2'
}
]
};
},
methods: {
handlePickerChange(picker, values) {
picker.setColumnValues(1, citys[values[0]]);
}
}
};
</script>
docs/examples/popup.vue
+93
View File
@@ -0,0 +1,93 @@
<template>
<div class="page-popup">
<h1 class="page-title">Popup</h1>
<h2 class="page-sub-title">基础用法</h2>
<div class="z-button-1">
<z-button @click="popupShow1 = true">从下方弹出popup</z-button>
</div>
<z-popup v-model="popupShow1" position="bottom" class="z-popup-1">
xxxx
</z-popup>
<div class="z-button-1">
<z-button @click="popupShow2 = true">从上方方弹出popup</z-button>
</div>
<z-popup v-model="popupShow2" position="top" class="z-popup-2" :overlay="false">
更新成功
</z-popup>
<div class="z-button-1">
<z-button @click="popupShow3 = true">从右方弹出popup</z-button>
</div>
<z-popup v-model="popupShow3" position="right" class="z-popup-3" :overlay="false">
<z-button @click.native="popupShow3 = false">关闭 popup</z-button>
</z-popup>
<div class="z-button-1">
<z-button @click="popupShow4 = true">从中间弹出popup</z-button>
</div>
<z-popup v-model="popupShow4" transition="popup-fade" class="z-popup-4">
一些内容
</z-popup>
</div>
</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>
.z-popup-1 {
width: 100%;
height: 200px;
}
.z-popup-2 {
width: 100%;
line-height: 44px;
background-color: rgba(0, 0, 0, 0.701961);
text-align: center;
color: #fff;
}
.z-popup-3 {
width: 100%;
height: 100%;
background-color: #fff;
}
.z-popup-4 {
width: 50%;
height: 200px;
background: #fff;
border-radius: 10px;
}
.page-popup .z-button-1 {
margin-bottom: 10px;
}
.page-sub-title {
padding: 20px 15px;
}
</style>
docs/examples/switch.vue
+58
View File
@@ -0,0 +1,58 @@
<template>
<div class="page-switch">
<h1 class="page-title">Switch</h1>
<h2 class="page-sub-title">基础用法</h2>
<div class="page-switch">
<div class="page-switch__wrapper">
<o2-switch class="some-customized-class" :checked="switchState" :on-change="updateState"></o2-switch>
<div class="page-switch__text">{{switchStateText}}</div>
</div>
<div class="page-switch__wrapper">
<o2-switch class="some-customized-class" :checked="true" :disabled="true"></o2-switch>
<div class="page-switch__text">ON, DISABLED</div>
</div>
<div class="page-switch__wrapper">
<o2-switch class="some-customized-class" :checked="false" :disabled="true"></o2-switch>
<div class="page-switch__text">OFF, DISABLED</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>
<style>
@component-namespace page {
@component switch {
padding: 0 15px 15px;
@descendent wrapper {
width: 33.33%;
float: left;
text-align: center;
}
@descendent text {
margin: 20px 0;
}
}
}
</style>
docs/examples/waterfall.vue
+79
View File
@@ -0,0 +1,79 @@
<template>
<div class="page-card">
<h1 class="page-title">Card</h1>
<h2 class="page-sub-title">基础用法</h2>
<div class="waterfall">
<div
v-waterfall-lower="loadMore"
v-waterfall-upper="loadMoreUpper"
waterfall-disabled="isWaterfallDisabled"
waterfall-offset="400"
>
<div
class="waterfall-item"
v-for="item in list"
style="text-align: center;"
>
{{ item }}
</div>
<div v-if="loading" style="text-align: center;">
loading
</div>
</div>
</div>
</div>
</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>
.waterfall {
height: 300px;
overflow: scroll;
}
.waterfall-item {
line-height: 20px;
padding: 5px 0;
}
.page-sub-title {
padding: 15px;
}
</style>