zanui demos

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

View File

@@ -1,18 +1,9 @@
<style lang="css">
@component-namespace z {
@component button-group {
.z-button-1 {
margin-bottom: 15px;
}
}
}
</style>
## Button组件
### 按钮功能
:::demo 只接受primary, default, danger三种类型默认default
只接受primary, default, danger三种类型默认default
```html
<div class="z-button-group">
<div class="z-button-1">
@@ -26,11 +17,9 @@
</div>
</div>
```
:::
### 禁用状态
:::demo
```html
<div class="z-button-group">
<div class="z-button-1">
@@ -38,11 +27,11 @@
</div>
</div>
```
:::
### 按钮尺寸
:::demo 只接受large, normal, small, mini四种尺寸默认normal
只接受large, normal, small, mini四种尺寸默认normal
```html
<div class="z-button-group">
<div class="z-button-1">
@@ -62,11 +51,11 @@
</div>
```
:::
### 自定义按钮标签
:::demo 按钮默认是button标签可以使用tag属性修改为一个a标签
按钮默认是button标签可以使用tag属性修改为一个a标签
```html
<div class="z-button-group">
<div class="z-button-1">
@@ -74,10 +63,11 @@
</div>
</div>
```
:::
### button group
:::demo 一组按钮
一组按钮。
```html
<div class="z-button-group">
<z-button type="primary" size="small">确认付款</z-button>
@@ -85,8 +75,6 @@
<z-button size="small">取消订单</z-button>
</div>
```
:::
### API

View File

@@ -4,7 +4,6 @@
当没有底部按钮时,右侧内容会居中显示。
:::demo 不带底部按钮时,右侧内容会居中显示。
```html
<z-card
title="商品名称是什么,两行显示状态如效果图,多余多余多余两行显示状态如效果图,多余多余多余两行显示状态如效果图,多余多余多余两行显示状态如效果图,多余多余多余两行显示状态如效果图,多余多余多余"
@@ -13,13 +12,11 @@
</z-card>
```
:::
### 高级用法
可以使用具名`slot`自定义对应的内容
可以使用具名`slot`重写标题等信息,其中包含`title``desc``footer``tag`四个`slot`
:::demo 可以使用具名`slot`重写标题等信息,其中包含`title``desc``footer``tag`四个`slot`
```html
<z-card
title="商品名称是什么,两行显示状态如效果图,多余多余多余两行显示状态如效果图,多余多余多余两行显示状态如效果图,多余多余多余两行显示状态如效果图,多余多余多余两行显示状态如效果图,多余多余多余"
@@ -39,7 +36,6 @@
</div>
</z-card>
```
:::
### API

View File

