krry-transfer ⏤ 基於 element 的升級版穿梭框組件發布到 npm 啦

博客地址：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

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

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