123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138 |
- import baseComponent from '../helpers/baseComponent'
- import classNames from '../helpers/classNames'
- const defaults = {
- prefixCls: 'wux-select',
- value: '',
- options: [],
- multiple: false,
- max: -1,
- toolbar: {
- title: '请选择',
- cancelText: '取消',
- confirmText: '确定',
- },
- onChange() {},
- onConfirm() {},
- onCancel() {},
- }
- const getSelectIndex = ({ value = '', options = [], multiple = false }) => {
- const origins = options.map((n) => n.value || n)
- if (!multiple) {
- return origins.indexOf(value)
- }
- return (value || []).map((n) => origins.indexOf(n))
- }
- baseComponent({
- useFunc: true,
- data: defaults,
- computed: {
- classes() {
- const { prefixCls } = this.data
- const wrap = classNames(prefixCls)
- const toolbar = `${prefixCls}__toolbar`
- const inner = `${prefixCls}__inner`
- const cancel = classNames(`${prefixCls}__button`, {
- [`${prefixCls}__button--cancel`]: true
- })
- const confirm = classNames(`${prefixCls}__button`, {
- [`${prefixCls}__button--confirm`]: true
- })
- const hover = `${prefixCls}__button--hover`
- const title = `${prefixCls}__title`
- const scrollView = `${prefixCls}__scroll-view`
- return {
- wrap,
- toolbar,
- inner,
- cancel,
- confirm,
- hover,
- title,
- scrollView,
- }
- },
- },
- methods: {
- /**
- * 打开
- */
- open(opts = {}) {
- const options = this.$$mergeOptionsAndBindMethods(Object.assign({}, defaults, opts, {
- max: parseInt(opts.max),
- }))
- const index = getSelectIndex(options)
- // scroll into view
- let activeIndex = Array.isArray(index) ? index[index.length - 1] : index
- if (activeIndex === -1 || activeIndex === undefined) {
- activeIndex = 0
- }
- activeIndex = `select-${activeIndex}`
- this.$$setData({ in: true, ...options, index, activeIndex })
- },
- /**
- * 关闭
- */
- close(callback) {
- this.$$setData({ in: false })
- if (typeof callback === 'function') {
- const { value, index, options } = this.data
- callback.call(this, value, index, options)
- }
- },
- /**
- * 点击确定按钮时的回调函数
- */
- onConfirm() {
- this.close(this.fns.onConfirm)
- },
- /**
- * 点击取消按钮时的回调函数
- */
- onCancel(e) {
- this.close(this.fns.onCancel)
- },
- /**
- * checkbox change 事件触发的回调函数
- */
- onCheckboxChange(e) {
- const oldValue = this.data.value
- const { value: newValue, checked } = e.detail
- const value = checked ? [...oldValue, newValue] : oldValue.filter((n) => n !== newValue)
- const index = getSelectIndex({ ...this.data, value })
- this.onChange(value, index)
- },
- /**
- * radio change 事件触发的回调函数
- */
- onRadioChange(e) {
- const { value, index } = e.detail
- this.onChange(value, index)
- },
- /**
- * 选择完成后的回调函数
- */
- onChange(value, index) {
- const { options, max, multiple } = this.data
- // 限制最多选择几项
- if (multiple && max >= 1 && max < value.length) return
- this.$$setData({ value, index })
- if (typeof this.fns.onChange === 'function') {
- this.fns.onChange.call(this, value, index, options)
- }
- },
- },
- })
|