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