anlin-ui v1.3.0

anlin-ui

应用：当前组件可用于pc项目

特色：数据驱动视图展示

主体：基于element-ui的2次封装组件

附加：中后台管理系统使用频率较高的工具函数

使用步骤

npm install -S anlin-ui

main.js

引入element-ui(依赖项)

依赖的组件有 1. el-menu 2. el-submenu 3. el-menu-item 4. el-scrollbar 5. el-form 6. el-form-item 7. el-input 8. el-select 9. el-option 10. el-date-picker 11. el-checkbox-group 12. el-checkbox 13. el-button 14. el-button-group 15. el-radio-group 16. el-radio 17. el-pagination 18. el-table 19. el-table-column 20. el-link 21. el-avatar

2021/02/17 更新所有组件添加对应的al-***class

官网：anlin.huzhanlin.cn (初版-计划重构)

使用方式

1. 引入elementUI(依赖)

import 'element-ui/lib/theme-chalk/index.css';
import ElementUI from 'element-ui'
Vue.use(ElementUI, { size: 'small' });

2. 导入组件对象

import ui from "anlin-ui"

3. 挂载组件到全局

Vue.component('AlContainer', ui.AlContainer)
Vue.component('AlPagination', ui.AlPagination)
Vue.component('AlIcon', ui.AlIcon)
Vue.component('AlFilter', ui.AlFilter)
Vue.component('AlForm', ui.AlForm)
Vue.component('AlTable', ui.AlTable)
Vue.component('AlMenu', ui.AlMenu)

4. 导入函数

import { db as Db, theme } from "anlin-ui"

5. 挂载到vue原型

const loc = new Db()
const sess = new Db(2)
const userLoc = new Db(1, 'user')
const userSess = new Db(2, 'user')
const db = { loc, sess, userLoc, userSess }
Vue.prototype.$db = db;

Vue.prototype.$theme = theme;

6. 函数使用 改变element主题色的函数示例

created() {  
  setTimeout(() => {
    this.$theme("#ff0000");
  }, 2000);
},

本地存储类的使用示例

mounted() {
  this.$db.userLoc.set("account", 123);
  console.log(this.$db.userLoc.get("account"));
  setTimeout(() => {
    this.$db.userLoc.remove("account");
    console.log(this.$db.userLoc.get("account"));
  }, 1000);
},

7. 迭代说明 2021/03/02 迭代 AlMenu AlForm AlIcon AlPagination AlTable 组件 删除AlFilter组件（这个组件的效果，在新的AlForm中，只需要传入适当的参数即可达到一样的效果）

2021/03/04 迭代 AlTable 添加支持unit属性，如果表格数据为单位数据的话，能将unit定义的（单位）文本追加到数据的后面 添加支持slot属性，设定对应的slot属性为true,设定name,label,并且在AlTable内使用template的v-slot:XXX="XXX",即能实现想要的插槽

2021/03/12 修复导出AlFilter组件的错误

2021/03/25 修复表格组件的column数据的对象中 text存在并且同级prop为多级数据时 示例：authorizer_info.service_type_info.id 不能正常解析的bug

2021/04/01 修改组件的sass转化成css,修改package内的配置项

2021/04/04 修改form组件的一个Bug,同时增加了一个item配置项

2021/04/05 更新al-table组件，添加了img的对象属性，添加了操作栏的label可配

2021/04/27 1.2.5版本 更新alform中的默认提交按钮支持loading属性 v-bind="$attrs" 更新al-table中的buttons支持loading: false/true,执行动作为(buttons中对象的method,emit的方法) 示例：

  ``` js
     deleteMethod(scope, btnRow) {
       // 其中scope为表格对应的行数据，而btnRow对应的按钮对象数据
       // 调用异步方法之前 btnRow.loading = true
       // 调用异步方法之后 btnRow.loading = false
     }
  ```

2021/06/25 al-form中添加btnItemFlog，用来控制是否渲染默认的重置和提交按钮，这是替换默认提交的第二种方式(第一种是默认插槽) al-container中删除所有的padding的css属性

2021/07/01 al-table中添加一个v-else-if的分支 支持在表格内部的内容区添加 icon 图标，图标支持文本前和文本后

2021/07/08 al-table 添加一个v-else-if的分支， i.type === 'expand' 支持expend的展开插槽， name="expand"