hi,你好!欢迎访问本站!登录
本站由网站地图腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - 教程 - 杂谈 - 正文 君子好学,自强不息!

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

2019-11-18杂谈搜奇网39°c
A+ A-

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

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  移步手机端
krry-transfer ⏤ 基于 element 的升级版穿越框组件宣布到 npm 啦

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
未定义标签

本文来源:搜奇网

本文地址:https://www.sou7.cn/282163.html

关注我们:微信搜索“搜奇网”添加我为好友

版权声明: 本文仅代表作者个人观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。请记住本站网址https://www.sou7.cn/搜奇网。

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>