vue中使用svg封裝全局消息提示組件
更新時(shí)間：2022年04月18日 11:19:36 作者：zxo_apple
這篇文章主要為大家詳細(xì)介紹了vue中使用svg封裝全局消息提示組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了vue中使用svg封裝全局消息提示組件的具體代碼，供大家參考，具體內(nèi)容如下
先看效果圖
一、首先安裝下載需要用到的svg相關(guān)依賴
npm install svg-sprite-loader --save-dev
二、針對(duì)沒有vue.config.js文件的vue項(xiàng)目，直接在webpack.base.conf.js中進(jìn)行如下兩個(gè)配置
1.找到圖片相關(guān)配置位置，添加款選出的代碼
2.在圖片配置后添加如下代碼
三、根據(jù)添加的代碼我們?nèi)rc下創(chuàng)建一個(gè)icons文件夾，icons下面創(chuàng)建一個(gè)svg文件夾，用于存放svg結(jié)尾的圖片
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文件夾，并創(chuàng)建組件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下創(chuàng)建的icons文件夾
六、至此vue中使用svg就完成，接著直接在項(xiàng)目中使用即可
完成了svg的配置 接下來試下全局消息提示
一、在components下創(chuàng)建Message文件夾，文件夾下創(chuàng)建兩個(gè)文件，一個(gè)message.vue，一個(gè)index.js
message.vue下添加以下代碼
<template>
?? ?<transition name="fade">
?? ??? ?<div class="message_wrap" :class="type === 'success' ? 'wrap_success' : 'wrap_fail'" v-if="isShow">
?? ??? ??? ?<!-- **這里引入前面創(chuàng)建的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() ?// 創(chuàng)建實(shí)例
?? ??? ?instance.$mount(document.createElement('div')) // 創(chuàng)建dom元素
?? ??? ?document.body.appendChild(instance.$el) // 將dom元素添加到body中
?? ??? ?instance.type = type ?// 寫入屬性
?? ??? ?instance.text = text ?// 寫入屬性
?? ??? ?instance.isShow = true // 寫入屬性
?? ??? ?setTimeout(() => {
?? ??? ??? ?instance.isShow = false ?// 一段時(shí)候后關(guān)閉提示
?? ??? ?}, duration)
?? ?},
?? ?success(text, duration = 2000) {
?? ??? ?this.show(text, 'success', duration) ?// 成功時(shí)調(diào)用
?? ?},
?? ?error(text, duration = 2000) {
?? ??? ?this.show(text, 'error', duration) // 失敗時(shí)調(diào)用
?? ?},
};
// 全局注冊
function Msg() {
?? ?vue.prototype.$message = MsgMain
}
export default Msg二、在main.js中引入
三、使用：最后在需要用到的地方調(diào)用即可
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript的MVVM庫Vue.js入門學(xué)習(xí)筆記
這篇文章主要介紹了JavaScript的MVVM庫Vue.js入門學(xué)習(xí)筆記,Vue.js是一個(gè)新興的js庫,主要用于實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件,需要的朋友可以參考下2016-05-05
這篇文章主要為大家詳細(xì)介紹了vue遞歸實(shí)現(xiàn)三級(jí)菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05
這篇文章主要介紹了淺談Vue 自動(dòng)化部署打包上線，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
VUEJS實(shí)戰(zhàn)之構(gòu)建基礎(chǔ)并渲染出列表（1）
這篇文章主要為大家詳細(xì)介紹了VUEJS實(shí)戰(zhàn)之構(gòu)建基礎(chǔ)并渲染出列表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-06-06
Vue中代碼編輯器與實(shí)時(shí)預(yù)覽功能
CodeMirror提供了強(qiáng)大的代碼編輯功能,而Vue.js使得組件的創(chuàng)建和數(shù)據(jù)綁定變得非常簡單,當(dāng)用戶編輯代碼時(shí),實(shí)時(shí)預(yù)覽會(huì)根據(jù)代碼的變化進(jìn)行更新,從而為用戶提供了一個(gè)交互式的編程環(huán)境,這篇文章主要介紹了Vue中如何進(jìn)行代碼編輯器與實(shí)時(shí)預(yù)覽,需要的朋友可以參考下2023-10-10
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)圖片裁剪后上傳，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
Vue實(shí)現(xiàn)Chrome小恐龍游戲的示例代碼
Google 給 Chrome 瀏覽器加了一個(gè)有趣的彩蛋，本文就詳細(xì)的介紹一下Vue實(shí)現(xiàn)Chrome小恐龍游戲的示例代碼，具有一定的參考價(jià)值，感興趣的可以了解一下2022-04-04
vue父組件點(diǎn)擊觸發(fā)子組件事件的實(shí)例講解
下面小編就為大家分享一篇vue父組件點(diǎn)擊觸發(fā)子組件事件的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02
vue-video-player 解決微信自動(dòng)全屏播放問題(橫豎屏導(dǎo)致樣式錯(cuò)亂問題)
這篇文章主要介紹了vue-video-player 解決微信自動(dòng)全屏播放問題，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
vue3開啟攝像頭并進(jìn)行拍照的實(shí)現(xiàn)示例
本文主要介紹了vue3開啟攝像頭并進(jìn)行拍照的實(shí)現(xiàn)示例,主要是使用navigator.mediaDevices.getUserMedia這個(gè)API來實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下2024-01-01