prevent dispatch form event
when component import an Input, prevent dispatch event from Input to Form
This commit is contained in:
parent
4a5d5cc9f2
commit
21dad188c1
8 changed files with 92 additions and 54 deletions
|
@ -1,35 +1,48 @@
|
||||||
<template>
|
<template>
|
||||||
<i-form ref="formInline" :model="formInline" :rules="ruleInline" inline>
|
<div>
|
||||||
<Form-item prop="user">
|
date: {{ formInline.date }}
|
||||||
<Input type="text" v-model="formInline.user" placeholder="Username">
|
<i-form ref="formInline" :model="formInline" :rules="ruleInline">
|
||||||
<Icon type="ios-person-outline" slot="prepend"></Icon>
|
<Form-item prop="date">
|
||||||
</Input>
|
<Date-picker type="date" placeholder="选择日期" v-model="formInline.date"></Date-picker>
|
||||||
</Form-item>
|
</Form-item>
|
||||||
<Form-item prop="password">
|
<Form-item prop="user">
|
||||||
<Input type="password" v-model="formInline.password" placeholder="Password">
|
<Input v-model="formInline.user">
|
||||||
<Icon type="ios-locked-outline" slot="prepend"></Icon>
|
</Form-item>
|
||||||
</Input>
|
<Form-item>
|
||||||
</Form-item>
|
<i-button type="primary" @click.native="handleSubmit('formInline')">登录</i-button>
|
||||||
<Form-item>
|
</Form-item>
|
||||||
<Button type="primary" @click.native="handleSubmit('formInline')">登录</Button>
|
</i-form>
|
||||||
</Form-item>
|
</div>
|
||||||
</i-form>
|
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
formInline: {
|
formInline: {
|
||||||
user: '',
|
date: new Date(),
|
||||||
password: ''
|
user: ''
|
||||||
},
|
},
|
||||||
ruleInline: {
|
ruleInline: {
|
||||||
user: [
|
date: [
|
||||||
{ required: true, message: '请填写用户名', trigger: 'blur' }
|
{
|
||||||
|
required: true,
|
||||||
|
type: 'date',
|
||||||
|
message: '请选择日期',
|
||||||
|
trigger: 'change'
|
||||||
|
}
|
||||||
],
|
],
|
||||||
password: [
|
user: [
|
||||||
{ required: true, message: '请填写密码', trigger: 'blur' },
|
{
|
||||||
{ type: 'string', min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
|
required: true,
|
||||||
|
message: '请输入',
|
||||||
|
trigger: 'change',
|
||||||
|
min: 10
|
||||||
|
},
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请输入2',
|
||||||
|
trigger: 'blur'
|
||||||
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -38,11 +51,14 @@
|
||||||
handleSubmit(name) {
|
handleSubmit(name) {
|
||||||
this.$refs[name].validate((valid) => {
|
this.$refs[name].validate((valid) => {
|
||||||
if (valid) {
|
if (valid) {
|
||||||
console.log('success');
|
this.$Message.success('提交成功!');
|
||||||
} else {
|
} else {
|
||||||
console.log('fail')
|
this.$Message.error('表单验证失败!');
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
},
|
||||||
|
handleInput (val) {
|
||||||
|
console.log(val)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,20 +1,22 @@
|
||||||
<template>
|
<template>
|
||||||
<i-button @click.native="time">显示一个10秒的提示</i-button>
|
<div>
|
||||||
|
<i-button @click.native="success">显示成功提示</i-button>
|
||||||
|
<i-button @click.native="warning">显示警告提示</i-button>
|
||||||
|
<i-button @click.native="error">显示错误提示</i-button>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
methods: {
|
methods: {
|
||||||
time () {
|
success () {
|
||||||
this.$Message.info('我将在10秒后消失', 3, () => {
|
this.$Message.success('这是一条成功的提示');
|
||||||
console.log(1111)
|
},
|
||||||
});
|
warning () {
|
||||||
|
this.$Message.warning('这是一条警告的提示');
|
||||||
|
},
|
||||||
|
error () {
|
||||||
|
this.$Message.error('对方不想说话,并且向你抛出了一个异常');
|
||||||
}
|
}
|
||||||
},
|
|
||||||
mounted () {
|
|
||||||
this.$Message.config({
|
|
||||||
top: 50,
|
|
||||||
duration: 3
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
<div :class="classes" :style="styles">
|
<div :class="classes" :style="styles">
|
||||||
<Notice
|
<Notice
|
||||||
v-for="notice in notices"
|
v-for="notice in notices"
|
||||||
:key="notice"
|
:key="notice.name"
|
||||||
:prefix-cls="prefixCls"
|
:prefix-cls="prefixCls"
|
||||||
:styles="notice.styles"
|
:styles="notice.styles"
|
||||||
:content="notice.content"
|
:content="notice.content"
|
||||||
|
@ -15,7 +15,6 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
// todo :key="notice"
|
|
||||||
import Notice from './notice.vue';
|
import Notice from './notice.vue';
|
||||||
|
|
||||||
const prefixCls = 'ivu-notification';
|
const prefixCls = 'ivu-notification';
|
||||||
|
|
|
@ -57,6 +57,7 @@
|
||||||
const timePrefixCls = 'ivu-time-picker';
|
const timePrefixCls = 'ivu-time-picker';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
name: 'TimePicker',
|
||||||
mixins: [ Mixin, Locale ],
|
mixins: [ Mixin, Locale ],
|
||||||
components: { TimeSpinner, Confirm },
|
components: { TimeSpinner, Confirm },
|
||||||
data () {
|
data () {
|
||||||
|
|
|
@ -36,6 +36,7 @@
|
||||||
const timePrefixCls = 'ivu-time-picker';
|
const timePrefixCls = 'ivu-time-picker';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
name: 'TimePicker',
|
||||||
mixins: [ Mixin, Locale ],
|
mixins: [ Mixin, Locale ],
|
||||||
components: { TimeSpinner, Confirm },
|
components: { TimeSpinner, Confirm },
|
||||||
data () {
|
data () {
|
||||||
|
|
|
@ -139,6 +139,7 @@
|
||||||
};
|
};
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
name: 'CalendarPicker',
|
||||||
mixins: [ Emitter ],
|
mixins: [ Emitter ],
|
||||||
components: { iInput, Drop },
|
components: { iInput, Drop },
|
||||||
directives: { clickoutside },
|
directives: { clickoutside },
|
||||||
|
@ -344,6 +345,7 @@
|
||||||
this.visualValue = correctValue;
|
this.visualValue = correctValue;
|
||||||
event.target.value = correctValue;
|
event.target.value = correctValue;
|
||||||
this.internalValue = correctDate;
|
this.internalValue = correctDate;
|
||||||
|
this.currentValue = correctDate;
|
||||||
|
|
||||||
if (correctValue !== oldValue) this.emitChange(correctDate);
|
if (correctValue !== oldValue) this.emitChange(correctDate);
|
||||||
},
|
},
|
||||||
|
@ -418,6 +420,12 @@
|
||||||
this.picker.resetView && this.picker.resetView();
|
this.picker.resetView && this.picker.resetView();
|
||||||
},
|
},
|
||||||
emitChange (date) {
|
emitChange (date) {
|
||||||
|
const newDate = this.formattingDate(date);
|
||||||
|
|
||||||
|
this.$emit('on-change', newDate);
|
||||||
|
this.dispatch('FormItem', 'on-form-change', newDate);
|
||||||
|
},
|
||||||
|
formattingDate (date) {
|
||||||
const type = this.type;
|
const type = this.type;
|
||||||
const format = this.format || DEFAULT_FORMATS[type];
|
const format = this.format || DEFAULT_FORMATS[type];
|
||||||
const formatter = (
|
const formatter = (
|
||||||
|
@ -429,9 +437,7 @@
|
||||||
if (type === 'daterange' || type === 'timerange') {
|
if (type === 'daterange' || type === 'timerange') {
|
||||||
newDate = [newDate.split(RANGE_SEPARATOR)[0], newDate.split(RANGE_SEPARATOR)[1]];
|
newDate = [newDate.split(RANGE_SEPARATOR)[0], newDate.split(RANGE_SEPARATOR)[1]];
|
||||||
}
|
}
|
||||||
|
return newDate;
|
||||||
this.$emit('on-change', newDate);
|
|
||||||
this.dispatch('FormItem', 'on-form-change', newDate);
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
|
@ -450,7 +456,7 @@
|
||||||
if (!val && this.picker && typeof this.picker.handleClear === 'function') {
|
if (!val && this.picker && typeof this.picker.handleClear === 'function') {
|
||||||
this.picker.handleClear();
|
this.picker.handleClear();
|
||||||
}
|
}
|
||||||
this.$emit('input', val);
|
// this.$emit('input', val);
|
||||||
},
|
},
|
||||||
value (val) {
|
value (val) {
|
||||||
this.currentValue = val;
|
this.currentValue = val;
|
||||||
|
@ -492,14 +498,5 @@
|
||||||
mounted () {
|
mounted () {
|
||||||
if (this.open !== null) this.visible = this.open;
|
if (this.open !== null) this.visible = this.open;
|
||||||
}
|
}
|
||||||
// todo 事件
|
|
||||||
// events: {
|
|
||||||
// 'on-form-blur' () {
|
|
||||||
// return false;
|
|
||||||
// },
|
|
||||||
// 'on-form-change' () {
|
|
||||||
// return false;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -43,7 +43,7 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import { oneOf } from '../../utils/assist';
|
import { oneOf, findComponentUpward } from '../../utils/assist';
|
||||||
import calcTextareaHeight from '../../utils/calcTextareaHeight';
|
import calcTextareaHeight from '../../utils/calcTextareaHeight';
|
||||||
import Emitter from '../../mixins/emitter';
|
import Emitter from '../../mixins/emitter';
|
||||||
|
|
||||||
|
@ -152,7 +152,9 @@
|
||||||
},
|
},
|
||||||
handleBlur () {
|
handleBlur () {
|
||||||
this.$emit('on-blur');
|
this.$emit('on-blur');
|
||||||
this.dispatch('FormItem', 'on-form-blur', this.currentValue);
|
if (!findComponentUpward(this, ['DatePicker', 'TimePicker'])) {
|
||||||
|
this.dispatch('FormItem', 'on-form-blur', this.currentValue);
|
||||||
|
}
|
||||||
},
|
},
|
||||||
handleInput (event) {
|
handleInput (event) {
|
||||||
const value = event.target.value;
|
const value = event.target.value;
|
||||||
|
@ -169,7 +171,9 @@
|
||||||
this.resizeTextarea();
|
this.resizeTextarea();
|
||||||
});
|
});
|
||||||
this.currentValue = value;
|
this.currentValue = value;
|
||||||
this.dispatch('FormItem', 'on-form-change', value);
|
if (!findComponentUpward(this, ['DatePicker', 'TimePicker'])) {
|
||||||
|
this.dispatch('FormItem', 'on-form-change', value);
|
||||||
|
}
|
||||||
},
|
},
|
||||||
resizeTextarea () {
|
resizeTextarea () {
|
||||||
const autosize = this.autosize;
|
const autosize = this.autosize;
|
||||||
|
|
|
@ -165,4 +165,22 @@ export function scrollTop(el, from = 0, to, duration = 500) {
|
||||||
window.requestAnimationFrame(() => scroll(d, end, step));
|
window.requestAnimationFrame(() => scroll(d, end, step));
|
||||||
}
|
}
|
||||||
scroll(from, to, step);
|
scroll(from, to, step);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Find components upward
|
||||||
|
function findComponentUpward (content, componentName, componentNames) {
|
||||||
|
if (typeof componentName === 'string') {
|
||||||
|
componentNames = [componentName];
|
||||||
|
} else {
|
||||||
|
componentNames = componentName;
|
||||||
|
}
|
||||||
|
|
||||||
|
let parent = content.$parent;
|
||||||
|
let name = parent.$options.name;
|
||||||
|
while (parent && (!name || componentNames.indexOf(name) < 0)) {
|
||||||
|
parent = parent.$parent;
|
||||||
|
if (parent) name = parent.$options.name;
|
||||||
|
}
|
||||||
|
return parent;
|
||||||
|
}
|
||||||
|
export {findComponentUpward};
|
Loading…
Add table
Reference in a new issue