跟随Element学习Vue小技巧(34)——Message

七秒记忆的鱼
1,263 阅读3分钟
❝

你的包里装的是什么？

是梦想和希望！

❞

前言

嘟——
嘟——
嘟——
嘟——
...

  • 最近有谣言说我喜欢你，我特意过来澄清一下,那不是谣言，那是真的
  • 为什么朋友圈里都不发我的照片？
  • 你也不会拿镜子照照，就你那样的，每次出去逛街都有一大堆帅哥看你，我敢把你照片发朋友圈吗？再说了，即使发朋友圈，别人也会认为是P过的，我告诉别人那是原图，别人能信吗？
  • 好嘛，好嘛 谣言未必都是不好的，如果你下次收到了消息，不妨也好好澄清一下

1 Message

纵使你风情万种, 我唯对她情有独钟
所以，不要搞那么多花样，我是不会回你消息的

配置项message

<template>
  <el-button :plain="true" @click="open">打开消息提示</el-button>
  <el-button :plain="true" @click="openVn">VNode</el-button>
  <el-button :plain="true" @click="openHTML">使用 HTML 片段</el-button>
</template>

<script>
  export default {
    methods: {
      open() {
        this.$message('这是一条消息提示');
      },
      openVn() {
        const h = this.$createElement;
        this.$message({
          message: h('p', null, [
            h('span', null, '内容可以是 '),
            h('i', { style: 'color: teal' }, 'VNode')
          ])
        });
      },
      openHTML() {
        this.$message({
          dangerouslyUseHTMLString: true,
          message: '<strong>这是 <i>HTML</i> 片段</strong>'
        });
      }
    }
  }
</script>

<template>
  <transition name="el-message-fade" @after-leave="handleAfterLeave">
    ...
    <slot>
      <!-- 1.如果是String，使用插值 -->
      <p v-if="!dangerouslyUseHTMLString" class="el-message__content">{{ message }}</p>
      <!-- 2.如果是DOM，使用v-html -->
      <p v-else v-html="message" class="el-message__content"></p>
    </slot>
    ...
  </transition>
</template>

// 3.如果是vNode，当做默认插槽
if (isVNode(instance.message)) {
  instance.$slots.default = [instance.message];
  instance.message = null;
}

技巧解析

❝

一会儿发几个字符串
一会儿发一个vNode
一会儿有发一段HTML
您瞧瞧，是不是花样百出！！

字符串：slot默认内容，模板插值
vNode：默认插槽，替代默认内容
HTML：slot默认内容，v-html指令

vue模板语法 传送门

❞

关闭close

  • 芝麻开门，门开了
  • 芝麻关门，门关了

黄豆能不能关门？
西瓜能不能关门？
想什么呢？关灯，关灯，嘻嘻嘻

代码片段

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();
    }
  }
}

技巧解析

❝

三种关闭方式：手动+自动+ESC
手动：点击关闭按钮
自动：mouseenter，清除定时器；mouseleave，添加定时器
ESC：按下ESC键即keyCode为27

❞

销毁destroy

爱上一个人，只是在人群中多看了你一眼
忘记一个人，却要用尽我的一生

  • 有没有更好的方法呢？
  • 喏，给你
  • 什么？
  • 忘情水
  • 有效吗？
  • 试试看
  • 你刚才说什么来呢？
  • 我刚才，刚才...
  • 走，酒吧嗨起来
  • No Problem!
handleAfterLeave() {
  this.$destroy(true);
  this.$el.parentNode.removeChild(this.$el);
}

技巧解析

❝

this.$destroy，销毁，完全忘掉一个人
vm.$forceUpdate，刷新，重新开始，岂不是更好，O(∩_∩)O哈哈~
vm.$nextTick,下一轮，下辈子不要让我遇见你，不然我见你一次，喜欢你一次，嘤嘤嘤

vue实例方法 传送门

❞



「可是喜欢就是喜欢」 「那也没有办法啊!」

参考链接

往期回顾

avatar
文章
阅读
粉丝