mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2024-12-15 04:42:23 +08:00
Merge pull request #7 from Infrastructure/feature/form
fix: fix validator in input-number and switch and add some code demo
This commit is contained in:
commit
1a4ef23d07
@ -271,6 +271,7 @@
|
||||
ref="form-validate"
|
||||
:model="validateForm"
|
||||
:rules="validateRules"
|
||||
:label-width="100"
|
||||
>
|
||||
<n-form-item
|
||||
label="Warning"
|
||||
@ -296,6 +297,15 @@
|
||||
</template>
|
||||
<span>Test nesting formItem in resetForm</span>
|
||||
</n-popover>
|
||||
<n-form-item
|
||||
prop="inputNumber"
|
||||
label="InputNumber"
|
||||
>
|
||||
<n-input-number
|
||||
v-model="validateForm.inputNumber"
|
||||
placeholder="n-input-number"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item
|
||||
prop="muti.deep.select"
|
||||
label="Select"
|
||||
@ -365,6 +375,15 @@
|
||||
<n-form-item prop="input" label="Input">
|
||||
<n-input v-model="validateForm.input" placeholder="Enter string" />
|
||||
</n-form-item>
|
||||
<n-form-item
|
||||
prop="inputNumber"
|
||||
label="InputNumber"
|
||||
>
|
||||
<n-input-number
|
||||
v-model="validateForm.inputNumber"
|
||||
placeholder="n-input-number"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item prop="muti.deep.select" label="Select">
|
||||
<n-select
|
||||
size="small"
|
||||
@ -419,9 +438,22 @@
|
||||
callback()
|
||||
}
|
||||
}
|
||||
var inputNumberValidate = (rule, value, callback) => {
|
||||
console.log('blur', value)
|
||||
callback()
|
||||
}
|
||||
var inputNumberValidateChange = (rule, value, callback) => {
|
||||
console.log('change', value)
|
||||
callback()
|
||||
}
|
||||
var switchValidate = (rule, value, callback) => {
|
||||
console.log('switch change', value)
|
||||
callback()
|
||||
}
|
||||
return {
|
||||
validateForm: {
|
||||
input: "",
|
||||
inputNumber: undefined,
|
||||
muti: {
|
||||
deep: {
|
||||
select: ""
|
||||
@ -432,6 +464,14 @@
|
||||
radio: ""
|
||||
},
|
||||
validateRules: {
|
||||
switch: [
|
||||
{ validator: switchValidate, trigger: 'change' }
|
||||
],
|
||||
inputNumber: [
|
||||
{ required: true, message: 'input cannot be empty', trigger: 'blur' },
|
||||
{ validator: inputNumberValidate, trigger: 'blur' },
|
||||
{ validator: inputNumberValidateChange, trigger: 'change' }
|
||||
],
|
||||
input: [
|
||||
{ required: true, message: "input cannot be empty", trigger: "blur" }
|
||||
],
|
||||
@ -747,6 +787,18 @@ export default {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
var inputNumberValidate = (rule, value, callback) => {
|
||||
console.log('blur', value)
|
||||
callback()
|
||||
}
|
||||
var inputNumberValidateChange = (rule, value, callback) => {
|
||||
console.log('change', value)
|
||||
callback()
|
||||
}
|
||||
var switchValidate = (rule, value, callback) => {
|
||||
console.log('switch change', value)
|
||||
callback()
|
||||
}
|
||||
return {
|
||||
form: {
|
||||
name: '',
|
||||
@ -779,6 +831,7 @@ export default {
|
||||
],
|
||||
validateForm: {
|
||||
input: '',
|
||||
inputNumber: undefined,
|
||||
muti: {
|
||||
deep: {
|
||||
select: 'Public'
|
||||
@ -792,6 +845,14 @@ export default {
|
||||
radio: ''
|
||||
},
|
||||
validateRules: {
|
||||
switch: [
|
||||
{ validator: switchValidate, trigger: 'change' }
|
||||
],
|
||||
inputNumber: [
|
||||
{ type: 'number', required: true, message: 'input cannot be empty', trigger: 'blur' },
|
||||
{ validator: inputNumberValidate, trigger: 'blur' },
|
||||
{ validator: inputNumberValidateChange, trigger: 'change' }
|
||||
],
|
||||
input: [
|
||||
{ required: true, message: 'input cannot be empty', trigger: 'blur' }
|
||||
],
|
||||
|
@ -75,9 +75,6 @@ export default {
|
||||
},
|
||||
mixins: [ Emitter ],
|
||||
inject: {
|
||||
form: {
|
||||
default: null
|
||||
},
|
||||
formItem: {
|
||||
default: null
|
||||
}
|
||||
@ -129,11 +126,6 @@ export default {
|
||||
isComposing: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
validateState () {
|
||||
return this.formItem ? this.formItem.validateState : ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleCompositionStart () {
|
||||
this.isComposing = true
|
||||
|
@ -40,6 +40,7 @@
|
||||
|
||||
<script>
|
||||
import NIcon from '../../Icon/index'
|
||||
import Emitter from '../../../mixins/emitter'
|
||||
|
||||
const DEFAULT_STEP = 1
|
||||
|
||||
@ -61,6 +62,12 @@ export default {
|
||||
components: {
|
||||
NIcon
|
||||
},
|
||||
mixins: [ Emitter ],
|
||||
inject: {
|
||||
formItem: {
|
||||
default: null
|
||||
}
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
type: Number,
|
||||
@ -124,6 +131,7 @@ export default {
|
||||
}
|
||||
}
|
||||
this.$emit('change', newValue, oldValue)
|
||||
this.formBlur('change', newValue)
|
||||
/**
|
||||
* newValue === oldValue won't trigger watcher!
|
||||
* so the call stack won't fall in loop
|
||||
@ -141,6 +149,11 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
formBlur (type, val) {
|
||||
if (this.formItem) {
|
||||
this.dispatch('NFormItem', 'on-form-' + type, val)
|
||||
}
|
||||
},
|
||||
add () {
|
||||
if (this.value === null) {
|
||||
this.$emit('input', this.aValidValue)
|
||||
@ -161,6 +174,7 @@ export default {
|
||||
const value = e.target.value
|
||||
if (value === '') {
|
||||
this.$emit('input', null)
|
||||
this.formBlur('blur', value)
|
||||
return
|
||||
}
|
||||
const parsedNumber = Number(value)
|
||||
@ -170,6 +184,7 @@ export default {
|
||||
const valueAfterChange = parsedNumber
|
||||
this.$emit('input', valueAfterChange)
|
||||
}
|
||||
this.formBlur('blur', parsedNumber)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -11,8 +11,16 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Emitter from '../../../mixins/emitter'
|
||||
|
||||
export default {
|
||||
name: 'NSwitch',
|
||||
mixins: [ Emitter ],
|
||||
inject: {
|
||||
formItem: {
|
||||
default: null
|
||||
}
|
||||
},
|
||||
model: {
|
||||
prop: 'active',
|
||||
event: 'change'
|
||||
@ -31,6 +39,9 @@ export default {
|
||||
handleClick () {
|
||||
if (!this.disabled) {
|
||||
this.$emit('change', !this.active)
|
||||
if (this.formItem) {
|
||||
this.dispatch('NFormItem', 'on-form-change', !this.active)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user