hw-base-components v1.0.24

hw-base-components

汉卫研究院公共vue组件库

安装

yarn add hw-base-components
或
npm i hw-base-components -S

引入 hw-base-components

在 main.js 中写入以下内容：

import Vue from 'vue';
import HwBaseComponents from 'hw-base-componenst';
import App from './App.vue';

Vue.use(HwBaseComponents);

new Vue({
  el: '#app',
  render: h => h(App)
});

组件

BasicLayout 基础布局组件

Attribute(属性)

Slot(插槽)

基础布局组件分为两种，第二种为使用方法和第一种布局一样。

Login 登录页面组件

Attribute(属性)

Slot(插槽)

404页面组件

Attribute(属性)

用户管理页面组件

Attribute(属性)

Events(事件)

Slot(插槽)

角色管理页面组件

Attribute(属性)

Events(事件)

Slot(插槽)

菜单管理页面组件

Attribute(属性)

Events(事件)

Slot(插槽)

额外配置

因菜单需要，菜单icon要额外配置，引入如下icons文件夹：

icons文件夹在pc基础模板中配有

vue.config.js配置svg-sprite-loader

module.exports = {
  // ...
  chainWebpack: (config) => {
    // 设置全局svg
    config.module.rule(`svg`).exclude.add(resolve(`src/assets/icons`)).end();
    config.module
      .rule(`icons`)
      .test(/\.svg$/)
      .include.add(resolve(`src/assets/icons`))
      .end()
      .use(`svg-sprite-loader`)
      .loader(`svg-sprite-loader`)
      .options({
        symbolId: `icon-[name]`,
      })
      .end();
  },
  // ...
};

svg-sprite-loader：用法及说明

组织管理页面组件

Attribute(属性)

Events(事件)

Slot(插槽)

字典管理页面组件

Attribute(属性)

Events(事件)