Vue.js 中怎么實(shí)現(xiàn)一個(gè)圖標(biāo)選擇組件,針對(duì)這個(gè)問(wèn)題,這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答,希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。
創(chuàng)新互聯(lián)公司-專(zhuān)業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性?xún)r(jià)比賓縣網(wǎng)站開(kāi)發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式賓縣網(wǎng)站制作公司更省心,省錢(qián),快速模板網(wǎng)站建設(shè)找我們,業(yè)務(wù)覆蓋賓縣地區(qū)。費(fèi)用合理售后完善,十年實(shí)體公司更值得信賴(lài)。
具體如下:
背景
最近項(xiàng)目中在做一個(gè)自定義菜單需求,其中有一個(gè)為菜單設(shè)置小圖標(biāo)的功能,就是大家常見(jiàn)的左側(cè)菜單
設(shè)置圖標(biāo)不難,方案就是字體圖標(biāo),可供使用的圖標(biāo)庫(kù)也有很多,比如阿里巴巴的 Iconfont,以及 Fontaswsome 等,問(wèn)題在于如何優(yōu)雅的提供幾百個(gè)圖標(biāo)供用戶(hù)選擇,而不需要開(kāi)發(fā)去一個(gè)一個(gè)的寫(xiě)標(biāo)簽,也不需要一個(gè)個(gè)的去找圖標(biāo)。
字體圖標(biāo)庫(kù) Fontawesome 方案
我們使用字體圖標(biāo)的方式,一般是一個(gè) <i class="iconfont icon-home"></i>
這樣的標(biāo)簽,平常開(kāi)發(fā)中用一些圖標(biāo)都是用到一個(gè)寫(xiě)一個(gè),展示10個(gè)圖標(biāo),就要寫(xiě)10個(gè)標(biāo)簽。
在項(xiàng)目中本人使用的是 Fontawesome 圖標(biāo)庫(kù)方案,使用它是因?yàn)樘峁┑目捎脠D標(biāo)比較豐富,基本上不需要特意去找合適的圖標(biāo),直接把它的圖標(biāo)庫(kù)下載過(guò)來(lái),免費(fèi)的有800多個(gè)。
這么多圖標(biāo)難道要一個(gè)一個(gè)手寫(xiě)800多個(gè) i
標(biāo)簽嗎?三連拒絕!
Fontawesome 下載后的文件中提供一個(gè) svg格式的精靈圖,這個(gè)非常人性化,用 VSCode 打開(kāi)這個(gè)SVG文件
可以看到是熟悉的DOM,因?yàn)镾VG本質(zhì)上就是一個(gè)XML,既然是DOM,那么祭出JS大法吧,用瀏覽器打開(kāi)這個(gè)SVG文件,在控制臺(tái)編寫(xiě)如下代碼獲取所有的圖標(biāo)名稱(chēng):
const nodeArray = Array.from(document.querySelectorAll('symbol')); const names = nodeArray.map(item => item.id) names.toString()
Icons組件
大牛可以忽略
拿到了所有圖標(biāo)的 name 那就好辦了,一個(gè)數(shù)組循環(huán)唄。先別急著寫(xiě)代碼,我們的目的是封裝成組件復(fù)用,那么先創(chuàng)建一個(gè) Icons 組件
提供一個(gè)篩選框,然后給一個(gè)事件即可
<template> <div class="ui-fas"> <el-input v-model="name" @input.native="filterIcons" suffix-icon="el-icon-search" placeholder="請(qǐng)輸入圖標(biāo)名稱(chēng)"></el-input> <ul class="fas-icon-list"> <li v-for="(item, index) in iconList" :key="index" @click="selectedIcon(item)"> <i class="fas" :class="['fa-' + item]" /> <span>{{item}}</span> </li> </ul> </div> </template> <script> import fontawesome from '@/extend/fontawesome/solid.js' export default { name: 'compIcons', data () { return { name: '', iconList: fontawesome } }, methods: { filterIcons () { if (this.name) { this.iconList = this.iconList.filter(item => item.includes(this.name)) } else { this.iconList = fontawesome } }, selectedIcon (name) { this.$emit('selected', name) }, reset () { this.name = '' this.iconList = fontawesome } } } </script>
先把拿到的所有圖標(biāo)name放到一個(gè) solid.js 文件中,輸出為數(shù)組,在組件中引入,然后就是循環(huán)數(shù)組 iconList
,輸出i
標(biāo)簽,F(xiàn)ontawesome 的使用方式是:<i></i>
。
篩選功能利用數(shù)組的 filter 方法,this.$emit('selected', name)
方式返回給父組件圖標(biāo)名稱(chēng)。
以上樣式都是利用Element UI 的 Popover、Input 組件實(shí)現(xiàn)
<el-form-item label="圖標(biāo):" > <el-popover placement="left-start" width="540" trigger="click" @show="$refs.icons.reset()" popper-class="popper-class"> <ui-icons ref="icons" @selected="selectedIcon" /> <el-input slot="reference" placeholder="請(qǐng)輸入內(nèi)容" readonly v-model="form.menu_icon" > <template slot="prepend"><i class="fas" :class="['fa-' + form.menu_icon]"></i></template> </el-input> </el-popover> </el-form-item>
組件實(shí)現(xiàn)了,接下來(lái)就是引用,既可以直接到導(dǎo)入此組件引用,也可以?huà)燧d到全局進(jìn)行使用,這里說(shuō)說(shuō)掛載到全局使用的方式,因?yàn)槲业捻?xiàng)目中所有的公共組件都是掛載到全局的方式使用。
在組件平級(jí)新建一個(gè) index.js 文件
import IconsCompontent from './Icons.vue' const Icons = { install(Vue) { Vue.component('ui-icons', IconsCompontent); } } export default Icons;
第4行為組件命名,此名稱(chēng)決定了如何使用組件,這里是ui-icons
,那么使用的時(shí)候就是:
<ui-icons />
接著在項(xiàng)目 components 根目錄新建 index.js,這里是所有組件的集合
最后一步是在 main.js 中注冊(cè):
import CustomComponents from './components/index.js' Object.keys(CustomComponents).forEach(key => Vue.use(CustomComponents[key]))
這樣就可以在項(xiàng)目中任意.vue
文件中以<ui-icons />
方式使用組件了。
后記
點(diǎn)擊圖標(biāo)后要不要關(guān)閉圖標(biāo)彈出層(Popover)呢?Popover 是需要鼠標(biāo)點(diǎn)擊其他地方才會(huì)隱藏的,選擇一個(gè)圖標(biāo)后就關(guān)閉 Popover 呢,我的做法是:document.body.click()
。
selectedIcon (name) { this.form.menu_icon = name // document.body.click() }
關(guān)于Vue.js 中怎么實(shí)現(xiàn)一個(gè)圖標(biāo)選擇組件問(wèn)題的解答就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,如果你還有很多疑惑沒(méi)有解開(kāi),可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識(shí)。
當(dāng)前標(biāo)題:Vue.js中怎么實(shí)現(xiàn)一個(gè)圖標(biāo)選擇組件
網(wǎng)頁(yè)URL:http://bm7419.com/article42/jdeihc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供用戶(hù)體驗(yàn)、動(dòng)態(tài)網(wǎng)站、移動(dòng)網(wǎng)站建設(shè)、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、全網(wǎng)營(yíng)銷(xiāo)推廣、做網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話(huà):028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)