mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
Merge branch 'feature/code_review'
This commit is contained in:
cookfront
commit
27d7cf128a
@ -16,13 +16,17 @@
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
import { ImagePreview } from 'src/index';
|
||||
import MobileComputed from 'components/mobile-computed';
|
||||
|
||||
export default {
|
||||
mixins: [MobileComputed],
|
||||
|
||||
methods: {
|
||||
handleImagePreview() {
|
||||
ImagePreview([
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp',
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg?imageView2/2/w/980/h/980/q/75/format/webp'
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg',
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg',
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/15/FkubrzN7AgGwLlTeb1E89-T_ZjBg.png'
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
||||
@ -37,8 +37,42 @@ export default {
|
||||
|
||||
## Checkbox 复选框
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Checkbox`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Checkbox`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Checkbox, CheckboxGroup } from '@youzan/zanui-vue';
|
||||
import '@youzan/zanui-vue/lib/zanui-css/checkbox.css';
|
||||
|
||||
Vue.component(Checkbox.name, Checkbox);
|
||||
Vue.component(CheckboxGroup.name, CheckboxGroup);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Checkbox`组件，这样只能在你注册的组件中使用`Checkbox`：
|
||||
|
||||
```js
|
||||
import { Checkbox, CheckboxGroup } from '@youzan/zanui-vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'zan-checkbox': Checkbox,
|
||||
'zan-checkbox-group': CheckboxGroup
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 基础用法
|
||||
|
||||
通过`v-model`绑定值即可。当`Checkbox`选中时，绑定的值即为`true`，否则为`false`。当单个`Checkbox`使用时，更建议使用`Switch`组件。
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<div class="zan-checkbox-wrapper">
|
||||
@ -59,6 +93,8 @@ export default {
|
||||
|
||||
### 禁用状态
|
||||
|
||||
设置`disabled`属性即可，此时`Checkbox`不能点击。
|
||||
|
||||
:::demo 禁用状态
|
||||
```html
|
||||
<div class="zan-checkbox-wrapper">
|
||||
@ -79,6 +115,8 @@ export default {
|
||||
|
||||
### Checkbox组
|
||||
|
||||
需要与`zan-checkbox-group`一起使用，值通过`v-model`绑定在`zan-checkbox-group`上，例如下面的`result`，此时`result`的值是一个数组。数组中的项即为选中的`Checkbox`的`name`属性设置的值。
|
||||
|
||||
:::demo Checkbox组
|
||||
```html
|
||||
<div class="zan-checkbox-wrapper">
|
||||
@ -112,6 +150,8 @@ export default {
|
||||
|
||||
### 禁用Checkbox组
|
||||
|
||||
禁用`zan-checkbox-group`，此时整个组都不可点击。
|
||||
|
||||
:::demo 禁用Checkbox组
|
||||
```html
|
||||
<div class="zan-checkbox-wrapper">
|
||||
@ -139,6 +179,8 @@ export default {
|
||||
|
||||
### 与Cell组件一起使用
|
||||
|
||||
此时你需要再引入`Cell`和`CellGroup`组件。
|
||||
|
||||
:::demo 与Cell组件一起使用
|
||||
```html
|
||||
<zan-checkbox-group v-model="result">
|
||||
|
||||
@ -22,7 +22,39 @@ export default {
|
||||
|
||||
表单中`input`或`textarea`的输入框。
|
||||
|
||||
### 基础用法
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Field`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Field`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Field } from '@youzan/zanui-vue';
|
||||
import '@youzan/zanui-vue/lib/zanui-css/field.css';
|
||||
|
||||
Vue.component(Field.name, Field);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Field`组件，这样只能在你注册的组件中使用`Field`：
|
||||
|
||||
```js
|
||||
import { Field } from '@youzan/zanui-vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'zan-field': Field
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
根据`type`属性显示不同的输入框。
|
||||
|
||||
@ -36,7 +68,7 @@ export default {
|
||||
```
|
||||
:::
|
||||
|
||||
### 无label的输入框
|
||||
#### 无label的输入框
|
||||
|
||||
不传入`label`属性即可。
|
||||
|
||||
@ -48,7 +80,7 @@ export default {
|
||||
```
|
||||
:::
|
||||
|
||||
### 带border的输入框
|
||||
#### 带border的输入框
|
||||
|
||||
传入一个`border`属性。
|
||||
|
||||
@ -60,7 +92,7 @@ export default {
|
||||
```
|
||||
:::
|
||||
|
||||
### 禁用的输入框
|
||||
#### 禁用的输入框
|
||||
|
||||
传入`disabled`属性即可。
|
||||
|
||||
@ -72,7 +104,7 @@ export default {
|
||||
```
|
||||
:::
|
||||
|
||||
### 错误的输入框
|
||||
#### 错误的输入框
|
||||
|
||||
传入`error`属性即可。
|
||||
|
||||
@ -85,7 +117,7 @@ export default {
|
||||
:::
|
||||
|
||||
|
||||
### Autosize的输入框(仅支持textarea)
|
||||
#### Autosize的输入框(仅支持textarea)
|
||||
|
||||
传入`autosize`属性, 且将`rows`设为1。
|
||||
|
||||
|
||||
@ -10,13 +10,17 @@
|
||||
|
||||
<script>
|
||||
import { ImagePreview } from 'src/index';
|
||||
import MobileComputed from 'components/mobile-computed';
|
||||
|
||||
export default {
|
||||
mixins: [MobileComputed],
|
||||
|
||||
methods: {
|
||||
handleImagePreview() {
|
||||
ImagePreview([
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp',
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg?imageView2/2/w/980/h/980/q/75/format/webp'
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg',
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg',
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/15/FkubrzN7AgGwLlTeb1E89-T_ZjBg.png'
|
||||
]);
|
||||
}
|
||||
}
|
||||
@ -25,7 +29,22 @@ export default {
|
||||
|
||||
## ImagePreview 图片预览
|
||||
|
||||
### 基础用法
|
||||
### 使用指南
|
||||
|
||||
`ImagePreview`和其他组件不同，不是通过HTML结构的方式来使用，而是通过函数调用的方式。使用前需要先引入它，它接受一个数组作为参数，数组中的每一项对应了图片链接。
|
||||
|
||||
```js
|
||||
import { ImagePreview } from '@youzan/zanui-vue';
|
||||
|
||||
ImagePreview([
|
||||
imageUrl1,
|
||||
imageUrl2
|
||||
]);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
:::demo
|
||||
```html
|
||||
@ -38,8 +57,8 @@ export default {
|
||||
methods: {
|
||||
handleImagePreview() {
|
||||
ImagePreview([
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp',
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg?imageView2/2/w/980/h/980/q/75/format/webp'
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg',
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg'
|
||||
]);
|
||||
}
|
||||
}
|
||||
@ -48,3 +67,13 @@ export default {
|
||||
```
|
||||
:::
|
||||
|
||||
点击以下按钮查看手机端效果：
|
||||
|
||||
<zan-button @click="mobileShow = true">点击查看手机端效果</zan-button>
|
||||
<mobile-popup v-model="mobileShow" :url="mobileUrl"></mobile-popup>
|
||||
|
||||
### 方法参数
|
||||
|
||||
| 参数名 | 说明 | 类型 |
|
||||
|-----------|-----------|-----------|
|
||||
| imageUrls | 需要预览的图片 | `Array` |
|
||||
|
||||
@ -27,8 +27,42 @@ export default {
|
||||
|
||||
## Radio 单选框
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Radio`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Radio`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Radio, RadioGroup } from '@youzan/zanui-vue';
|
||||
import '@youzan/zanui-vue/lib/zanui-css/radio.css';
|
||||
|
||||
Vue.component(Radio.name, Radio);
|
||||
Vue.component(RadioGroup.name, RadioGroup);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Radio`组件，这样只能在你注册的组件中使用`Radio`：
|
||||
|
||||
```js
|
||||
import { Radio, RadioGroup } from '@youzan/zanui-vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'zan-radio': Radio,
|
||||
'zan-radio-group': RadioGroup
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 基础用法
|
||||
|
||||
通过`v-model`绑定值即可。当`Radio`选中时，绑定的值即为`Radio`中`name`属性设置的值。
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<div class="zan-radios">
|
||||
@ -50,6 +84,8 @@ export default {
|
||||
|
||||
### 禁用状态
|
||||
|
||||
设置`disabled`属性即可，此时`Radio`不能点击。
|
||||
|
||||
:::demo 禁用状态
|
||||
```html
|
||||
<div class="zan-radios">
|
||||
@ -71,6 +107,8 @@ export default {
|
||||
|
||||
### radio组
|
||||
|
||||
需要与`zan-radio-group`一起使用，在`zan-radio-group`通过`v-model`来绑定当前选中的值。例如下面的`radio3`：
|
||||
|
||||
:::demo radio组
|
||||
```html
|
||||
<div class="zan-radios">
|
||||
@ -94,6 +132,8 @@ export default {
|
||||
|
||||
### 与Cell组件一起使用
|
||||
|
||||
此时你需要再引入`Cell`和`CellGroup`组件。
|
||||
|
||||
:::demo 与Cell组件一起使用
|
||||
```html
|
||||
<zan-radio-group v-model="radio4">
|
||||
|
||||
@ -12,9 +12,42 @@ export default {
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Uploader 图片上传
|
||||
|
||||
### 基础用法
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Uploader`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Uploader`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Uploader } from '@youzan/zanui-vue';
|
||||
import '@youzan/zanui-vue/lib/zanui-css/uploader.css';
|
||||
|
||||
Vue.component(Uploader.name, Uploader);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Uploader`组件，这样只能在你注册的组件中使用`Uploader`：
|
||||
|
||||
```js
|
||||
import { Uploader } from '@youzan/zanui-vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'zan-uploader': Uploader
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
@ -26,7 +59,9 @@ export default {
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
### 自定义上传图标
|
||||
|
||||
#### 自定义上传图标
|
||||
|
||||
:::demo 自定义上传图标
|
||||
```html
|
||||
<div class="uploader-container">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user