anso-ui

组件库使用方式

组件库引入

npm install -S vue element-ui anso-ui

// main.js

import Vue from 'vue'
import Element from 'element-ui'
// 引入 AnsoUI
import Anso from 'anso-ui'

Vue.use(Element)
Vue.use(Anso)

样式引入

手动在项目入口文件手动引入。

// 根据设计稿调整的element样式主题：
import 'anso-ui/assets/elTheme/theme/index.css'

// anso-ui组件库自带样式主题：
import 'anso-ui/assets/customTheme/index.sass'
import 'anso-ui/lib/anso-ui.css'

// anso-ui组件库自带的icon
import 'anso-ui/assets/icon/iconfont.css'

如项目中存在其他关于element-ui的样式调整，请将anso-ui/assets/elTheme/config.json文件上传element提供的在线主题编辑器，修改后在项目中替换以上第一行的样式引入。【查看element官方文档说明】

icon 引入

直接使用组件库封装好的AnsoIcon组件，引入的是iconfont上的Anso图标库:

修改图标库，暂只支持www.iconfont.cn 上的icon

anso-ui中存在默认的iconfont.css文件, 如果不需要替换为自己项目中的icon样式, 则可直接使用anso-ui提供的icon(具体图标详见默认示例) 【引入方式的代码示例说明查看】

如果需要替换为自己的iconfont.css文件, 则将iconfont.css文件放入自己项目的assets/icon/文件夹中(如果没有该文件夹，可自己新增)，找到项目的main.js全局引用核心文件, 将其中原本对icon文件的引用(import 'assets/icon/iconfont.css'), 替换为自己提供的iconfont.css的存放路径

全局配置

在引入anso-ui时，可以传入一个全局配置对象。

该对象目前支持的配置说明，按照anso-ui引入方式，具体操作如下：

如有新增的可全局配置项，请在下方补充

import Ansoui from 'anso-ui'

Vue.use(Ansoui, {
 // 表格初始化选项
  table: {},
  // 表单初始化选项
  form: {
    // space 配置操作表单间距，默认24px
    space: '80px',
    // readOnlySpace 配置只读表单间距，默认8px
    readOnlySpace: '0',
    // 配置表单上下外边距，默认24px
    formVerticalMargin: '',
    // 表单上传接口全局默认配置
    fileUploadResource: '',
    // 表单文件下载、预览接口全局默认配置
    fileDownloadResource: '',
    // 表单文件下载，预览接口类型, 通过id展示或者shortUrl展示
    fileDownloadResourceType: '',
    // 文件上传接口全局配置信息重新定义
    uploadResourceConfig: {
      type: Function,
      default: ({ url, params }) => ({
        url: '55',
        method: 'post',
        headers: {
          'Anso-Token': '123'
        },
        data: params
      })
    },
    // 文件上传输出值的重新配置响应
    uploadTransformResponse: {
      type: Function,
      default: ({ files }) => { // 上传組件默認輸出文件的數組id
        return files.map(file => file.shortUrl)
      }
    }
  }
})

组件库示例代码及文档说明

查看源码及文档说明

右上角两个标签，分别是：开启示例代码、开启组件文档说明

版本号管理

x.x.x 分别表示：稳定版本（里程碑/大版本）. 新大组件（form,table同级别的组件类型） . 优化次数

更新策略：

1. 大版本更新：老版本可能面临一些api更改导致无法使用

2. 中间一位版本更新：有新增新类型的组件、增加新示例文档、增加新api

3. 最后一位小版本更新：bugfix、优化、原先api无更改

!!! 注意文档示例与api的同步修改。

问题集

问：装包后出现this.getOptions is not a function的问题。

sass-loader版本问题，npm install sass-loader@8.0.2 -D 解决