vue 圖標選擇器的實例代碼
來源:http://www.ruoyi.vip/
import Vue from 'vue' import SvgIcon from '@/components/SvgIcon'// svg component // register globally Vue.component('svg-icon', SvgIcon) const req = require.context('./svg', false, /\.svg$/) const requireAll = requireContext => requireContext.keys().map(requireContext) requireAll(req)
# replace default config # multipass: true # full: true plugins: # - name # # or: # - name: false # - name: true # # or: # - name: # param1: 1 # param2: 2 - removeAttrs: attrs: - 'fill' - 'fill-rule'
<template> <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" /> <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners"> <use :xlink:href="iconName" rel="external nofollow" /> </svg> </template> <script> // doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage import { isExternal } from '@/utils/validate' export default { name: 'SvgIcon', props: { iconClass: { type: String, required: true }, className: { type: String, default: '' } }, computed: { isExternal() { return isExternal(this.iconClass) }, iconName() { return `#icon-${this.iconClass}` }, svgClass() { if (this.className) { return 'svg-icon ' + this.className } else { return 'svg-icon' } }, styleExternalIcon() { return { mask: `url(${this.iconClass}) no-repeat 50% 50%`, '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%` } } } } </script> <style 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>
<!-- @author zhengjie --> <template> <div class="icon-body"> <el-input v-model="name" style="position: relative;" clearable placeholder="請輸入圖標名稱" @clear="filterIcons" @input.native="filterIcons"> <i slot="suffix" class="el-icon-search el-input__icon" /> </el-input> <div class="icon-list"> <div v-for="(item, index) in iconList" :key="index" @click="selectedIcon(item)"> <svg-icon :icon-class="item" style="height: 30px;width: 16px;" /> <span>{{ item }}</span> </div> </div> </div> </template> <script> import icons from './requireIcons' export default { name: 'IconSelect', data() { return { name: '', iconList: icons } }, methods: { filterIcons() { this.iconList = icons if (this.name) { this.iconList = this.iconList.filter(item => item.includes(this.name)) } }, selectedIcon(name) { this.$emit('selected', name) document.body.click() }, reset() { this.name = '' this.iconList = icons } } } </script> <style rel="stylesheet/scss" lang="scss" scoped> .icon-body { width: 100%; padding: 10px; .icon-list { height: 200px; overflow-y: scroll; div { height: 30px; line-height: 30px; margin-bottom: -5px; cursor: pointer; width: 33%; float: left; } span { display: inline-block; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } } } </style>
到此這篇關於vue 圖標選擇器的文章就介紹到這瞭,更多相關vue 選擇器內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- svgicon組件使用方法示例詳解
- vue如何封裝自己的Svg圖標組件庫(svg-sprite-loader)
- vue3+vite2中使用svg的方法詳解(親測可用)
- Vue中引入svg圖標的兩種方式
- 基於Vue技術實現遞歸組件的方法