vue中使用svg封装全局消息提示组件

本文实例为大家分享了vue中使用svg封装全局消息提示组件的具体代码，供大家参考，具体内容如下

先看效果图

一、首先安装下载需要用到的svg相关依赖

npm install svg-sprite-loader --save-dev

二、针对没有vue.config.js文件的vue项目，直接在webpack.base.conf.js中进行如下两个配置

1.找到图片相关配置位置，添加款选出的代码

2.在图片配置后添加如下代码

三、根据添加的代码我们去src下创建一个icons文件夹，icons下面创建一个svg文件夹，用于存放svg结尾的图片

index.js文件夹中添加代码

import Vue from 'vue'
import SvgIcon from '../components/SvgIcon/SvgIcon'

Vue.component('svg-icon', SvgIcon)

const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

四、在components中添加SvgIcon文件夹，并创建组件svgIcon.vue，添加以下代码

五、在main.js中引入，src下创建的icons文件夹

六、至此vue中使用svg就完成，接着直接在项目中使用即可

完成了svg的配置 接下来试下全局消息提示

一、在components下创建Message文件夹，文件夹下创建两个文件，一个message.vue，一个index.js

message.vue下添加以下代码

index.js中添加以下代码

import vue from 'vue'
import Message from './message'
const messageConstructor = vue.extend(Message)

const MsgMain = {
    show(text, type, duration) {
        const instance = new messageConstructor()  // 创建实例
        instance.$mount(document.createElement('div')) // 创建dom元素
        document.body.appendChild(instance.$el) // 将dom元素添加到body中

        instance.type = type  // 写入属性
        instance.text = text  // 写入属性
        instance.isShow = true // 写入属性

        setTimeout(() => {
            instance.isShow = false  // 一段时候后关闭提示
        }, duration)
    },
    success(text, duration = 2000) {
        this.show(text, 'success', duration)  // 成功时调用
    },
    error(text, duration = 2000) {
        this.show(text, 'error', duration) // 失败时调用
    },
};
// 全局注册
function Msg() {
    vue.prototype.$message = MsgMain
}

export default Msg

二、在main.js中引入

三、使用：最后在需要用到的地方调用即可

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。