elementUI message源码里为什么 watch closed 去控制 visible,而不是直接改变visible

elementUI  message源码里为什么 watch closed 去控制 visible,而不是直接改变visible

<template>

<transition name="el-message-fade" @after-leave="handleAfterLeave">

<div

:class="[

'el-message',

type && !iconClass ? `el-message--${ type }` : '',

center ? 'is-center' : '',

showClose ? 'is-closable' : '',

customClass

]"

:style="positionStyle"

v-show="visible"

@mouseenter="clearTimer"

@mouseleave="startTimer"

role="alert">

<i :class="iconClass" v-if="iconClass"></i>

<i :class="typeClass" v-else></i>

<slot>

<p v-if="!dangerouslyUseHTMLString" class="el-message__content">{{ message }}</p>

<p v-else v-html="message" class="el-message__content"></p>

</slot>

<i v-if="showClose" class="el-message__closeBtn el-icon-close" @click="close"></i>

</div>

</transition>

</template>

<script type="text/babel">

const typeMap = {

success: 'success',

info: 'info',

warning: 'warning',

error: 'error'

};

export default {

data() {

return {

visible: false,

message: '',

duration: 3000,

type: 'info',

iconClass: '',

customClass: '',

onClose: null,

showClose: false,

closed: false,

verticalOffset: 20,

timer: null,

dangerouslyUseHTMLString: false,

center: false

};

},

computed: {

typeClass() {

return this.type && !this.iconClass

? `el-message__icon el-icon-${ typeMap[this.type] }`

: '';

},

positionStyle() {

return {

'top': `${ this.verticalOffset }px`

};

}

},

watch: {

closed(newVal) {

if (newVal) {

this.visible = false;

}

}

},

methods: {

handleAfterLeave() {

this.$destroy(true);

this.$el.parentNode.removeChild(this.$el);

},

close() {

this.closed = true;

if (typeof this.onClose === 'function') {

this.onClose(this);

}

},

clearTimer() {

clearTimeout(this.timer);

},

startTimer() {

if (this.duration > 0) {

this.timer = setTimeout(() => {

if (!this.closed) {

this.close();

}

}, this.duration);

}

},

keydown(e) {

if (e.keyCode === 27) { // esc关闭消息

if (!this.closed) {

this.close();

}

}

}

},

mounted() {

this.startTimer();

document.addEventListener('keydown', this.keydown);

},

beforeDestroy() {

document.removeEventListener('keydown', this.keydown);

}

};

</script>


回答:

当然可以啊……只是人家开发者的个人选择而已,又不是啥范式。

实际上 this.closed = true 后面紧跟一句 this.visible = false 也不是不行。

除非说 this.closed = true 有很多处,为了避免重复代码、或者遗漏某些没写,可以提取到 Watch 里;但现在看起来只有一处,提不提取吧都行,爱咋写咋写。

P.S. Element-UI 的代码质量其实并不高,没必要学它的写法……

以上是 elementUI message源码里为什么 watch closed 去控制 visible,而不是直接改变visible 的全部内容, 来源链接: utcz.com/p/936067.html

回到顶部