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

docs(Form): use composition api

Browse Source
This commit is contained in:
chenjiahan
2020-12-15 16:52:29 +08:00
parent 9e86d01e83
commit 23a6f63c4f
11 changed files with 582 additions and 438 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/form/demo/BasicUsage.vue
+36 -27
View File
@@ -16,7 +16,7 @@
:rules="[{ required: true, message: t('requirePassword') }]"
:placeholder="t('password')"
/>
<div style="margin: 16px 16px 0;">
<div style="margin: 16px 16px 0">
<van-button round block type="primary" native-type="submit">
{{ t('submit') }}
</van-button>
@@ -26,38 +26,47 @@
</template>
<script>
export default {
i18n: {
'zh-CN': {
submit: '提交',
username: '用户名',
password: '密码',
requireUsername: '请填写用户名',
requirePassword: '请填写密码',
},
'en-US': {
submit: 'Submit',
username: 'Username',
password: 'Password',
requireUsername: 'Username is required',
requirePassword: 'Password is required',
},
},
import { reactive, toRefs } from 'vue';
import { useTranslate } from '@demo/use-translate';
data() {
return {
const i18n = {
'zh-CN': {
submit: '提交',
username: '用户名',
password: '密码',
requireUsername: '请填写用户名',
requirePassword: '请填写密码',
},
'en-US': {
submit: 'Submit',
username: 'Username',
password: 'Password',
requireUsername: 'Username is required',
requirePassword: 'Password is required',
},
};
export default {
setup() {
const t = useTranslate(i18n);
const state = reactive({
username: '',
password: '',
};
},
});
methods: {
onSubmit(values) {
const onSubmit = (values) => {
console.log('submit', values);
},
onFailed(errorInfo) {
};
const onFailed = (errorInfo) => {
console.log('failed', errorInfo);
},
};
return {
...toRefs(state),
t,
onSubmit,
onFailed,
};
},
};
</script>
src/form/demo/FieldType.vue
+45 -38
View File
@@ -64,7 +64,7 @@
<field-type-area />
<field-type-calendar />
<div style="margin: 16px 16px 0;">
<div style="margin: 16px 16px 0">
<van-button round block type="primary" native-type="submit">
{{ t('submit') }}
</van-button>
@@ -74,43 +74,45 @@
</template>
<script>
import { reactive, toRefs } from 'vue';
import { useTranslate } from '@demo/use-translate';
import FieldTypeArea from './FieldTypeArea';
import FieldTypePicker from './FieldTypePicker';
import FieldTypeCalendar from './FieldTypeCalendar';
import FieldTypeDatetimePicker from './FieldTypeDatetimePicker';
export default {
i18n: {
'zh-CN': {
rate: '评分',
radio: '单选框',
submit: '提交',
switch: '开关',
slider: '滑块',
picker: '选择器',
stepper: '步进器',
checkbox: '复选框',
uploader: '文件上传',
fieldType: '表单项类型',
checkboxGroup: '复选框组',
requireCheckbox: '请勾选复选框',
},
'en-US': {
rate: 'Rate',
radio: 'Radio',
submit: 'Submit',
switch: 'Switch',
slider: 'Slider',
picker: 'Picker',
stepper: 'Stepper',
checkbox: 'Checkbox',
uploader: 'Uploader',
fieldType: 'Field Type',
checkboxGroup: 'Checkbox Group',
requireCheckbox: 'Checkbox is required',
},
const i18n = {
'zh-CN': {
rate: '评分',
radio: '单选框',
submit: '提交',
switch: '开关',
slider: '滑块',
picker: '选择器',
stepper: '步进器',
checkbox: '复选框',
uploader: '文件上传',
fieldType: '表单项类型',
checkboxGroup: '复选框组',
requireCheckbox: '请勾选复选框',
},
'en-US': {
rate: 'Rate',
radio: 'Radio',
submit: 'Submit',
switch: 'Switch',
slider: 'Slider',
picker: 'Picker',
stepper: 'Stepper',
checkbox: 'Checkbox',
uploader: 'Uploader',
fieldType: 'Field Type',
checkboxGroup: 'Checkbox Group',
requireCheckbox: 'Checkbox is required',
},
};
export default {
components: {
FieldTypeArea,
FieldTypePicker,
@@ -118,8 +120,9 @@ export default {
FieldTypeDatetimePicker,
},
data() {
return {
setup() {
const t = useTranslate(i18n);
const state = reactive({
rate: 3,
radio: '1',
slider: 50,
@@ -128,13 +131,17 @@ export default {
checkbox: false,
checkboxGroup: [],
switchChecked: false,
};
},
});
methods: {
onSubmit(values) {
const onSubmit = (values) => {
console.log(values);
},
};
return {
...toRefs(state),
t,
onSubmit,
};
},
};
</script>
src/form/demo/FieldTypeArea.vue
+32 -24
View File
@@ -18,42 +18,50 @@
</template>
<script>
import { reactive, toRefs } from 'vue';
import { useTranslate } from '@demo/use-translate';
import AreaList from '../../area/demo/area';
import AreaListEn from '../../area/demo/area-en';
export default {
i18n: {
'zh-CN': {
picker: '地区选择',
areaList: AreaList,
placeholder: '点击选择省市区',
},
'en-US': {
picker: 'Area Picker',
areaList: AreaListEn,
placeholder: 'Select area',
},
const i18n = {
'zh-CN': {
picker: '地区选择',
areaList: AreaList,
placeholder: '点击选择省市区',
},
'en-US': {
picker: 'Area Picker',
areaList: AreaListEn,
placeholder: 'Select area',
},
};
data() {
return {
export default {
setup() {
const t = useTranslate(i18n);
const state = reactive({
value: '',
showArea: false,
};
},
});
methods: {
onConfirm(values) {
this.value = values
const onConfirm = (values) => {
state.value = values
.filter((item) => !!item)
.map((item) => item.name)
.join('/');
this.showArea = false;
},
state.showArea = false;
};
onCancel() {
this.showArea = false;
},
const onCancel = () => {
state.showArea = false;
};
return {
...toRefs(state),
t,
onCancel,
onConfirm,
};
},
};
</script>
src/form/demo/FieldTypeCalendar.vue
+29 -23
View File
@@ -17,34 +17,40 @@
</template>
<script>
export default {
i18n: {
'zh-CN': {
calendar: '日历',
placeholder: '点击选择日期',
},
'en-US': {
calendar: 'Calendar',
placeholder: 'Select date',
},
},
import { reactive, toRefs } from 'vue';
import { useTranslate } from '@demo/use-translate';
data() {
return {
const i18n = {
'zh-CN': {
calendar: '日历',
placeholder: '点击选择日期',
},
'en-US': {
calendar: 'Calendar',
placeholder: 'Select date',
},
};
export default {
setup() {
const t = useTranslate(i18n);
const state = reactive({
value: '',
showCalendar: false,
});
const formatDate = (date) => `${date.getMonth() + 1}/${date.getDate()}`;
const onConfirm = (date) => {
state.value = formatDate(date);
state.showCalendar = false;
};
},
methods: {
formatDate(date) {
return `${date.getMonth() + 1}/${date.getDate()}`;
},
onConfirm(date) {
this.value = this.formatDate(date);
this.showCalendar = false;
},
return {
...toRefs(state),
t,
onConfirm,
};
},
};
</script>
src/form/demo/FieldTypeDatetimePicker.vue
+32 -24
View File
@@ -14,34 +14,42 @@
</template>
<script>
export default {
i18n: {
'zh-CN': {
label: '时间选择',
placeholder: '点击选择时间',
},
'en-US': {
label: 'Datetime Picker',
placeholder: 'Select time',
},
},
import { reactive, toRefs } from 'vue';
import { useTranslate } from '@demo/use-translate';
data() {
return {
const i18n = {
'zh-CN': {
label: '时间选择',
placeholder: '点击选择时间',
},
'en-US': {
label: 'Datetime Picker',
placeholder: 'Select time',
},
};
export default {
setup() {
const t = useTranslate(i18n);
const state = reactive({
value: '',
showPicker: false,
};
},
});
methods: {
onConfirm(time) {
console.log('time', time);
this.value = time;
this.showPicker = false;
},
onCancel() {
this.showPicker = false;
},
const onConfirm = (time) => {
state.value = time;
state.showPicker = false;
};
const onCancel = () => {
state.showPicker = false;
};
return {
...toRefs(state),
t,
onCancel,
onConfirm,
};
},
};
</script>
src/form/demo/FieldTypePicker.vue
+33 -24
View File
@@ -18,36 +18,45 @@
</template>
<script>
export default {
i18n: {
'zh-CN': {
picker: '选择器',
placeholder: '点击选择城市',
textColumns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
},
'en-US': {
picker: 'Picker',
placeholder: 'Select city',
textColumns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
},
},
import { reactive, toRefs } from 'vue';
import { useTranslate } from '@demo/use-translate';
data() {
return {
const i18n = {
'zh-CN': {
picker: '选择器',
placeholder: '点击选择城市',
textColumns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
},
'en-US': {
picker: 'Picker',
placeholder: 'Select city',
textColumns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
},
};
export default {
setup() {
const t = useTranslate(i18n);
const state = reactive({
value: '',
showPicker: false,
});
const onConfirm = (value) => {
state.value = value;
state.showPicker = false;
};
},
methods: {
onConfirm(value) {
this.value = value;
this.showPicker = false;
},
const onCancel = () => {
state.showPicker = false;
};
onCancel() {
this.showPicker = false;
},
return {
...toRefs(state),
t,
onCancel,
onConfirm,
};
},
};
</script>
src/form/demo/ValidateRules.vue
+51 -42
View File
@@ -22,7 +22,7 @@
:rules="[{ validator: asyncValidator, message: t('message') }]"
:placeholder="t('asyncValidator')"
/>
<div style="margin: 16px 16px 0;">
<div style="margin: 16px 16px 0">
<van-button round block type="primary" native-type="submit">
{{ t('submit') }}
</van-button>
@@ -32,62 +32,71 @@
</template>
<script>
export default {
i18n: {
'zh-CN': {
label: '文本',
title: '校验规则',
submit: '提交',
message: '请输入正确内容',
pattern: '正则校验',
validator: '函数校验',
validating: '验证中...',
asyncValidator: '异步函数校验',
},
'en-US': {
label: 'Label',
title: 'Validate Rules',
submit: 'Submit',
message: 'Error message',
pattern: 'Use pattern',
validator: 'Use validator',
validating: 'Validating...',
asyncValidator: 'Use async validator',
},
},
import { reactive, toRefs } from 'vue';
import { useTranslate } from '@demo/use-translate';
import Toast from '../../toast';
data() {
return {
const i18n = {
'zh-CN': {
label: '文本',
title: '校验规则',
submit: '提交',
message: '请输入正确内容',
pattern: '正则校验',
validator: '函数校验',
validating: '验证中...',
asyncValidator: '异步函数校验',
},
'en-US': {
label: 'Label',
title: 'Validate Rules',
submit: 'Submit',
message: 'Error message',
pattern: 'Use pattern',
validator: 'Use validator',
validating: 'Validating...',
asyncValidator: 'Use async validator',
},
};
export default {
setup() {
const t = useTranslate(i18n);
const state = reactive({
value1: '',
value2: '',
value3: '',
pattern: /\d{6}/,
};
},
});
methods: {
validator(val) {
return /1\d{10}/.test(val);
},
const validator = (val) => /1\d{10}/.test(val);
asyncValidator(val) {
return new Promise((resolve) => {
this.$toast.loading(this.t('validating'));
const asyncValidator = (val) =>
new Promise((resolve) => {
Toast.loading(t('validating'));
setTimeout(() => {
this.$toast.clear();
Toast.clear();
resolve(val === '1234');
}, 1000);
});
},
onSubmit(values) {
const onSubmit = (values) => {
console.log('submit', values);
},
};
onFailed(errorInfo) {
const onFailed = (errorInfo) => {
console.log('failed', errorInfo);
},
};
return {
...toRefs(state),
t,
pattern: /\d{6}/,
onSubmit,
onFailed,
validator,
asyncValidator,
};
},
};
</script>