mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
docs: remove toRefs
This commit is contained in:
parent
3e7e19935a
commit
e785f622bd
@ -38,15 +38,15 @@ export default {
|
||||
Use `type` prop to custom different type fields.
|
||||
|
||||
```html
|
||||
<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-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" />
|
||||
```
|
||||
|
||||
```js
|
||||
import { reactive, toRefs } from 'vue';
|
||||
import { reactive } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
@ -58,9 +58,7 @@ export default {
|
||||
password: '',
|
||||
});
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
};
|
||||
return { state };
|
||||
},
|
||||
};
|
||||
```
|
||||
@ -79,14 +77,14 @@ export default {
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-field
|
||||
v-model="value1"
|
||||
v-model="state.value1"
|
||||
label="Text"
|
||||
left-icon="smile-o"
|
||||
right-icon="warning-o"
|
||||
placeholder="Show Icon"
|
||||
/>
|
||||
<van-field
|
||||
v-model="value2"
|
||||
v-model="state.value2"
|
||||
clearable
|
||||
label="Text"
|
||||
left-icon="music-o"
|
||||
@ -96,7 +94,7 @@ export default {
|
||||
```
|
||||
|
||||
```js
|
||||
import { reactive, toRefs } from 'vue';
|
||||
import { reactive } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
@ -105,9 +103,7 @@ export default {
|
||||
value2: '123',
|
||||
});
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
};
|
||||
return { state };
|
||||
},
|
||||
};
|
||||
```
|
||||
@ -153,13 +149,13 @@ Use `formatter` prop to format the input value.
|
||||
|
||||
```html
|
||||
<van-field
|
||||
v-model="value1"
|
||||
v-model="state.value1"
|
||||
label="Text"
|
||||
:formatter="formatter"
|
||||
placeholder="Format On Change"
|
||||
/>
|
||||
<van-field
|
||||
v-model="value2"
|
||||
v-model="state.value2"
|
||||
label="Text"
|
||||
:formatter="formatter"
|
||||
format-trigger="onBlur"
|
||||
@ -168,7 +164,7 @@ Use `formatter` prop to format the input value.
|
||||
```
|
||||
|
||||
```js
|
||||
import { reactive, toRefs } from 'vue';
|
||||
import { reactive } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
@ -179,7 +175,7 @@ export default {
|
||||
const formatter = (value) => value.replace(/\d/g, '');
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
state,
|
||||
formatter,
|
||||
};
|
||||
},
|
||||
|
@ -44,19 +44,19 @@ export default {
|
||||
|
||||
```html
|
||||
<!-- 输入任意文本 -->
|
||||
<van-field v-model="text" label="文本" />
|
||||
<van-field v-model="state.text" label="文本" />
|
||||
<!-- 输入手机号,调起手机号键盘 -->
|
||||
<van-field v-model="tel" type="tel" label="手机号" />
|
||||
<van-field v-model="state.tel" type="tel" label="手机号" />
|
||||
<!-- 允许输入正整数,调起纯数字键盘 -->
|
||||
<van-field v-model="digit" type="digit" label="整数" />
|
||||
<van-field v-model="state.digit" type="digit" label="整数" />
|
||||
<!-- 允许输入数字,调起带符号的纯数字键盘 -->
|
||||
<van-field v-model="number" type="number" label="数字" />
|
||||
<van-field v-model="state.number" type="number" label="数字" />
|
||||
<!-- 输入密码 -->
|
||||
<van-field v-model="password" type="password" label="密码" />
|
||||
<van-field v-model="state.password" type="password" label="密码" />
|
||||
```
|
||||
|
||||
```js
|
||||
import { reactive, toRefs } from 'vue';
|
||||
import { reactive } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
@ -68,9 +68,7 @@ export default {
|
||||
password: '',
|
||||
});
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
};
|
||||
return { state };
|
||||
},
|
||||
};
|
||||
```
|
||||
@ -95,14 +93,14 @@ export default {
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-field
|
||||
v-model="value1"
|
||||
v-model="state.value1"
|
||||
label="文本"
|
||||
left-icon="smile-o"
|
||||
right-icon="warning-o"
|
||||
placeholder="显示图标"
|
||||
/>
|
||||
<van-field
|
||||
v-model="value2"
|
||||
v-model="state.value2"
|
||||
clearable
|
||||
label="文本"
|
||||
left-icon="music-o"
|
||||
@ -112,7 +110,7 @@ export default {
|
||||
```
|
||||
|
||||
```js
|
||||
import { reactive, toRefs } from 'vue';
|
||||
import { reactive } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
@ -121,9 +119,7 @@ export default {
|
||||
value2: '123',
|
||||
});
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
};
|
||||
return { state };
|
||||
},
|
||||
};
|
||||
```
|
||||
@ -175,13 +171,13 @@ export default {
|
||||
|
||||
```html
|
||||
<van-field
|
||||
v-model="value1"
|
||||
v-model="state.value1"
|
||||
label="文本"
|
||||
:formatter="formatter"
|
||||
placeholder="在输入时执行格式化"
|
||||
/>
|
||||
<van-field
|
||||
v-model="value2"
|
||||
v-model="state.value2"
|
||||
label="文本"
|
||||
:formatter="formatter"
|
||||
format-trigger="onBlur"
|
||||
@ -190,7 +186,7 @@ export default {
|
||||
```
|
||||
|
||||
```js
|
||||
import { reactive, toRefs } from 'vue';
|
||||
import { reactive } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
@ -202,7 +198,7 @@ export default {
|
||||
const formatter = (value) => value.replace(/\d/g, '');
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
state,
|
||||
formatter,
|
||||
};
|
||||
},
|
||||
|
@ -82,13 +82,17 @@ setTimeout(() => {
|
||||
### Component Call
|
||||
|
||||
```html
|
||||
<van-image-preview v-model:show="show" :images="images" @change="onChange">
|
||||
<van-image-preview
|
||||
v-model:show="state.show"
|
||||
:images="state.images"
|
||||
@change="onChange"
|
||||
>
|
||||
<template v-slot:index>Page: {{ index }}</template>
|
||||
</van-image-preview>
|
||||
```
|
||||
|
||||
```js
|
||||
import { reactive, toRefs } from 'vue';
|
||||
import { reactive } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
@ -101,7 +105,7 @@ export default {
|
||||
};
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
state,
|
||||
images: [
|
||||
'https://img.yzcdn.cn/vant/apple-1.jpg',
|
||||
'https://img.yzcdn.cn/vant/apple-2.jpg',
|
||||
|
@ -117,13 +117,17 @@ setTimeout(() => {
|
||||
如果需要在图片预览内嵌入组件或其他自定义内容,可以使用组件调用的方式,调用前需要通过 `app.use` 注册组件。
|
||||
|
||||
```html
|
||||
<van-image-preview v-model:show="show" :images="images" @change="onChange">
|
||||
<van-image-preview
|
||||
v-model:show="state.show"
|
||||
:images="state.images"
|
||||
@change="onChange"
|
||||
>
|
||||
<template v-slot:index>第{{ index }}页</template>
|
||||
</van-image-preview>
|
||||
```
|
||||
|
||||
```js
|
||||
import { reactive, toRefs } from 'vue';
|
||||
import { reactive } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
@ -136,7 +140,7 @@ export default {
|
||||
};
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
state,
|
||||
images: [
|
||||
'https://img.yzcdn.cn/vant/apple-1.jpg',
|
||||
'https://img.yzcdn.cn/vant/apple-2.jpg',
|
||||
|
Loading…
x
Reference in New Issue
Block a user