forked from opentiny/tiny-vue
docs(form): [form] form docs demo optimize (#1225)
This commit is contained in:
gimmyhehe
GitHub
parent
25c3e6fb00
commit
0210ce03de
|
|
@ -54,7 +54,7 @@ import { iconWarning } from '@opentiny/vue-icon'
|
|||
|
||||
const ruleFormRef = ref()
|
||||
function handleClick() {
|
||||
Modal.message({ message: 'click' })
|
||||
Modal.message({ message: 'click', status: 'info' })
|
||||
}
|
||||
const validateIcon = ref(iconWarning())
|
||||
const validType = ref('promise')
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ import {
|
|||
} from '@opentiny/vue'
|
||||
|
||||
function handleClick() {
|
||||
Modal.message({ message: 'click' })
|
||||
Modal.message({ message: 'click', status: 'info' })
|
||||
}
|
||||
|
||||
const options = ref([
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ function clearFormValid() {
|
|||
function handleSubmit() {
|
||||
ruleFormRef.value.validate((valid) => {
|
||||
if (valid) {
|
||||
Modal.message('提交成功')
|
||||
Modal.message({ message: '提交成功', status: 'info' })
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
@ -55,10 +55,10 @@ function validateUser(rule, value, callback) {
|
|||
new Promise((resolve, reject) => {
|
||||
setTimeout(() => {
|
||||
if (value && value.length > 30) {
|
||||
Modal.message('校验成功')
|
||||
Modal.message({ message: '校验成功', status: 'info' })
|
||||
resolve()
|
||||
} else {
|
||||
Modal.message('校验失败')
|
||||
Modal.message({ message: '校验失败', status: 'info' })
|
||||
reject(new Error('The length must be greater than 30 characters.'))
|
||||
}
|
||||
}, 300)
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ export default {
|
|||
handleSubmit() {
|
||||
this.$refs.ruleFormRef.validate((valid) => {
|
||||
if (valid) {
|
||||
Modal.message('提交成功')
|
||||
Modal.message({ message: '提交成功', status: 'info' })
|
||||
}
|
||||
})
|
||||
},
|
||||
|
|
@ -56,10 +56,10 @@ export default {
|
|||
new Promise((resolve, reject) => {
|
||||
setTimeout(() => {
|
||||
if (value && value.length > 30) {
|
||||
Modal.message('校验成功')
|
||||
Modal.message({ message: '校验成功', status: 'info' })
|
||||
resolve()
|
||||
} else {
|
||||
Modal.message('校验失败')
|
||||
Modal.message({ message: '校验失败', status: 'info' })
|
||||
reject(new Error('The length must be greater than 30 characters.'))
|
||||
}
|
||||
}, 300)
|
||||
|
|
|
|||
|
|
@ -214,7 +214,7 @@ export default {
|
|||
},
|
||||
{
|
||||
demoId: 'popper-options',
|
||||
name: { 'zh-CN': '错误提示配置', 'en-US': 'Error tip options' },
|
||||
name: { 'zh-CN': '错误提示', 'en-US': 'Error tip options' },
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过 <code>popper-options</code> 设置<code>tip</code>类型错误提示，例如：当表单父元素是滚动元素，切页面滚动后，提示会错位，将 <code>bubbling</code> 属性设置为 <code>true</code>可解决此问题。</p>',
|
||||
|
|
@ -227,7 +227,7 @@ export default {
|
|||
demoId: 'events',
|
||||
name: { 'zh-CN': '表单事件', 'en-US': 'Form events' },
|
||||
desc: {
|
||||
'zh-CN': '<p>任一表单项被校验后触发 <code>validate</code>事件</p>',
|
||||
'zh-CN': '<p>任一表单项被校验后触发 <code>validate</code>事件。</p>',
|
||||
'en-US': 'The <code>validate</code> event is triggered after any form item is verified.'
|
||||
},
|
||||
codeFiles: ['events.vue']
|
||||
|
|
@ -285,7 +285,7 @@ export default {
|
|||
type: 'boolean',
|
||||
'defaultValue': '--',
|
||||
desc: {
|
||||
'zh-CN': '当 validate-type 设置为text时，是否以行内形式展示校验信息(推荐使用 message-type 设置)',
|
||||
'zh-CN': '当 validate-type 设置为 text 时，是否以行内形式展示校验信息(推荐使用 message-type 设置)',
|
||||
'en-US':
|
||||
' Whether to display the verification information inline form when validate-type is set to text,(It is recommended to use message-type setting)'
|
||||
},
|
||||
|
|
@ -297,7 +297,7 @@ export default {
|
|||
'defaultValue': '--',
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'当 validate-type 设置为text时，配置文本类型错误类型，可配置行内或者块级，不设置则为 absolute 定位',
|
||||
'当 validate-type 设置为 text 时，配置文本类型错误类型，可配置行内或者块级，不设置则为 absolute 定位',
|
||||
'en-US':
|
||||
'Configure the text type error type, which can be configured at the inline or block level when validate-type is set to text. The default is absolute positioning'
|
||||
},
|
||||
|
|
@ -308,7 +308,7 @@ export default {
|
|||
type: 'boolean',
|
||||
defaultValue: 'false',
|
||||
desc: {
|
||||
'zh-CN': "当出现必填星号时，标签文本是否对齐，当 label-position 为 'right'时有效",
|
||||
'zh-CN': "当出现必填星号时，标签文本是否对齐，当 label-position 为 'right' 时有效",
|
||||
'en-US': 'When a mandatory asterisk appears, is it aligned with the text'
|
||||
},
|
||||
demoId: 'label-align'
|
||||
|
|
@ -456,7 +456,7 @@ export default {
|
|||
'defaultValue': '--',
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'移除表单项的校验结果，可传入待移除的表单项的prop，或者 prop 组成的数组，如不传则移除整个表单的校验结果',
|
||||
'移除表单项的校验结果，可传入待移除的表单项的 prop ，或者 prop 组成的数组，如不传则移除整个表单的校验结果',
|
||||
'en-US':
|
||||
'The verification result of removing a form item is transferred to the prop attribute of the form item to be removed or an array consisting of prop. If this parameter is not transferred, the verification result of the entire form is removed.'
|
||||
},
|
||||
|
|
@ -492,7 +492,7 @@ export default {
|
|||
'defaultValue': '--',
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'对部分表单字段进行校验的方法, 第一个参数为单个prop或者prop数组，第二个参数是回调函数，每个表单项检验完后会依次调用该回调',
|
||||
'对部分表单字段进行校验的方法, 第一个参数为单个 prop 或者 prop 数组，第二个参数是回调函数，每个表单项检验完后会依次调用该回调',
|
||||
'en-US':
|
||||
'A method for verifying some form fields. The first parameter is a single prop or a prop array, and the second parameter is a callback function. After each form item is verified, the callback will be called in sequence'
|
||||
},
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ export const buttonProps = {
|
|||
type: String,
|
||||
default: '',
|
||||
validator(val: string) {
|
||||
return ['large', 'medium', 'small', 'mini'].includes(val)
|
||||
return ['large', 'medium', 'small', 'mini', ''].includes(val)
|
||||
}
|
||||
},
|
||||
round: Boolean,
|
||||
|
|
|
|||
Loading…
Reference in New Issue