欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue.js通過組件處理Icon圖標(biāo)

 更新時間:2021年11月29日 14:46:48   作者:杰哥快要啊  
這篇文章介紹了Vue.js通過組件處理Icon圖標(biāo)的方法,文中通過示例代碼介紹的非常詳細。對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

?Icon圖標(biāo)處理方案

記錄一次對于想使用element-plus之外的圖標(biāo),如何封裝成一個組件,是本次記錄的目標(biāo),希望在工作時能幫助自己處理圖標(biāo)問題。

分析,對于element-plus的圖標(biāo)可以通過el-icon來進行顯示,而自定義圖標(biāo)需要自定義一個圖標(biāo)組件,用來顯示自定義svg圖標(biāo)。

組件能力

  • 顯示外部svg圖標(biāo)(外鏈)
  • 顯示項目內(nèi)的svg圖標(biāo)

圖標(biāo)組件封裝思路

用于展示的圖標(biāo)組件

創(chuàng)建 components/SvgIcon/index.vue

<template>
    <div
        v-if="isExternal"
        :style="styleExternalIcon"
        class="svg-external-icon svg-icon"
        :class="className"
    />
    <svg v-else class="svg-icon" :class="className" aria-hidden="true">
        <use :xlink:href="iconName" rel="external nofollow"  />
    </svg>
</template>
?
<script setup>
    import { isExternal as external } from '@/utils/validate'
    import { defineProps, computed } from 'vue'
    const props = defineProps({
        // icon圖標(biāo)
        icon: {
            type: String,
            required: true
        },
        // 圖標(biāo)類名
        className: {
            type: String,
            default: ''
        }
    })
    /**
     * 判斷是否為外部圖標(biāo)
     */
    const isExternal = computed(() => external(props.icon))
    /**
     * 外部圖標(biāo)樣式
     */
    const styleExternalIcon = computed(() => ({
        mask: `url(${props.icon}) no-repeat 50% 50%`,
        '-webkit-mask': `url(${props.icon}) no-repeat 50% 50%`
    }))
    /**
     * 項目內(nèi)圖標(biāo)
     */
    const iconName = computed(() => `#icon-${props.icon}`)
</script>
?
<style lang='scss' scoped>
    .svg-icon {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
    }
?
    .svg-external-icon {
        background-color: currentColor;
        mask-size: cover !important;
        display: inline-block;
    }
</style>
?

判斷資源是否是外部資源

創(chuàng)建 utils/validate.js

/**
 * 判斷是否為外部資源
 */
export function isExternal(path) {
  return /^(https?:|mailto:|tel:)/.test(path)
}

外部svg圖標(biāo)顯示

通過引入組件svg-icon,icon傳遞圖標(biāo)外鏈。

<span class="svg-container">
    <svg-icon icon="https://xxx.svg"></svg-icon>
</span>

處理項目內(nèi)svg圖標(biāo)

  • 項目內(nèi)src目錄下創(chuàng)建 icons 文件夾,并導(dǎo)入svg圖標(biāo)文件
  • 在 icons 下創(chuàng)建 index.js 文件

文件完成兩件事

  • 導(dǎo)入所有的svg圖標(biāo)
  • 完成SvgIcon的全局注冊

index.js 代碼如下

參考文檔依賴管理 | webpack 中文文檔

import SvgIcon from '@/components/SvgIcon'
?
// 通過 require.context() 函數(shù)來創(chuàng)建自己的 context
const svgRequire = require.context('./svg', false, /\.svg$/)
// 此時返回一個 require 的函數(shù),可以接受一個 request 的參數(shù),用于 require 的導(dǎo)入。
// 該函數(shù)提供了三個屬性,可以通過 require.keys() 獲取到所有的 svg 圖標(biāo)
// 遍歷圖標(biāo),把圖標(biāo)作為 request 傳入到 require 導(dǎo)入函數(shù)中,完成本地 svg 圖標(biāo)的導(dǎo)入
svgRequire.keys().forEach(svgIcon => svgRequire(svgIcon))
?
export default app => {
 app.component('svg-icon', SvgIcon)
}

