Vue 封装 message 插件_vue2 message插件-CSDN博客

本文链接：https://blog.csdn.net/qq_43262022/article/details/111086435

属性名	类型	属性值	描述	默认值
message	String		消息提示文本	“This is a message”
type	String	“info”\|“success”\|“warn”\|“error”	消息类型	“info”
iconClass	String		自定义提示文本前面的 icon 类	“”
center	Boolean	true \| false	文本是否居中	false
showClose	Boolean	true \| false	是否显示关闭按钮	false
dangerouslyUseHTMLString	Boolean	true \| false	message 属性是否支持 HTML 文本	false

事件名	描述	返回值
close	message 插件关闭后触发事件	message DOM元素（this.$el)

代码如下：

vp-message.vue

<template>
  <div :class="['vp-message', `vp-message-${type}`, isCenter]">
    <span :class="['iconfont', `icon-${iconClass ? iconClass : type}`]"></span
    ><span v-if="!dangerouslyUseHTMLString">{{ message }}</span>
    <span v-if="dangerouslyUseHTMLString" v-html="message"></span>
    <span v-if="showClose" class="vp-message-close iconfont icon-clear_circle_outlined"
      @click="closeMsgHandle"></span>
  </div>
</template>

<script>
export default {
  name: "VpMessage",
  props: {
    message: {
      type: String,
      default: "",
    },
    type: {
      type: String, // "info"|"success"|"warn"|"error"
      default: "",
    },
    iconClass: {
      type: String,
    },
    center: {
      type: Boolean,
      default: false
    },
    showClose: {
      type: Boolean,
      default: false
    },
    dangerouslyUseHTMLString: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      timer: null,
    };
  },
  computed: {
    isCenter() {
      return this.center ? 'vp-message-center' : '';
    }
  },
  created() {},
  mounted() {
    this.timer = window.setTimeout(() => {
      this.$el.remove();
    }, 3000);
  },
  methods: {
    // 点击关闭 message
    closeMsgHandle() {
      this.$el.remove();
      this.$emit("close", this.$el);
    }
  },
  destroyed() {
    clearTimeout(timer);
    this.$emit("close", this.$el);
  },
};
</script>
<style scoped>
.vp-message {
  padding: 1rem 2rem;
  width: 250px;
  border-radius: 5px;
  transition: all 1s;
  position: fixed;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  animation: animat 1s;
}
@keyframes animat {
  0% {
    top: -60px;
  }
  100% {
    top: 30px;
  }
}
.vp-message-info {
  background-color: #edf2fc;
  color: #909399;
}
.vp-message-success {
  background-color: #f0f9eb;
  color: #67c23a;
}
.vp-message-warn {
  background-color: #fdf6ec;
  color: #e6a23c;
}
.vp-message-error {
  background-color: #fef0f0;
  color: #f56c6c;
}
.iconfont {
  margin-right: 5px;
}
.vp-message-center {
  text-align: center;
}
.vp-message-close {
  cursor: pointer;
  position: absolute;
  left: 280px;
  top: 20px;
}
</style>

message.js 文件

import VpMessage from "./vp-message.vue";

const vpMessage = {};
vpMessage.install = Vue => {
  Vue.prototype.$message = function(option = {}) {
    let options = {
      message: (option && option.message) || "This is a message", // message 显示文本
      type: (option && option.type) || "info", // message 类型
      center: (option && option.center) || false, // 文本是否居中
      dangerouslyUseHTMLString:
        (option && option.dangerouslyUseHTMLString) || false, // 是否使用 HTML 文本
      showClose: (option && option.showClose) || false, // 是否显示关闭按钮
      iconClass: (option && option.iconClass) || "" // icon 类
    };

    let vpMessageInstance = Vue.extend(VpMessage);
    let messageEle = document.createElement("div");
    let vpmsg;
    Vue.nextTick(() => {
      vpmsg = new vpMessageInstance({
        propsData: {
          message: options.message,
          type: options.type,
          center: options.center,
          dangerouslyUseHTMLString: options.dangerouslyUseHTMLString,
          showClose: options.showClose,
          iconClass: options.iconClass
        }
      });
      vpmsg.$mount(messageEle);
      let el = vpmsg.$el;
      document.body.appendChild(el);
    });
  };
};

export default vpMessage;

main.js

import VpMessage from './components/message/message';
Vue.use(VpMessage);

如需要其他更多组件，请移步到本人开发的 Vue 组件库文档：Vpro_UI
如果觉得好的话，请在 Github 上点个 star ，非常感谢！