我要评论<script>
export default {
name: 'eltag',
props: {
text: string,
closable: boolean, //是否可关闭
type: string, //主题
hit: boolean, //是否有边框描边
disabletransitions: boolean, //是否禁用渐变动画
color: string, //背景色
size: string //尺寸
},
methods: {
handleclose(event) {
event.stoppropagation();
this.$emit('close', event);
}
},
computed: {
tagsize() {
return this.size || (this.$element || {}).size;
}
},
render(h) {
const classes = [ 'el-tag', this.type ? `el-tag--${this.type}` : '',
this.tagsize ? `el-tag--${this.tagsize}` : '',
{'is-hit': this.hit}
];
//最外层包裹的span
const tagel = (<span class={classes} style={{backgroundcolor: this.color}}>
{ this.$slots.default }
{
// closable存在时，返回关闭图标
this.closable && <i class="el-tag__close el-icon-close" on-click={this.handleclose}></i>
}
</span>);
// disabletransitions存在的话，用transition标签包裹，产生渐变动画
return this.disabletransitions ? tagel : <transition name="el-zoom-in-center">{ tagel }</transition>;
}
};
</script>
<template>
<!--transition组件可以给任何元素和组件添加进入/离开过渡-->
<transition
name="dialog-fade"
@after-enter="afterenter"
@after-leave="afterleave">
<!--包裹dialog的div-->
<div class="el-dialog__wrapper" v-show="visible" @click.self="handlewrapperclick">
<div
role="dialog"
aria-modal="true"
:aria-label="title || 'dialog'"
class="el-dialog"
:class="[{ 'is-fullscreen': fullscreen, 'el-dialog--center': center }, customclass]"
ref="dialog"
:style="style">
<!--dialog_header包含：标题、关闭按钮-->
<div class="el-dialog__header">
<!--标题-->
<slot name="title">
<span class="el-dialog__title">{{ title }}</span>
</slot>
<!--关闭按钮-->
<button
type="button"
class="el-dialog__headerbtn"
aria-label="close"
v-if="showclose"
@click="handleclose">
<i class="el-dialog__close el-icon el-icon-close"></i>
</button>
</div>
<!--中间的内容-->
<div class="el-dialog__body" v-if="rendered"><slot></slot></div>
<!--底部内容-->
<div class="el-dialog__footer" v-if="$slots.footer">
<slot name="footer"></slot>
</div>
</div>
</div>
</transition>
</template>
<script>
import popup from 'element-ui/src/utils/popup';
//在控制台输出一些已经移除的属性
import migrating from 'element-ui/src/mixins/migrating';
//触发子组件或者父组件的事件
import emitter from 'element-ui/src/mixins/emitter';
export default {
name: 'eldialog',
mixins: [popup, emitter, migrating],
props: {
title: { //dialog 的标题，也可通过具名 slot(title\footer)传入
type: string,
default: ''
},
modal: { //是否需要遮罩层
type: boolean,
default: true
},
modalappendtobody: { //遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 dialog 的父元素上
type: boolean,
default: true
},
appendtobody: { //dialog 自身是否插入至 body 元素上。嵌套的 dialog 必须指定该属性并赋值为 true
type: boolean,
default: false
},
lockscroll: { //是否在 dialog 出现时将 body 滚动锁定
type: boolean,
default: true
},
closeonclickmodal: { //是否可以通过点击 modal 关闭 dialog
type: boolean,
default: true
},
closeonpressescape: { //是否可以通过按下 esc 关闭 dialog
type: boolean,
default: true
},
showclose: { //是否显示关闭按钮
type: boolean,
default: true
},
width: string, //dialog 的宽度
fullscreen: boolean, //是否为全屏 dialog
customclass: { //dialog 的自定义类名
type: string,
default: ''
},
top: { //dialog css 中的 margin-top 值
type: string,
default: '15vh'
},
beforeclose: function, //关闭前的回调，会暂停 dialog 的关闭
center: { //是否对头部和底部采用居中布局
type: boolean,
default: false
}
},
data() {
return {
closed: false
};
},
watch: {
visible(val) {
if (val) {
this.closed = false;
// dialog 打开的回调
this.$emit('open');
//滚动时，更新弹出框的位置
this.$el.addeventlistener('scroll', this.updatepopper);
this.$nexttick(() => {
// 元素的滚动条的垂直位置为0
this.$refs.dialog.scrolltop = 0;
});
//appendtobody为true时，将dialog插入到body元素上
if (this.appendtobody) {
document.body.appendchild(this.$el);
}
} else {
this.$el.removeeventlistener('scroll', this.updatepopper);
if (!this.closed) this.$emit('close');
}
}
},
computed: {
style() {
let style = {};
//如果不是全屏显示dialog，dialog的margin-top等于用户设置的top
if (!this.fullscreen) {
style.margintop = this.top;
if (this.width) {
style.width = this.width;
}
}
return style;
}
},
methods: {
getmigratingconfig() {
return {
props: {
'size': 'size is removed.'
}
};
},
handlewrapperclick() {
//closeonclickmodal为false，则不能通过点击 modal 关闭 dialog，直接返回
if (!this.closeonclickmodal) return;
this.handleclose();
},
handleclose() {
// 关闭前的回调，会暂停 dialog 的关闭
if (typeof this.beforeclose === 'function') {
this.beforeclose(this.hide);
} else {
this.hide();
}
},
hide(cancel) {
if (cancel !== false) {
this.$emit('update:visible', false);
this.$emit('close');
this.closed = true;
}
},
// 这里不知道为什么这么写，没太搞懂
updatepopper() {
this.broadcast('elselectdropdown', 'updatepopper');
this.broadcast('eldropdownmenu', 'updatepopper');
},
// dialog 打开动画结束时的回调
afterenter() {
this.$emit('opened');
},
// dialog 关闭动画结束时的回调
afterleave() {
this.$emit('closed');
}
},
mounted() {
if (this.visible) {
// rendered这里不是太懂，估计是处理弹出框位置相关的，等后面弄懂后再补充
this.rendered = true;
this.open();
if (this.appendtobody) {
document.body.appendchild(this.$el);
}
}
},
destroyed() {
// if appendtobody is true, remove dom node after destroy
if (this.appendtobody && this.$el && this.$el.parentnode) {
this.$el.parentnode.removechild(this.$el);
}
}
};
</script>
如对本文有疑问， 点击进行留言回复！！
同事牛逼啊，写了个隐藏 bug，我排查了 3 天才解决问题！
【JavaScript笔记（一）】万丈高楼平地起 - 基本概念篇
轻松解决 org.apache.taglibs.standard.tlv.JstlCoreTLV 困惑
网友评论