全局注冊項目內(nèi)圖標(biāo)

main.js 中引入該文件

...
// 導(dǎo)入 svgIcon
import installIcons from '@/icons'
...
installIcons(app)
...

使用內(nèi)部圖標(biāo)

// 用戶名   
<svg-icon icon="user" />
// 密碼
<svg-icon icon="password" />

使用 svg-sprite-loader 處理 svg 圖標(biāo)

svg-sprite-loaderwebpack中專門處理svg圖標(biāo)的一個loader

安裝: npm i --save-dev svg-sprite-loader@6.0.9

vue.config.js 文件中配置loader

const path = require('path')
function resolve(dir) {
 return path.join(__dirname, dir)
}
?
module.exports = {
 chainWebpack(config) {
   // 設(shè)置 svg-sprite-loader
   config.module
     .rule('svg')
     .exclude.add(resolve('src/icons'))
     .end()
   config.module
     .rule('icons')
     .test(/\.svg$/)
     .include.add(resolve('src/icons'))
     .end()
     .use('svg-sprite-loader')
     .loader('svg-sprite-loader')
     .options({
       symbolId: 'icon-[name]'
     })
     .end()
 }
}

這樣即可處理內(nèi)部的svg圖標(biāo)啦。

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue使用el-upload實現(xiàn)文件上傳的實例代碼

    vue使用el-upload實現(xiàn)文件上傳的實例代碼

    這篇文章主要為大家詳細介紹了vue使用el-upload實現(xiàn)文件上傳,文中示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或工作有一定的幫助,感興趣的小伙伴們可以參考一下
    2024-01-01
  • vue中this.$parent的使用方式

    vue中this.$parent的使用方式

    這篇文章主要介紹了vue中this.$parent的使用方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-03-03
  • ant design vue嵌套表格及表格內(nèi)部編輯的用法說明

    ant design vue嵌套表格及表格內(nèi)部編輯的用法說明

    這篇文章主要介紹了ant design vue嵌套表格及表格內(nèi)部編輯的用法說明,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-10-10
  • vue實現(xiàn)同一個頁面可以有多個router-view的方法

    vue實現(xiàn)同一個頁面可以有多個router-view的方法

    今天小編就為大家分享一篇vue實現(xiàn)同一個頁面可以有多個router-view的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • Element Card 卡片的具體使用

    Element Card 卡片的具體使用

    這篇文章主要介紹了Element Card 卡片的具體使用,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-07-07
  • vue實現(xiàn)下拉加載其實沒那么復(fù)雜

    vue實現(xiàn)下拉加載其實沒那么復(fù)雜

    這篇文章主要給大家介紹了關(guān)于vue實現(xiàn)下拉加載的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-08-08
  • 詳解Vue.js 可拖放文本框組件的使用

    詳解Vue.js 可拖放文本框組件的使用

    這篇文章主要介紹了詳解Vue.js 可拖放文本框組件的相關(guān)資料,幫助大家更好的理解和學(xué)習(xí)使用vue框架,感興趣的朋友可以了解下
    2021-03-03
  • Vue如何監(jiān)測數(shù)組類型數(shù)據(jù)發(fā)生改變的(推薦)

    Vue如何監(jiān)測數(shù)組類型數(shù)據(jù)發(fā)生改變的(推薦)

    這篇文章主要介紹了Vue如何監(jiān)測數(shù)組類型數(shù)據(jù)發(fā)生改變的,本文通過實例代碼圖文詳解給大家講解的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-11-11
  • vue解決跨域問題的幾種常用方法(CORS)

    vue解決跨域問題的幾種常用方法(CORS)

    在Vue中解決跨域問題有多種方法,今天通過本文給大家介紹幾種比較常見的方法,對vue解決跨域問題感興趣的朋友跟隨小編一起看看吧
    2023-05-05
  • 詳解Vuex的屬性和作用

    詳解Vuex的屬性和作用

    這篇文章主要為大家介紹了Vuex的屬性和作用,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2021-12-12

最新評論