mirror of
https://github.com/youzan/vant.git
synced 2025-10-19 01:54:48 +00:00
zanui demos
This commit is contained in:
@@ -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
|
||||
|
||||
|
@@ -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
|
||||
|
||||
|
@@ -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
|
||||
|
||||
|
@@ -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
|
||||
|
||||
|
@@ -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
|
||||
|
||||
|
@@ -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
|
||||
|
||||
|
@@ -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
|
||||
|
||||
|
@@ -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
|
||||
|
||||
|
4
docs/examples-docs/steps.md
Normal file
4
docs/examples-docs/steps.md
Normal file
@@ -0,0 +1,4 @@
|
||||
## Steps 步骤条
|
||||
|
||||
|
||||
|
@@ -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
|
||||
|
||||
|
@@ -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
|
||||
|
||||
|
Reference in New Issue
Block a user