docs: remove toRefs

This commit is contained in:
chenjiahan
2020-12-10 20:55:28 +08:00
parent 3e7e19935a
commit e785f622bd
4 changed files with 44 additions and 44 deletions
+15 -19
View File
@@ -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,
};
},
+15 -19
View File
@@ -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,
};
},