文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-04-02 19:55

关注

本文实例为大家分享了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,添加以下代码

<template>
    <svg class="svg-icon" aria-hidden="true" v-on="$listeners">
        <use :xlink:href="iconName" />
    </svg>
</template>

<script>
    export default {
        name: "icon-svg",
        props: {
            iconClass: {
                type: String,
                required: true
            },
            className: {
                type: String,
                default: ""
            }
        },
        computed: {
            iconName() {
                return `#icon-${this.iconClass}`;
            },
            svgClass() {
                if (this.className) {
                    return "svg-icon " + this.className;
                } else {
                    return "svg-icon";
                }
            }
        }
    };
</script>

<style>
    .svg-icon {
        width: 30px;
        height: 30px;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
    }
</style>

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

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

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

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

message.vue下添加以下代码

<template>
    <transition name="fade">
        <div class="message_wrap" :class="type === 'success' ? 'wrap_success' : 'wrap_fail'" v-if="isShow">
            <!-- **这里引入前面创建的svg** -->
            <svg-icon :icon-class="type === 'success' ? 'success' : 'fail'" style="margin-left: 40px;"></svg-icon>
            <div class="message" :class="type === 'success' ? 'message_success' : 'message_fail'">{{text}}</div>
        </div>
    </transition>
</template>

<script>
    export default {
        name: 'message',
        props: {
            type: {
                type: String,
                default: 'success',
            },
            text: {
                type: String,
                default: '',
            },
            isShow: {
                type: Boolean,
                default: true,
            },
        },
    };
</script>

<style scoped lang="scss">
    .message_wrap {
        position: fixed;
        min-width: 400px;
        height: 64px;
        top: 6%;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .message {
            font-size: 18px;
            line-height: 64px;
            text-align: center;
            margin-left: 16px;
        }
        .message_success {
            color: #4caf50;
        }
        .message_fail {
            color: #ff5252;
        }
    }
    .wrap_success {
        background: rgba(234,246,234, .5);
    }
    .wrap_fail {
        background: rgba(255,235,235, .5);
    }

    .fade-enter-active, .fade-leave-active {
        transition: opacity .5s
    }
    .fade-enter, .fade-leave-active {
        opacity: 0
    }
</style>

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中引入

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