组件开发注意事项

• 本项目的命名空间是: g-
• 组件目前是全局挂载, 需要在src/index.js中操作
• 项目支持antd, 未来有antd组件支持性更好的场景时可以使用antd-vue来封装

/* src/index.js */
// 导入组件
import Table from './components/Table/index.vue'
// import ...

// 导入指令
import { defaultImg } from './directives/default-image'
import LoadingG from './directives/loading'
// import ...

// 组件列表
const components = {
  GTable: Table,
  // ...
}

// 指令列表
const directives = {
  defaultImg,
  LoadingG,
  // ..
}

// 安装方法
const install = (app) => {
  // 注册所有组件
  Object.entries(components).forEach(([key, component]) => {
    app.component(key, component)
  })

  // 注册所有指令
  Object.entries(directives).forEach(([key, directive]) => {
    app.directive(key, directive)
  })

  ElButton.props.loadingIcon.default = () => LoadingIcon
}

// 导出组件和指令
export {
  install,
  Table as GTable,
  // ...
  defaultImg,
  LoadingG,
  // ...
}

// 导出默认对象
const GecaElement = {
  install,
  ...components,
  ...directives,
}

export default GecaElement

组件

写在src/components下

指令

写在src/directives下

关于样式

当前版本下的样式管理并不理想, 目前是纯css覆盖, 比较权级的方式, 并没有采用el和ant的config来修改主题和定制主题

• 样式文件位置: src/styles
  • antd-theme.js ant的定制主题文件
  • default-image.css default-image指令的样式
  • element-theme.less el组件的定制化样式覆盖, 均为根据UI设计对el组件进行的一些样式/变量覆盖
  • global.less 全局样式, 一些全局的reset和custom样式会翻在此处
  • tailwind.css tailwind文件, 一般不动

组件使用注意事项

Table

• 目前版本下不要在外层使用el-card, 会导致吸顶定位错误
• 单独使用时, 列表无法显示, 可能是因为父级元素没有设置overflow-y: auto | scroll
  1. 此时可以使用每个项目中的ContainerLayout或是BaseContainer等组件(作为右侧内容区域的显示容器)
  2. 也可以为父级容器设置overflow-y: auto | scroll, 或关闭吸顶、关闭分页固定