Vm-picker NPM | npm.io

vm-picker

适用于移动端的vue的picker组件，无依赖，轻量

安装

npm i vm-picker --save

引入插件

全局引入

import Vue from 'vue'
import VPicker from 'vm-picker'

Vue.use(VPicker)

局部引入

import {VPicker, VPickerModal} from 'vm-picker'

基本用法

使用组件

// 基础组件
<v-picker :options="list" v-model="checked"></v-picker>

// 弹出层
<v-picker-modal :visible.sync="visible"
                :options="list"
                title="这是组件调用"
                :value="checked"
                @change="change"
                @confirm="confirm"
                @cancel="cancel"></v-picker-modal>

函数式调用

const picker = this.$picker({
    options: list,
    value: ['1-1', '2-2', '3-3', '4-4'],
    confirmText: 'Confirm',
    cancelText: 'Cancel',
    title: 'title',
    mask: false, // 点击遮罩层是否关闭 默认 true
    change: e => {
        console.log('触发change', e)
        // 设置第一列
        picker.setOptions(0, [{
            label: '12312',
            value: '12312',
        }])
    },
    confirm: e => {
        console.log('点击了确定', e)
    },
    cancel: () => {
        console.log('点击了取消')
    }
})

API

`Picker`

`Props` 属性

参数	说明	类型	默认值
`value (v-model)`	选中的值	Array	[]
`options`	数据列表	Array	[]

`Events`方法

事件名称	说明	回调参数
`input`	监听变化事件	对应选中的value
`change`	监听变化事件	回调参数示例.示例1

input 和 change 只是回调的数据不同

`PickerModal`

Props 属性

参数	说明	类型	默认值
`value`	选中的值	Array	[]
`options`	数据列表	Array	[]
`visible.sync`	控制显示	Boolean	false
`mask`	点击遮罩层是否关闭	Boolean	true
`confirmText`	确认按钮文字	String	'确定'
`cancelText`	取消按钮文字	String	'取消'
`title`	弹出层标题	String	''
`appendBody`	是否将弹出层插入body中	Boolean	true

`Events`方法

事件名称	说明	回调参数
`change`	监听变化事件	回调参数示例.示例1
`confirm`	点击确认按钮	回调参数示例.示例1
`cancel`	点击取消按钮	无

`setOptions(index,data)`

用于动态改变options的值

注：此方法仅在函数式调用时使用

名称	说明	类型
index	对应options中列的下标	Number
options	要被替换的值	Array

picker.setOptions(0, [{
    label: '12312',
    value: '12312', 
}])

`options`示例

[
    [
        {label: "选项1-1", value: "1-1"},
        {label: "选项1-2", value: "1-2"},
        {label: "选项1-3", value: "1-3"},
        {label: "选项1-4", value: "1-4"}
    ],
    [
        {label: "选项2-1", value: "2-1"},
        {label: "选项2-2", value: "2-2"},
        {label: "选项2-3", value: "2-3"},
        {label: "选项2-4", value: "2-4"}
    ],
    [
        {label: "选项3-1", value: "3-1"},
        {label: "选项3-2", value: "3-2"},
        {label: "选项3-3", value: "3-3"},
        {label: "选项3-4", value: "3-4"}
    ],
    [
        {label: "选项4-1", value: "4-1"},
        {label: "选项4-2", value: "4-2"},
        {label: "选项4-3", value: "4-3"},
        {label: "选项4-4", value: "4-4"}
    ]
]

回调参数示例

示例1

{
    value:[
        {
            label: "选项1-2",
            value: "1-2"
        },
        {
            label: "选项2-2",
            value: "2-2"
        },
        {
            label: "选项3-3",
            value: "3-3"
        },
        {
            label: "选项4-4",
            value: "4-4"
        }
    ],
    checked:[1, 1, 2, 3]
}

vue picker vm-picker vue-picker 选择器移动端选择器

vue

@everything-registry/sub-chunk-3065

5 years ago

5 years ago

5 years ago

5 years ago