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

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

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

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

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

krry-transfer

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

多级多选穿梭框（常用于省市区三级联动）
针对数据量庞大的分页穿梭框

Example

kr-cascader

kr-paging

Specialty

kr-cascader 多级多选穿梭框

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

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

实现分页
搜索，在所有数据里搜索（不是在当前分页的数据里搜索），这样就不用在每个分页都搜索一次；搜索后的结果也会自动分页
全选只在当前页里的全选
穿梭框左右两个框的联动

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

<template>

  <div>

    <kr-cascader

      :dataObj="dataObj"

      :selectedData="selectedData"

    ></kr-cascader>

  </div>

</template>

<script>

export default {

  data() {

    return {

      dataObj: {

        province: {

          '101103': '广东省',

        },

        city: {

          '101103': [

            {

              id: 101164181112,

              label: '深圳市'

            }

          ]

        },

        county: {

          '101164181112': [

            {

              id: 106105142126,

              label: '宝安区'

            }

          ]

        }

      },

      selectedData: [

        {

          id: '101101-101101101112',

          label: '北京市-通州区'

        }

      ]

    }

  }

}

</script>

kr-paging

<template>

  <div>

    <kr-paging

      :dataList="dataList"

      :selectedData="selectedData"

      :pageSize="100"

    ></kr-paging>

  </div>

</template>

<script>

export default {

  data() {

    return {

      dataList: [

        {

          id: 0,

          label: '这是第0条数据'

        },

        {

          id: 1,

          label: '这是第1条数据'

        }

      ],

      selectedData: [

        {

          id: 0,

          label: '这是第0条数据'

        }

      ]

    }

  }

}

</script>

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"]

}