mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-02-17 13:20:52 +08:00
feature: size, disabled need to add in the future
This commit is contained in:
mangogan
parent
a225e9e1f7
commit
a64a37850a
@ -211,13 +211,19 @@
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">Validate Form</div>
|
||||
<div class="n-doc-section__view">
|
||||
<n-form ref="form-validate" :model="validateForm" :rules="validateRules">
|
||||
<n-form-item prop="input" label="Input">
|
||||
|
||||
<n-form ref="form-validate" :model="validateForm" disabled :rules="validateRules">
|
||||
<n-form-item label="Warning" labelPosition="top">
|
||||
The key in form-model does not support the form with ' . '.<br/>
|
||||
And does not init the value of parameters with 'undefined'.</br>
|
||||
ResetForm Method: only can reset the item with prop.<br/>
|
||||
ValidateForm Method: support validate specified items by the second parameter in form of array.<br/>
|
||||
</n-form-item>
|
||||
<n-form-item :requiredLogo="false" prop="input" label="Input">
|
||||
<n-input v-model="validateForm.input" placeholder="Enter string" />
|
||||
</n-form-item>
|
||||
<n-form-item prop="muti.deep.select" label="Select">
|
||||
<n-select
|
||||
size="small"
|
||||
v-model="validateForm.muti.deep.select"
|
||||
placeholder="Please Select Type"
|
||||
:items="items"
|
||||
@ -235,14 +241,14 @@
|
||||
</n-form-item>
|
||||
<n-form-item>
|
||||
<n-button @click="formValidate('form-validate')">Submit</n-button>
|
||||
<n-button>Reset</n-button>
|
||||
<n-button @click="formReset('form-validate')">Reset</n-button>
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
|
||||
</div>
|
||||
<div class="n-doc-section__source">
|
||||
<textarea v-pre>
|
||||
<n-form ref="form-validate" :model="validateForm" :rules="validateRules">
|
||||
<n-form ref="form-validate" disabled :model="validateForm" :rules="validateRules">
|
||||
<n-form-item prop="input" label="Input">
|
||||
<n-input v-model="validateForm.input" placeholder="Enter string" />
|
||||
</n-form-item>
|
||||
@ -266,7 +272,7 @@
|
||||
</n-form-item>
|
||||
<n-form-item>
|
||||
<n-button @click="formValidate('form-validate')">Submit</n-button>
|
||||
<n-button>Reset</n-button>
|
||||
<n-button @click="formReset('form-validate')">Reset</n-button>
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
<script>
|
||||
@ -315,6 +321,7 @@
|
||||
},
|
||||
methods: {
|
||||
formValidate(ref) {
|
||||
// two ways to use, the first used most
|
||||
// this.$refs[ref].validate((flag, res) => {
|
||||
// console.log("validate all result", flag, res);
|
||||
// });
|
||||
@ -333,7 +340,10 @@
|
||||
.catch(e => {
|
||||
console.log("unpass", e);
|
||||
});
|
||||
}
|
||||
},
|
||||
formReset (ref) {
|
||||
this.$refs[ref].resetForm();
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -443,7 +453,7 @@
|
||||
<n-input v-model="dynamic['email'][k]"></n-input>
|
||||
</n-form-item>
|
||||
<n-form-item>
|
||||
<n-button @click="dynamicAddItem">Add item</n-button>
|
||||
<n-button @click="dynamicAddItem">Add</n-button>
|
||||
<n-button @click="dynamicPopItem">Delete</n-button>
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
@ -584,10 +594,10 @@ export default {
|
||||
}
|
||||
],
|
||||
validateForm: {
|
||||
input: "",
|
||||
input: "input",
|
||||
muti: {
|
||||
deep: {
|
||||
select: ""
|
||||
select: "Public"
|
||||
}
|
||||
},
|
||||
datepicker: "",
|
||||
@ -722,9 +732,9 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
formValidate(ref) {
|
||||
// this.$refs[ref].validate((flag, res) => {
|
||||
// console.log("validate all result", flag, res);
|
||||
// });
|
||||
this.$refs[ref].validate((flag, res) => {
|
||||
console.log("validate all result", flag, res);
|
||||
});
|
||||
new Promise((resolve, reject) => {
|
||||
this.$refs[ref].validate((valid, filed) => {
|
||||
if (valid) {
|
||||
@ -741,8 +751,8 @@ export default {
|
||||
console.log("unpass", e);
|
||||
});
|
||||
},
|
||||
resetForm() {
|
||||
this.$refs["form3"].resetForm();
|
||||
formReset (ref) {
|
||||
this.$refs[ref].resetForm();
|
||||
},
|
||||
dynamicAddItem() {
|
||||
let i = Object.keys(this.dynamic.email).length;
|
||||
@ -758,7 +768,6 @@ export default {
|
||||
let keys = Object.keys(this.dynamic.email)
|
||||
let k = keys.pop()
|
||||
if (k) {
|
||||
console.log(this.dynamic.email, k)
|
||||
this.$delete(this.dynamic.email, k)
|
||||
}
|
||||
}
|
||||
|
||||
@ -12,6 +12,7 @@
|
||||
</template>
|
||||
<script>
|
||||
import AsyncValidator from 'async-validator'
|
||||
import { getObjValue } from '../../../utils/index'
|
||||
import { debuglog } from 'util';
|
||||
|
||||
export default {
|
||||
@ -22,7 +23,11 @@ export default {
|
||||
labelStyle: String,
|
||||
labelPosition: String,
|
||||
prop: String,
|
||||
required: Boolean
|
||||
required: Boolean,
|
||||
requiredLogo: {
|
||||
type: Boolean,
|
||||
default: undefined
|
||||
}
|
||||
},
|
||||
inject: ['form'],
|
||||
provide () {
|
||||
@ -57,6 +62,18 @@ export default {
|
||||
return rule
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// disabled (n) {
|
||||
// this.$children.forEach(i => {
|
||||
// if (getObjValue(i, '$options.name.0'.split('.')) === 'N') {
|
||||
// // dirctly modify the prop value is forbbiden by vue,
|
||||
// // neither definePropery or proxy pass
|
||||
// // we need to update every components we want to influence
|
||||
// // i.disabled = n
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
},
|
||||
created () {
|
||||
this.validateEventListener()
|
||||
},
|
||||
@ -66,12 +83,16 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
getValue (key) {
|
||||
return this[key] || this.form[key] || null
|
||||
return this[key] === undefined ? this.form[key] : this[key]
|
||||
},
|
||||
getFormClass () {
|
||||
let cls = []
|
||||
let pre = 'n-form-item__label--'
|
||||
cls.push(pre + this.getValue('labelPosition'))
|
||||
console.log(this.getValue('requiredLogo'))
|
||||
if (!this.getValue('requiredLogo')) {
|
||||
return cls
|
||||
}
|
||||
if (this.required) {
|
||||
cls.push(pre + 'require')
|
||||
} else if (this.form && this.form.rules && this.prop) {
|
||||
@ -84,9 +105,6 @@ export default {
|
||||
}
|
||||
return cls
|
||||
},
|
||||
getPropValue (obj, keys) {
|
||||
return keys.reduce((res, n) => (res !== undefined && res[n] !== undefined ? res[n] : null), obj)
|
||||
},
|
||||
getRules () {
|
||||
let rules = []
|
||||
if (this.required) {
|
||||
@ -115,7 +133,7 @@ export default {
|
||||
let rules = this.getRules()
|
||||
// 针对多层对象的验证
|
||||
let prop = this.prop
|
||||
let value = this.getPropValue(this.form.model, this.prop.split('.'))
|
||||
let value = getObjValue(this.form.model, this.prop.split('.'))
|
||||
if (this.prop.indexOf('.') > -1) {
|
||||
prop = prop.slice(prop.lastIndexOf('.') + 1)
|
||||
}
|
||||
@ -132,7 +150,6 @@ export default {
|
||||
this.clearValidateClass()
|
||||
}
|
||||
cb(errors[0].message || false, fields)
|
||||
// 此处是否需要向外面发送
|
||||
})
|
||||
},
|
||||
clearValidateClass () {
|
||||
|
||||
@ -2,13 +2,15 @@
|
||||
<form
|
||||
class="n-form"
|
||||
:class="{
|
||||
'n-form--inline': inline,
|
||||
'n-form--inline': inline
|
||||
}"
|
||||
>
|
||||
<slot v-bind:form="this"></slot>
|
||||
</form>
|
||||
</template>
|
||||
<script>
|
||||
import { deepClone, getObjValue } from '../../../utils/index'
|
||||
|
||||
export default {
|
||||
name: 'NForm',
|
||||
provide () {
|
||||
@ -23,7 +25,7 @@ export default {
|
||||
},
|
||||
labelWidth: {
|
||||
type: Number,
|
||||
default: 200
|
||||
default: 80
|
||||
},
|
||||
labelPosition: {
|
||||
type: String,
|
||||
@ -31,13 +33,13 @@ export default {
|
||||
},
|
||||
model: {
|
||||
type: Object
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: null
|
||||
},
|
||||
rules: {
|
||||
type: Object
|
||||
},
|
||||
requiredLogo: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data () {
|
||||
@ -45,34 +47,10 @@ export default {
|
||||
initialValue: ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
disabled: {
|
||||
handler (n) {
|
||||
this.disabledToggle(n)
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.initialValue = JSON.parse(JSON.stringify(this.model || ''))
|
||||
},
|
||||
mounted () {
|
||||
this.disabledToggle(this.disabled)
|
||||
created () {
|
||||
this.initialValue = deepClone(this.model)
|
||||
},
|
||||
methods: {
|
||||
disabledToggle (flag) {
|
||||
this.$children.forEach(child => {
|
||||
console.log(child.$options.componentName)
|
||||
})
|
||||
let sel = ['input', 'select', 'textarea'].map(i => '.n-form-item ' + i).join(',')
|
||||
let el = this.$el.querySelectorAll(sel)
|
||||
el.forEach(i => {
|
||||
i.disabled = flag
|
||||
|
||||
if (flag) {
|
||||
i.classList.toggle('n-form--disable')
|
||||
}
|
||||
})
|
||||
},
|
||||
getLabelPosClass (labelPosition) {
|
||||
return 'n-form--lable-' + labelPosition
|
||||
},
|
||||
@ -113,11 +91,22 @@ export default {
|
||||
return promise
|
||||
}
|
||||
},
|
||||
/**
|
||||
* just can reset the value with prop in form-item
|
||||
*/
|
||||
resetForm () {
|
||||
this.$children.forEach(child => {
|
||||
if (child.prop) {
|
||||
// 这里需要考虑prop是复杂key的情况, 带.
|
||||
this.model[child.prop] = this.initialValue[child.prop]
|
||||
let keys = child.prop.split('.')
|
||||
let obj = this.model
|
||||
let j = 0
|
||||
keys.forEach((k, i) => {
|
||||
if (i !== keys.length - 1) {
|
||||
obj = obj[k]
|
||||
}
|
||||
j = i
|
||||
})
|
||||
obj[keys[j]] = getObjValue(this.initialValue, keys)
|
||||
if (child.validateFlag) {
|
||||
child.clearValidateClass()
|
||||
}
|
||||
|
||||
@ -1,4 +1,34 @@
|
||||
import getScrollParent from './getScrollParent'
|
||||
export {
|
||||
getScrollParent
|
||||
import getScrollParent from './dom/getScrollParent'
|
||||
|
||||
const isObject = (o) => {
|
||||
let type = Object.prototype.toString.call(o)
|
||||
return type === '[object Array]' || type === '[object Object]'
|
||||
}
|
||||
|
||||
const _isObject = (o) => {
|
||||
return (typeof o === 'object' || typeof o === 'function') && o !== null
|
||||
}
|
||||
|
||||
const deepClone = (obj) => {
|
||||
if (!isObject(obj)) {
|
||||
return obj
|
||||
}
|
||||
|
||||
let isArray = Array.isArray(obj)
|
||||
let cloneObj = isArray ? [] : {}
|
||||
for (let key in obj) {
|
||||
cloneObj[key] = _isObject(obj[key]) ? deepClone(obj[key]) : obj[key]
|
||||
}
|
||||
|
||||
return cloneObj
|
||||
}
|
||||
|
||||
const getObjValue = (obj, keys) => {
|
||||
return keys.reduce((res, n) => (res !== undefined && res[n] !== undefined ? res[n] : null), obj)
|
||||
}
|
||||
|
||||
export {
|
||||
getScrollParent,
|
||||
deepClone,
|
||||
getObjValue
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user