mirror of
https://github.com/youzan/vant.git
synced 2025-10-18 17:51:54 +00:00
build config
This commit is contained in:
cookfront
@@ -1,100 +0,0 @@
|
||||
<style lang="css">
|
||||
@component-namespace z {
|
||||
@component button-group {
|
||||
.z-button-1 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Button组件
|
||||
|
||||
### 按钮功能
|
||||
|
||||
:::demo 只接受primary, default, danger三种类型，默认default
|
||||
```html
|
||||
<div class="z-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>
|
||||
```
|
||||
:::
|
||||
|
||||
### 禁用状态
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div class="z-button-group">
|
||||
<div class="z-button-1">
|
||||
<z-button disabled>diabled</z-button>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
### 按钮尺寸
|
||||
|
||||
:::demo 只接受large, normal, small, mini四种尺寸，默认normal
|
||||
```html
|
||||
<div class="z-button-group">
|
||||
<div class="z-button-1">
|
||||
<z-button size="large">large</z-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="z-button-group" :style="{ width: '50%' }">
|
||||
<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>
|
||||
|
||||
```
|
||||
:::
|
||||
|
||||
### 自定义按钮标签
|
||||
|
||||
:::demo 按钮默认是button标签，可以使用tag属性修改为一个a标签
|
||||
```html
|
||||
<div class="z-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>
|
||||
```
|
||||
:::
|
||||
|
||||
### button group
|
||||
:::demo 一组按钮
|
||||
```html
|
||||
<div class="z-button-group">
|
||||
<z-button type="primary" size="small">确认付款</z-button>
|
||||
<z-button size="small">确认收货</z-button>
|
||||
<z-button size="small">取消订单</z-button>
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| type | 按钮类型 | string | 'default' | 'primary', 'danger' |
|
||||
| size | 按钮尺寸 | string | 'normal' | 'large', 'small', 'mini' |
|
||||
| tag | 按钮标签 | string | 'button' | 'a', 'span', ... |
|
||||
| diabled | 按钮是否禁用 | Boolean | | |
|
||||
| block | 按钮是否显示为块级元素 | Boolean | | |
|
||||
|
||||
10
docs/examples/button.vue
Normal file
10
docs/examples/button.vue
Normal file
@@ -0,0 +1,10 @@
|
||||
<template>
|
||||
<div class="button-demos">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
};
|
||||
</script>
|
||||
@@ -1,100 +0,0 @@
|
||||
<style>
|
||||
.official-img {
|
||||
width: 31px;
|
||||
vertical-align: middle;
|
||||
border: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleClick() {
|
||||
console.log('cell click');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Cell 组件
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::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`属性，属性值为描述信息的值。
|
||||
```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`属性
|
||||
```html
|
||||
<z-cell-group>
|
||||
<z-cell title="起码运动馆" icon="home"></z-cell>
|
||||
<z-cell title="线下门店" icon="location"></z-cell>
|
||||
</z-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
### 可点击的链接
|
||||
|
||||
:::demo 传入`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`来自定义显示的内容。
|
||||
|
||||
:::demo 包含三个`slot`，默认`slot`，`icon`和`title`的`slot`。
|
||||
```html
|
||||
<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>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| icon | 左侧图标 | string | '' | '' |
|
||||
| title | 左侧标题 | string | '' | '' |
|
||||
| value | 右侧内容 | string | '' | '' |
|
||||
| isLink | 是否为链接，链接会在右侧出现箭头 | boolean | '' | '' |
|
||||
| url | 跳转链接 | string | '' | '' |
|
||||
| label | 描述信息，显示在标题下方 | string | '' | '' |
|
||||
|
||||
### Slot
|
||||
|
||||
| name | 描述 |
|
||||
|-----------|-----------|
|
||||
| - | 自定义显示内容 |
|
||||
| icon | 自定义icon |
|
||||
| title | 自定义title |
|
||||
@@ -1 +0,0 @@
|
||||
## Checkbox组件
|
||||
@@ -1,46 +0,0 @@
|
||||
<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>
|
||||
|
||||
## Dialog组件
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<z-button @click="handleAlertClick">alert</z-button>
|
||||
|
||||
<z-button @click="handleConfirmClick">confirm</z-button>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| title | 标题 | String | '' | |
|
||||
| message | 内容 | String | '' | |
|
||||
@@ -1,64 +0,0 @@
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: ''
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleChange() {
|
||||
console.log(this.name);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Field组件
|
||||
|
||||
表单中`input`或`textarea`的输入框。
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo 根据`type`属性显示不同的输入框。
|
||||
```html
|
||||
<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>
|
||||
```
|
||||
:::
|
||||
|
||||
### 无label的输入框
|
||||
|
||||
:::demo 不传入`label`属性即可。
|
||||
```html
|
||||
<z-cell-group>
|
||||
<z-field type="text" placeholder="请输入用户名"></z-field>
|
||||
</z-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
### 监听change事件
|
||||
|
||||
:::demo 监听组件的`change`事件。
|
||||
```html
|
||||
<z-cell-group>
|
||||
<z-field type="text" label="用户名：" placeholder="请输入用户名" @change="handleChange"></z-field>
|
||||
</z-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| type | 输入框类型 | string | text | text, number, email, url, tel, date, datetime, password, textarea |
|
||||
| placeholder | 输入框placeholder | string | '' | |
|
||||
| value | 输入框的值 | string | '' | |
|
||||
| label | 输入框标签 | string | '' | |
|
||||
| disabled | 是否禁用输入框 | boolean | false | |
|
||||
| readonly | 输入框是否只读 | boolean | false | |
|
||||
| maxlength | 输入框maxlength | [String, Number] | '' | |
|
||||
|
||||
@@ -1,74 +0,0 @@
|
||||
<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
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| 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`为一个数组，设置所有列中被选中的值 |
|
||||
@@ -1,84 +0,0 @@
|
||||
<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;
|
||||
}
|
||||
</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
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| value | 利用`v-model`绑定当前组件是否显示 | Boolean | '' | |
|
||||
@@ -1,25 +0,0 @@
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
radio: '1'
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Radio组件
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<z-radio v-model="radio"></z-radio>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| disabled | 是否禁用单选框 | Boolean | false | |
|
||||
@@ -1,90 +0,0 @@
|
||||
<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">
|
||||
<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>
|
||||
```
|
||||
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
switchState: true
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
switchStateText() {
|
||||
return this.switchState ? ' ON' : 'OFF';
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateState(newState) {
|
||||
this.switchState = newState;
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| checked | 开关状态 | boolean | false | true, false |
|
||||
| loading | loading状态 | boolean | false | true, false |
|
||||
| disabled | 禁用状态 | boolean | false | true, false |
|
||||
| onChange | 回调 | function | function（）{} | - |
|
||||
Reference in New Issue
Block a user