Picker

Selector component for forms

Basic Usage

example

<press-picker
   v-if="pickerOption.tip.show"
   :title="pickerOption.tip.title"
   :arrowIcon="pickerOption.tip.arrowIcon"
   :list="pickerOption.tip.list"
   :tip="pickerOption.tip.tip"
   :current="pickerOption.tip.current"
   @confirm="pickerOption.tip.confirm"
   @cancel="pickerOption.tip.cancel"
/>

export default {
   data() {
     return {
        pickerOption: {
         tip: {
           show: false,
           title: 'Ban bit setting',
           tip: 'After the game is created, it can be set precisely according to the round of the game. ',
           arrowIcon: false,
           list: bpList,
           current: { label: bpList[0].label, value: 1 },
           confirm: (boItem) => {
             this.pickerOption.tip.show = false;
           },
           cancel: () => {
             this.pickerOption.tip.show = false;
           },
         },
       },
     }
   },
   methods: {
     onShowPicker(type) {
       if (this. pickerOption[type]) {
         this.pickerOption[type].show = true;
       }
     },
     onConfirm(...args) {
       this.pickerOption[args[1]].show = false;
     },
     onChange(...args) {
       console.log('onChange.args', args);
     },
   }
},

Function call

To support functional calls, you need to pre-embed components under the page, and specify mode as functional.

<press-picker
   :id="PRESS_PICKER_ID"
   mode="functional"
/>

export default {
   methods: {
      onShowFunctionalPicker() {
       const { bpList } = this;
       showFunctionalComponent. call(this, {
         selector: `#${PRESS_PICKER_ID}`,
         list: bpList,
         arrowIcon: true,
         current: { label: bpList[1].label, value: 3 },
         title: this.t('banSet'),
         tip: this.t('tipContent'),
       }).then((item) => {
         this.onSuccessTip(item);
       })
         .catch(() => {
           this.onTip('cancel');
         });
     },
   }
}

API

Props

property name	type	default value	description
title	string	-	title
arrow-icon	boolean	false	Whether the upper left corner should be shown as a back arrow
list	Array	[]	data list
current	Object	null	currently selected item
tip	string	-	tip
mode	string	-	pass functional when calling a function

Events

event name	description	return value
cancel	Click to cancel	-
confirm	Click OK	-

The following properties are deprecated (v0.7.32):

Type	Old	New
Prop	show-back-arrow	arrow-icon
Prop	select-list	list
Prop	select-item	current
Event	onClickConfirm	confirm
Event	onRemove	cancel

Theme customization

--picker-background-color：

--picker-toolbar-height：

--picker-title-font-size：

--picker-action-padding：

--picker-action-font-size：

--picker-confirm-action-color：

--picker-cancel-action-color：

--picker-option-font-size：

--picker-option-text-color：

--picker-loading-icon-color：

--picker-loading-mask-color：

--picker-option-disabled-opacity：

--picker-option-selected-text-color：