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

feat(Form): support using slider

Browse Source
This commit is contained in:
陈嘉涵
2020-02-10 17:17:09 +08:00
parent 7fa4e8cad1
commit dc77be6f8a
12 changed files with 122 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/form/demo/FieldType.vue
+7
View File
@@ -13,6 +13,10 @@
<van-rate v-model="rate" slot="input" />
</van-field>
<van-field name="slider" :label="$t('slider')">
<van-slider v-model="slider" slot="input" />
</van-field>
<van-field name="stepper" :label="$t('stepper')">
<van-stepper v-model="stepper" slot="input" />
</van-field>
@@ -31,6 +35,7 @@ export default {
rate: '评分',
submit: '提交',
switch: '开关',
slider: '滑块',
stepper: '步进器',
checkbox: '复选框',
fieldType: '表单项类型',
@@ -40,6 +45,7 @@ export default {
rate: 'Rate',
submit: 'Submit',
switch: 'Switch',
slider: 'Slider',
stepper: 'Stepper',
checkbox: 'Checkbox',
fieldType: 'Field Type',
@@ -50,6 +56,7 @@ export default {
data() {
return {
rate: 3,
slider: 50,
stepper: 1,
checkbox: false,
switchChecked: false,
src/form/index.js
-1
View File
@@ -1,4 +1,3 @@
// Utils
import { createNamespace } from '../utils';
const [createComponent, bem] = createNamespace('form');
src/form/test/__snapshots__/demo.spec.js.snap
+51 -4
View File
@@ -6,13 +6,13 @@ exports[`renders demo correctly 1`] = `
<form class="van-form">
<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-cell__value van-field__value">
<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>密码</span></div>
<div class="van-cell__value">
<div class="van-cell__value van-field__value">
<div class="van-field__body"><input type="password" name="password" placeholder="密码" class="van-field__control"></div>
</div>
</div>
@@ -23,7 +23,7 @@ exports[`renders demo correctly 1`] = `
<form class="van-form">
<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-cell__value van-field__value">
<div class="van-field__body">
<div class="van-field__control van-field__control--custom">
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox">
@@ -36,7 +36,7 @@ exports[`renders demo correctly 1`] = `
</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-cell__value van-field__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;">
@@ -46,6 +46,53 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
</div>
<div class="van-cell van-field">
<div class="van-cell__title van-field__label"><span>评分</span></div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<div class="van-field__control van-field__control--custom">
<div tabindex="0" role="radiogroup" class="van-rate">
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon van-rate__icon--full">
<!----></i></div>
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="2" aria-checked="true" class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon van-rate__icon--full">
<!----></i></div>
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="3" aria-checked="true" class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon van-rate__icon--full">
<!----></i></div>
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="4" aria-checked="false" class="van-rate__item"><i data-score="4" class="van-icon van-icon-star-o van-rate__icon">
<!----></i></div>
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="5" aria-checked="false" class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon">
<!----></i></div>
</div>
</div>
</div>
</div>
</div>
<div class="van-cell van-field">
<div class="van-cell__title van-field__label"><span>滑块</span></div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<div class="van-field__control van-field__control--custom">
<div class="van-slider">
<div class="van-slider__bar" style="width: 50%;">
<div role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="50" aria-valuemax="100" aria-orientation="horizontal" class="van-slider__button-wrapper">
<div class="van-slider__button"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="van-cell van-field">
<div class="van-cell__title van-field__label"><span>步进器</span></div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<div class="van-field__control van-field__control--custom">
<div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button type="button" class="van-stepper__plus"></button></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>