blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-05 19:41:42 +08:00
Code Issues Projects Releases Wiki Activity

docs: prefer using ref (#9285)

Browse Source 
* docs: prefer using ref

* docs: fix lint error
This commit is contained in:
neverland 2021-08-18 16:39:09 +08:00 committed by GitHub
parent 5adaeb704d
commit c3ad21791b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
23 changed files with 577 additions and 621 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
src/cascader/README.md
View File

@ -22,34 +22,32 @@ app.use(Cascader);
```html ```html
<van-field <van-field
v-model="state.fieldValue" v-model="fieldValue"
is-link is-link
readonly readonly
label="Area" label="Area"
placeholder="Select Area" placeholder="Select Area"
@click="state.show = true" @click="show = true"
/> />
<van-popup v-model="state.show" round position="bottom"> <van-popup v-model="show" round position="bottom">
<van-cascader <van-cascader
v-model="state.cascaderValue" v-model="cascaderValue"
title="Select Area" title="Select Area"
:options="options" :options="options"
@close="state.show = false" @close="show = false"
@finish="onFinish" @finish="onFinish"
/> />
</van-popup> </van-popup>
``` ```
```js ```js
import { reactive } from 'vue'; import { ref } from 'vue';
export default { export default {
setup() { setup() {
const state = reactive({ const show = ref(false);
show: false, const fieldValue = ref('');
fieldValue: '', const cascaderValue = ref('');
cascaderValue: '',
});
const options = [ const options = [
{ {
text: 'Zhejiang', text: 'Zhejiang',
@ -63,14 +61,16 @@ export default {
}, },
]; ];
const onFinish = ({ selectedOptions }) => { const onFinish = ({ selectedOptions }) => {
state.show = false; show.value = false;
state.fieldValue = selectedOptions.map((option) => option.text).join('/'); fieldValue.value = selectedOptions.map((option) => option.text).join('/');
}; };
return { return {
state, show,
options, options,
onFinish, onFinish,
fieldValue,
cascaderValue,
}; };
}, },
}; };
@ -80,11 +80,11 @@ export default {
```html ```html
<van-cascader <van-cascader
v-model="state.cascaderValue" v-model="cascaderValue"
title="Select Area" title="Select Area"
:options="options" :options="options"
active-color="#1989fa" active-color="#1989fa"
@close="state.show = false" @close="show = false"
@finish="onFinish" @finish="onFinish"
/> />
``` ```
@ -93,19 +93,19 @@ export default {
```html ```html
<van-field <van-field
v-model="state.fieldValue" v-model="fieldValue"
is-link is-link
readonly readonly
label="Area" label="Area"
placeholder="Select Area" placeholder="Select Area"
@click="state.show = true" @click="show = true"
/> />
<van-popup v-model="state.show" round position="bottom"> <van-popup v-model="show" round position="bottom">
<van-cascader <van-cascader
v-model="state.cascaderValue" v-model="cascaderValue"
title="Select Area" title="Select Area"
:options="state.options" :options="options"
@close="state.show = false" @close="show = false"
@change="onChange" @change="onChange"
@finish="onFinish" @finish="onFinish"
/> />
@ -113,26 +113,24 @@ export default {
``` ```
```js ```js
import { reactive } from 'vue'; import { ref } from 'vue';
export default { export default {
setup() { setup() {
const state = reactive({ const show = ref(false);
show: false, const fieldValue = ref('');
fieldValue: '', const cascaderValue = ref('');
cascaderValue: '', const options = ref([
options: [
{ {
text: 'Zhejiang', text: 'Zhejiang',
value: '330000', value: '330000',
children: [], children: [],
}, },
], ]);
});
const onChange = ({ value }) => { const onChange = ({ value }) => {
if (value === state.options[0].value) { if (value === options.value[0].value) {
setTimeout(() => { setTimeout(() => {
state.options[0].children = [ options.value[0].children = [
{ text: 'Hangzhou', value: '330100' }, { text: 'Hangzhou', value: '330100' },
{ text: 'Ningbo', value: '330200' }, { text: 'Ningbo', value: '330200' },
]; ];
@ -140,14 +138,16 @@ export default {
} }
}; };
const onFinish = ({ selectedOptions }) => { const onFinish = ({ selectedOptions }) => {
state.show = false; show.value = false;
state.fieldValue = selectedOptions.map((option) => option.text).join('/'); fieldValue.value = selectedOptions.map((option) => option.text).join('/');
}; };
return { return {
state, show,
onChange, options,
onFinish, onFinish,
fieldValue,
cascaderValue,
}; };
}, },
}; };

72
src/cascader/README.zh-CN.md
View File

@ -24,34 +24,32 @@ app.use(Cascader);
```html ```html
<van-field <van-field
v-model="state.fieldValue" v-model="fieldValue"
is-link is-link
readonly readonly
label="地区" label="地区"
placeholder="请选择所在地区" placeholder="请选择所在地区"
@click="state.show = true" @click="show = true"
/> />
<van-popup v-model:show="state.show" round position="bottom"> <van-popup v-model:show="show" round position="bottom">
<van-cascader <van-cascader
v-model="state.cascaderValue" v-model="cascaderValue"
title="请选择所在地区" title="请选择所在地区"
:options="options" :options="options"
@close="state.show = false" @close="show = false"
@finish="onFinish" @finish="onFinish"
/> />
</van-popup> </van-popup>
``` ```
```js ```js
import { reactive } from 'vue'; import { ref } from 'vue';
export default { export default {
setup() { setup() {
const state = reactive({ const show = ref(false);
show: false, const fieldValue = ref('');
fieldValue: '', const cascaderValue = ref('');
cascaderValue: '',
});
// 选项列表，children 代表子选项，支持多级嵌套 // 选项列表，children 代表子选项，支持多级嵌套
const options = [ const options = [
{ {
@ -67,14 +65,16 @@ export default {
]; ];
// 全部选项选择完毕后，会触发 finish 事件 // 全部选项选择完毕后，会触发 finish 事件
const onFinish = ({ selectedOptions }) => { const onFinish = ({ selectedOptions }) => {
state.show = false; show.value = false;
state.fieldValue = selectedOptions.map((option) => option.text).join('/'); fieldValue.value = selectedOptions.map((option) => option.text).join('/');
}; };
return { return {
state, show,
options, options,
onFinish, onFinish,
fieldValue,
cascaderValue,
}; };
}, },
}; };
@ -86,11 +86,11 @@ export default {
```html ```html
<van-cascader <van-cascader
v-model="state.cascaderValue" v-model="cascaderValue"
title="请选择所在地区" title="请选择所在地区"
:options="options" :options="options"
active-color="#1989fa" active-color="#1989fa"
@close="state.show = false" @close="show = false"
@finish="onFinish" @finish="onFinish"
/> />
``` ```
@ -101,19 +101,19 @@ export default {
```html ```html
<van-field <van-field
v-model="state.fieldValue" v-model="fieldValue"
is-link is-link
readonly readonly
label="地区" label="地区"
placeholder="请选择所在地区" placeholder="请选择所在地区"
@click="state.show = true" @click="show = true"
/> />
<van-popup v-model:show="state.show" round position="bottom"> <van-popup v-model:show="show" round position="bottom">
<van-cascader <van-cascader
v-model="state.cascaderValue" v-model="cascaderValue"
title="请选择所在地区" title="请选择所在地区"
:options="state.options" :options="options"
@close="state.show = false" @close="show = false"
@change="onChange" @change="onChange"
@finish="onFinish" @finish="onFinish"
/> />
@ -121,26 +121,24 @@ export default {
``` ```
```js ```js
import { reactive } from 'vue'; import { ref } from 'vue';
export default { export default {
setup() { setup() {
const state = reactive({ const show = ref(false);
show: false, const fieldValue = ref('');
fieldValue: '', const cascaderValue = ref('');
cascaderValue: '', const options = ref([
options: [
{ {
text: '浙江省', text: '浙江省',
value: '330000', value: '330000',
children: [], children: [],
}, },
], ]);
});
const onChange = ({ value }) => { const onChange = ({ value }) => {
if (value === state.options[0].value) { if (value === options.value[0].value) {
setTimeout(() => { setTimeout(() => {
state.options[0].children = [ options.value[0].children = [
{ text: '杭州市', value: '330100' }, { text: '杭州市', value: '330100' },
{ text: '宁波市', value: '330200' }, { text: '宁波市', value: '330200' },
]; ];
@ -148,14 +146,16 @@ export default {
} }
}; };
const onFinish = ({ selectedOptions }) => { const onFinish = ({ selectedOptions }) => {
state.show = false; show.value = false;
state.fieldValue = selectedOptions.map((option) => option.text).join('/'); fieldValue.value = selectedOptions.map((option) => option.text).join('/');
}; };
return { return {
state, show,
onChange, options,
onFinish, onFinish,
fieldValue,
cascaderValue,
}; };
}, },
}; };

18
src/contact-card/README.md
View File

@ -40,29 +40,23 @@ export default {
### Edit Contact ### Edit Contact
```html ```html
<van-contact-card <van-contact-card type="edit" :tel="tel" :name="name" @click="onEdit" />
type="edit"
:name="currentContact.name"
:tel="currentContact.tel"
@click="onEdit"
/>
``` ```
```js ```js
import { reactive } from 'vue'; import { ref } from 'vue';
import { Toast } from 'vant'; import { Toast } from 'vant';
export default { export default {
setup() { setup() {
const currentContact = reactive({ const tel = ref('13000000000');
name: 'John Snow', const name = ref('John Snow');
tel: '13000000000',
});
const onEdit = () => Toast('edit'); const onEdit = () => Toast('edit');
return { return {
tel,
name,
onEdit, onEdit,
currentContact,
}; };
}, },
}; };

19
src/contact-card/README.zh-CN.md
View File

@ -40,28 +40,21 @@ export default {
### 编辑联系人 ### 编辑联系人
```html ```html
<van-contact-card <van-contact-card type="edit" :tel="tel" :name="name" @click="onEdit" />
type="edit"
:name="currentContact.name"
:tel="currentContact.tel"
@click="onEdit"
/>
``` ```
```js ```js
import { reactive } from 'vue'; import { ref } from 'vue';
import { Toast } from 'vant'; import { Toast } from 'vant';
export default { export default {
setup() { setup() {
const currentContact = reactive({ const tel = ref('13000000000');
name: '张三', const name = ref('张三');
tel: '13000000000',
});
const onEdit = () => Toast('edit'); const onEdit = () => Toast('edit');
return { return {
onEdit, tel,
name,
currentContact, currentContact,
}; };
}, },

13
src/contact-list/README.md
View File

@ -32,14 +32,13 @@ app.use(ContactList);
``` ```
```js ```js
import { reactive } from 'vue'; import { ref } from 'vue';
import { Toast } from 'vant'; import { Toast } from 'vant';
export default { export default {
setup() { setup() {
const state = reactive({ const chosenContactId = ref('1');
chosenContactId: '1', const list = ref([
list: [
{ {
id: '1', id: '1',
name: 'John Snow', name: 'John Snow',
@ -51,18 +50,18 @@ export default {
name: 'Ned Stark', name: 'Ned Stark',
tel: '1310000000', tel: '1310000000',
}, },
], ]);
});
const onAdd = () => Toast('Add'); const onAdd = () => Toast('Add');
const onEdit = (contact) => Toast('Edit' + contact.id); const onEdit = (contact) => Toast('Edit' + contact.id);
const onSelect = (contact) => Toast('Select' + contact.id); const onSelect = (contact) => Toast('Select' + contact.id);
return { return {
state, list,
onAdd, onAdd,
onEdit, onEdit,
onSelect, onSelect,
chosenContactId,
}; };
}, },
}; };

17
src/contact-list/README.zh-CN.md
View File

@ -22,8 +22,8 @@ app.use(ContactList);
```html ```html
<van-contact-list <van-contact-list
v-model="state.chosenContactId" v-model="chosenContactId"
:list="state.list" :list="list"
default-tag-text="默认" default-tag-text="默认"
@add="onAdd" @add="onAdd"
@edit="onEdit" @edit="onEdit"
@ -32,14 +32,13 @@ app.use(ContactList);
``` ```
```js ```js
import { reactive } from 'vue'; import { ref } from 'vue';
import { Toast } from 'vant'; import { Toast } from 'vant';
export default { export default {
setup() { setup() {
const state = reactive({ const chosenContactId = ref('1');
chosenContactId: '1', const list = ref([
list: [
{ {
id: '1', id: '1',
name: '张三', name: '张三',
@ -51,18 +50,18 @@ export default {
name: '李四', name: '李四',
tel: '1310000000', tel: '1310000000',
}, },
], ]);
});
const onAdd = () => Toast('新增'); const onAdd = () => Toast('新增');
const onEdit = (contact) => Toast('编辑' + contact.id); const onEdit = (contact) => Toast('编辑' + contact.id);
const onSelect = (contact) => Toast('选择' + contact.id); const onSelect = (contact) => Toast('选择' + contact.id);
return { return {
state, list,
onAdd, onAdd,
onEdit, onEdit,
onSelect, onSelect,
chosenContactId,
}; };
}, },
}; };

40
src/coupon-list/README.md
View File

@ -24,20 +24,20 @@ app.use(CouponList);
```html ```html
<!-- Coupon Cell --> <!-- Coupon Cell -->
<van-coupon-cell <van-coupon-cell
:coupons="state.coupons" :coupons="coupons"
:chosen-coupon="state.chosenCoupon" :chosen-coupon="chosenCoupon"
@click="state.showList = true" @click="showList = true"
/> />
<!-- Coupon List --> <!-- Coupon List -->
<van-popup <van-popup
v-model:show="state.showList" v-model:show="showList"
round round
position="bottom" position="bottom"
style="height: 90%; padding-top: 4px;" style="height: 90%; padding-top: 4px;"
> >
<van-coupon-list <van-coupon-list
:coupons="state.coupons" :coupons="coupons"
:chosen-coupon="state.chosenCoupon" :chosen-coupon="chosenCoupon"
:disabled-coupons="disabledCoupons" :disabled-coupons="disabledCoupons"
@change="onChange" @change="onChange"
@exchange="onExchange" @exchange="onExchange"
@ -46,9 +46,11 @@ app.use(CouponList);
``` ```
```js ```js
import { reactive } from 'vue'; import { ref } from 'vue';
const coupon = { export default {
setup() {
const coupon = {
available: 1, available: 1,
originCondition: 0, originCondition: 0,
reason: '', reason: '',
@ -58,28 +60,26 @@ const coupon = {
endAt: 1514592000, endAt: 1514592000,
valueDesc: '1.5', valueDesc: '1.5',
unitDesc: '元', unitDesc: '元',
}; };
export default { const coupons = ref([coupon]);
setup() { const showList = ref(false);
const state = reactive({ const chosenCoupon = ref(-1);
coupons: [coupon],
showList: false,
chosenCoupon: -1,
});
const onChange = (index) => { const onChange = (index) => {
state.showList = false; showList.value = false;
state.chosenCoupon = index; chosenCoupon.value = index;
}; };
const onExchange = (code) => { const onExchange = (code) => {
state.coupons.push(coupon); coupons.value.push(coupon);
}; };
return { return {
state, coupons,
showList,
onChange, onChange,
onExchange, onExchange,
chosenCoupon,
disabledCoupons: [coupon], disabledCoupons: [coupon],
}; };
}, },

40
src/coupon-list/README.zh-CN.md
View File

@ -24,20 +24,20 @@ app.use(CouponList);
```html ```html
<!-- 优惠券单元格 --> <!-- 优惠券单元格 -->
<van-coupon-cell <van-coupon-cell
:coupons="state.coupons" :coupons="coupons"
:chosen-coupon="state.chosenCoupon" :chosen-coupon="chosenCoupon"
@click="state.showList = true" @click="showList = true"
/> />
<!-- 优惠券列表 --> <!-- 优惠券列表 -->
<van-popup <van-popup
v-model:show="state.showList" v-model:show="showList"
round round
position="bottom" position="bottom"
style="height: 90%; padding-top: 4px;" style="height: 90%; padding-top: 4px;"
> >
<van-coupon-list <van-coupon-list
:coupons="state.coupons" :coupons="coupons"
:chosen-coupon="state.chosenCoupon" :chosen-coupon="chosenCoupon"
:disabled-coupons="disabledCoupons" :disabled-coupons="disabledCoupons"
@change="onChange" @change="onChange"
@exchange="onExchange" @exchange="onExchange"
@ -46,9 +46,11 @@ app.use(CouponList);
``` ```
```js ```js
import { reactive } from 'vue'; import { ref } from 'vue';
const coupon = { export default {
setup() {
const coupon = {
available: 1, available: 1,
condition: '无使用门槛\n最多优惠12元', condition: '无使用门槛\n最多优惠12元',
reason: '', reason: '',
@ -58,28 +60,26 @@ const coupon = {
endAt: 1514592000, endAt: 1514592000,
valueDesc: '1.5', valueDesc: '1.5',
unitDesc: '元', unitDesc: '元',
}; };
export default { const coupons = ref([coupon]);
setup() { const showList = ref(false);
const state = reactive({ const chosenCoupon = ref(-1);
coupons: [coupon],
showList: false,
chosenCoupon: -1,
});
const onChange = (index) => { const onChange = (index) => {
state.showList = false; showList.value = false;
state.chosenCoupon = index; chosenCoupon.value = index;
}; };
const onExchange = (code) => { const onExchange = (code) => {
state.coupons.push(coupon); coupons.value.push(coupon);
}; };
return { return {
state, coupons,
showList,
onChange, onChange,
onExchange, onExchange,
chosenCoupon,
disabledCoupons: [coupon], disabledCoupons: [coupon],
}; };
}, },

2
src/dropdown-menu/README.zh-CN.md
View File

@ -29,7 +29,7 @@ app.use(DropdownItem);
``` ```
```js ```js
import { reactive } from 'vue'; import { ref } from 'vue';
export default { export default {
setup() { setup() {

59
src/field/README.md
View File

@ -46,28 +46,26 @@ Use `type` prop to custom different type fields.
```html ```html
<van-cell-group inset> <van-cell-group inset>
<van-field v-model="state.text" label="Text" /> <van-field v-model="text" label="Text" />
<van-field v-model="state.tel" type="tel" label="Phone" /> <van-field v-model="tel" type="tel" label="Phone" />
<van-field v-model="state.digit" type="digit" label="Digit" /> <van-field v-model="digit" type="digit" label="Digit" />
<van-field v-model="state.number" type="number" label="Number" /> <van-field v-model="number" type="number" label="Number" />
<van-field v-model="state.password" type="password" label="Password" /> <van-field v-model="password" type="password" label="Password" />
</van-cell-group> </van-cell-group>
``` ```
```js ```js
import { reactive } from 'vue'; import { ref } from 'vue';
export default { export default {
setup() { setup() {
const state = reactive({ const tel = ref('');
tel: '', const text = ref('');
text: '', const digit = ref('');
digit: '', const number = ref('');
number: '', const password = ref('');
password: '',
});
return { state }; return { tel, text, digit, number, password };
}, },
}; };
``` ```
@ -86,14 +84,14 @@ export default {
```html ```html
<van-cell-group inset> <van-cell-group inset>
<van-field <van-field
v-model="state.value1" v-model="value1"
label="Text" label="Text"
left-icon="smile-o" left-icon="smile-o"
right-icon="warning-o" right-icon="warning-o"
placeholder="Show Icon" placeholder="Show Icon"
/> />
<van-field <van-field
v-model="state.value2" v-model="value2"
clearable clearable
label="Text" label="Text"
left-icon="music-o" left-icon="music-o"
@ -103,16 +101,16 @@ export default {
``` ```
```js ```js
import { reactive } from 'vue'; import { ref } from 'vue';
export default { export default {
setup() { setup() {
const state = reactive({ const value1 = ref('');
value1: '', const value2 = ref('123');
value2: '123', return {
}); value1,
value2,
return { state }; };
}, },
}; };
``` ```
@ -161,13 +159,13 @@ Use `formatter` prop to format the input value.
```html ```html
<van-cell-group inset> <van-cell-group inset>
<van-field <van-field
v-model="state.value1" v-model="value1"
label="Text" label="Text"
:formatter="formatter" :formatter="formatter"
placeholder="Format On Change" placeholder="Format On Change"
/> />
<van-field <van-field
v-model="state.value2" v-model="value2"
label="Text" label="Text"
:formatter="formatter" :formatter="formatter"
format-trigger="onBlur" format-trigger="onBlur"
@ -177,18 +175,17 @@ Use `formatter` prop to format the input value.
``` ```
```js ```js
import { reactive } from 'vue'; import { ref } from 'vue';
export default { export default {
setup() { setup() {
const state = reactive({ const value1 = ref('');
value1: '', const value2 = ref('');
value2: '',
});
const formatter = (value) => value.replace(/\d/g, ''); const formatter = (value) => value.replace(/\d/g, '');
return { return {
state, value1,
value2,
formatter, formatter,
}; };
}, },

59
src/field/README.zh-CN.md
View File

@ -48,32 +48,30 @@ export default {
```html ```html
<van-cell-group inset> <van-cell-group inset>
<!-- 输入任意文本 --> <!-- 输入任意文本 -->
<van-field v-model="state.text" label="文本" /> <van-field v-model="text" label="文本" />
<!-- 输入手机号，调起手机号键盘 --> <!-- 输入手机号，调起手机号键盘 -->
<van-field v-model="state.tel" type="tel" label="手机号" /> <van-field v-model="tel" type="tel" label="手机号" />
<!-- 允许输入正整数，调起纯数字键盘 --> <!-- 允许输入正整数，调起纯数字键盘 -->
<van-field v-model="state.digit" type="digit" label="整数" /> <van-field v-model="digit" type="digit" label="整数" />
<!-- 允许输入数字，调起带符号的纯数字键盘 --> <!-- 允许输入数字，调起带符号的纯数字键盘 -->
<van-field v-model="state.number" type="number" label="数字" /> <van-field v-model="number" type="number" label="数字" />
<!-- 输入密码 --> <!-- 输入密码 -->
<van-field v-model="state.password" type="password" label="密码" /> <van-field v-model="password" type="password" label="密码" />
</van-cell-group> </van-cell-group>
``` ```
```js ```js
import { reactive } from 'vue'; import { ref } from 'vue';
export default { export default {
setup() { setup() {
const state = reactive({ const tel = ref('');
tel: '', const text = ref('');
text: '', const digit = ref('');
digit: '', const number = ref('');
number: '', const password = ref('');
password: '',
});
return { state }; return { tel, text, digit, number, password };
}, },
}; };
``` ```
@ -96,14 +94,14 @@ export default {
```html ```html
<van-cell-group inset> <van-cell-group inset>
<van-field <van-field
v-model="state.value1" v-model="value1"
label="文本" label="文本"
left-icon="smile-o" left-icon="smile-o"
right-icon="warning-o" right-icon="warning-o"
placeholder="显示图标" placeholder="显示图标"
/> />
<van-field <van-field
v-model="state.value2" v-model="value2"
clearable clearable
label="文本" label="文本"
left-icon="music-o" left-icon="music-o"
@ -113,16 +111,16 @@ export default {
``` ```
```js ```js
import { reactive } from 'vue'; import { ref } from 'vue';
export default { export default {
setup() { setup() {
const state = reactive({ const value1 = ref('');
value1: '', const value2 = ref('123');
value2: '123', return {
}); value1,
value2,
return { state }; };
}, },
}; };
``` ```
@ -177,13 +175,13 @@ export default {
```html ```html
<van-cell-group inset> <van-cell-group inset>
<van-field <van-field
v-model="state.value1" v-model="value1"
label="文本" label="文本"
:formatter="formatter" :formatter="formatter"
placeholder="在输入时执行格式化" placeholder="在输入时执行格式化"
/> />
<van-field <van-field
v-model="state.value2" v-model="value2"
label="文本" label="文本"
:formatter="formatter" :formatter="formatter"
format-trigger="onBlur" format-trigger="onBlur"
@ -193,19 +191,18 @@ export default {
``` ```
```js ```js
import { reactive } from 'vue'; import { ref } from 'vue';
export default { export default {
setup() { setup() {
const state = reactive({ const value1 = ref('');
value1: '', const value2 = ref('');
value2: '',
});
// 过滤输入的数字 // 过滤输入的数字
const formatter = (value) => value.replace(/\d/g, ''); const formatter = (value) => value.replace(/\d/g, '');
return { return {
state, value1,
value2,
formatter, formatter,
}; };
}, },

133
src/form/README.md
View File

@ -26,14 +26,14 @@ app.use(CellGroup);
<van-form @submit="onSubmit"> <van-form @submit="onSubmit">
<van-cell-group inset> <van-cell-group inset>
<van-field <van-field
v-model="state.username" v-model="username"
name="Username" name="Username"
label="Username" label="Username"
placeholder="Username" placeholder="Username"
:rules="[{ required: true, message: 'Username is required' }]" :rules="[{ required: true, message: 'Username is required' }]"
/> />
<van-field <van-field
v-model="state.password" v-model="password"
type="password" type="password"
name="Password" name="Password"
label="Password" label="Password"
@ -50,20 +50,19 @@ app.use(CellGroup);
``` ```
```js ```js
import { reactive } from 'vue'; import { ref } from 'vue';
export default { export default {
setup() { setup() {
const state = reactive({ const username = ref('');
username: '', const password = ref('');
password: '',
});
const onSubmit = (values) => { const onSubmit = (values) => {
console.log('submit', values); console.log('submit', values);
}; };
return { return {
state, username,
password,
onSubmit, onSubmit,
}; };
}, },
@ -76,25 +75,25 @@ export default {
<van-form @failed="onFailed"> <van-form @failed="onFailed">
<van-cell-group inset> <van-cell-group inset>
<van-field <van-field
v-model="state.value1" v-model="value1"
name="pattern" name="pattern"
placeholder="Use pattern" placeholder="Use pattern"
:rules="[{ pattern, message: 'Error message' }]" :rules="[{ pattern, message: 'Error message' }]"
/> />
<van-field <van-field
v-model="state.value2" v-model="value2"
name="validator" name="validator"
placeholder="Use validator" placeholder="Use validator"
:rules="[{ validator, message: 'Error message' }]" :rules="[{ validator, message: 'Error message' }]"
/> />
<van-field <van-field
v-model="state.value3" v-model="value3"
name="validatorMessage" name="validatorMessage"
placeholder="Use validator to return message" placeholder="Use validator to return message"
:rules="[{ validator: validatorMessage }]" :rules="[{ validator: validatorMessage }]"
/> />
<van-field <van-field
v-model="state.value4" v-model="value4"
name="asyncValidator" name="asyncValidator"
placeholder="Use async validator" placeholder="Use async validator"
:rules="[{ validator: asyncValidator, message: 'Error message' }]" :rules="[{ validator: asyncValidator, message: 'Error message' }]"
@ -109,16 +108,15 @@ export default {
``` ```
```js ```js
import { reactive } from 'vue'; import { ref } from 'vue';
import { Toast } from 'vant'; import { Toast } from 'vant';
export default { export default {
setup() { setup() {
const state = reactive({ const value1 = ref('');
value1: '', const value2 = ref('');
value2: '', const value3 = ref('');
value3: '', const value4 = ref('');
});
const pattern = /\d{6}/; const pattern = /\d{6}/;
const validator = (val) => /1\d{10}/.test(val); const validator = (val) => /1\d{10}/.test(val);
@ -140,7 +138,10 @@ export default {
}; };
return { return {
state, value1,
value2,
value3,
value4,
pattern, pattern,
onFailed, onFailed,
validator, validator,
@ -317,43 +318,42 @@ export default {
```html ```html
<van-field <van-field
v-model="state.value" v-model="result"
is-link is-link
readonly readonly
name="picker" name="picker"
label="Picker" label="Picker"
placeholder="Select city" placeholder="Select city"
@click="state.showPicker = true" @click="showPicker = true"
/> />
<van-popup v-model:show="state.showPicker" position="bottom"> <van-popup v-model:show="showPicker" position="bottom">
<van-picker <van-picker
:columns="columns" :columns="columns"
@confirm="onConfirm" @confirm="onConfirm"
@cancel="state.showPicker = false" @cancel="showPicker = false"
/> />
</van-popup> </van-popup>
``` ```
```js ```js
import { reactive } from 'vue'; import { ref } from 'vue';
export default { export default {
setup() { setup() {
const state = reactive({ const result = ref('');
value: '', const showPicker = ref(false);
showPicker: false,
});
const columns = ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine']; const columns = ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'];
const onConfirm = (value) => { const onConfirm = (value) => {
state.value = value; result.value = value;
state.showPicker = false; showPicker.value = false;
}; };
return { return {
state, result,
columns, columns,
onConfirm, onConfirm,
showPicker,
}; };
}, },
}; };
@ -363,40 +363,40 @@ export default {
```html ```html
<van-field <van-field
v-model="state.value" v-model="result"
is-link is-link
readonly readonly
name="datetimePicker" name="datetimePicker"
label="Datetime Picker" label="Datetime Picker"
placeholder="Select time" placeholder="Select time"
@click="state.showPicker = true" @click="showPicker = true"
/> />
<van-popup v-model:show="state.showPicker" position="bottom"> <van-popup v-model:show="showPicker" position="bottom">
<van-datetime-picker <van-datetime-picker
type="time" type="time"
@confirm="onConfirm" @confirm="onConfirm"
@cancel="state.showPicker = false" @cancel="showPicker = false"
/> />
</van-popup> </van-popup>
``` ```
```js ```js
import { reactive } from 'vue'; import { ref } from 'vue';
export default { export default {
setup() { setup() {
const state = reactive({ const result = ref('');
value: '', const showPicker = ref(false);
showPicker: false,
});
const onConfirm = (value) => { const onConfirm = (value) => {
state.value = value; result.value = value;
state.showPicker = false; showPicker.value = false;
}; };
return { return {
state, result,
onConfirm, onConfirm,
showPicker,
}; };
}, },
}; };
@ -406,43 +406,43 @@ export default {
```html ```html
<van-field <van-field
v-model="state.value" v-model="result"
is-link is-link
readonly readonly
name="area" name="area"
label="Area Picker" label="Area Picker"
placeholder="Select area" placeholder="Select area"
@click="state.showArea = true" @click="showArea = true"
/> />
<van-popup v-model:show="state.showArea" position="bottom"> <van-popup v-model:show="showArea" position="bottom">
<van-area <van-area
:area-list="areaList" :area-list="areaList"
@confirm="onConfirm" @confirm="onConfirm"
@cancel="state.showArea = false" @cancel="showArea = false"
/> />
</van-popup> </van-popup>
``` ```
```js ```js
import { reactive } from 'vue'; import { ref } from 'vue';
import { areaList } from '@vant/area-data';
export default { export default {
setup() { setup() {
const state = reactive({ const result = ref('');
value: '', const showArea = ref(false);
showArea: false,
});
const onConfirm = (value) => { const onConfirm = (value) => {
state.showArea = false; showArea.value = false;
state.value = values result.value = values
.filter((item) => !!item) .filter((item) => !!item)
.map((item) => item.name) .map((item) => item.name)
.join('/'); .join('/');
}; };
return { return {
state, result,
areaList: {}, areaList,
showArea,
onConfirm, onConfirm,
}; };
}, },
@ -453,34 +453,33 @@ export default {
```html ```html
<van-field <van-field
v-model="state.value" v-model="result"
is-link is-link
readonly readonly
name="calendar" name="calendar"
label="Calendar" label="Calendar"
placeholder="Select date" placeholder="Select date"
@click="state.showCalendar = true" @click="showCalendar = true"
/> />
<van-calendar v-model:show="state.showCalendar" @confirm="onConfirm" /> <van-calendar v-model:show="showCalendar" @confirm="onConfirm" />
``` ```
```js ```js
import { reactive } from 'vue'; import { ref } from 'vue';
export default { export default {
setup() { setup() {
const state = reactive({ const result = ref('');
value: '', const showCalendar = ref(false);
showCalendar: false,
});
const onConfirm = (date) => { const onConfirm = (date) => {
state.value = `${date.getMonth() + 1}/${date.getDate()}`; result.value = `${date.getMonth() + 1}/${date.getDate()}`;
state.showCalendar = false; showCalendar.value = false;
}; };
return { return {
state, result,
onConfirm, onConfirm,
showCalendar,
}; };
}, },
}; };

134
src/form/README.zh-CN.md
View File

@ -28,14 +28,14 @@ app.use(CellGroup);
<van-form @submit="onSubmit"> <van-form @submit="onSubmit">
<van-cell-group inset> <van-cell-group inset>
<van-field <van-field
v-model="state.username" v-model="username"
name="用户名" name="用户名"
label="用户名" label="用户名"
placeholder="用户名" placeholder="用户名"
:rules="[{ required: true, message: '请填写用户名' }]" :rules="[{ required: true, message: '请填写用户名' }]"
/> />
<van-field <van-field
v-model="state.password" v-model="password"
type="password" type="password"
name="密码" name="密码"
label="密码" label="密码"
@ -52,20 +52,19 @@ app.use(CellGroup);
``` ```
```js ```js
import { reactive } from 'vue'; import { ref } from 'vue';
export default { export default {
setup() { setup() {
const state = reactive({ const username = ref('');
username: '', const password = ref('');
password: '',
});
const onSubmit = (values) => { const onSubmit = (values) => {
console.log('submit', values); console.log('submit', values);
}; };
return { return {
state, username,
password,
onSubmit, onSubmit,
}; };
}, },
@ -81,28 +80,28 @@ export default {
<van-cell-group inset> <van-cell-group inset>
<!-- 通过 pattern 进行正则校验 --> <!-- 通过 pattern 进行正则校验 -->
<van-field <van-field
v-model="state.value1" v-model="value1"
name="pattern" name="pattern"
placeholder="正则校验" placeholder="正则校验"
:rules="[{ pattern, message: '请输入正确内容' }]" :rules="[{ pattern, message: '请输入正确内容' }]"
/> />
<!-- 通过 validator 进行函数校验 --> <!-- 通过 validator 进行函数校验 -->
<van-field <van-field
v-model="state.value2" v-model="value2"
name="validator" name="validator"
placeholder="函数校验" placeholder="函数校验"
:rules="[{ validator, message: '请输入正确内容' }]" :rules="[{ validator, message: '请输入正确内容' }]"
/> />
<!-- 通过 validator 返回错误提示 --> <!-- 通过 validator 返回错误提示 -->
<van-field <van-field
v-model="state.value3" v-model="value3"
name="validatorMessage" name="validatorMessage"
placeholder="校验函数返回错误提示" placeholder="校验函数返回错误提示"
:rules="[{ validator: validatorMessage }]" :rules="[{ validator: validatorMessage }]"
/> />
<!-- 通过 validator 进行异步函数校验 --> <!-- 通过 validator 进行异步函数校验 -->
<van-field <van-field
v-model="state.value4" v-model="value4"
name="asyncValidator" name="asyncValidator"
placeholder="异步函数校验" placeholder="异步函数校验"
:rules="[{ validator: asyncValidator, message: '请输入正确内容' }]" :rules="[{ validator: asyncValidator, message: '请输入正确内容' }]"
@ -117,17 +116,15 @@ export default {
``` ```
```js ```js
import { reactive } from 'vue'; import { ref } from 'vue';
import { Toast } from 'vant'; import { Toast } from 'vant';
export default { export default {
setup() { setup() {
const state = reactive({ const value1 = ref('');
value1: '', const value2 = ref('');
value2: '', const value3 = ref('');
value3: '', const value4 = ref('');
value4: '',
});
const pattern = /\d{6}/; const pattern = /\d{6}/;
// 校验函数返回 true 表示校验通过，false 表示不通过 // 校验函数返回 true 表示校验通过，false 表示不通过
@ -152,7 +149,10 @@ export default {
}; };
return { return {
state, value1,
value2,
value3,
value4,
pattern, pattern,
onFailed, onFailed,
validator, validator,
@ -344,43 +344,42 @@ export default {
```html ```html
<van-field <van-field
v-model="state.value" v-model="result"
is-link is-link
readonly readonly
name="picker" name="picker"
label="选择器" label="选择器"
placeholder="点击选择城市" placeholder="点击选择城市"
@click="state.showPicker = true" @click="showPicker = true"
/> />
<van-popup v-model:show="state.showPicker" position="bottom"> <van-popup v-model:show="showPicker" position="bottom">
<van-picker <van-picker
:columns="columns" :columns="columns"
@confirm="onConfirm" @confirm="onConfirm"
@cancel="state.showPicker = false" @cancel="showPicker = false"
/> />
</van-popup> </van-popup>
``` ```
```js ```js
import { reactive } from 'vue'; import { ref } from 'vue';
export default { export default {
setup() { setup() {
const state = reactive({ const result = ref('');
value: '', const showPicker = ref(false);
showPicker: false,
});
const columns = ['杭州', '宁波', '温州', '嘉兴', '湖州']; const columns = ['杭州', '宁波', '温州', '嘉兴', '湖州'];
const onConfirm = (value) => { const onConfirm = (value) => {
state.value = value; result.value = value;
state.showPicker = false; showPicker.value = false;
}; };
return { return {
state, result,
columns, columns,
onConfirm, onConfirm,
showPicker,
}; };
}, },
}; };
@ -392,40 +391,40 @@ export default {
```html ```html
<van-field <van-field
v-model="state.value" v-model="result"
is-link is-link
readonly readonly
name="datetimePicker" name="datetimePicker"
label="时间选择" label="时间选择"
placeholder="点击选择时间" placeholder="点击选择时间"
@click="state.showPicker = true" @click="showPicker = true"
/> />
<van-popup v-model:show="state.showPicker" position="bottom"> <van-popup v-model:show="showPicker" position="bottom">
<van-datetime-picker <van-datetime-picker
type="time" type="time"
@confirm="onConfirm" @confirm="onConfirm"
@cancel="state.showPicker = false" @cancel="showPicker = false"
/> />
</van-popup> </van-popup>
``` ```
```js ```js
import { reactive } from 'vue'; import { ref } from 'vue';
export default { export default {
setup() { setup() {
const state = reactive({ const result = ref('');
value: '', const showPicker = ref(false);
showPicker: false,
});
const onConfirm = (value) => { const onConfirm = (value) => {
state.value = value; result.value = value;
state.showPicker = false; showPicker.value = false;
}; };
return { return {
state, result,
onConfirm, onConfirm,
showPicker,
}; };
}, },
}; };
@ -437,43 +436,43 @@ export default {
```html ```html
<van-field <van-field
v-model="state.value" v-model="result"
is-link is-link
readonly readonly
name="area" name="area"
label="地区选择" label="地区选择"
placeholder="点击选择省市区" placeholder="点击选择省市区"
@click="state.showArea = true" @click="showArea = true"
/> />
<van-popup v-model:show="state.showArea" position="bottom"> <van-popup v-model:show="showArea" position="bottom">
<van-area <van-area
:area-list="areaList" :area-list="areaList"
@confirm="onConfirm" @confirm="onConfirm"
@cancel="state.showArea = false" @cancel="showArea = false"
/> />
</van-popup> </van-popup>
``` ```
```js ```js
import { reactive } from 'vue'; import { ref } from 'vue';
import { areaList } from '@vant/area-data';
export default { export default {
setup() { setup() {
const state = reactive({ const result = ref('');
value: '', const showArea = ref(false);
showArea: false,
});
const onConfirm = (value) => { const onConfirm = (value) => {
state.showArea = false; showArea.value = false;
state.value = values result.value = values
.filter((item) => !!item) .filter((item) => !!item)
.map((item) => item.name) .map((item) => item.name)
.join('/'); .join('/');
}; };
return { return {
state, result,
areaList: {}, // 数据格式见 Area 组件文档 areaList,
showArea,
onConfirm, onConfirm,
}; };
}, },
@ -486,34 +485,33 @@ export default {
```html ```html
<van-field <van-field
v-model="state.value" v-model="value"
is-link is-link
readonly readonly
name="calendar" name="calendar"
label="日历" label="日历"
placeholder="点击选择日期" placeholder="点击选择日期"
@click="state.showCalendar = true" @click="showCalendar = true"
/> />
<van-calendar v-model:show="state.showCalendar" @confirm="onConfirm" /> <van-calendar v-model:show="showCalendar" @confirm="onConfirm" />
``` ```
```js ```js
import { reactive } from 'vue'; import { ref } from 'vue';
export default { export default {
setup() { setup() {
const state = reactive({ const result = ref('');
value: '', const showCalendar = ref(false);
showCalendar: false,
});
const onConfirm = (date) => { const onConfirm = (date) => {
state.value = `${date.getMonth() + 1}/${date.getDate()}`; result.value = `${date.getMonth() + 1}/${date.getDate()}`;
state.showCalendar = false; showCalendar.value = false;
}; };
return { return {
state, result,
onConfirm, onConfirm,
showCalendar,
}; };
}, },
}; };

30
src/image-preview/README.md
View File

@ -88,34 +88,30 @@ setTimeout(() => {
### Component Call ### Component Call
```html ```html
<van-image-preview <van-image-preview v-model:show="show" :images="images" @change="onChange">
v-model:show="state.show"
:images="state.images"
@change="onChange"
>
<template v-slot:index>Page: {{ index }}</template> <template v-slot:index>Page: {{ index }}</template>
</van-image-preview> </van-image-preview>
``` ```
```js ```js
import { reactive } from 'vue'; import { ref } from 'vue';
export default { export default {
setup() { setup() {
const state = reactive({ const show = ref(false);
show: false, const index = ref(0);
index: 0, const images = [
}); 'https://img.yzcdn.cn/vant/apple-1.jpg',
const onChange = (index) => { 'https://img.yzcdn.cn/vant/apple-2.jpg',
state.index = index; ];
const onChange = (newIndex) => {
index.value = newIndex;
}; };
return { return {
state, show,
images: [ index,
'https://img.yzcdn.cn/vant/apple-1.jpg', images,
'https://img.yzcdn.cn/vant/apple-2.jpg',
],
onChange, onChange,
}; };
}, },

30
src/image-preview/README.zh-CN.md
View File

@ -117,34 +117,30 @@ setTimeout(() => {
如果需要在图片预览内嵌入组件或其他自定义内容，可以使用组件调用的方式，调用前需要通过 `app.use` 注册组件。 如果需要在图片预览内嵌入组件或其他自定义内容，可以使用组件调用的方式，调用前需要通过 `app.use` 注册组件。
```html ```html
<van-image-preview <van-image-preview v-model:show="show" :images="images" @change="onChange">
v-model:show="state.show"
:images="state.images"
@change="onChange"
>
<template v-slot:index>第{{ index }}页</template> <template v-slot:index>第{{ index }}页</template>
</van-image-preview> </van-image-preview>
``` ```
```js ```js
import { reactive } from 'vue'; import { ref } from 'vue';
export default { export default {
setup() { setup() {
const state = reactive({ const show = ref(false);
show: false, const index = ref(0);
index: 0, const images = [
}); 'https://img.yzcdn.cn/vant/apple-1.jpg',
const onChange = (index) => { 'https://img.yzcdn.cn/vant/apple-2.jpg',
state.index = index; ];
const onChange = (newIndex) => {
index.value = newIndex;
}; };
return { return {
state, show,
images: [ index,
'https://img.yzcdn.cn/vant/apple-1.jpg', images,
'https://img.yzcdn.cn/vant/apple-2.jpg',
],
onChange, onChange,
}; };
}, },

94
src/list/README.md
View File

@ -22,42 +22,42 @@ app.use(List);
```html ```html
<van-list <van-list
v-model:loading="state.loading" v-model:loading="loading"
:finished="state.finished" :finished="finished"
finished-text="Finished" finished-text="Finished"
@load="onLoad" @load="onLoad"
> >
<van-cell v-for="item in state.list" :key="item" :title="item" /> <van-cell v-for="item in list" :key="item" :title="item" />
</van-list> </van-list>
``` ```
```js ```js
import { reactive } from 'vue'; import { ref } from 'vue';
export default { export default {
setup() { setup() {
const state = reactive({ const list = ref([]);
list: [], const loading = ref(false);
loading: false, const finished = ref(false);
finished: false,
});
const onLoad = () => { const onLoad = () => {
setTimeout(() => { setTimeout(() => {
for (let i = 0; i < 10; i++) { for (let i = 0; i < 10; i++) {
state.list.push(state.list.length + 1); list.value.push(list.value.length + 1);
} }
state.loading = false; loading.value = false;
if (state.list.length >= 40) { if (list.value.length >= 40) {
state.finished = true; finished.value = true;
} }
}, 1000); }, 1000);
}; };
return { return {
state, list,
onLoad, onLoad,
loading,
finished,
}; };
}, },
}; };
@ -67,35 +67,34 @@ export default {
```html ```html
<van-list <van-list
v-model:loading="state.loading" v-model:loading="loading"
v-model:error="state.error" v-model:error="error"
error-text="Request failed. Click to reload" error-text="Request failed. Click to reload"
@load="onLoad" @load="onLoad"
> >
<van-cell v-for="item in state.list" :key="item" :title="item" /> <van-cell v-for="item in list" :key="item" :title="item" />
</van-list> </van-list>
``` ```
```js ```js
import { reactive } from 'vue'; import { ref } from 'vue';
export default { export default {
setup() { setup() {
const state = reactive({ const list = ref([]);
list: [], const error = ref(false);
error: false, const loading = ref(false);
loading: false,
});
const onLoad = () => { const onLoad = () => {
fetchSomeThing().catch(() => { fetchSomeThing().catch(() => {
state.error = true; error.value = true;
}); });
}; };
return { return {
state, list,
error,
onLoad, onLoad,
loading,
}; };
}, },
}; };
@ -104,58 +103,59 @@ export default {
### PullRefresh ### PullRefresh
```html ```html
<van-pull-refresh v-model="state.refreshing" @refresh="onRefresh"> <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
<van-list <van-list
v-model:loading="state.loading" v-model:loading="loading"
:finished="state.finished" :finished="finished"
finished-text="Finished" finished-text="Finished"
@load="onLoad" @load="onLoad"
> >
<van-cell v-for="item in state.list" :key="item" :title="item" /> <van-cell v-for="item in list" :key="item" :title="item" />
</van-list> </van-list>
</van-pull-refresh> </van-pull-refresh>
``` ```
```js ```js
import { reactive } from 'vue'; import { ref } from 'vue';
export default { export default {
setup() { setup() {
const state = reactive({ const list = ref([]);
list: [], const loading = ref(false);
loading: false, const finished = ref(false);
finished: false, const refreshing = ref(false);
refreshing: false,
});
const onLoad = () => { const onLoad = () => {
setTimeout(() => { setTimeout(() => {
if (state.refreshing) { if (refreshing.value) {
state.list = []; list.value = [];
state.refreshing = false; refreshing.value = false;
} }
for (let i = 0; i < 10; i++) { for (let i = 0; i < 10; i++) {
state.list.push(state.list.length + 1); list.value.push(list.value.length + 1);
} }
state.loading = false; loading.value = false;
if (state.list.length >= 40) { if (list.value.length >= 40) {
state.finished = true; finished.value = true;
} }
}, 1000); }, 1000);
}; };
const onRefresh = () => { const onRefresh = () => {
state.finished = false; finished.value = false;
state.loading = true; loading.value = true;
onLoad(); onLoad();
}; };
return { return {
state, list,
onLoad, onLoad,
loading,
finished,
onRefresh, onRefresh,
refreshing,
}; };
}, },
}; };

94
src/list/README.zh-CN.md
View File

@ -24,47 +24,47 @@ List 组件通过 `loading` 和 `finished` 两个变量控制加载状态，当
```html ```html
<van-list <van-list
v-model:loading="state.loading" v-model:loading="loading"
:finished="state.finished" :finished="finished"
finished-text="没有更多了" finished-text="没有更多了"
@load="onLoad" @load="onLoad"
> >
<van-cell v-for="item in state.list" :key="item" :title="item" /> <van-cell v-for="item in list" :key="item" :title="item" />
</van-list> </van-list>
``` ```
```js ```js
import { reactive } from 'vue'; import { ref } from 'vue';
export default { export default {
setup() { setup() {
const state = reactive({ const list = ref([]);
list: [], const loading = ref(false);
loading: false, const finished = ref(false);
finished: false,
});
const onLoad = () => { const onLoad = () => {
// 异步更新数据 // 异步更新数据
// setTimeout 仅做示例，真实场景中一般为 ajax 请求 // setTimeout 仅做示例，真实场景中一般为 ajax 请求
setTimeout(() => { setTimeout(() => {
for (let i = 0; i < 10; i++) { for (let i = 0; i < 10; i++) {
state.list.push(state.list.length + 1); list.value.push(list.value.length + 1);
} }
// 加载状态结束 // 加载状态结束
state.loading = false; loading.value = false;
// 数据全部加载完成 // 数据全部加载完成
if (state.list.length >= 40) { if (list.value.length >= 40) {
state.finished = true; finished.value = true;
} }
}, 1000); }, 1000);
}; };
return { return {
state, list,
onLoad, onLoad,
loading,
finished,
}; };
}, },
}; };
@ -76,35 +76,34 @@ export default {
```html ```html
<van-list <van-list
v-model:loading="state.loading" v-model:loading="loading"
v-model:error="state.error" v-model:error="error"
error-text="请求失败，点击重新加载" error-text="请求失败，点击重新加载"
@load="onLoad" @load="onLoad"
> >
<van-cell v-for="item in state.list" :key="item" :title="item" /> <van-cell v-for="item in list" :key="item" :title="item" />
</van-list> </van-list>
``` ```
```js ```js
import { reactive } from 'vue'; import { ref } from 'vue';
export default { export default {
setup() { setup() {
const state = reactive({ const list = ref([]);
list: [], const error = ref(false);
error: false, const loading = ref(false);
loading: false,
});
const onLoad = () => { const onLoad = () => {
fetchSomeThing().catch(() => { fetchSomeThing().catch(() => {
state.error = true; error.value = true;
}); });
}; };
return { return {
state, list,
error,
onLoad, onLoad,
loading,
}; };
}, },
}; };
@ -115,62 +114,63 @@ export default {
List 组件可以与 [PullRefresh](#/zh-CN/pull-refresh) 组件结合使用，实现下拉刷新的效果。 List 组件可以与 [PullRefresh](#/zh-CN/pull-refresh) 组件结合使用，实现下拉刷新的效果。
```html ```html
<van-pull-refresh v-model="state.refreshing" @refresh="onRefresh"> <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
<van-list <van-list
v-model:loading="state.loading" v-model:loading="loading"
:finished="state.finished" :finished="finished"
finished-text="没有更多了" finished-text="没有更多了"
@load="onLoad" @load="onLoad"
> >
<van-cell v-for="item in state.list" :key="item" :title="item" /> <van-cell v-for="item in list" :key="item" :title="item" />
</van-list> </van-list>
</van-pull-refresh> </van-pull-refresh>
``` ```
```js ```js
import { reactive } from 'vue'; import { ref } from 'vue';
export default { export default {
setup() { setup() {
const state = reactive({ const list = ref([]);
list: [], const loading = ref(false);
loading: false, const finished = ref(false);
finished: false, const refreshing = ref(false);
refreshing: false,
});
const onLoad = () => { const onLoad = () => {
setTimeout(() => { setTimeout(() => {
if (state.refreshing) { if (refreshing.value) {
state.list = []; list.value = [];
state.refreshing = false; refreshing.value = false;
} }
for (let i = 0; i < 10; i++) { for (let i = 0; i < 10; i++) {
state.list.push(state.list.length + 1); list.value.push(list.value.length + 1);
} }
state.loading = false; loading.value = false;
if (state.list.length >= 40) { if (list.value.length >= 40) {
state.finished = true; finished.value = true;
} }
}, 1000); }, 1000);
}; };
const onRefresh = () => { const onRefresh = () => {
// 清空列表数据 // 清空列表数据
state.finished = false; finished.value = false;
// 重新加载数据 // 重新加载数据
// 将 loading 设置为 true，表示处于加载状态 // 将 loading 设置为 true，表示处于加载状态
state.loading = true; loading.value = true;
onLoad(); onLoad();
}; };
return { return {
state, list,
onLoad, onLoad,
loading,
finished,
onRefresh, onRefresh,
refreshing,
}; };
}, },
}; };

39
src/picker/README.md
View File

@ -189,25 +189,23 @@ export default {
When Picker columns data is acquired asynchronously, use `loading` prop to show loading prompt. When Picker columns data is acquired asynchronously, use `loading` prop to show loading prompt.
```html ```html
<van-picker title="Title" :columns="state.columns" :loading="state.loading" /> <van-picker title="Title" :columns="columns" :loading="loading" />
``` ```
```js ```js
import { reactive } from 'vue'; import { ref } from 'vue';
export default { export default {
setup() { setup() {
const state = reactive({ const columns = ref([]);
columns: [], const loading = ref(true);
loading: true,
});
setTimeout(() => { setTimeout(() => {
state.loading = false; columns.value = ['Option'];
state.columns = ['Option']; loading.value = false;
}, 1000); }, 1000);
return { state }; return { columns, loading };
}, },
}; };
``` ```
@ -216,43 +214,42 @@ export default {
```html ```html
<van-field <van-field
v-model="state.value" v-model="result"
is-link is-link
readonly readonly
label="City" label="City"
placeholder="Choose City" placeholder="Choose City"
@click="state.showPicker = true" @click="showPicker = true"
/> />
<van-popup v-model:show="showPicker" round position="bottom"> <van-popup v-model:show="showPicker" round position="bottom">
<van-picker <van-picker
title="Title" title="Title"
:columns="state.columns" :columns="columns"
@cancel="state.showPicker = false" @cancel="showPicker = false"
@confirm="onConfirm" @confirm="onConfirm"
/> />
</van-popup> </van-popup>
``` ```
```js ```js
import { reactive } from 'vue'; import { ref } from 'vue';
export default { export default {
setup() { setup() {
const columns = ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine']; const columns = ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'];
const state = reactive({ const result = ref('');
value: '', const showPicker = ref(false);
showPicker: false,
});
const onConfirm = (value) => { const onConfirm = (value) => {
state.value = value; result.value = value;
state.showPicker = false; showPicker.value = false;
}; };
return { return {
state, result,
columns, columns,
onConfirm, onConfirm,
showPicker,
}; };
}, },
}; };

39
src/picker/README.zh-CN.md
View File

@ -211,25 +211,23 @@ export default {
若选择器数据是异步获取的，可以通过 `loading` 属性显示加载提示。 若选择器数据是异步获取的，可以通过 `loading` 属性显示加载提示。
```html ```html
<van-picker :columns="state.columns" :loading="state.loading" /> <van-picker :columns="columns" :loading="loading" />
``` ```
```js ```js
import { reactive } from 'vue'; import { ref } from 'vue';
export default { export default {
setup() { setup() {
const state = reactive({ const columns = ref([]);
columns: [], const loading = ref(true);
loading: true,
});
setTimeout(() => { setTimeout(() => {
state.loading = false; columns.value = ['选项'];
state.columns = ['选项']; loading.value = false;
}, 1000); }, 1000);
return { state }; return { columns, loading };
}, },
}; };
``` ```
@ -240,42 +238,41 @@ export default {
```html ```html
<van-field <van-field
v-model="state.value" v-model="value"
is-link is-link
readonly readonly
label="城市" label="城市"
placeholder="选择城市" placeholder="选择城市"
@click="state.showPicker = true" @click="showPicker = true"
/> />
<van-popup v-model:show="state.showPicker" round position="bottom"> <van-popup v-model:show="showPicker" round position="bottom">
<van-picker <van-picker
:columns="columns" :columns="columns"
@cancel="state.showPicker = false" @cancel="showPicker = false"
@confirm="onConfirm" @confirm="onConfirm"
/> />
</van-popup> </van-popup>
``` ```
```js ```js
import { reactive } from 'vue'; import { ref } from 'vue';
export default { export default {
setup() { setup() {
const columns = ['杭州', '宁波', '温州', '绍兴', '湖州', '嘉兴', '金华']; const columns = ['杭州', '宁波', '温州', '绍兴', '湖州', '嘉兴', '金华'];
const state = reactive({ const result = ref('');
value: '', const showPicker = ref(false);
showPicker: false,
});
const onConfirm = (value) => { const onConfirm = (value) => {
state.value = value; result.value = value;
state.showPicker = false; showPicker.value = false;
}; };
return { return {
state, result,
columns, columns,
onConfirm, onConfirm,
showPicker,
}; };
}, },
}; };

19
src/pull-refresh/README.md
View File

@ -23,31 +23,30 @@ app.use(PullRefresh);
The `refresh` event will be Emitted when pull refresh, you should set `v-model` to `false` to reset loading status after process refresh event. The `refresh` event will be Emitted when pull refresh, you should set `v-model` to `false` to reset loading status after process refresh event.
```html ```html
<van-pull-refresh v-model="state.loading" @refresh="onRefresh"> <van-pull-refresh v-model="loading" @refresh="onRefresh">
<p>Refresh Count: {{ state.count }}</p> <p>Refresh Count: {{ count }}</p>
</van-pull-refresh> </van-pull-refresh>
``` ```
```js ```js
import { reactive } from 'vue'; import { ref } from 'vue';
import { Toast } from 'vant'; import { Toast } from 'vant';
export default { export default {
setup() { setup() {
const state = reactive({ const count = ref(0);
count: 0, const loading = ref(false);
loading: false,
});
const onRefresh = () => { const onRefresh = () => {
setTimeout(() => { setTimeout(() => {
Toast('Refresh Success'); Toast('Refresh Success');
state.loading = false; loading.value = false;
state.count++; count.value++;
}, 1000); }, 1000);
}; };
return { return {
state, count,
loading,
onRefresh, onRefresh,
}; };
}, },

19
src/pull-refresh/README.zh-CN.md
View File

@ -23,31 +23,30 @@ app.use(PullRefresh);
下拉刷新时会触发 `refresh` 事件，在事件的回调函数中可以进行同步或异步操作，操作完成后将 `v-model` 设置为 `false`，表示加载完成。 下拉刷新时会触发 `refresh` 事件，在事件的回调函数中可以进行同步或异步操作，操作完成后将 `v-model` 设置为 `false`，表示加载完成。
```html ```html
<van-pull-refresh v-model="state.loading" @refresh="onRefresh"> <van-pull-refresh v-model="loading" @refresh="onRefresh">
<p>刷新次数: {{ state.count }}</p> <p>刷新次数: {{ count }}</p>
</van-pull-refresh> </van-pull-refresh>
``` ```
```js ```js
import { reactive } from 'vue'; import { ref } from 'vue';
import { Toast } from 'vant'; import { Toast } from 'vant';
export default { export default {
setup() { setup() {
const state = reactive({ const count = ref(0);
count: 0, const loading = ref(false);
loading: false,
});
const onRefresh = () => { const onRefresh = () => {
setTimeout(() => { setTimeout(() => {
Toast('刷新成功'); Toast('刷新成功');
state.loading = false; loading.value = false;
state.count++; count.value++;
}, 1000); }, 1000);
}; };
return { return {
state, count,
loading,
onRefresh, onRefresh,
}; };
}, },

30
src/tree-select/README.md
View File

@ -22,21 +22,19 @@ app.use(TreeSelect);
```html ```html
<van-tree-select <van-tree-select
v-model:active-id="state.activeId" v-model:active-id="activeId"
v-model:main-active-index="state.activeIndex" v-model:main-active-index="activeIndex"
:items="items" :items="items"
/> />
``` ```
```js ```js
import { reactive } from 'vue'; import { ref } from 'vue';
export default { export default {
setup() { setup() {
const state = reactive({ const activeId = ref(1);
activeId: 1, const activeIndex = ref(0);
activeIndex: 0,
});
const items = [ const items = [
{ {
text: 'Group 1', text: 'Group 1',
@ -55,8 +53,9 @@ export default {
]; ];
return { return {
state,
items, items,
activeId,
activeIndex,
}; };
}, },
}; };
@ -66,21 +65,19 @@ export default {
```html ```html
<van-tree-select <van-tree-select
v-model:active-id="state.activeIds" v-model:active-id="activeIds"
v-model:main-active-index="state.activeIndex" v-model:main-active-index="activeIndex"
:items="items" :items="items"
/> />
``` ```
```js ```js
import { reactive } from 'vue'; import { ref } from 'vue';
export default { export default {
setup() { setup() {
const state = reactive({ const activeId = ref([1, 2]);
activeId: [1, 2], const activeIndex = ref(0);
activeIndex: 0,
});
const items = [ const items = [
{ {
text: 'Group 1', text: 'Group 1',
@ -99,8 +96,9 @@ export default {
]; ];
return { return {
state,
items, items,
activeId,
activeIndex,
}; };
}, },
}; };

30
src/tree-select/README.zh-CN.md
View File

@ -24,21 +24,19 @@ app.use(TreeSelect);
```html ```html
<van-tree-select <van-tree-select
v-model:active-id="state.activeId" v-model:active-id="activeId"
v-model:main-active-index="state.activeIndex" v-model:main-active-index="activeIndex"
:items="items" :items="items"
/> />
``` ```
```js ```js
import { reactive } from 'vue'; import { ref } from 'vue';
export default { export default {
setup() { setup() {
const state = reactive({ const activeId = ref(1);
activeId: 1, const activeIndex = ref(0);
activeIndex: 0,
});
const items = [ const items = [
{ {
text: '浙江', text: '浙江',
@ -57,8 +55,9 @@ export default {
]; ];
return { return {
state,
items, items,
activeId,
activeIndex,
}; };
}, },
}; };
@ -70,21 +69,19 @@ export default {
```html ```html
<van-tree-select <van-tree-select
v-model:active-id="state.activeIds" v-model:active-id="activeIds"
v-model:main-active-index="state.activeIndex" v-model:main-active-index="activeIndex"
:items="items" :items="items"
/> />
``` ```
```js ```js
import { reactive } from 'vue'; import { ref } from 'vue';
export default { export default {
setup() { setup() {
const state = reactive({ const activeId = ref([1, 2]);
activeId: [1, 2], const activeIndex = ref(0);
activeIndex: 0,
});
const items = [ const items = [
{ {
text: '浙江', text: '浙江',
@ -103,8 +100,9 @@ export default {
]; ];
return { return {
state,
items, items,
activeId,
activeIndex,
}; };
}, },
}; };