Tag 標簽組件 html export default { name: 'ElTag', props: { text: String, closable: Boolean, //是否可關閉 type: String, //主題 hit: Boolean, //是否有邊框描邊 disableTran ...
Tag 標簽組件
<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>Dialog 對話框組件
<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>
