alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(Form): support using switch

Browse Source
This commit is contained in:
陈嘉涵
2020-02-10 16:30:17 +08:00
parent 0e23124c3a
commit 1db9536182
6 changed files with 125 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/form/demo/FieldType.vue
+16 -6
View File
@@ -1,13 +1,14 @@
<template>
<demo-block :title="$t('fieldType')">
<van-form>
<van-field
name="checkbox"
:label="$t('checkbox')"
:rules="[{ required: true, message: $t('requireCheckbox') }]"
>
<van-form @submit="onSubmit">
<van-field name="checkbox" :label="$t('checkbox')">
<van-checkbox v-model="checkbox" slot="input" shape="square" />
</van-field>
<van-field name="switch" :label="$t('switch')">
<van-switch v-model="switchChecked" slot="input" size="24" />
</van-field>
<div style="margin: 16px;">
<van-button type="info" round block>{{ $t('submit') }}</van-button>
</div>
@@ -20,12 +21,14 @@ export default {
i18n: {
'zh-CN': {
submit: '提交',
switch: '开关',
checkbox: '复选框',
fieldType: '表单项类型',
requireCheckbox: '请勾选复选框',
},
'en-US': {
submit: 'Submit',
switch: 'Switch',
checkbox: 'Checkbox',
fieldType: 'Field Type',
requireCheckbox: 'Checkbox is required',
@@ -35,7 +38,14 @@ export default {
data() {
return {
checkbox: false,
switchChecked: false,
};
},
methods: {
onSubmit(values) {
console.log(values);
},
},
};
</script>
src/form/demo/Validate.vue
View File
src/form/test/__snapshots__/demo.spec.js.snap
+25 -7
View File
@@ -5,22 +5,27 @@ exports[`renders demo correctly 1`] = `
<div>
<form class="van-form">
<div class="van-cell van-field">
<div class="van-cell__title van-field__label"><span>username</span></div>
<div class="van-cell__title van-field__label"><span>用户名</span></div>
<div class="van-cell__value">
<div class="van-field__body"><input type="text" name="username" placeholder="username" class="van-field__control"></div>
<div class="van-field__body"><input type="text" name="username" placeholder="用户名" class="van-field__control"></div>
</div>
</div>
<div class="van-cell van-field">
<div class="van-cell__title van-field__label"><span>password</span></div>
<div class="van-cell__title van-field__label"><span>密码</span></div>
<div class="van-cell__value">
<div class="van-field__body"><input type="password" name="password" placeholder="password" class="van-field__control"></div>
<div class="van-field__body"><input type="password" name="password" placeholder="密码" class="van-field__control"></div>
</div>
</div>
<div style="margin: 16px;"><button class="van-button van-button--info van-button--normal van-button--block van-button--round"><span class="van-button__text">提交</span></button></div>
</form>
</div>
<div>
<form class="van-form">
<div class="van-cell van-field">
<div class="van-cell__title van-field__label"><span>agree</span></div>
<div class="van-cell__title van-field__label"><span>复选框</span></div>
<div class="van-cell__value">
<div class="van-field__body">
<div class="van-field__control">
<div class="van-field__control van-field__control--custom">
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox">
<div class="van-checkbox__icon van-checkbox__icon--square"><i class="van-icon van-icon-success">
<!----></i></div>
@@ -28,7 +33,20 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
</div>
</div> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">submit</span></button>
</div>
<div class="van-cell van-field">
<div class="van-cell__title van-field__label"><span>开关</span></div>
<div class="van-cell__value">
<div class="van-field__body">
<div class="van-field__control van-field__control--custom">
<div role="switch" aria-checked="false" class="van-switch" style="font-size: 24px;">
<div class="van-switch__node"></div>
</div>
</div>
</div>
</div>
</div>
<div style="margin: 16px;"><button class="van-button van-button--info van-button--normal van-button--block van-button--round"><span class="van-button__text">提交</span></button></div>
</form>
</div>
</div>