element全局消息提示元件自定義

有次開發想用element消息提示元件，但用不上其他元件就不想引入element，于是就自己寫了。

官網有開發插件的方法：https://cn.vuejs.org/v2/guide/plugins.html

1、檔案目錄

2、message.vue

<template>
  <transition name="fade">
    <div class="message" :class="type" v-if="visible">
      <img src="../../assets/message-error.png" v-if="type=='error'" class="icon-type iconfont" :class="'icon-'+type">
      <img src="../../assets/message-success.png" v-if="type=='success'" class="icon-type iconfont" :class="'icon-'+type">
      <img src="../../assets/message-warning.png" v-if="type=='warning'" class="icon-type iconfont" :class="'icon-'+type">
      <img src="../../assets/message-info.png" v-if="type=='info'" class="icon-type iconfont" :class="'icon-'+type">
      <p class="content">{{content}}</p>
      <img src="../../assets/common-delete.png" v-if="hasClose" class="btn-close icon-close" @click="visible=false">
    </div>
  </transition>
</template>

<script>
    export default {
        name: "message",
        data() {
          return {
            content: '',
            time: 3000,
            visible: false,
            type:'',//'success','warning','error','info'
            hasClose:false,
          }
        },
        mounted() {
          this.close()
        },
        methods: {
          close() {
            window.setTimeout(() =>{
              this.visible = false
            }, this.time);
          }
        }
    }
</script>

<style scoped>
.message {
  min-width: 350px;
  box-sizing: border-box;
  border: 1px solid #EBEEF5;
  position: fixed;
  left: 188px;
  top: 20px;
  transform: translateX(-50%);
  background-color: #edf2fc;
  transition: opacity .3s,transform .4s,top .4s;
  padding: 15px 15px 15px 20px;
  display: flex;
  align-items: center;
  border-radius: 4px;
  overflow: hidden;
}
.error {
  background-color: #fef0f0;
  border-color: #fde2e2;
}
.iconfont{
  margin-right: 10px;
}
.message p {
  margin: 0;
}
.content {
  padding: 0;
  font-size: 14px;
  line-height: 1;
}
.error  {
  color: #F56C6C;
  background-color: #fef0f0;
  border-color: #fde2e2;
}
.warning {
  background-color: #fdf6ec;
  border-color: #faecd8;
  color: #E6A23C;
}
.success {
  color: #67C23A;
  background-color: #f0f9eb;
  border-color: #e1f3d8;
}
.info {
  color: #909399;
}
.btn-close {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  cursor: pointer;
  color: #C0C4CC;
  font-size: 16px;
}

[class*=" icon-"], [class^=icon-] {
  width: 16px;
}
.el-message.is-closable .el-message__content {
  padding-right: 16px;
}
</style>
           

3、index.js

判斷參數，使用$ mount()給元件手動挂載參數，然後将元件插入頁面中

import Vue from 'vue'
import Message from './Message.vue'

const messageBox = Vue.extend(Message)

Message.install = function (options, type) {
  if (options === undefined || options === null) {
    options = {
      content: ''
    }
  } else if (typeof options === 'string' || typeof options === 'number') {
    options = {
      content: options
    }
    if (type != undefined && options != null) {
      options.type = type;
    }
  }

  let instance = new messageBox({
    data: options
  }).$mount()

  document.body.appendChild(instance.$el)

  Vue.nextTick(() => {
    instance.visible = true
  })
}

// 導出元件
export default Message
           

4、在main.js裡全局引入

給Vue添加$ my_message方法

import Message from '@/components/message'

Vue.prototype.$my_message = Message.install;
           

5、在頁面中調用

this.$my_message({
              content:'請選擇地點',
              time:3000,
              type:'error',
              hasClose:false
            });
           

6、參數

content: 提示内容

time: 顯示時間，機關毫秒

type:消息類型，‘success’,‘warning’,‘error’,‘info’

hasClose:是否顯示關閉按鈕