hk-mssh-ui

web端的组件编写和集成

Usage no npm install needed!

<script type="module">
  import hkMsshUi from 'https://cdn.skypack.dev/hk-mssh-ui';
</script>

README

hk-mssh-ui

使用方法

import HKMSSHUI from 'hk-mssh-ui'
Vue.use(HKMSSHUI)

可用组件

const components = [
  hkDialog,
  hkImg,
  hkVideo,
  hkIcon,
  hkSvgIcon,
  hkSvgList,
  hkTable,
  hkTree,
  hkPage,
  hkSearch,
  hkSelectTree,
  hkUpload,
  hkContainer,
  hkUEditor,
  hkLayout,
  hkCard,
  hkColorPicker,
  hkScrollbar,
  hkTransfer
]

UI 自带一套后端布局，封装了部分常用功能

  • 使用方法
在项目的 store 中 ,如果要是用组件的Layout，则必须引入layoutStore

index.js 引入
import { layoutStore } from 'hk-mssh-ui'
export default new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  modules: { layoutStore },
  getters
})

UI 关于应用额外的svg图标

  • 使用方法
首先下载图标存入项目

mian.js 引入
# 此处是重点
const req = require.context('./components/svg', false, /\.svg$/)
let svgList = []
const requireAll = requireContext => {
  svgList = requireContext.keys()
  return requireContext.keys().map(requireContext)
}
requireAll(req)

import hkMsshUi from '../publish/src'
hkMsshUi.addMoreSvgList(svgList)   # 调用项目添加的方法，此处主要用于菜单图标选择，如果不作为图标，仅仅是在项目中显示使用，则可以不用
Vue.use(hkMsshUi)


vue.config.js
# 此处要注意，放在打包配置节点
chainWebpack(config) {
    config.module
      .rule('svg')
      # 此处第一个add为本组件原始的svg，第二个add为当前项目使用的svg路径，同理可添加多个
      .exclude.add(resolve('publish/svg-icons')).add(resolve('src/components/svg'))    
      .end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('publish/svg-icons')).add(resolve('src/components/svg'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()
}