blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

docs(Form): use new unified syntax for perf

Browse Source
This commit is contained in:
陈嘉涵 2020-02-20 20:56:16 +08:00
parent b8818cef8c
commit d72bf8145a
5 changed files with 101 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/form/README.md
View File

@ -114,7 +114,9 @@ export default {
```html ```html
<van-field name="switch" label="Switch"> <van-field name="switch" label="Switch">
<van-switch v-model="switchChecked" slot="input" size="20" /> <template #input>
<van-switch v-model="switchChecked" size="20" />
</template>
</van-field> </van-field>
``` ```
@ -132,17 +134,17 @@ export default {
```html ```html
<van-field name="checkbox" label="Checkbox"> <van-field name="checkbox" label="Checkbox">
<van-checkbox v-model="checkbox" slot="input" shape="square" /> <template #input>
<van-checkbox v-model="checkbox" shape="square" />
</template>
</van-field> </van-field>
<van-field name="checkboxGroup" label="CheckboxGroup"> <van-field name="checkboxGroup" label="CheckboxGroup">
<van-checkbox-group <template #input>
v-model="checkboxGroup" <van-checkbox-group v-model="checkboxGroup" direction="horizontal">
slot="input" <van-checkbox name="1" shape="square">Checkbox 1</van-checkbox>
direction="horizontal" <van-checkbox name="2" shape="square">Checkbox 2</van-checkbox>
> </van-checkbox-group>
<van-checkbox name="1" shape="square">Checkbox 1</van-checkbox> </template>
<van-checkbox name="2" shape="square">Checkbox 2</van-checkbox>
</van-checkbox-group>
</van-field> </van-field>
``` ```
@ -161,10 +163,12 @@ export default {
```html ```html
<van-field name="radio" label="Radio"> <van-field name="radio" label="Radio">
<van-radio-group v-model="radio" direction="horizontal" slot="input"> <template #input>
<van-radio name="1">Radio 1</van-radio> <van-radio-group v-model="radio" direction="horizontal">
<van-radio name="2">Radio 2</van-radio> <van-radio name="1">Radio 1</van-radio>
</van-radio-group> <van-radio name="2">Radio 2</van-radio>
</van-radio-group>
</template>
</van-field> </van-field>
``` ```
@ -182,7 +186,9 @@ export default {
```html ```html
<van-field name="stepper" label="Stepper"> <van-field name="stepper" label="Stepper">
<van-stepper v-model="stepper" slot="input" /> <template #input>
<van-stepper v-model="stepper"/>
</template>
</van-field> </van-field>
``` ```
@ -200,7 +206,9 @@ export default {
```html ```html
<van-field name="rate" label="Rate"> <van-field name="rate" label="Rate">
<van-rate v-model="rate" slot="input" /> <template #input>
<van-rate v-model="rate" />
</template>
</van-field> </van-field>
``` ```
@ -218,7 +226,9 @@ export default {
```html ```html
<van-field name="slider" label="Slider"> <van-field name="slider" label="Slider">
<van-slider v-model="slider" slot="input" /> <template #input>
<van-slider v-model="slider" />
</template>
</van-field> </van-field>
``` ```
@ -236,7 +246,9 @@ export default {
```html ```html
<van-field name="uploader" label="Uploader"> <van-field name="uploader" label="Uploader">
<van-uploader v-model="uploader" slot="input" /> <template #input>
<van-uploader v-model="uploader" />
</template>
</van-field> </van-field>
``` ```

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

@ -126,7 +126,9 @@ export default {
```html ```html
<van-field name="switch" label="开关"> <van-field name="switch" label="开关">
<van-switch v-model="switchChecked" slot="input" size="20" /> <template #input>
<van-switch v-model="switchChecked" size="20" />
</template>
</van-field> </van-field>
``` ```
@ -146,17 +148,17 @@ export default {
```html ```html
<van-field name="checkbox" label="复选框"> <van-field name="checkbox" label="复选框">
<van-checkbox v-model="checkbox" slot="input" shape="square" /> <template #input>
<van-checkbox v-model="checkbox" shape="square" />
</template>
</van-field> </van-field>
<van-field name="checkboxGroup" label="复选框组"> <van-field name="checkboxGroup" label="复选框组">
<van-checkbox-group <template #input>
v-model="checkboxGroup" <van-checkbox-group v-model="checkboxGroup" direction="horizontal">
slot="input" <van-checkbox name="1" shape="square">复选框 1</van-checkbox>
direction="horizontal" <van-checkbox name="2" shape="square">复选框 2</van-checkbox>
> </van-checkbox-group>
<van-checkbox name="1" shape="square">复选框 1</van-checkbox> </template>
<van-checkbox name="2" shape="square">复选框 2</van-checkbox>
</van-checkbox-group>
</van-field> </van-field>
``` ```
@ -177,10 +179,12 @@ export default {
```html ```html
<van-field name="radio" label="单选框"> <van-field name="radio" label="单选框">
<van-radio-group v-model="radio" direction="horizontal" slot="input"> <template #input>
<van-radio name="1">单选框 1</van-radio> <van-radio-group v-model="radio" direction="horizontal">
<van-radio name="2">单选框 2</van-radio> <van-radio name="1">单选框 1</van-radio>
</van-radio-group> <van-radio name="2">单选框 2</van-radio>
</van-radio-group>
</template>
</van-field> </van-field>
``` ```
@ -200,7 +204,9 @@ export default {
```html ```html
<van-field name="stepper" label="步进器"> <van-field name="stepper" label="步进器">
<van-stepper v-model="stepper" slot="input" /> <template #input>
<van-stepper v-model="stepper" />
</template>
</van-field> </van-field>
``` ```
@ -220,7 +226,9 @@ export default {
```html ```html
<van-field name="rate" label="评分"> <van-field name="rate" label="评分">
<van-rate v-model="rate" slot="input" /> <template #input>
<van-rate v-model="rate" />
</template>
</van-field> </van-field>
``` ```
@ -240,7 +248,9 @@ export default {
```html ```html
<van-field name="slider" label="滑块"> <van-field name="slider" label="滑块">
<van-slider v-model="slider" slot="input" /> <template #input>
<van-slider v-model="slider" />
</template>
</van-field> </van-field>
``` ```
@ -260,7 +270,9 @@ export default {
```html ```html
<van-field name="uploader" label="文件上传"> <van-field name="uploader" label="文件上传">
<van-uploader v-model="uploader" slot="input" /> <template #input>
<van-uploader v-model="uploader" />
</template>
</van-field> </van-field>
``` ```

56
src/form/demo/FieldType.vue
View File

@ -2,49 +2,61 @@
<demo-block :title="$t('fieldType')"> <demo-block :title="$t('fieldType')">
<van-form @submit="onSubmit"> <van-form @submit="onSubmit">
<van-field name="switch" :label="$t('switch')"> <van-field name="switch" :label="$t('switch')">
<van-switch v-model="switchChecked" slot="input" size="20" /> <template #input>
<van-switch v-model="switchChecked" size="20" />
</template>
</van-field> </van-field>
<van-field name="checkbox" :label="$t('checkbox')"> <van-field name="checkbox" :label="$t('checkbox')">
<van-checkbox v-model="checkbox" slot="input" shape="square" /> <template #input>
<van-checkbox v-model="checkbox" shape="square" />
</template>
</van-field> </van-field>
<van-field name="checkboxGroup" :label="$t('checkboxGroup')"> <van-field name="checkboxGroup" :label="$t('checkboxGroup')">
<van-checkbox-group <template #input>
v-model="checkboxGroup" <van-checkbox-group v-model="checkboxGroup" direction="horizontal">
slot="input" <van-checkbox name="1" shape="square">
direction="horizontal" {{ $t('checkbox') }} 1
> </van-checkbox>
<van-checkbox name="1" shape="square"> <van-checkbox name="2" shape="square">
{{ $t('checkbox') }} 1 {{ $t('checkbox') }} 2
</van-checkbox> </van-checkbox>
<van-checkbox name="2" shape="square"> </van-checkbox-group>
{{ $t('checkbox') }} 2 </template>
</van-checkbox>
</van-checkbox-group>
</van-field> </van-field>
<van-field name="radio" :label="$t('radio')"> <van-field name="radio" :label="$t('radio')">
<van-radio-group v-model="radio" direction="horizontal" slot="input"> <template #input>
<van-radio name="1">{{ $t('radio') }} 1</van-radio> <van-radio-group v-model="radio" direction="horizontal">
<van-radio name="2">{{ $t('radio') }} 2</van-radio> <van-radio name="1">{{ $t('radio') }} 1</van-radio>
</van-radio-group> <van-radio name="2">{{ $t('radio') }} 2</van-radio>
</van-radio-group>
</template>
</van-field> </van-field>
<van-field name="stepper" :label="$t('stepper')"> <van-field name="stepper" :label="$t('stepper')">
<van-stepper v-model="stepper" slot="input" /> <template #input>
<van-stepper v-model="stepper" />
</template>
</van-field> </van-field>
<van-field name="rate" :label="$t('rate')"> <van-field name="rate" :label="$t('rate')">
<van-rate v-model="rate" slot="input" /> <template #input>
<van-rate v-model="rate" />
</template>
</van-field> </van-field>
<van-field name="slider" :label="$t('slider')"> <van-field name="slider" :label="$t('slider')">
<van-slider v-model="slider" slot="input" /> <template #input>
<van-slider v-model="slider" />
</template>
</van-field> </van-field>
<van-field name="uploader" :label="$t('uploader')"> <van-field name="uploader" :label="$t('uploader')">
<van-uploader v-model="uploader" slot="input" max-count="2" /> <template #input>
<van-uploader v-model="uploader" max-count="2" />
</template>
</van-field> </van-field>
<field-type-picker /> <field-type-picker />

8
src/form/test/__snapshots__/demo.spec.js.snap
View File

@ -76,14 +76,14 @@ exports[`renders demo correctly 1`] = `
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox van-checkbox--horizontal"> <div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox van-checkbox--horizontal">
<div class="van-checkbox__icon van-checkbox__icon--square"><i class="van-icon van-icon-success"> <div class="van-checkbox__icon van-checkbox__icon--square"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-checkbox__label"> <!----></i></div><span class="van-checkbox__label">
复选框 1 复选框 1
</span> </span>
</div> </div>
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox van-checkbox--horizontal"> <div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox van-checkbox--horizontal">
<div class="van-checkbox__icon van-checkbox__icon--square"><i class="van-icon van-icon-success"> <div class="van-checkbox__icon van-checkbox__icon--square"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-checkbox__label"> <!----></i></div><span class="van-checkbox__label">
复选框 2 复选框 2
</span> </span>
</div> </div>
</div> </div>
</div> </div>

4
src/form/test/props.spec.js
View File

@ -150,7 +150,9 @@ test('input-align prop', () => {
<van-form input-align="right"> <van-form input-align="right">
<van-field /> <van-field />
<van-field> <van-field>
<div slot="input" /> <template #input>
<div />
</template>
</van-field> </van-field>
</van-form> </van-form>
`, `,