2.1.0 • Published 5 years ago

hg-parapicker v2.1.0

Weekly downloads
1
License
MIT
Repository
github
Last release
5 years ago

hg-parapicker

build NPM npm

移动端的并列选择器,适用于选择并列类型的数据。具有很好的适应性,可以在任何前端框架中使用。

这里是 2.x 的文档,1.x 文档请点击这里

Demo

点击这里跳转到演示页面,请在移动端打开或者使用浏览器移动端调试工具打开。

Install

  • yarn 下载:yarn add hg-parapicker
  • npm 下载:npm install --save hg-parapicker
  • CND 地址:
    • js:https://unpkg.com/hg-parapicker/dist/hg-parapicker.js
    • css:https://unpkg.com/hg-parapicker/picker.css

Usage

在 vue 等框架中使用

<template>
  <div @click="select">选择</div>
</template>
<script>
import "hg-parapicker/picker.css";
import ParaPicker from "hg-parapicker";

export default {
  data() {
    return {
      picker: null
    };
  },
  methods: {
    select() {
      this.picker.show();
    }
  },
  mounted() {
    this.picker = new ParaPicker({
      data: data,
      onOk: function(arr) {
        console.log(arr);
      }
    });
  },
  beforeDestroy() {
    if (this.picker) {
      this.picker.destroy();
      this.picker = null;
    }
  }
};
</script>

组件销毁时需要销毁 ParaPicker 实例,防止内存溢出

如果数据是请求来的,实例化写在请求成功后的回调中

在传统页面中使用

<head>
  <link
    rel="stylesheet"
    type="text/css"
    href="https://unpkg.com/hg-parapicker/picker.css"
  />
  <script src="https://unpkg.com/hg-parapicker/dist/hg-parapicker.js"></script>
</head>
<body>
  <div onclick="select(1)">选择</div>
  <script>
    var picker = new ParaPicker({
      data: data, // 符合格式的数组
      onOk: function(arr) {
        console.log(arr);
      }
    });
    window.select = function(number) {
      picker.show();
    };
  </script>
</body>

data 配置项的合法值

data选项接受一个二维数组,数据格式如下

var data = [
  ["平民", "狼人", "预言家", "女巫", "猎人", "白痴"],
  ["存活", "死亡", "吃刀", "票出", "吃毒", "中枪"]
];

如果你需要包含更多的信息,可以将数组的每项转化为对象的形势

var data = [
    [
        {value: '预言家', description: '每晚可查验一名玩家'},
        {value: '狼人', description: '每晚可击杀一名玩家'},
        ...
    ],
    ['存活', '死亡', '吃刀', '票出', '吃毒', '中枪']
]

其中的键名value可以根据实际需要通过配置项valueKey设置。例如你选择了预言家-存活,成功的回调函数中会接收如下形式的数组

[{ value: "预言家", description: "每晚可查验一名玩家" }, "存活"];

调用实例方法 show 呼起选择器,完整案例见这里

配置项

configuration是一个配置项的对象,可以接受如下选项:

keyvaluedescription
dataArray\<Array>符合格式的二维数组,必填
onOkFunction确定后的回调函数,返回一个结果数组,必填
onCancelFunction点击取消按钮或者背景后的回调函数,选填
valueKeyString需要展示的数据的键名,默认value
titleString选择器标题,默认为空
sureTextString确定按钮文本,默认为“确定”
cancelTextString取消按钮文本,默认为“取消”
aNumber惯性滚动加速度(正数, 单位 px/(ms * ms)),规定滚动阻力,加速度越小缓冲距离越长,默认 0.001
styleObject包含样式配置的对象

style对象可以接受如下选项:

keyvaluedescription
liHeightNumber每一个选择栏的高度(px),默认 40
btnHeightNumber按钮栏的高度(px),默认 44
btnOffsetString按钮离边框的距离,默认 20px
titleColorString选择器标题的字体颜色
okColorString选择器确定按钮的字体颜色
cancelColorString选择器取消按钮的字体颜色
btnBgColorString选择器按钮栏的背景颜色
contentColorString选择器选择区域的文字颜色
contentBgColorString选择器选择区域的背景颜色
upShadowColorString选择器顶部朦层颜色
downShadowColorString选择器底部朦层颜色
lineColorString选择器分隔线颜色

实例方法

functionparamdescription
show()--呼起选择框
hide()--关闭选择框
set(obj)obj:Object设置选择器属性
get(key)key:String获取选择框属性
destroy()--销毁选择器

参数 obj 中指定titlecancelTextokTextvalueKeyaonOkonCancel的值,会修改对应的选择器配置

Change Log

2020.3.25

v2.1.0 实现选择器销毁的实例方法

2019.6.29

v2.0.1 添加实例方法 set、get

2019.5.3

v2.0.0 使用 ES6 重构项目

2.1.0

5 years ago

2.0.1

6 years ago

2.0.0

6 years ago

1.3.3

6 years ago

1.3.2

6 years ago

1.3.1

6 years ago

1.3.0

6 years ago

1.2.2

7 years ago

1.2.1

7 years ago

1.2.0

7 years ago

1.1.1

7 years ago

1.1.0

7 years ago

1.0.0

7 years ago