Xgate DMS4 UI

统一样式解决方案 兼容vue2``vue3``element2.x``element+ 根据公司内部需求, 参照element+写的一套样式组件

vue2组件

全局安装

import xcomponent from '@xgate/vue-components'
import '@xgate/vue-components/lib/theme-chalk/index.css' // css文件
// import '@xgate/vue-components/theme-chalk/index.scss' // scss 文件
Vue.use(xcomponent, {
  alertParentId: 'alert-box',
  alertZIndex: 2000,
})

按需使用

import button from '@xgate/vue-components/component/button'
import '@xgate/vue-components/lib/theme-chalk/index.css' // css文件
// import '@xgate/vue-components/theme-chalk/index.scss' // scss 文件

icon

目前只支持close, arrow-right, 其他请自行添加

添加自定义svg文件到icon

vite

// vite.config.js

import { createSvg } from '@xgate/vue-components/utils/vite-svg-install'

export default {
  plugins: [
    createSvg('./src/icons/src/') // svg文件路径
  ]
}

webpack

// vue.config.js
chainWebpack(config) {
  config.module
    .rule('svg')
    .exclude.add('node_modules/@xgate/vue-components/svg')
    .end()
  config.module
    .rule('icons')
    .include.add('node_modules/@xgate/vue-components/svg')
    .end()
    .use('svg-sprite-loader')
    .loader('svg-sprite-loader')
    .options({
      symbolId: 'icon-[name]'
    })
    .end()
}

// icons/index.js

// 组件需要的icon
const req = require.context('node_modules/@xgate/vue-components/svg', false, /\.svg$/)
const requireAll = requireContent => requireContent.keys().map(requireContent)
requireAll(req)
// 其他icon
const req2 = require.context(path, false, /\.svg$/)
requireAll(req2)