mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-05 05:42:44 +08:00
docs: prefer using ref (#9285)
* docs: prefer using ref * docs: fix lint error
This commit is contained in:
neverland
GitHub
parent
5adaeb704d
commit
c3ad21791b
@ -22,34 +22,32 @@ app.use(Cascader);
|
||||
|
||||
```html
|
||||
<van-field
|
||||
v-model="state.fieldValue"
|
||||
v-model="fieldValue"
|
||||
is-link
|
||||
readonly
|
||||
label="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
|
||||
v-model="state.cascaderValue"
|
||||
v-model="cascaderValue"
|
||||
title="Select Area"
|
||||
:options="options"
|
||||
@close="state.show = false"
|
||||
@close="show = false"
|
||||
@finish="onFinish"
|
||||
/>
|
||||
</van-popup>
|
||||
```
|
||||
|
||||
```js
|
||||
import { reactive } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const state = reactive({
|
||||
show: false,
|
||||
fieldValue: '',
|
||||
cascaderValue: '',
|
||||
});
|
||||
const show = ref(false);
|
||||
const fieldValue = ref('');
|
||||
const cascaderValue = ref('');
|
||||
const options = [
|
||||
{
|
||||
text: 'Zhejiang',
|
||||
@ -63,14 +61,16 @@ export default {
|
||||
},
|
||||
];
|
||||
const onFinish = ({ selectedOptions }) => {
|
||||
state.show = false;
|
||||
state.fieldValue = selectedOptions.map((option) => option.text).join('/');
|
||||
show.value = false;
|
||||
fieldValue.value = selectedOptions.map((option) => option.text).join('/');
|
||||
};
|
||||
|
||||
return {
|
||||
state,
|
||||
show,
|
||||
options,
|
||||
onFinish,
|
||||
fieldValue,
|
||||
cascaderValue,
|
||||
};
|
||||
},
|
||||
};
|
||||
@ -80,11 +80,11 @@ export default {
|
||||
|
||||
```html
|
||||
<van-cascader
|
||||
v-model="state.cascaderValue"
|
||||
v-model="cascaderValue"
|
||||
title="Select Area"
|
||||
:options="options"
|
||||
active-color="#1989fa"
|
||||
@close="state.show = false"
|
||||
@close="show = false"
|
||||
@finish="onFinish"
|
||||
/>
|
||||
```
|
||||
@ -93,19 +93,19 @@ export default {
|
||||
|
||||
```html
|
||||
<van-field
|
||||
v-model="state.fieldValue"
|
||||
v-model="fieldValue"
|
||||
is-link
|
||||
readonly
|
||||
label="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
|
||||
v-model="state.cascaderValue"
|
||||
v-model="cascaderValue"
|
||||
title="Select Area"
|
||||
:options="state.options"
|
||||
@close="state.show = false"
|
||||
:options="options"
|
||||
@close="show = false"
|
||||
@change="onChange"
|
||||
@finish="onFinish"
|
||||
/>
|
||||
@ -113,26 +113,24 @@ export default {
|
||||
```
|
||||
|
||||
```js
|
||||
import { reactive } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const state = reactive({
|
||||
show: false,
|
||||
fieldValue: '',
|
||||
cascaderValue: '',
|
||||
options: [
|
||||
{
|
||||
text: 'Zhejiang',
|
||||
value: '330000',
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
});
|
||||
const show = ref(false);
|
||||
const fieldValue = ref('');
|
||||
const cascaderValue = ref('');
|
||||
const options = ref([
|
||||
{
|
||||
text: 'Zhejiang',
|
||||
value: '330000',
|
||||
children: [],
|
||||
},
|
||||
]);
|
||||
const onChange = ({ value }) => {
|
||||
if (value === state.options[0].value) {
|
||||
if (value === options.value[0].value) {
|
||||
setTimeout(() => {
|
||||
state.options[0].children = [
|
||||
options.value[0].children = [
|
||||
{ text: 'Hangzhou', value: '330100' },
|
||||
{ text: 'Ningbo', value: '330200' },
|
||||
];
|
||||
@ -140,14 +138,16 @@ export default {
|
||||
}
|
||||
};
|
||||
const onFinish = ({ selectedOptions }) => {
|
||||
state.show = false;
|
||||
state.fieldValue = selectedOptions.map((option) => option.text).join('/');
|
||||
show.value = false;
|
||||
fieldValue.value = selectedOptions.map((option) => option.text).join('/');
|
||||
};
|
||||
|
||||
return {
|
||||
state,
|
||||
onChange,
|
||||
show,
|
||||
options,
|
||||
onFinish,
|
||||
fieldValue,
|
||||
cascaderValue,
|
||||
};
|
||||
},
|
||||
};
|
||||
|
||||
@ -24,34 +24,32 @@ app.use(Cascader);
|
||||
|
||||
```html
|
||||
<van-field
|
||||
v-model="state.fieldValue"
|
||||
v-model="fieldValue"
|
||||
is-link
|
||||
readonly
|
||||
label="地区"
|
||||
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
|
||||
v-model="state.cascaderValue"
|
||||
v-model="cascaderValue"
|
||||
title="请选择所在地区"
|
||||
:options="options"
|
||||
@close="state.show = false"
|
||||
@close="show = false"
|
||||
@finish="onFinish"
|
||||
/>
|
||||
</van-popup>
|
||||
```
|
||||
|
||||
```js
|
||||
import { reactive } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const state = reactive({
|
||||
show: false,
|
||||
fieldValue: '',
|
||||
cascaderValue: '',
|
||||
});
|
||||
const show = ref(false);
|
||||
const fieldValue = ref('');
|
||||
const cascaderValue = ref('');
|
||||
// 选项列表，children 代表子选项，支持多级嵌套
|
||||
const options = [
|
||||
{
|
||||
@ -67,14 +65,16 @@ export default {
|
||||
];
|
||||
// 全部选项选择完毕后，会触发 finish 事件
|
||||
const onFinish = ({ selectedOptions }) => {
|
||||
state.show = false;
|
||||
state.fieldValue = selectedOptions.map((option) => option.text).join('/');
|
||||
show.value = false;
|
||||
fieldValue.value = selectedOptions.map((option) => option.text).join('/');
|
||||
};
|
||||
|
||||
return {
|
||||
state,
|
||||
show,
|
||||
options,
|
||||
onFinish,
|
||||
fieldValue,
|
||||
cascaderValue,
|
||||
};
|
||||
},
|
||||
};
|
||||
@ -86,11 +86,11 @@ export default {
|
||||
|
||||
```html
|
||||
<van-cascader
|
||||
v-model="state.cascaderValue"
|
||||
v-model="cascaderValue"
|
||||
title="请选择所在地区"
|
||||
:options="options"
|
||||
active-color="#1989fa"
|
||||
@close="state.show = false"
|
||||
@close="show = false"
|
||||
@finish="onFinish"
|
||||
/>
|
||||
```
|
||||
@ -101,19 +101,19 @@ export default {
|
||||
|
||||
```html
|
||||
<van-field
|
||||
v-model="state.fieldValue"
|
||||
v-model="fieldValue"
|
||||
is-link
|
||||
readonly
|
||||
label="地区"
|
||||
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
|
||||
v-model="state.cascaderValue"
|
||||
v-model="cascaderValue"
|
||||
title="请选择所在地区"
|
||||
:options="state.options"
|
||||
@close="state.show = false"
|
||||
:options="options"
|
||||
@close="show = false"
|
||||
@change="onChange"
|
||||
@finish="onFinish"
|
||||
/>
|
||||
@ -121,26 +121,24 @@ export default {
|
||||
```
|
||||
|
||||
```js
|
||||
import { reactive } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const state = reactive({
|
||||
show: false,
|
||||
fieldValue: '',
|
||||
cascaderValue: '',
|
||||
options: [
|
||||
{
|
||||
text: '浙江省',
|
||||
value: '330000',
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
});
|
||||
const show = ref(false);
|
||||
const fieldValue = ref('');
|
||||
const cascaderValue = ref('');
|
||||
const options = ref([
|
||||
{
|
||||
text: '浙江省',
|
||||
value: '330000',
|
||||
children: [],
|
||||
},
|
||||
]);
|
||||
const onChange = ({ value }) => {
|
||||
if (value === state.options[0].value) {
|
||||
if (value === options.value[0].value) {
|
||||
setTimeout(() => {
|
||||
state.options[0].children = [
|
||||
options.value[0].children = [
|
||||
{ text: '杭州市', value: '330100' },
|
||||
{ text: '宁波市', value: '330200' },
|
||||
];
|
||||
@ -148,14 +146,16 @@ export default {
|
||||
}
|
||||
};
|
||||
const onFinish = ({ selectedOptions }) => {
|
||||
state.show = false;
|
||||
state.fieldValue = selectedOptions.map((option) => option.text).join('/');
|
||||
show.value = false;
|
||||
fieldValue.value = selectedOptions.map((option) => option.text).join('/');
|
||||
};
|
||||
|
||||
return {
|
||||
state,
|
||||
onChange,
|
||||
show,
|
||||
options,
|
||||
onFinish,
|
||||
fieldValue,
|
||||
cascaderValue,
|
||||
};
|
||||
},
|
||||
};
|
||||
|
||||
@ -40,29 +40,23 @@ export default {
|
||||
### Edit Contact
|
||||
|
||||
```html
|
||||
<van-contact-card
|
||||
type="edit"
|
||||
:name="currentContact.name"
|
||||
:tel="currentContact.tel"
|
||||
@click="onEdit"
|
||||
/>
|
||||
<van-contact-card type="edit" :tel="tel" :name="name" @click="onEdit" />
|
||||
```
|
||||
|
||||
```js
|
||||
import { reactive } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
import { Toast } from 'vant';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const currentContact = reactive({
|
||||
name: 'John Snow',
|
||||
tel: '13000000000',
|
||||
});
|
||||
const tel = ref('13000000000');
|
||||
const name = ref('John Snow');
|
||||
const onEdit = () => Toast('edit');
|
||||
|
||||
return {
|
||||
tel,
|
||||
name,
|
||||
onEdit,
|
||||
currentContact,
|
||||
};
|
||||
},
|
||||
};
|
||||
|
||||
@ -40,28 +40,21 @@ export default {
|
||||
### 编辑联系人
|
||||
|
||||
```html
|
||||
<van-contact-card
|
||||
type="edit"
|
||||
:name="currentContact.name"
|
||||
:tel="currentContact.tel"
|
||||
@click="onEdit"
|
||||
/>
|
||||
<van-contact-card type="edit" :tel="tel" :name="name" @click="onEdit" />
|
||||
```
|
||||
|
||||
```js
|
||||
import { reactive } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
import { Toast } from 'vant';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const currentContact = reactive({
|
||||
name: '张三',
|
||||
tel: '13000000000',
|
||||
});
|
||||
const tel = ref('13000000000');
|
||||
const name = ref('张三');
|
||||
const onEdit = () => Toast('edit');
|
||||
|
||||
return {
|
||||
onEdit,
|
||||
tel,
|
||||
name,
|
||||
currentContact,
|
||||
};
|
||||
},
|
||||
|
||||
@ -32,37 +32,36 @@ app.use(ContactList);
|
||||
```
|
||||
|
||||
```js
|
||||
import { reactive } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
import { Toast } from 'vant';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const state = reactive({
|
||||
chosenContactId: '1',
|
||||
list: [
|
||||
{
|
||||
id: '1',
|
||||
name: 'John Snow',
|
||||
tel: '13000000000',
|
||||
isDefault: true,
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'Ned Stark',
|
||||
tel: '1310000000',
|
||||
},
|
||||
],
|
||||
});
|
||||
const chosenContactId = ref('1');
|
||||
const list = ref([
|
||||
{
|
||||
id: '1',
|
||||
name: 'John Snow',
|
||||
tel: '13000000000',
|
||||
isDefault: true,
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'Ned Stark',
|
||||
tel: '1310000000',
|
||||
},
|
||||
]);
|
||||
|
||||
const onAdd = () => Toast('Add');
|
||||
const onEdit = (contact) => Toast('Edit' + contact.id);
|
||||
const onSelect = (contact) => Toast('Select' + contact.id);
|
||||
|
||||
return {
|
||||
state,
|
||||
list,
|
||||
onAdd,
|
||||
onEdit,
|
||||
onSelect,
|
||||
chosenContactId,
|
||||
};
|
||||
},
|
||||
};
|
||||
|
||||
@ -22,8 +22,8 @@ app.use(ContactList);
|
||||
|
||||
```html
|
||||
<van-contact-list
|
||||
v-model="state.chosenContactId"
|
||||
:list="state.list"
|
||||
v-model="chosenContactId"
|
||||
:list="list"
|
||||
default-tag-text="默认"
|
||||
@add="onAdd"
|
||||
@edit="onEdit"
|
||||
@ -32,37 +32,36 @@ app.use(ContactList);
|
||||
```
|
||||
|
||||
```js
|
||||
import { reactive } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
import { Toast } from 'vant';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const state = reactive({
|
||||
chosenContactId: '1',
|
||||
list: [
|
||||
{
|
||||
id: '1',
|
||||
name: '张三',
|
||||
tel: '13000000000',
|
||||
isDefault: true,
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: '李四',
|
||||
tel: '1310000000',
|
||||
},
|
||||
],
|
||||
});
|
||||
const chosenContactId = ref('1');
|
||||
const list = ref([
|
||||
{
|
||||
id: '1',
|
||||
name: '张三',
|
||||
tel: '13000000000',
|
||||
isDefault: true,
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: '李四',
|
||||
tel: '1310000000',
|
||||
},
|
||||
]);
|
||||
|
||||
const onAdd = () => Toast('新增');
|
||||
const onEdit = (contact) => Toast('编辑' + contact.id);
|
||||
const onSelect = (contact) => Toast('选择' + contact.id);
|
||||
|
||||
return {
|
||||
state,
|
||||
list,
|
||||
onAdd,
|
||||
onEdit,
|
||||
onSelect,
|
||||
chosenContactId,
|
||||
};
|
||||
},
|
||||
};
|
||||
|
||||
@ -24,20 +24,20 @@ app.use(CouponList);
|
||||
```html
|
||||
<!-- Coupon Cell -->
|
||||
<van-coupon-cell
|
||||
:coupons="state.coupons"
|
||||
:chosen-coupon="state.chosenCoupon"
|
||||
@click="state.showList = true"
|
||||
:coupons="coupons"
|
||||
:chosen-coupon="chosenCoupon"
|
||||
@click="showList = true"
|
||||
/>
|
||||
<!-- Coupon List -->
|
||||
<van-popup
|
||||
v-model:show="state.showList"
|
||||
v-model:show="showList"
|
||||
round
|
||||
position="bottom"
|
||||
style="height: 90%; padding-top: 4px;"
|
||||
>
|
||||
<van-coupon-list
|
||||
:coupons="state.coupons"
|
||||
:chosen-coupon="state.chosenCoupon"
|
||||
:coupons="coupons"
|
||||
:chosen-coupon="chosenCoupon"
|
||||
:disabled-coupons="disabledCoupons"
|
||||
@change="onChange"
|
||||
@exchange="onExchange"
|
||||
@ -46,40 +46,40 @@ app.use(CouponList);
|
||||
```
|
||||
|
||||
```js
|
||||
import { reactive } from 'vue';
|
||||
|
||||
const coupon = {
|
||||
available: 1,
|
||||
originCondition: 0,
|
||||
reason: '',
|
||||
value: 150,
|
||||
name: 'Coupon name',
|
||||
startAt: 1489104000,
|
||||
endAt: 1514592000,
|
||||
valueDesc: '1.5',
|
||||
unitDesc: '元',
|
||||
};
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const state = reactive({
|
||||
coupons: [coupon],
|
||||
showList: false,
|
||||
chosenCoupon: -1,
|
||||
});
|
||||
const coupon = {
|
||||
available: 1,
|
||||
originCondition: 0,
|
||||
reason: '',
|
||||
value: 150,
|
||||
name: 'Coupon name',
|
||||
startAt: 1489104000,
|
||||
endAt: 1514592000,
|
||||
valueDesc: '1.5',
|
||||
unitDesc: '元',
|
||||
};
|
||||
|
||||
const coupons = ref([coupon]);
|
||||
const showList = ref(false);
|
||||
const chosenCoupon = ref(-1);
|
||||
|
||||
const onChange = (index) => {
|
||||
state.showList = false;
|
||||
state.chosenCoupon = index;
|
||||
showList.value = false;
|
||||
chosenCoupon.value = index;
|
||||
};
|
||||
const onExchange = (code) => {
|
||||
state.coupons.push(coupon);
|
||||
coupons.value.push(coupon);
|
||||
};
|
||||
|
||||
return {
|
||||
state,
|
||||
coupons,
|
||||
showList,
|
||||
onChange,
|
||||
onExchange,
|
||||
chosenCoupon,
|
||||
disabledCoupons: [coupon],
|
||||
};
|
||||
},
|
||||
|
||||
@ -24,20 +24,20 @@ app.use(CouponList);
|
||||
```html
|
||||
<!-- 优惠券单元格 -->
|
||||
<van-coupon-cell
|
||||
:coupons="state.coupons"
|
||||
:chosen-coupon="state.chosenCoupon"
|
||||
@click="state.showList = true"
|
||||
:coupons="coupons"
|
||||
:chosen-coupon="chosenCoupon"
|
||||
@click="showList = true"
|
||||
/>
|
||||
<!-- 优惠券列表 -->
|
||||
<van-popup
|
||||
v-model:show="state.showList"
|
||||
v-model:show="showList"
|
||||
round
|
||||
position="bottom"
|
||||
style="height: 90%; padding-top: 4px;"
|
||||
>
|
||||
<van-coupon-list
|
||||
:coupons="state.coupons"
|
||||
:chosen-coupon="state.chosenCoupon"
|
||||
:coupons="coupons"
|
||||
:chosen-coupon="chosenCoupon"
|
||||
:disabled-coupons="disabledCoupons"
|
||||
@change="onChange"
|
||||
@exchange="onExchange"
|
||||
@ -46,40 +46,40 @@ app.use(CouponList);
|
||||
```
|
||||
|
||||
```js
|
||||
import { reactive } from 'vue';
|
||||
|
||||
const coupon = {
|
||||
available: 1,
|
||||
condition: '无使用门槛\n最多优惠12元',
|
||||
reason: '',
|
||||
value: 150,
|
||||
name: '优惠券名称',
|
||||
startAt: 1489104000,
|
||||
endAt: 1514592000,
|
||||
valueDesc: '1.5',
|
||||
unitDesc: '元',
|
||||
};
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const state = reactive({
|
||||
coupons: [coupon],
|
||||
showList: false,
|
||||
chosenCoupon: -1,
|
||||
});
|
||||
const coupon = {
|
||||
available: 1,
|
||||
condition: '无使用门槛\n最多优惠12元',
|
||||
reason: '',
|
||||
value: 150,
|
||||
name: '优惠券名称',
|
||||
startAt: 1489104000,
|
||||
endAt: 1514592000,
|
||||
valueDesc: '1.5',
|
||||
unitDesc: '元',
|
||||
};
|
||||
|
||||
const coupons = ref([coupon]);
|
||||
const showList = ref(false);
|
||||
const chosenCoupon = ref(-1);
|
||||
|
||||
const onChange = (index) => {
|
||||
state.showList = false;
|
||||
state.chosenCoupon = index;
|
||||
showList.value = false;
|
||||
chosenCoupon.value = index;
|
||||
};
|
||||
const onExchange = (code) => {
|
||||
state.coupons.push(coupon);
|
||||
coupons.value.push(coupon);
|
||||
};
|
||||
|
||||
return {
|
||||
state,
|
||||
coupons,
|
||||
showList,
|
||||
onChange,
|
||||
onExchange,
|
||||
chosenCoupon,
|
||||
disabledCoupons: [coupon],
|
||||
};
|
||||
},
|
||||
|
||||
@ -29,7 +29,7 @@ app.use(DropdownItem);
|
||||
```
|
||||
|
||||
```js
|
||||
import { reactive } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
@ -46,28 +46,26 @@ Use `type` prop to custom different type fields.
|
||||
|
||||
```html
|
||||
<van-cell-group inset>
|
||||
<van-field v-model="state.text" label="Text" />
|
||||
<van-field v-model="state.tel" type="tel" label="Phone" />
|
||||
<van-field v-model="state.digit" type="digit" label="Digit" />
|
||||
<van-field v-model="state.number" type="number" label="Number" />
|
||||
<van-field v-model="state.password" type="password" label="Password" />
|
||||
<van-field v-model="text" label="Text" />
|
||||
<van-field v-model="tel" type="tel" label="Phone" />
|
||||
<van-field v-model="digit" type="digit" label="Digit" />
|
||||
<van-field v-model="number" type="number" label="Number" />
|
||||
<van-field v-model="password" type="password" label="Password" />
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
```js
|
||||
import { reactive } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const state = reactive({
|
||||
tel: '',
|
||||
text: '',
|
||||
digit: '',
|
||||
number: '',
|
||||
password: '',
|
||||
});
|
||||
const tel = ref('');
|
||||
const text = ref('');
|
||||
const digit = ref('');
|
||||
const number = ref('');
|
||||
const password = ref('');
|
||||
|
||||
return { state };
|
||||
return { tel, text, digit, number, password };
|
||||
},
|
||||
};
|
||||
```
|
||||
@ -86,14 +84,14 @@ export default {
|
||||
```html
|
||||
<van-cell-group inset>
|
||||
<van-field
|
||||
v-model="state.value1"
|
||||
v-model="value1"
|
||||
label="Text"
|
||||
left-icon="smile-o"
|
||||
right-icon="warning-o"
|
||||
placeholder="Show Icon"
|
||||
/>
|
||||
<van-field
|
||||
v-model="state.value2"
|
||||
v-model="value2"
|
||||
clearable
|
||||
label="Text"
|
||||
left-icon="music-o"
|
||||
@ -103,16 +101,16 @@ export default {
|
||||
```
|
||||
|
||||
```js
|
||||
import { reactive } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const state = reactive({
|
||||
value1: '',
|
||||
value2: '123',
|
||||
});
|
||||
|
||||
return { state };
|
||||
const value1 = ref('');
|
||||
const value2 = ref('123');
|
||||
return {
|
||||
value1,
|
||||
value2,
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
@ -161,13 +159,13 @@ Use `formatter` prop to format the input value.
|
||||
```html
|
||||
<van-cell-group inset>
|
||||
<van-field
|
||||
v-model="state.value1"
|
||||
v-model="value1"
|
||||
label="Text"
|
||||
:formatter="formatter"
|
||||
placeholder="Format On Change"
|
||||
/>
|
||||
<van-field
|
||||
v-model="state.value2"
|
||||
v-model="value2"
|
||||
label="Text"
|
||||
:formatter="formatter"
|
||||
format-trigger="onBlur"
|
||||
@ -177,18 +175,17 @@ Use `formatter` prop to format the input value.
|
||||
```
|
||||
|
||||
```js
|
||||
import { reactive } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const state = reactive({
|
||||
value1: '',
|
||||
value2: '',
|
||||
});
|
||||
const value1 = ref('');
|
||||
const value2 = ref('');
|
||||
const formatter = (value) => value.replace(/\d/g, '');
|
||||
|
||||
return {
|
||||
state,
|
||||
value1,
|
||||
value2,
|
||||
formatter,
|
||||
};
|
||||
},
|
||||
|
||||
@ -48,32 +48,30 @@ export default {
|
||||
```html
|
||||
<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>
|
||||
```
|
||||
|
||||
```js
|
||||
import { reactive } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const state = reactive({
|
||||
tel: '',
|
||||
text: '',
|
||||
digit: '',
|
||||
number: '',
|
||||
password: '',
|
||||
});
|
||||
const tel = ref('');
|
||||
const text = ref('');
|
||||
const digit = ref('');
|
||||
const number = ref('');
|
||||
const password = ref('');
|
||||
|
||||
return { state };
|
||||
return { tel, text, digit, number, password };
|
||||
},
|
||||
};
|
||||
```
|
||||
@ -96,14 +94,14 @@ export default {
|
||||
```html
|
||||
<van-cell-group inset>
|
||||
<van-field
|
||||
v-model="state.value1"
|
||||
v-model="value1"
|
||||
label="文本"
|
||||
left-icon="smile-o"
|
||||
right-icon="warning-o"
|
||||
placeholder="显示图标"
|
||||
/>
|
||||
<van-field
|
||||
v-model="state.value2"
|
||||
v-model="value2"
|
||||
clearable
|
||||
label="文本"
|
||||
left-icon="music-o"
|
||||
@ -113,16 +111,16 @@ export default {
|
||||
```
|
||||
|
||||
```js
|
||||
import { reactive } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const state = reactive({
|
||||
value1: '',
|
||||
value2: '123',
|
||||
});
|
||||
|
||||
return { state };
|
||||
const value1 = ref('');
|
||||
const value2 = ref('123');
|
||||
return {
|
||||
value1,
|
||||
value2,
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
@ -177,13 +175,13 @@ export default {
|
||||
```html
|
||||
<van-cell-group inset>
|
||||
<van-field
|
||||
v-model="state.value1"
|
||||
v-model="value1"
|
||||
label="文本"
|
||||
:formatter="formatter"
|
||||
placeholder="在输入时执行格式化"
|
||||
/>
|
||||
<van-field
|
||||
v-model="state.value2"
|
||||
v-model="value2"
|
||||
label="文本"
|
||||
:formatter="formatter"
|
||||
format-trigger="onBlur"
|
||||
@ -193,19 +191,18 @@ export default {
|
||||
```
|
||||
|
||||
```js
|
||||
import { reactive } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const state = reactive({
|
||||
value1: '',
|
||||
value2: '',
|
||||
});
|
||||
const value1 = ref('');
|
||||
const value2 = ref('');
|
||||
// 过滤输入的数字
|
||||
const formatter = (value) => value.replace(/\d/g, '');
|
||||
|
||||
return {
|
||||
state,
|
||||
value1,
|
||||
value2,
|
||||
formatter,
|
||||
};
|
||||
},
|
||||
|
||||
@ -26,14 +26,14 @@ app.use(CellGroup);
|
||||
<van-form @submit="onSubmit">
|
||||
<van-cell-group inset>
|
||||
<van-field
|
||||
v-model="state.username"
|
||||
v-model="username"
|
||||
name="Username"
|
||||
label="Username"
|
||||
placeholder="Username"
|
||||
:rules="[{ required: true, message: 'Username is required' }]"
|
||||
/>
|
||||
<van-field
|
||||
v-model="state.password"
|
||||
v-model="password"
|
||||
type="password"
|
||||
name="Password"
|
||||
label="Password"
|
||||
@ -50,20 +50,19 @@ app.use(CellGroup);
|
||||
```
|
||||
|
||||
```js
|
||||
import { reactive } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const state = reactive({
|
||||
username: '',
|
||||
password: '',
|
||||
});
|
||||
const username = ref('');
|
||||
const password = ref('');
|
||||
const onSubmit = (values) => {
|
||||
console.log('submit', values);
|
||||
};
|
||||
|
||||
return {
|
||||
state,
|
||||
username,
|
||||
password,
|
||||
onSubmit,
|
||||
};
|
||||
},
|
||||
@ -76,25 +75,25 @@ export default {
|
||||
<van-form @failed="onFailed">
|
||||
<van-cell-group inset>
|
||||
<van-field
|
||||
v-model="state.value1"
|
||||
v-model="value1"
|
||||
name="pattern"
|
||||
placeholder="Use pattern"
|
||||
:rules="[{ pattern, message: 'Error message' }]"
|
||||
/>
|
||||
<van-field
|
||||
v-model="state.value2"
|
||||
v-model="value2"
|
||||
name="validator"
|
||||
placeholder="Use validator"
|
||||
:rules="[{ validator, message: 'Error message' }]"
|
||||
/>
|
||||
<van-field
|
||||
v-model="state.value3"
|
||||
v-model="value3"
|
||||
name="validatorMessage"
|
||||
placeholder="Use validator to return message"
|
||||
:rules="[{ validator: validatorMessage }]"
|
||||
/>
|
||||
<van-field
|
||||
v-model="state.value4"
|
||||
v-model="value4"
|
||||
name="asyncValidator"
|
||||
placeholder="Use async validator"
|
||||
:rules="[{ validator: asyncValidator, message: 'Error message' }]"
|
||||
@ -109,16 +108,15 @@ export default {
|
||||
```
|
||||
|
||||
```js
|
||||
import { reactive } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
import { Toast } from 'vant';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const state = reactive({
|
||||
value1: '',
|
||||
value2: '',
|
||||
value3: '',
|
||||
});
|
||||
const value1 = ref('');
|
||||
const value2 = ref('');
|
||||
const value3 = ref('');
|
||||
const value4 = ref('');
|
||||
const pattern = /\d{6}/;
|
||||
|
||||
const validator = (val) => /1\d{10}/.test(val);
|
||||
@ -140,7 +138,10 @@ export default {
|
||||
};
|
||||
|
||||
return {
|
||||
state,
|
||||
value1,
|
||||
value2,
|
||||
value3,
|
||||
value4,
|
||||
pattern,
|
||||
onFailed,
|
||||
validator,
|
||||
@ -317,43 +318,42 @@ export default {
|
||||
|
||||
```html
|
||||
<van-field
|
||||
v-model="state.value"
|
||||
v-model="result"
|
||||
is-link
|
||||
readonly
|
||||
name="picker"
|
||||
label="Picker"
|
||||
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
|
||||
:columns="columns"
|
||||
@confirm="onConfirm"
|
||||
@cancel="state.showPicker = false"
|
||||
@cancel="showPicker = false"
|
||||
/>
|
||||
</van-popup>
|
||||
```
|
||||
|
||||
```js
|
||||
import { reactive } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const state = reactive({
|
||||
value: '',
|
||||
showPicker: false,
|
||||
});
|
||||
const result = ref('');
|
||||
const showPicker = ref(false);
|
||||
const columns = ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'];
|
||||
|
||||
const onConfirm = (value) => {
|
||||
state.value = value;
|
||||
state.showPicker = false;
|
||||
result.value = value;
|
||||
showPicker.value = false;
|
||||
};
|
||||
|
||||
return {
|
||||
state,
|
||||
result,
|
||||
columns,
|
||||
onConfirm,
|
||||
showPicker,
|
||||
};
|
||||
},
|
||||
};
|
||||
@ -363,40 +363,40 @@ export default {
|
||||
|
||||
```html
|
||||
<van-field
|
||||
v-model="state.value"
|
||||
v-model="result"
|
||||
is-link
|
||||
readonly
|
||||
name="datetimePicker"
|
||||
label="Datetime Picker"
|
||||
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
|
||||
type="time"
|
||||
@confirm="onConfirm"
|
||||
@cancel="state.showPicker = false"
|
||||
@cancel="showPicker = false"
|
||||
/>
|
||||
</van-popup>
|
||||
```
|
||||
|
||||
```js
|
||||
import { reactive } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const state = reactive({
|
||||
value: '',
|
||||
showPicker: false,
|
||||
});
|
||||
const result = ref('');
|
||||
const showPicker = ref(false);
|
||||
|
||||
const onConfirm = (value) => {
|
||||
state.value = value;
|
||||
state.showPicker = false;
|
||||
result.value = value;
|
||||
showPicker.value = false;
|
||||
};
|
||||
|
||||
return {
|
||||
state,
|
||||
result,
|
||||
onConfirm,
|
||||
showPicker,
|
||||
};
|
||||
},
|
||||
};
|
||||
@ -406,43 +406,43 @@ export default {
|
||||
|
||||
```html
|
||||
<van-field
|
||||
v-model="state.value"
|
||||
v-model="result"
|
||||
is-link
|
||||
readonly
|
||||
name="area"
|
||||
label="Area Picker"
|
||||
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
|
||||
:area-list="areaList"
|
||||
@confirm="onConfirm"
|
||||
@cancel="state.showArea = false"
|
||||
@cancel="showArea = false"
|
||||
/>
|
||||
</van-popup>
|
||||
```
|
||||
|
||||
```js
|
||||
import { reactive } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
import { areaList } from '@vant/area-data';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const state = reactive({
|
||||
value: '',
|
||||
showArea: false,
|
||||
});
|
||||
const result = ref('');
|
||||
const showArea = ref(false);
|
||||
const onConfirm = (value) => {
|
||||
state.showArea = false;
|
||||
state.value = values
|
||||
showArea.value = false;
|
||||
result.value = values
|
||||
.filter((item) => !!item)
|
||||
.map((item) => item.name)
|
||||
.join('/');
|
||||
};
|
||||
|
||||
return {
|
||||
state,
|
||||
areaList: {},
|
||||
result,
|
||||
areaList,
|
||||
showArea,
|
||||
onConfirm,
|
||||
};
|
||||
},
|
||||
@ -453,34 +453,33 @@ export default {
|
||||
|
||||
```html
|
||||
<van-field
|
||||
v-model="state.value"
|
||||
v-model="result"
|
||||
is-link
|
||||
readonly
|
||||
name="calendar"
|
||||
label="Calendar"
|
||||
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
|
||||
import { reactive } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const state = reactive({
|
||||
value: '',
|
||||
showCalendar: false,
|
||||
});
|
||||
const result = ref('');
|
||||
const showCalendar = ref(false);
|
||||
const onConfirm = (date) => {
|
||||
state.value = `${date.getMonth() + 1}/${date.getDate()}`;
|
||||
state.showCalendar = false;
|
||||
result.value = `${date.getMonth() + 1}/${date.getDate()}`;
|
||||
showCalendar.value = false;
|
||||
};
|
||||
|
||||
return {
|
||||
state,
|
||||
result,
|
||||
onConfirm,
|
||||
showCalendar,
|
||||
};
|
||||
},
|
||||
};
|
||||
|
||||
@ -28,14 +28,14 @@ app.use(CellGroup);
|
||||
<van-form @submit="onSubmit">
|
||||
<van-cell-group inset>
|
||||
<van-field
|
||||
v-model="state.username"
|
||||
v-model="username"
|
||||
name="用户名"
|
||||
label="用户名"
|
||||
placeholder="用户名"
|
||||
:rules="[{ required: true, message: '请填写用户名' }]"
|
||||
/>
|
||||
<van-field
|
||||
v-model="state.password"
|
||||
v-model="password"
|
||||
type="password"
|
||||
name="密码"
|
||||
label="密码"
|
||||
@ -52,20 +52,19 @@ app.use(CellGroup);
|
||||
```
|
||||
|
||||
```js
|
||||
import { reactive } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const state = reactive({
|
||||
username: '',
|
||||
password: '',
|
||||
});
|
||||
const username = ref('');
|
||||
const password = ref('');
|
||||
const onSubmit = (values) => {
|
||||
console.log('submit', values);
|
||||
};
|
||||
|
||||
return {
|
||||
state,
|
||||
username,
|
||||
password,
|
||||
onSubmit,
|
||||
};
|
||||
},
|
||||
@ -81,28 +80,28 @@ export default {
|
||||
<van-cell-group inset>
|
||||
<!-- 通过 pattern 进行正则校验 -->
|
||||
<van-field
|
||||
v-model="state.value1"
|
||||
v-model="value1"
|
||||
name="pattern"
|
||||
placeholder="正则校验"
|
||||
:rules="[{ pattern, message: '请输入正确内容' }]"
|
||||
/>
|
||||
<!-- 通过 validator 进行函数校验 -->
|
||||
<van-field
|
||||
v-model="state.value2"
|
||||
v-model="value2"
|
||||
name="validator"
|
||||
placeholder="函数校验"
|
||||
:rules="[{ validator, message: '请输入正确内容' }]"
|
||||
/>
|
||||
<!-- 通过 validator 返回错误提示 -->
|
||||
<van-field
|
||||
v-model="state.value3"
|
||||
v-model="value3"
|
||||
name="validatorMessage"
|
||||
placeholder="校验函数返回错误提示"
|
||||
:rules="[{ validator: validatorMessage }]"
|
||||
/>
|
||||
<!-- 通过 validator 进行异步函数校验 -->
|
||||
<van-field
|
||||
v-model="state.value4"
|
||||
v-model="value4"
|
||||
name="asyncValidator"
|
||||
placeholder="异步函数校验"
|
||||
:rules="[{ validator: asyncValidator, message: '请输入正确内容' }]"
|
||||
@ -117,17 +116,15 @@ export default {
|
||||
```
|
||||
|
||||
```js
|
||||
import { reactive } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
import { Toast } from 'vant';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const state = reactive({
|
||||
value1: '',
|
||||
value2: '',
|
||||
value3: '',
|
||||
value4: '',
|
||||
});
|
||||
const value1 = ref('');
|
||||
const value2 = ref('');
|
||||
const value3 = ref('');
|
||||
const value4 = ref('');
|
||||
const pattern = /\d{6}/;
|
||||
|
||||
// 校验函数返回 true 表示校验通过，false 表示不通过
|
||||
@ -152,7 +149,10 @@ export default {
|
||||
};
|
||||
|
||||
return {
|
||||
state,
|
||||
value1,
|
||||
value2,
|
||||
value3,
|
||||
value4,
|
||||
pattern,
|
||||
onFailed,
|
||||
validator,
|
||||
@ -344,43 +344,42 @@ export default {
|
||||
|
||||
```html
|
||||
<van-field
|
||||
v-model="state.value"
|
||||
v-model="result"
|
||||
is-link
|
||||
readonly
|
||||
name="picker"
|
||||
label="选择器"
|
||||
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
|
||||
:columns="columns"
|
||||
@confirm="onConfirm"
|
||||
@cancel="state.showPicker = false"
|
||||
@cancel="showPicker = false"
|
||||
/>
|
||||
</van-popup>
|
||||
```
|
||||
|
||||
```js
|
||||
import { reactive } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const state = reactive({
|
||||
value: '',
|
||||
showPicker: false,
|
||||
});
|
||||
const result = ref('');
|
||||
const showPicker = ref(false);
|
||||
const columns = ['杭州', '宁波', '温州', '嘉兴', '湖州'];
|
||||
|
||||
const onConfirm = (value) => {
|
||||
state.value = value;
|
||||
state.showPicker = false;
|
||||
result.value = value;
|
||||
showPicker.value = false;
|
||||
};
|
||||
|
||||
return {
|
||||
state,
|
||||
result,
|
||||
columns,
|
||||
onConfirm,
|
||||
showPicker,
|
||||
};
|
||||
},
|
||||
};
|
||||
@ -392,40 +391,40 @@ export default {
|
||||
|
||||
```html
|
||||
<van-field
|
||||
v-model="state.value"
|
||||
v-model="result"
|
||||
is-link
|
||||
readonly
|
||||
name="datetimePicker"
|
||||
label="时间选择"
|
||||
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
|
||||
type="time"
|
||||
@confirm="onConfirm"
|
||||
@cancel="state.showPicker = false"
|
||||
@cancel="showPicker = false"
|
||||
/>
|
||||
</van-popup>
|
||||
```
|
||||
|
||||
```js
|
||||
import { reactive } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const state = reactive({
|
||||
value: '',
|
||||
showPicker: false,
|
||||
});
|
||||
const result = ref('');
|
||||
const showPicker = ref(false);
|
||||
|
||||
const onConfirm = (value) => {
|
||||
state.value = value;
|
||||
state.showPicker = false;
|
||||
result.value = value;
|
||||
showPicker.value = false;
|
||||
};
|
||||
|
||||
return {
|
||||
state,
|
||||
result,
|
||||
onConfirm,
|
||||
showPicker,
|
||||
};
|
||||
},
|
||||
};
|
||||
@ -437,43 +436,43 @@ export default {
|
||||
|
||||
```html
|
||||
<van-field
|
||||
v-model="state.value"
|
||||
v-model="result"
|
||||
is-link
|
||||
readonly
|
||||
name="area"
|
||||
label="地区选择"
|
||||
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
|
||||
:area-list="areaList"
|
||||
@confirm="onConfirm"
|
||||
@cancel="state.showArea = false"
|
||||
@cancel="showArea = false"
|
||||
/>
|
||||
</van-popup>
|
||||
```
|
||||
|
||||
```js
|
||||
import { reactive } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
import { areaList } from '@vant/area-data';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const state = reactive({
|
||||
value: '',
|
||||
showArea: false,
|
||||
});
|
||||
const result = ref('');
|
||||
const showArea = ref(false);
|
||||
const onConfirm = (value) => {
|
||||
state.showArea = false;
|
||||
state.value = values
|
||||
showArea.value = false;
|
||||
result.value = values
|
||||
.filter((item) => !!item)
|
||||
.map((item) => item.name)
|
||||
.join('/');
|
||||
};
|
||||
|
||||
return {
|
||||
state,
|
||||
areaList: {}, // 数据格式见 Area 组件文档
|
||||
result,
|
||||
areaList,
|
||||
showArea,
|
||||
onConfirm,
|
||||
};
|
||||
},
|
||||
@ -486,34 +485,33 @@ export default {
|
||||
|
||||
```html
|
||||
<van-field
|
||||
v-model="state.value"
|
||||
v-model="value"
|
||||
is-link
|
||||
readonly
|
||||
name="calendar"
|
||||
label="日历"
|
||||
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
|
||||
import { reactive } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const state = reactive({
|
||||
value: '',
|
||||
showCalendar: false,
|
||||
});
|
||||
const result = ref('');
|
||||
const showCalendar = ref(false);
|
||||
const onConfirm = (date) => {
|
||||
state.value = `${date.getMonth() + 1}/${date.getDate()}`;
|
||||
state.showCalendar = false;
|
||||
result.value = `${date.getMonth() + 1}/${date.getDate()}`;
|
||||
showCalendar.value = false;
|
||||
};
|
||||
|
||||
return {
|
||||
state,
|
||||
result,
|
||||
onConfirm,
|
||||
showCalendar,
|
||||
};
|
||||
},
|
||||
};
|
||||
|
||||
@ -88,34 +88,30 @@ setTimeout(() => {
|
||||
### Component Call
|
||||
|
||||
```html
|
||||
<van-image-preview
|
||||
v-model:show="state.show"
|
||||
:images="state.images"
|
||||
@change="onChange"
|
||||
>
|
||||
<van-image-preview v-model:show="show" :images="images" @change="onChange">
|
||||
<template v-slot:index>Page: {{ index }}</template>
|
||||
</van-image-preview>
|
||||
```
|
||||
|
||||
```js
|
||||
import { reactive } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const state = reactive({
|
||||
show: false,
|
||||
index: 0,
|
||||
});
|
||||
const onChange = (index) => {
|
||||
state.index = index;
|
||||
const show = ref(false);
|
||||
const index = ref(0);
|
||||
const images = [
|
||||
'https://img.yzcdn.cn/vant/apple-1.jpg',
|
||||
'https://img.yzcdn.cn/vant/apple-2.jpg',
|
||||
];
|
||||
const onChange = (newIndex) => {
|
||||
index.value = newIndex;
|
||||
};
|
||||
|
||||
return {
|
||||
state,
|
||||
images: [
|
||||
'https://img.yzcdn.cn/vant/apple-1.jpg',
|
||||
'https://img.yzcdn.cn/vant/apple-2.jpg',
|
||||
],
|
||||
show,
|
||||
index,
|
||||
images,
|
||||
onChange,
|
||||
};
|
||||
},
|
||||
|
||||
@ -117,34 +117,30 @@ setTimeout(() => {
|
||||
如果需要在图片预览内嵌入组件或其他自定义内容，可以使用组件调用的方式，调用前需要通过 `app.use` 注册组件。
|
||||
|
||||
```html
|
||||
<van-image-preview
|
||||
v-model:show="state.show"
|
||||
:images="state.images"
|
||||
@change="onChange"
|
||||
>
|
||||
<van-image-preview v-model:show="show" :images="images" @change="onChange">
|
||||
<template v-slot:index>第{{ index }}页</template>
|
||||
</van-image-preview>
|
||||
```
|
||||
|
||||
```js
|
||||
import { reactive } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const state = reactive({
|
||||
show: false,
|
||||
index: 0,
|
||||
});
|
||||
const onChange = (index) => {
|
||||
state.index = index;
|
||||
const show = ref(false);
|
||||
const index = ref(0);
|
||||
const images = [
|
||||
'https://img.yzcdn.cn/vant/apple-1.jpg',
|
||||
'https://img.yzcdn.cn/vant/apple-2.jpg',
|
||||
];
|
||||
const onChange = (newIndex) => {
|
||||
index.value = newIndex;
|
||||
};
|
||||
|
||||
return {
|
||||
state,
|
||||
images: [
|
||||
'https://img.yzcdn.cn/vant/apple-1.jpg',
|
||||
'https://img.yzcdn.cn/vant/apple-2.jpg',
|
||||
],
|
||||
show,
|
||||
index,
|
||||
images,
|
||||
onChange,
|
||||
};
|
||||
},
|
||||
|
||||
@ -22,42 +22,42 @@ app.use(List);
|
||||
|
||||
```html
|
||||
<van-list
|
||||
v-model:loading="state.loading"
|
||||
:finished="state.finished"
|
||||
v-model:loading="loading"
|
||||
:finished="finished"
|
||||
finished-text="Finished"
|
||||
@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>
|
||||
```
|
||||
|
||||
```js
|
||||
import { reactive } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const state = reactive({
|
||||
list: [],
|
||||
loading: false,
|
||||
finished: false,
|
||||
});
|
||||
const list = ref([]);
|
||||
const loading = ref(false);
|
||||
const finished = ref(false);
|
||||
|
||||
const onLoad = () => {
|
||||
setTimeout(() => {
|
||||
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) {
|
||||
state.finished = true;
|
||||
if (list.value.length >= 40) {
|
||||
finished.value = true;
|
||||
}
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
return {
|
||||
state,
|
||||
list,
|
||||
onLoad,
|
||||
loading,
|
||||
finished,
|
||||
};
|
||||
},
|
||||
};
|
||||
@ -67,35 +67,34 @@ export default {
|
||||
|
||||
```html
|
||||
<van-list
|
||||
v-model:loading="state.loading"
|
||||
v-model:error="state.error"
|
||||
v-model:loading="loading"
|
||||
v-model:error="error"
|
||||
error-text="Request failed. Click to reload"
|
||||
@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>
|
||||
```
|
||||
|
||||
```js
|
||||
import { reactive } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const state = reactive({
|
||||
list: [],
|
||||
error: false,
|
||||
loading: false,
|
||||
});
|
||||
|
||||
const list = ref([]);
|
||||
const error = ref(false);
|
||||
const loading = ref(false);
|
||||
const onLoad = () => {
|
||||
fetchSomeThing().catch(() => {
|
||||
state.error = true;
|
||||
error.value = true;
|
||||
});
|
||||
};
|
||||
|
||||
return {
|
||||
state,
|
||||
list,
|
||||
error,
|
||||
onLoad,
|
||||
loading,
|
||||
};
|
||||
},
|
||||
};
|
||||
@ -104,58 +103,59 @@ export default {
|
||||
### PullRefresh
|
||||
|
||||
```html
|
||||
<van-pull-refresh v-model="state.refreshing" @refresh="onRefresh">
|
||||
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
|
||||
<van-list
|
||||
v-model:loading="state.loading"
|
||||
:finished="state.finished"
|
||||
v-model:loading="loading"
|
||||
:finished="finished"
|
||||
finished-text="Finished"
|
||||
@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-pull-refresh>
|
||||
```
|
||||
|
||||
```js
|
||||
import { reactive } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const state = reactive({
|
||||
list: [],
|
||||
loading: false,
|
||||
finished: false,
|
||||
refreshing: false,
|
||||
});
|
||||
const list = ref([]);
|
||||
const loading = ref(false);
|
||||
const finished = ref(false);
|
||||
const refreshing = ref(false);
|
||||
|
||||
const onLoad = () => {
|
||||
setTimeout(() => {
|
||||
if (state.refreshing) {
|
||||
state.list = [];
|
||||
state.refreshing = false;
|
||||
if (refreshing.value) {
|
||||
list.value = [];
|
||||
refreshing.value = false;
|
||||
}
|
||||
|
||||
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) {
|
||||
state.finished = true;
|
||||
if (list.value.length >= 40) {
|
||||
finished.value = true;
|
||||
}
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
const onRefresh = () => {
|
||||
state.finished = false;
|
||||
state.loading = true;
|
||||
finished.value = false;
|
||||
loading.value = true;
|
||||
onLoad();
|
||||
};
|
||||
|
||||
return {
|
||||
state,
|
||||
list,
|
||||
onLoad,
|
||||
loading,
|
||||
finished,
|
||||
onRefresh,
|
||||
refreshing,
|
||||
};
|
||||
},
|
||||
};
|
||||
|
||||
@ -24,47 +24,47 @@ List 组件通过 `loading` 和 `finished` 两个变量控制加载状态，当
|
||||
|
||||
```html
|
||||
<van-list
|
||||
v-model:loading="state.loading"
|
||||
:finished="state.finished"
|
||||
v-model:loading="loading"
|
||||
:finished="finished"
|
||||
finished-text="没有更多了"
|
||||
@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>
|
||||
```
|
||||
|
||||
```js
|
||||
import { reactive } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const state = reactive({
|
||||
list: [],
|
||||
loading: false,
|
||||
finished: false,
|
||||
});
|
||||
const list = ref([]);
|
||||
const loading = ref(false);
|
||||
const finished = ref(false);
|
||||
|
||||
const onLoad = () => {
|
||||
// 异步更新数据
|
||||
// setTimeout 仅做示例，真实场景中一般为 ajax 请求
|
||||
setTimeout(() => {
|
||||
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) {
|
||||
state.finished = true;
|
||||
if (list.value.length >= 40) {
|
||||
finished.value = true;
|
||||
}
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
return {
|
||||
state,
|
||||
list,
|
||||
onLoad,
|
||||
loading,
|
||||
finished,
|
||||
};
|
||||
},
|
||||
};
|
||||
@ -76,35 +76,34 @@ export default {
|
||||
|
||||
```html
|
||||
<van-list
|
||||
v-model:loading="state.loading"
|
||||
v-model:error="state.error"
|
||||
v-model:loading="loading"
|
||||
v-model:error="error"
|
||||
error-text="请求失败，点击重新加载"
|
||||
@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>
|
||||
```
|
||||
|
||||
```js
|
||||
import { reactive } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const state = reactive({
|
||||
list: [],
|
||||
error: false,
|
||||
loading: false,
|
||||
});
|
||||
|
||||
const list = ref([]);
|
||||
const error = ref(false);
|
||||
const loading = ref(false);
|
||||
const onLoad = () => {
|
||||
fetchSomeThing().catch(() => {
|
||||
state.error = true;
|
||||
error.value = true;
|
||||
});
|
||||
};
|
||||
|
||||
return {
|
||||
state,
|
||||
list,
|
||||
error,
|
||||
onLoad,
|
||||
loading,
|
||||
};
|
||||
},
|
||||
};
|
||||
@ -115,62 +114,63 @@ export default {
|
||||
List 组件可以与 [PullRefresh](#/zh-CN/pull-refresh) 组件结合使用，实现下拉刷新的效果。
|
||||
|
||||
```html
|
||||
<van-pull-refresh v-model="state.refreshing" @refresh="onRefresh">
|
||||
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
|
||||
<van-list
|
||||
v-model:loading="state.loading"
|
||||
:finished="state.finished"
|
||||
v-model:loading="loading"
|
||||
:finished="finished"
|
||||
finished-text="没有更多了"
|
||||
@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-pull-refresh>
|
||||
```
|
||||
|
||||
```js
|
||||
import { reactive } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const state = reactive({
|
||||
list: [],
|
||||
loading: false,
|
||||
finished: false,
|
||||
refreshing: false,
|
||||
});
|
||||
const list = ref([]);
|
||||
const loading = ref(false);
|
||||
const finished = ref(false);
|
||||
const refreshing = ref(false);
|
||||
|
||||
const onLoad = () => {
|
||||
setTimeout(() => {
|
||||
if (state.refreshing) {
|
||||
state.list = [];
|
||||
state.refreshing = false;
|
||||
if (refreshing.value) {
|
||||
list.value = [];
|
||||
refreshing.value = false;
|
||||
}
|
||||
|
||||
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) {
|
||||
state.finished = true;
|
||||
if (list.value.length >= 40) {
|
||||
finished.value = true;
|
||||
}
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
const onRefresh = () => {
|
||||
// 清空列表数据
|
||||
state.finished = false;
|
||||
finished.value = false;
|
||||
|
||||
// 重新加载数据
|
||||
// 将 loading 设置为 true，表示处于加载状态
|
||||
state.loading = true;
|
||||
loading.value = true;
|
||||
onLoad();
|
||||
};
|
||||
|
||||
return {
|
||||
state,
|
||||
list,
|
||||
onLoad,
|
||||
loading,
|
||||
finished,
|
||||
onRefresh,
|
||||
refreshing,
|
||||
};
|
||||
},
|
||||
};
|
||||
|
||||
@ -189,25 +189,23 @@ export default {
|
||||
When Picker columns data is acquired asynchronously, use `loading` prop to show loading prompt.
|
||||
|
||||
```html
|
||||
<van-picker title="Title" :columns="state.columns" :loading="state.loading" />
|
||||
<van-picker title="Title" :columns="columns" :loading="loading" />
|
||||
```
|
||||
|
||||
```js
|
||||
import { reactive } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const state = reactive({
|
||||
columns: [],
|
||||
loading: true,
|
||||
});
|
||||
const columns = ref([]);
|
||||
const loading = ref(true);
|
||||
|
||||
setTimeout(() => {
|
||||
state.loading = false;
|
||||
state.columns = ['Option'];
|
||||
columns.value = ['Option'];
|
||||
loading.value = false;
|
||||
}, 1000);
|
||||
|
||||
return { state };
|
||||
return { columns, loading };
|
||||
},
|
||||
};
|
||||
```
|
||||
@ -216,43 +214,42 @@ export default {
|
||||
|
||||
```html
|
||||
<van-field
|
||||
v-model="state.value"
|
||||
v-model="result"
|
||||
is-link
|
||||
readonly
|
||||
label="City"
|
||||
placeholder="Choose City"
|
||||
@click="state.showPicker = true"
|
||||
@click="showPicker = true"
|
||||
/>
|
||||
<van-popup v-model:show="showPicker" round position="bottom">
|
||||
<van-picker
|
||||
title="Title"
|
||||
:columns="state.columns"
|
||||
@cancel="state.showPicker = false"
|
||||
:columns="columns"
|
||||
@cancel="showPicker = false"
|
||||
@confirm="onConfirm"
|
||||
/>
|
||||
</van-popup>
|
||||
```
|
||||
|
||||
```js
|
||||
import { reactive } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const columns = ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'];
|
||||
const state = reactive({
|
||||
value: '',
|
||||
showPicker: false,
|
||||
});
|
||||
const result = ref('');
|
||||
const showPicker = ref(false);
|
||||
|
||||
const onConfirm = (value) => {
|
||||
state.value = value;
|
||||
state.showPicker = false;
|
||||
result.value = value;
|
||||
showPicker.value = false;
|
||||
};
|
||||
|
||||
return {
|
||||
state,
|
||||
result,
|
||||
columns,
|
||||
onConfirm,
|
||||
showPicker,
|
||||
};
|
||||
},
|
||||
};
|
||||
|
||||
@ -211,25 +211,23 @@ export default {
|
||||
若选择器数据是异步获取的，可以通过 `loading` 属性显示加载提示。
|
||||
|
||||
```html
|
||||
<van-picker :columns="state.columns" :loading="state.loading" />
|
||||
<van-picker :columns="columns" :loading="loading" />
|
||||
```
|
||||
|
||||
```js
|
||||
import { reactive } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const state = reactive({
|
||||
columns: [],
|
||||
loading: true,
|
||||
});
|
||||
const columns = ref([]);
|
||||
const loading = ref(true);
|
||||
|
||||
setTimeout(() => {
|
||||
state.loading = false;
|
||||
state.columns = ['选项'];
|
||||
columns.value = ['选项'];
|
||||
loading.value = false;
|
||||
}, 1000);
|
||||
|
||||
return { state };
|
||||
return { columns, loading };
|
||||
},
|
||||
};
|
||||
```
|
||||
@ -240,42 +238,41 @@ export default {
|
||||
|
||||
```html
|
||||
<van-field
|
||||
v-model="state.value"
|
||||
v-model="value"
|
||||
is-link
|
||||
readonly
|
||||
label="城市"
|
||||
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
|
||||
:columns="columns"
|
||||
@cancel="state.showPicker = false"
|
||||
@cancel="showPicker = false"
|
||||
@confirm="onConfirm"
|
||||
/>
|
||||
</van-popup>
|
||||
```
|
||||
|
||||
```js
|
||||
import { reactive } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const columns = ['杭州', '宁波', '温州', '绍兴', '湖州', '嘉兴', '金华'];
|
||||
const state = reactive({
|
||||
value: '',
|
||||
showPicker: false,
|
||||
});
|
||||
const result = ref('');
|
||||
const showPicker = ref(false);
|
||||
|
||||
const onConfirm = (value) => {
|
||||
state.value = value;
|
||||
state.showPicker = false;
|
||||
result.value = value;
|
||||
showPicker.value = false;
|
||||
};
|
||||
|
||||
return {
|
||||
state,
|
||||
result,
|
||||
columns,
|
||||
onConfirm,
|
||||
showPicker,
|
||||
};
|
||||
},
|
||||
};
|
||||
|
||||
@ -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.
|
||||
|
||||
```html
|
||||
<van-pull-refresh v-model="state.loading" @refresh="onRefresh">
|
||||
<p>Refresh Count: {{ state.count }}</p>
|
||||
<van-pull-refresh v-model="loading" @refresh="onRefresh">
|
||||
<p>Refresh Count: {{ count }}</p>
|
||||
</van-pull-refresh>
|
||||
```
|
||||
|
||||
```js
|
||||
import { reactive } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
import { Toast } from 'vant';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const state = reactive({
|
||||
count: 0,
|
||||
loading: false,
|
||||
});
|
||||
const count = ref(0);
|
||||
const loading = ref(false);
|
||||
const onRefresh = () => {
|
||||
setTimeout(() => {
|
||||
Toast('Refresh Success');
|
||||
state.loading = false;
|
||||
state.count++;
|
||||
loading.value = false;
|
||||
count.value++;
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
return {
|
||||
state,
|
||||
count,
|
||||
loading,
|
||||
onRefresh,
|
||||
};
|
||||
},
|
||||
|
||||
@ -23,31 +23,30 @@ app.use(PullRefresh);
|
||||
下拉刷新时会触发 `refresh` 事件，在事件的回调函数中可以进行同步或异步操作，操作完成后将 `v-model` 设置为 `false`，表示加载完成。
|
||||
|
||||
```html
|
||||
<van-pull-refresh v-model="state.loading" @refresh="onRefresh">
|
||||
<p>刷新次数: {{ state.count }}</p>
|
||||
<van-pull-refresh v-model="loading" @refresh="onRefresh">
|
||||
<p>刷新次数: {{ count }}</p>
|
||||
</van-pull-refresh>
|
||||
```
|
||||
|
||||
```js
|
||||
import { reactive } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
import { Toast } from 'vant';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const state = reactive({
|
||||
count: 0,
|
||||
loading: false,
|
||||
});
|
||||
const count = ref(0);
|
||||
const loading = ref(false);
|
||||
const onRefresh = () => {
|
||||
setTimeout(() => {
|
||||
Toast('刷新成功');
|
||||
state.loading = false;
|
||||
state.count++;
|
||||
loading.value = false;
|
||||
count.value++;
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
return {
|
||||
state,
|
||||
count,
|
||||
loading,
|
||||
onRefresh,
|
||||
};
|
||||
},
|
||||
|
||||
@ -22,21 +22,19 @@ app.use(TreeSelect);
|
||||
|
||||
```html
|
||||
<van-tree-select
|
||||
v-model:active-id="state.activeId"
|
||||
v-model:main-active-index="state.activeIndex"
|
||||
v-model:active-id="activeId"
|
||||
v-model:main-active-index="activeIndex"
|
||||
:items="items"
|
||||
/>
|
||||
```
|
||||
|
||||
```js
|
||||
import { reactive } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const state = reactive({
|
||||
activeId: 1,
|
||||
activeIndex: 0,
|
||||
});
|
||||
const activeId = ref(1);
|
||||
const activeIndex = ref(0);
|
||||
const items = [
|
||||
{
|
||||
text: 'Group 1',
|
||||
@ -55,8 +53,9 @@ export default {
|
||||
];
|
||||
|
||||
return {
|
||||
state,
|
||||
items,
|
||||
activeId,
|
||||
activeIndex,
|
||||
};
|
||||
},
|
||||
};
|
||||
@ -66,21 +65,19 @@ export default {
|
||||
|
||||
```html
|
||||
<van-tree-select
|
||||
v-model:active-id="state.activeIds"
|
||||
v-model:main-active-index="state.activeIndex"
|
||||
v-model:active-id="activeIds"
|
||||
v-model:main-active-index="activeIndex"
|
||||
:items="items"
|
||||
/>
|
||||
```
|
||||
|
||||
```js
|
||||
import { reactive } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const state = reactive({
|
||||
activeId: [1, 2],
|
||||
activeIndex: 0,
|
||||
});
|
||||
const activeId = ref([1, 2]);
|
||||
const activeIndex = ref(0);
|
||||
const items = [
|
||||
{
|
||||
text: 'Group 1',
|
||||
@ -99,8 +96,9 @@ export default {
|
||||
];
|
||||
|
||||
return {
|
||||
state,
|
||||
items,
|
||||
activeId,
|
||||
activeIndex,
|
||||
};
|
||||
},
|
||||
};
|
||||
|
||||
@ -24,21 +24,19 @@ app.use(TreeSelect);
|
||||
|
||||
```html
|
||||
<van-tree-select
|
||||
v-model:active-id="state.activeId"
|
||||
v-model:main-active-index="state.activeIndex"
|
||||
v-model:active-id="activeId"
|
||||
v-model:main-active-index="activeIndex"
|
||||
:items="items"
|
||||
/>
|
||||
```
|
||||
|
||||
```js
|
||||
import { reactive } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const state = reactive({
|
||||
activeId: 1,
|
||||
activeIndex: 0,
|
||||
});
|
||||
const activeId = ref(1);
|
||||
const activeIndex = ref(0);
|
||||
const items = [
|
||||
{
|
||||
text: '浙江',
|
||||
@ -57,8 +55,9 @@ export default {
|
||||
];
|
||||
|
||||
return {
|
||||
state,
|
||||
items,
|
||||
activeId,
|
||||
activeIndex,
|
||||
};
|
||||
},
|
||||
};
|
||||
@ -70,21 +69,19 @@ export default {
|
||||
|
||||
```html
|
||||
<van-tree-select
|
||||
v-model:active-id="state.activeIds"
|
||||
v-model:main-active-index="state.activeIndex"
|
||||
v-model:active-id="activeIds"
|
||||
v-model:main-active-index="activeIndex"
|
||||
:items="items"
|
||||
/>
|
||||
```
|
||||
|
||||
```js
|
||||
import { reactive } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const state = reactive({
|
||||
activeId: [1, 2],
|
||||
activeIndex: 0,
|
||||
});
|
||||
const activeId = ref([1, 2]);
|
||||
const activeIndex = ref(0);
|
||||
const items = [
|
||||
{
|
||||
text: '浙江',
|
||||
@ -103,8 +100,9 @@ export default {
|
||||
];
|
||||
|
||||
return {
|
||||
state,
|
||||
items,
|
||||
activeId,
|
||||
activeIndex,
|
||||
};
|
||||
},
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user