美文网首页每天学一点Vue3vuevue
element-plus,如何动态设置图标?

element-plus,如何动态设置图标?

作者: 自然框架 | 来源:发表于2022-01-19 17:44 被阅读0次

    element-plus 里面的 icon,以前是字符串形式的,非常容易做成动态的效果,但是新版本改成了组件的形式,不支持字符串的形式了。
    组件了如何动态呢?

    其实也很简单,我们把需要的 icon组件 注册为全局的字典,key:组件 的形式,然后就可以把字符串转换为图标组件了。

    全局注册

    首先建立一个js文件,引入图标,做成字典的形式,再用 Vue 的插件功能注册为全局变量。

    import { reactive } from 'vue'
    // 引入全部图标
    // import * as Icons from "@element-plus/icons"
    
    // 按需引入图标
    import {
      CloseBold,
      Close,
      Plus,
      Star,
      UserFilled,
      Loading,
      Connection,
      Edit,
      FolderOpened
    } from '@element-plus/icons'
    
    const dictIcon = reactive({
      'CloseBold': CloseBold,
      'Close': Close,
      'Plus': Plus,
      'Star': Star,
      'UserFilled': UserFilled,
      'Loading': Loading,
      'Connection': Connection,
      'Edit': Edit,
      'FolderOpened': FolderOpened
    })
    
    const installIcon = (app) => {
      // 便于模板获取
      app.config.globalProperties.$icon = dictIcon
      // 使用全部图标
      // app.config.globalProperties.$icon = Icons
    }
    
    export default installIcon
    

    使用全部图标

    这里有两种使用方式,一种是简单粗暴的全部图标都注册了,看了一下node_modules里面的文件,一共二、三百KB,如果不太在意体积的话,可以全都弄进来。

    按需索取

    如果使用的图标不是很多,那么可以只引入需要的图标,这样体积就小很多了。

    在 main.js 里面挂载。

    // 设置icon
    import installIcon from './icon/index.js'
    
    app.use(nfElementPlus) // 全局注册
      .use(router) // 路由
      .use(installIcon) // 注册全局图标
      .use(ElementPlus, { locale: zhCn, size: 'small' }) // UI库
      .mount('#app')
    
    

    在模板里面使用

    <component
      :is="$icon[iconName]"
      style="width: 1.5em; height: 1.5em; margin-right: 8px;color:#123456"
    >
    </component>
    

    在模板里面使用动态组件,根据图标名称加载图标,使用style设置大小和颜色,这样就可以了。

    在组件属性里面使用

    几个例子:
    el-input 的 prefix-icon 属性可以设置图标,属性类型是字符串或者组件,试了一下字符串,没有效果,大概需要在使用 el-input 的组件里面注册对应的图标,这样就不方便实现动态图标了,或者全局注册图标。

    既然我们做了全局注册的字典,那么属性也可以用一用。

    <el-input
        v-model="value"
        :prefix-icon="($icon)?$icon['Edit']:'' "
        :suffix-icon="($icon)?$icon[iconName]:'' "
    >
    </el-input>
    

    这样就可以统一使用动态图标了。

    相关文章

      网友评论

        本文标题:element-plus,如何动态设置图标?

        本文链接:https://www.haomeiwen.com/subject/ccnrhrtx.html