krry-transfer ? 基于 element 的升级版穿梭框组件发布到 npm 啦

转载 筱月 2019/11/3 21:25:31

博客地址:y基于的升级版穿梭框组件发布到啦看过我之前博客的同学或许知道我之前写过关于穿梭框组件重构的博客关于组件的穿梭框的重构,当时还有一些同学直接通过微信询问很多关

博客地址:https://ainyi.com/81

基于 element ui 的==升级版穿梭框组件==发布到 npm 啦

看过我之前博客的同学或许知道我之前写过关于 element 穿梭框组件重构的博客 关于 Element 组件的穿梭框的重构,当时还有一些同学直接通过微信询问很多关于这个组件的问题

去年在上家公司就重构过的穿梭框,一直懒得封装成一个 Vue 组件发布到 npm,现在趁着目前比较闲,就这几天继续完善和优化、迭代更新 + 封装,终于发布啦~

krry-transfer

基于 Element UI 的升级版穿梭框组件

  1. 多级多选穿梭框(常用于省市区三级联动)
  2. 针对数据量庞大的分页穿梭框

Example

kr-cascader

kr-paging

Specialty

kr-cascader 多级多选穿梭框

  1. 多级多选
  2. 当勾选省级并添加,过滤备选框的当前省级,同时在已选框该省级的子级合并成一个省级
  3. 当勾选市级并添加,过滤备选框的当前市级,同时在已选框该市级的子级合并成一个市级
  4. 当从已选框中移除数据,针对移除的数据是省、市、区分别在备选框新增这些数据
  5. 当父级勾选多个数据,下级方框展示的数据为最后勾选父级的子级集合
  6. 当多个勾选的父级逐个取消勾选,下级方框展示的数据为上一次勾选父级的子级集合
  7. 支持搜索

kr-paging 数据量庞大的分页穿梭框

  1. 实现分页
  2. 搜索,在所有数据里搜索(不是在当前分页的数据里搜索),这样就不用在每个分页都搜索一次;搜索后的结果也会自动分页
  3. 全选只在当前页里的全选
  4. 穿梭框左右两个框的联动

Install & Use

npm install krry-transfer --save

依赖 Element checkbox、button 组件和样式

import Vue from 'vue'
import krryTransfer from 'krry-transfer'

Vue.use(krryTransfer)

/* 
 * or 按需引入
 * import { krryCascader, krryPaging } from 'krry-transfer'
 *
 * Vue.use(krryCascader)
 * Vue.use(krryPaging)
 */

kr-cascader



kr-paging



API ( kr-cascader )

Attributes

name type default description
boxTitle Array ['省份', '城市', '区县', '选中地域'] 按顺序指定每个方框的 title
boxOperation Array ['添加省份', '添加城市', '添加区县', '删除地域'] 按顺序指定每个方框底部的操作文案
dataObj Object {} kr-cascader 的数据源
selectedData Array [] 已选数据集合

Events

name params description
onChange String: value:已选数据集合 当已选数据变化时触发的事件

Methods

name params description
getSelectedData - 获取已选数据集合的钩子


注:dataObj、selectedData 的数据格式如下

dataObj(kr-cascader 的数据源):

dataObj: {
  province: {
    '省id': 'xx省'
  },
  city: {
    '省id': [
      {
        id: '市id',
        label: 'xx市'
      }
    ]
  },
  county: {
    '市id': [
      {
        id: '区id',
        label: 'xx区'
      }
    ]
  }
}

selectedData(已选数据集合):

selectedData: [
  {
    id: '101111',
    label: '内蒙古自治区'
  },
  {
    id: '101101-101101101112',
    label: '北京市-通州区'
  },
  {
    id: '101103-101164001112-106197987125',
    label: '广东省-惠州市-惠城区'
  }
]

API ( kr-paging )

Attributes

name type default description
boxTitle Array ['待选区', '已选中'] 按顺序指定每个方框的 title
pageSize Number 160 分页大小
dataList Array [] kr-paging 的数据源
selectedData Array [] 已选数据集合

Events

name params description
onChange String: value:已选数据集合 当已选数据变化时触发的事件

Methods

name params description
getSelectedData - 获取已选数据集合的钩子

About

npm:krry-transfer

Blog:Krryblog

GitHub:krry-transfer

License

MIT

Issue

有个小问题纠结了很久,在做按需加载模块的时候,遇到==ES6 import 解构失败==的问题,网上查了一下,才知道是 babel 对 export default 的处理,例如:

export default {
  host: 'localhost',
  port: 80
}

变成了

module.exports.default = {
  host: 'localhost',
  port: 80
}

参考文章:ES6 export default 和 import语句中的解构赋值

解决方法是使用 babel-plugin-add-module-exports 插件,在 .babelrc 配置:

{
  "presets": [["env", { "modules": "commonjs" }]],
  "plugins": ["add-module-exports"]
}

博客地址:https://ainyi.com/81

上一篇:如何让OKR实践变得更简单一些

下一篇:我是如何在一周内拿到4份offer的?

赞(0)

共有 条评论 网友评论

验证码: 看不清楚?
    IT文章导航
    扫一扫关注最新编程为什么上不了bet356_bet356 下载安装_bet356黑钱