在Vue项目中封装一个Icon组件_前端vue如何封装带有icon的button组件,ant官网

1. 图标组件

组件位置： @/components/Icon

实现步骤：

1.首先我们去Iconfont中找到自己需要的图标，并添加到到自己的项目中

2.在项目中，选择Symbol，然后生成代码，注意代码是一个JS文件

3.在Vue项目中封装一个Icon组件

export default function createIconfont(options) {

  let scriptUrlList = options.scriptUrl;

  // 将第二步生成的js文件插入到DOM中

  for (let scriptUrl of scriptUrlList) {

    if (

      document !== 'undefined' &&

      typeof window !== 'undefined' &&

      typeof document.createElement === 'function' &&

      typeof scriptUrl === 'string' &&

      scriptUrl.length

    ) {

      let script = document.createElement('script');

      script.setAttribute('src', scriptUrl);

      script.setAttribute('data-namespace', scriptUrl);

      document.body.appendChild(script);

    }

  }

 

  // 加载图标的所有CSS样式

  // 可能有多个，可能以数组的形式传递

  const iconClass = function(className) {

    let classObj = ['icon-font'];

    if (Array.isArray(className)) {

      for (let item of className) {

        classObj.push(item);

      }

    } else if (className) {

      classObj.push(className);

    }

    return classObj.join(' ');

  };

  return {

    functional: true,

    name: 'Icon',

    render: function(h, context) {

      let props = context.props,

        listeners = context.listeners,

        data = context.data;

      return h(

        'svg',

        {

          style: data.style,

          class: iconClass(props.className),

          on: listeners

        },

        // 第二步生成js之前需要将图标前缀去掉，Iconfont默认图标`icon-`

        // 如果没有去掉，需要修改为[h('use', { attrs: { 'xlink:href': `#${icon-}` + props.type } })]

        [h('use', { attrs: { 'xlink:href': '#' + props.type } })]

      );

    }

  };

}

注册全局组件

import createIconfont from './createIconfont';

import { getHost } from '@/utils/common';

// 从外置配置文件中读取JS文件

// 避免图标修改样式后需要重新打包发布

const IconCite = createIconfont({

  scriptUrl: getHost('VUE_APP_ICON_URL')

});

const icon = {

  // 注册全局组件icon

  install(Vue) {

    Vue.component('icon', IconCite);

  }

};

export default icon;

组件的使用

<icon :type="modelForm.modelIcon" class-name="svgIcon" />

2.抽屉组件

组件位置：@/components/drawer

允许传入的参数：

// 显示标题

title: {

      default: ''

},

// 抽屉是否显示

visible: {

   type: Boolean,

   default: false

},

// 抽屉组件的宽度

width: {

   type: String,

   default: 600 + 'px'

},

// 点击遮罩关闭（默认为true）

hasQuickClose: {

   type: Boolean,

   default: true

},

// 关闭之前的回调

beforeClose: {

   type: Function

}

组件的使用

<Drawer :title="slider.title" :visible.sync="slider.isShow" :width="slider.width" @close="handleSliderCancel">

      <component

        :is="slider.content"

        v-bind="slider.properties"

        @onSave="handleSliderSave"

        @onHandle="handleDeleteData"

        @closeDrawer="handleSliderCancel"

      ></component>

    </Drawer>

3. 菜单组件

功能和模板写法一致，但是可扩展性更高（比如可以使用自定义图标等等）

组件位置： @/components/page/components/IMenu.js

可传参数：

defaultActive: this.defaultActive,

defaultOpeneds: this.defaultOpeneds,

mode: this.$props.mode,

collapse: this.collapse,

backgroundColor: this.$props.backgroundColor,

textColor: this.$props.textColor,

activeTextColor: this.$props.activeTextColor,

uniqueOpened: true

事件：

on: {

      open: this.onOpenChange

}

组件中主要通过递归的方式循环遍历每个路由信息。