@@ -20,53 +20,50 @@ export default {
### 基础用法
:::demo 样例代码
```html
<z-cell-group>
<z-cell title="单元格1" value="单元格1内容"></z-cell>
<z-cell title="单元格2" value="单元格2内容"></z-cell>
</z-cell-group>
```
:::
### 标题带描述信息
:::demo 传入`label`属性,属性值为描述信息的值。
传入`label`属性,属性值为描述信息的值。
```html
<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>
```
:::
### 带图标
:::demo 传入`icon`属性
传入`icon`属性
```html
<z-cell-group>
<z-cell title="起码运动馆" icon="home"></z-cell>
<z-cell title="线下门店" icon="location"></z-cell>
</z-cell-group>
```
:::
### 可点击的链接
:::demo 传入`url`属性,传入`isLink`属性则会在右侧显示箭头。
传入`url`属性,传入`isLink`属性则会在右侧显示箭头。
```html
<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>
```
:::
### 高级用法
如以上用法不能满足你的需求,可以使用对应的`slot`来自定义显示的内容。
如以上用法不能满足你的需求,可以使用对应的`slot`来自定义显示的内容。包含三个`slot`,默认`slot``icon``title``slot`
:::demo 包含三个`slot`,默认`slot``icon``title``slot`
```html
<z-cell-group>
<z-cell value="进入店铺" icon="home" url="http://youzan.com" is-link>
@@ -78,7 +75,6 @@ export default {
<z-cell title="线下门店" icon="location" url="http://youzan.com" is-link></z-cell>
</z-cell-group>
```
:::
### API

View File

@@ -30,13 +30,39 @@ export default {
### 基础用法
:::demo
```html
<z-button @click="handleAlertClick">alert</z-button>
<z-button @click="handleConfirmClick">confirm</z-button>
<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>
```
:::
### API

View File

@@ -1,26 +1,11 @@
<script>
export default {
data() {
return {
name: ''
};
},
methods: {
handleChange() {
console.log(this.name);
}
}
};
</script>
## Field组件
表单中`input``textarea`的输入框。
### 基础用法
:::demo 根据`type`属性显示不同的输入框。
根据`type`属性显示不同的输入框。
```html
<z-cell-group>
<z-field type="text" label="用户名:" placeholder="请输入用户名"></z-field>
@@ -28,27 +13,26 @@ export default {
<z-field type="textarea" label="个人介绍:" placeholder="请输入个人介绍"></z-field>
</z-cell-group>
```
:::
### 无label的输入框
:::demo 不传入`label`属性即可。
不传入`label`属性即可。
```html
<z-cell-group>
<z-field type="text" placeholder="请输入用户名"></z-field>
</z-cell-group>
```
:::
### 监听change事件
:::demo 监听组件的`change`事件。
监听组件的`change`事件。
```html
<z-cell-group>
<z-field type="text" label="用户名:" placeholder="请输入用户名" @change="handleChange"></z-field>
</z-cell-group>
```
:::
### API

View File

@@ -1,33 +1,9 @@
<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>
## Panel 面板
面板只是一个容器,里面可以放入自定义的内容。
### 基础用法
:::demo
```html
<z-panel title="标题" desc="标题描述" status="状态">
<z-card
@@ -52,13 +28,11 @@
</div>
</z-panel>
```
:::
### 高级用法
使用具名`slot`自定义内容。
:::demo
```html
<z-panel title="标题" desc="标题描述" status="状态">
<z-card
@@ -87,7 +61,6 @@
</div>
</z-panel>
```
:::
### API

View File

@@ -1,45 +1,12 @@
<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>
## Picker组件
模仿iOS中的`UIPickerView`
### 基础用法
:::demo 基础用法
```html
<z-picker :columns="pickerColumns" @change="handlePickerChange"></z-picker>
```
:::
### API

View File

@@ -1,3 +1,36 @@
## Popup组件
### 基础用法
```html
<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>
<script>
export default {
data() {
@@ -20,62 +53,7 @@ export default {
}
};
</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;
}
</style>
## Popup组件
### 基础用法
:::demo
```html
<z-button @click="popupShow1 = true">从下方弹出popup</z-button>
<z-popup v-model="popupShow1" position="bottom" class="z-popup-1">
xxxx
</z-popup>
<z-button @click="popupShow2 = true">从上方方弹出popup</z-button>
<z-popup v-model="popupShow2" position="top" class="z-popup-2" :overlay="false">
更新成功
</z-popup>
<z-button @click="popupShow3 = true">从右方弹出popup</z-button>
<z-popup v-model="popupShow3" position="right" class="z-popup-3" :overlay="false">
<z-button @click.native="popupShow3 = false">关闭 popup</z-button>
</z-popup>
<z-button @click="popupShow4 = true">从中间弹出popup</z-button>
<z-popup v-model="popupShow4" transition="popup-fade" class="z-popup-4">
一些内容
</z-popup>
```
:::
### API

View File

@@ -0,0 +1,4 @@
## Steps 步骤条

View File

@@ -1,46 +1,7 @@
<script>
export default {
data() {
return {
switchState: true
};
},
computed: {
switchStateText() {
return this.switchState ? 'ON' : 'OFF';
}
},
methods: {
updateState(newState) {
this.switchState = newState;
}
}
};
</script>
<style lang="css">
@component-namespace page {
@component switch {
padding: 0 15px 15px;
@descendent wrapper {
margin: 30px;
width: 100px;
float: left;
text-align: center;
}
@descendent text {
margin: 20px 0;
}
}
}
</style>
## Switch组件
### 基础用法
:::demo 样例代码
```html
<div class="page-switch">
<div class="page-switch__wrapper">
@@ -56,10 +17,8 @@ export default {
<div class="page-switch__text">OFF, DISABLED</div>
</div>
</div>
```
```javascript
<script>
export default {
data() {
return {
@@ -76,9 +35,9 @@ export default {
this.switchState = newState;
}
}
};
};
</script>
```
:::
### API

View File

@@ -1,3 +1,28 @@
## Waterfall 瀑布流
### 基础用法
```html
<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>
<script>
export default {
data() {
@@ -36,44 +61,7 @@ export default {
}
};
</script>
<style lang="css">
.waterfall {
height: 300px;
overflow: scroll;
}
.waterfall-item {
line-height: 20px;
padding: 5px 0;
}
</style>
## Waterfall组件
### 基础用法
:::demo 样例代码
```html
<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>
```
:::
### API