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

use zanui name

Browse Source
This commit is contained in:
cookfront
2017-02-17 16:04:37 +08:00
parent 3bed02995d
commit c786235977
40 changed files with 833 additions and 536 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/examples/button.md
+12 -12
View File
@@ -23,27 +23,27 @@
<div class="page-button">
<h1 class="page-title">Button</h1>
<div class="page-button-group">
<o2-button size="large">default</o2-button>
<o2-button size="large" type="primary">primary</o2-button>
<o2-button size="large" type="danger">danger</o2-button>
<z-button size="large">default</z-button>
<z-button size="large" type="primary">primary</z-button>
<z-button size="large" type="danger">danger</z-button>
</div>
<div class="page-button-group">
<o2-button>default</o2-button>
<o2-button type="primary">primary</o2-button>
<o2-button type="danger">danger</o2-button>
<z-button>default</z-button>
<z-button type="primary">primary</z-button>
<z-button type="danger">danger</z-button>
</div>
<div class="page-button-group">
<o2-button size="small">default</o2-button>
<o2-button size="small" type="primary">primary</o2-button>
<o2-button size="small" type="danger">danger</o2-button>
<z-button size="small">default</z-button>
<z-button size="small" type="primary">primary</z-button>
<z-button size="small" type="danger">danger</z-button>
</div>
<div class="page-button-group">
<o2-button disabled size="large">default</o2-button>
<o2-button disabled size="large" type="primary">primary</o2-button>
<o2-button disabled size="large" type="danger" class="aaa">danger</o2-button>
<z-button disabled size="large">default</z-button>
<z-button disabled size="large" type="primary">primary</z-button>
<z-button disabled size="large" type="danger" class="aaa">danger</z-button>
</div>
</div>
```
docs/examples/cell.md
+22 -22
View File
@@ -22,10 +22,10 @@ export default {
:::demo 样例代码
```html
<o2-cell-group>
<o2-cell title="单元格1" value="单元格1内容"></o2-cell>
<o2-cell title="单元格2" value="单元格2内容"></o2-cell>
</o2-cell-group>
<z-cell-group>
<z-cell title="单元格1" value="单元格1内容"></z-cell>
<z-cell title="单元格2" value="单元格2内容"></z-cell>
</z-cell-group>
```
:::
@@ -33,10 +33,10 @@ export default {
:::demo 传入`label`属性，属性值为描述信息的值。
```html
<o2-cell-group>
<o2-cell title="单元格1" label="描述信息" is-link url="javascript:void(0)" @click="handleClick"></o2-cell>
<o2-cell title="单元格2" label="描述信息"></o2-cell>
</o2-cell-group>
<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>
```
:::
@@ -44,10 +44,10 @@ export default {
:::demo 传入`icon`属性
```html
<o2-cell-group>
<o2-cell title="起码运动馆" icon="home"></o2-cell>
<o2-cell title="线下门店" icon="location"></o2-cell>
</o2-cell-group>
<z-cell-group>
<z-cell title="起码运动馆" icon="home"></z-cell>
<z-cell title="线下门店" icon="location"></z-cell>
</z-cell-group>
```
:::
@@ -55,10 +55,10 @@ export default {
:::demo 传入`url`属性，传入`isLink`属性则会在右侧显示箭头。
```html
<o2-cell-group>
<o2-cell title="起码运动馆" value="进入店铺" icon="home" url="http://youzan.com" is-link></o2-cell>
<o2-cell title="线下门店" icon="location" url="http://youzan.com" is-link></o2-cell>
</o2-cell-group>
<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>
```
:::
@@ -68,15 +68,15 @@ export default {
:::demo 包含三个`slot`，默认`slot`，`icon`和`title`的`slot`。
```html
<o2-cell-group>
<o2-cell value="进入店铺" icon="home" url="http://youzan.com" is-link>
<z-cell-group>
<z-cell value="进入店铺" icon="home" url="http://youzan.com" is-link>
<template slot="title">
<span class="o2-cell-text">起码运动馆</span>
<span class="z-cell-text">起码运动馆</span>
<img src="//su.yzcdn.cn/v2/image/account/icon_guan_160421.png" class="official-img">
</template>
</o2-cell>
<o2-cell title="线下门店" icon="location" url="http://youzan.com" is-link></o2-cell>
</o2-cell-group>
</z-cell>
<z-cell title="线下门店" icon="location" url="http://youzan.com" is-link></z-cell>
</z-cell-group>
```
:::
docs/examples/dialog.md
+2 -2
View File
@@ -32,9 +32,9 @@ export default {
:::demo
```html
<o2-button @click="handleAlertClick">alert</o2-button>
<z-button @click="handleAlertClick">alert</z-button>
<o2-button @click="handleConfirmClick">confirm</o2-button>
<z-button @click="handleConfirmClick">confirm</z-button>
```
:::
docs/examples/field.md
+11 -11
View File
@@ -22,11 +22,11 @@ export default {
:::demo 根据`type`属性显示不同的输入框。
```html
<o2-cell-group>
<o2-field type="text" label="用户名：" placeholder="请输入用户名"></o2-field>
<o2-field type="password" label="密码：" placeholder="请输入密码"></o2-field>
<o2-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍"></o2-field>
</o2-cell-group>
<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>
```
:::
@@ -34,9 +34,9 @@ export default {
:::demo 不传入`label`属性即可。
```html
<o2-cell-group>
<o2-field type="text" placeholder="请输入用户名"></o2-field>
</o2-cell-group>
<z-cell-group>
<z-field type="text" placeholder="请输入用户名"></z-field>
</z-cell-group>
```
:::
@@ -44,9 +44,9 @@ export default {
:::demo 监听组件的`change`事件。
```html
<o2-cell-group>
<o2-field type="text" label="用户名：" placeholder="请输入用户名" @change="handleChange"></o2-field>
</o2-cell-group>
<z-cell-group>
<z-field type="text" label="用户名：" placeholder="请输入用户名" @change="handleChange"></z-field>
</z-cell-group>
```
:::
docs/examples/picker.md
+35
View File
@@ -0,0 +1,35 @@
## Picker组件
模仿iOS中的`UIPickerView`。
### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| visibileColumnCount | 每一列可见备选元素的个数 | Number | 5 | |
| itemHeight | 选中元素区高度 | Number | 44 | |
| columns | 对象数组，配置每一列显示的数据 | Array | | |
| showToolbar | 是否在组件顶部显示一个toolbar | Boolean | true | |
### columns
`API`中的`columns`为一个对象数组，数组中的每一个对象配置每一列，每一列有以下`key`：
| key | 说明 |
|-----------|-----------|
| values | 列中对应的备选值 |
| defaultIndex | 初始选中值的索引，默认为0 |
| className | 为对应列添加特殊的`class` |
### change事件
在`change`事件中，可以获取到`picker`实例，对`picker`进行相应的更新等操作：
| 函数 | 说明 |
|-----------|-----------|
| getColumnValue(index) | 获取对应列中选中的值 |
| setColumnValue(index, value) | 设置对应列中选中的值 |
| getColumnValues(index) | 获取对应列中所有的备选值 |
| setColumnValues(index, values) | 设置对应列中所有的备选值 |
| getValues() | 获取所有列中被选中的值，返回一个数组 |
| setValues(values) | `values`为一个数组，设置所有列中被选中的值 |
docs/examples/popup.md
+17 -17
View File
@@ -22,12 +22,12 @@ export default {
</script>
<style>
.o2-popup-1 {
.z-popup-1 {
width: 100%;
height: 200px;
}
.o2-popup-2 {
.z-popup-2 {
width: 100%;
line-height: 44px;
background-color: rgba(0, 0, 0, 0.701961);
@@ -35,13 +35,13 @@ export default {
color: #fff;
}
.o2-popup-3 {
.z-popup-3 {
width: 100%;
height: 100%;
background-color: #fff;
}
.o2-popup-4 {
.z-popup-4 {
width: 50%;
height: 200px;
background: #fff;
@@ -55,25 +55,25 @@ export default {
:::demo
```html
<o2-button @click="popupShow1 = true">从下方弹出popup</o2-button>
<o2-popup v-model="popupShow1" position="bottom" class="o2-popup-1">
<z-button @click="popupShow1 = true">从下方弹出popup</z-button>
<z-popup v-model="popupShow1" position="bottom" class="z-popup-1">
xxxx
</o2-popup>
</z-popup>
<o2-button @click="popupShow2 = true">从上方方弹出popup</o2-button>
<o2-popup v-model="popupShow2" position="top" class="o2-popup-2" :overlay="false">
<z-button @click="popupShow2 = true">从上方方弹出popup</z-button>
<z-popup v-model="popupShow2" position="top" class="z-popup-2" :overlay="false">
更新成功
</o2-popup>
</z-popup>
<o2-button @click="popupShow3 = true">从右方弹出popup</o2-button>
<o2-popup v-model="popupShow3" position="right" class="o2-popup-3" :overlay="false">
<o2-button @click.native="popupShow3 = false">关闭 popup</o2-button>
</o2-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>
<o2-button @click="popupShow4 = true">从中间弹出popup</o2-button>
<o2-popup v-model="popupShow4" transition="popup-fade" class="o2-popup-4">
<z-button @click="popupShow4 = true">从中间弹出popup</z-button>
<z-popup v-model="popupShow4" transition="popup-fade" class="z-popup-4">
一些内容
</o2-popup>
</z-popup>
```
:::
docs/examples/radio.md
+1 -1
View File
@@ -14,7 +14,7 @@ export default {
:::demo
```html
<o2-radio v-model="radio"></o2-radio>
<z-radio v-model="radio"></z-radio>
```
:::
docs/examples/switch.md
+2 -2
View File
@@ -45,8 +45,8 @@ export default {
```html
<div class="page-switch">
<span class="page-switch-text">Switch state: {{switchStateText}}</span>
<o2-switch class="page-switch-sample" :checked="switchState" :on-change="updateState"></o2-switch>
<o2-switch class="page-switch-sample" :checked="false" :disabled="true"></o2-switch>
<z-switch class="page-switch-sample" :checked="switchState" :on-change="updateState"></z-switch>
<z-switch class="page-switch-sample" :checked="false" :disabled="true"></z-switch>
</div>
```