mint-ui / mint-picker Goto Github PK

View Code? Open in Web Editor NEW

24.0 3.0 16.0 22 KB

A multi-slot picker based on vue.js.

License: MIT License

JavaScript 26.64% Vue 73.36%

mint-picker's Introduction

Overview

vue-picker is a multi-slot picker based on vue.js.

Install

npm install vue-picker --save

require ('mint-picker/lib/index.css');

// ES6 mudule
import Picker from 'mint-picker';

// CommonJS
const Picker = require('mint-picker').default;

Vue.component('picker', Picker);

Usage

<picker :slots="slots" @change="onValuesChange" rotate-effect :visible-item-count="3">
   <!-- Toolbar items -->
  <button>confirm</button>
  <button>cancel</button>
</picker>

export default {
  methods: {
    onValuesChange(picker, values) {
      if (values[0] > values[1]) {
        picker.setSlotValue(1, values[0]);
      }
    }
  },

  data() {
    return {
      slots: [
        {
          flex: 1,
          values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],
          className: 'slot1',
          textAlign: 'right'
        }, {
          divider: true,
          content: '-',
          className: 'slot2'
        }, {
          flex: 1,
          values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],
          className: 'slot3',
          textAlign: 'left'
        }
      ]
    };
  }
};

Options

Picker Options:

Option	Description
slots	Array(default: []) the slot config of picker.
showToolbar	Boolean(default: false) show a toolbar on top of picker when showToolbar is true.
visibleItemCount	Number(default: 5) visible item count of each slot.
rotateEffect	Boolean(default: false) use rotate effect on picker item when rotateEffect is true.

Picker Methods:

getSlotValue(index): get the value of specific slot.
setSlotValue(index, value): set the value of specific slot.
getSlotValues(index): get the values of specific slot.
setSlotValues(index, values): set the values of specific slot.
getValues(): values of all slots except divider slots.
setValues(values): set values(Array) of all slots except divider slots.

Picker Slot Options:

Option	Description
divider	Boolean(default: false) - just a divider slot when divider is true.
content	String - text content in divider slot.
values	values of this slot.
textAlign	text align of this slot's item.
flex	the style.flex value of this slot.
className	className of this slot.

License

MIT

mint-picker's People

Contributors

Stargazers

Watchers

Forkers

litian luckymin looknd iganzai maomao93 wkiconfontlib wenbin-im zhengzhanhang qbanruo herbomiy cooper1x aisajerry junshil007 new-ui fairyworld

mint-picker's Issues

picker无法初始化defaultIndex=0的问题

Slot之中设置了defaultIndex的值，在this.$nextTick之中调用
this.ageSlots[0].defaultIndex = 0无法令picker的值默认在第一位
只有先将值设为其他非0值后，再次设置为0才会生效

首先，从 npm 安装完之后，引入竟然是用 ‘vue-picker’，被文档坑了
然后，在终于解决引入问题之后，又报错 ‘build.js:9221 [Vue warn]: Attributes ":slots", "rotate-effect", ":visible-item-count" are ignored on component because the component is a fragment instance’，excuse me？文档是这么用的啊……
最后，这套组件估计是没法用的……大家小心了
PS：不知道为什么官网看起来就很好看，被骗了不开心……
PPS：也有可能只是因为我水平差，求拍

可以将月份的选择新增一下英语的月份表达吗

目前公司开发的app主要是针对国外用户使用，在使用过程中发现时间选择组件都是纯数字表达可以新增下英语的表达吗

picker的使用问题

这个showToolbar设置后，的确上面多了一处空白部分，但是出来后不知道怎么在这里添加标题，或者是确认取消按钮。

文档下面的内容也不明所以
Picker

另外做px的适配的时候，这个整体会缩小，因为我写了meta标签，页面有所缩放，但是其他元素是正常的。请问这个问题怎么解决？

<meta id="viewport" name="viewport" content="width=750,initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no">

const scale = window.innerWidth / 750 * 0.5

document.getElementById('viewport').content = `width=750,initial-scale=${scale},maximum-scale=${scale},minimum-scale=${scale},user-scalable=no`

你好，方便加下qq吗，有个picker组件的问题想问一下，有点小问题

861400261

无法build,怎么弄呢？

> cooking build


[[email protected]] - Loaded success: lint
fallbackLoader option has been deprecated - replace with "fallback"
loader option has been deprecated - replace with "use"
fallbackLoader option has been deprecated - replace with "fallback"
loader option has been deprecated - replace with "use"
fallbackLoader option has been deprecated - replace with "fallback"
loader option has been deprecated - replace with "use"
fallbackLoader option has been deprecated - replace with "fallback"
loader option has been deprecated - replace with "use"
fallbackLoader option has been deprecated - replace with "fallback"
loader option has been deprecated - replace with "use"
fallbackLoader option has been deprecated - replace with "fallback"
loader option has been deprecated - replace with "use"
[[email protected]] - Loaded success: vue2

(node:3112) [ESLINT_LEGACY_OBJECT_REST_SPREAD] DeprecationWarning: The 'parserOptions.ecmaFeatures.experimentalObjectRestSpread' option is deprecated. Use 'parserOptions.ecmaVersion' instead. (found in "elemefe")
[[email protected]] - Time: 2523ms
   Asset     Size  Chunks             Chunk Names
index.js  1.29 kB       0  [emitted]  index

ERROR in ./src/picker.vue

  ✘  http://eslint.org/docs/rules/  Parsing error: Unexpected token :  
  src\picker.vue:2:23
  


✘ 1 problem (1 error, 0 warnings)


Errors:
  1  http://eslint.org/docs/rules/null
 @ ./src/index.js 7:14-37
 @ multi ./src/index.js

ERROR in ./src/picker.vue
vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.
 @ ./src/index.js 7:14-37
 @ multi ./src/index.js

ERROR in ./src/picker.vue
[vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options.
 @ ./src/index.js 7:14-37
 @ multi ./src/index.js

ERROR in ./src/picker.vue
Module build failed: TypeError: Cannot read property 'parseComponent' of undefined
    at parse (D:\user\01375894\桌面\mint-picker\node_modules\@vue\component-compiler-utils\dist\parse.js:14:23)
    at Object.module.exports (D:\user\01375894\桌面\mint-picker\node_modules\vue-loader\lib\index.js:67:22)
 @ ./src/index.js 7:14-37
 @ multi ./src/index.js

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `cooking build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     d:\user\01375894\Application Data\npm-cache\_logs\2019-04-25T10_06_26_200Z-debug.log

在IOS版UC浏览器的兼容问题

下滑到一定距离，组件里的选项就恢复不上来了，直接固定在底部看不到选项了，请问怎么解决这bug

调用setSlotValues()方法改变slots后，选中picker内容无法高亮

onValuesChange(e,values){
                this.values = values;
                if (values[0]) {
                    e.setSlotValues(1, this.getCitys(values[0]))
                }