Vue:ElementUI怎么引入外部svg图标

推荐阿里巴巴图标库
命令行运行npm install svg-sprite-loader

创建icons/svg文件夹
  • 将svg文件放在该文件夹下面
    文件夹
在components文件夹中创建svgiconfont.vue文件

文件内容:

<template>
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconName"></use>
  </svg>
</template>

<script>
  import '@/icons'
  export default {
    name: 'svg-icon',
    props: {
      iconClass: {
        type: String,
        required: true
      },
      className: {
        type: String
      }
    },
    computed: {
      iconName() {
        return `#icon-${this.iconClass}`
      },
      svgClass() {
        if (this.className) {
          console.log('svg-icon ' + this.className)
          return 'svg-icon ' + this.className
        } else {
          return 'svg-icon'
        }
      }
    },
    mounted: function() {
    }
  }
</script>

<style scoped>
  .svg-icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
</style>
创建index.js文件

文件内容如下:

import Vue from 'vue'
import svgiconfont from '@/components/svgiconfont'// svg组件
/*
require.context有三个参数:
directory:说明需要检索的目录
useSubdirectories:是否检索子目录
regExp: 匹配文件的正则表达式
 */
// 全局注册
Vue.component('svg-icon', svgiconfont)
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
requireAll(req)
在main.js引入icons文件夹下

即添加import ‘@/icons’

修改webpack.base.conf.js

添加代码:

{
        test: /\.svg$/,
        loader: "svg-sprite-loader",
        include: [resolve("src/icons")],
        options: {
          symbolId: "icon-[name]"
        }
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        exclude: [resolve("src/icons")],
        options: {
          limit: 50000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
       }
使用方法

在页面中添加

<svg-icon icon-class="breadcrumb"></svg-icon>

如有错误的地方,请留言多多指教

  • 3
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue2中使用Element UI引入Tinymce,首先需要在项目中安装Element UI和Tinymce,并引入相应的依赖。 1. 安装Element UI和Tinymce: 在项目的根目录下执行以下命令来安装Element UI和Tinymce依赖: ``` npm install element-ui tinymce --save ``` 2. 引入Element UI和Tinymce: 在项目的入口文件中(比如main.js),引入Element UI和Tinymce的样式和组件: ```javascript import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' import tinymce from 'tinymce' import 'tinymce/themes/silver' import 'tinymce/plugins/image' import 'tinymce/plugins/code' Vue.use(ElementUI) Vue.prototype.$tinymce = tinymce ``` 这里假设你使用了默认主题(silver),并引入了image和code两个插件。你也可以根据需要引入其他插件。 3. 在页面中使用Tinymce: 在你需要使用Tinymce的组件中,可以通过v-model绑定一个数据来实现双向绑定。在mounted钩子函数中初始化Tinymce编辑器。 ```html <template> <div> <tinymce v-model="content"></tinymce> </div> </template> <script> export default { data() { return { content: '' } }, mounted() { this.$nextTick(() => { this.initEditor() }) }, methods: { initEditor() { const editor = this.$tinymce.get('tinymce') if (editor) { this.$tinymce.remove(editor) } this.$tinymce.init({ selector: 'tinymce', plugins: ['image', 'code'], toolbar: 'undo redo | bold italic | image code', setup: (editor) => { editor.on('change', () => { this.content = editor.getContent() }) } }) } } } </script> ``` 在mounted钩子函数中,我们调用initEditor方法来初始化Tinymce编辑器。通过this.$tinymce.get('tinymce')来获取编辑器实例,若实例存在则移除;然后调用this.$tinymce.init来初始化编辑器配置。我们在这个配置中设置选择器为'tinymce',即我们模板中的元素。此外,我们还可以定义各种插件、工具栏等等。 最后,我们通过监听编辑器的change事件来更新绑定的数据content。 通过以上步骤,我们就可以在Vue2中使用Element UI引入Tinymce了。希望这能帮到你。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值