selectionsHook Vue 选择器 hook

xx.gif

使用例子

代码语言：javascript复制

<template>
  <div class="home">

    <div>
      <div style='margin: 20% auto; width: 600px' title=''>

        <ul style='margin-bottom: 20px'>
          <li> all selected: {{ statusIcon(allSelected) }} </li>
          <li> none selected: {{ statusIcon(noneSelected) }} </li>
          <li> partially selected: {{ statusIcon(partiallySelected) }} </li>
        </ul>
        
        <CheckboxGroup style='margin-bottom: 20px' v-model="selected" >
          <Checkbox v-for='item of list' :key='item' :label='item'>
          </Checkbox>
        </CheckboxGroup> 
        
        <ButtonGroup >
          <Button @click='toggleAll' > toggleAll </Button>
          <Button @click='selectAll' > selectAll </Button>
          <Button @click='unSelectAll' > unSelectAll </Button>
        </ButtonGroup>

        <ButtonGroup>
          <Button @click='select(list[0])' > select {{ list[0] }} </Button>
          <Button @click='unSelect(list[0])' > unSelect {{ list[0] }} </Button>
          <Button @click='toggle(list[0])' > toggle {{ list[0] }} </Button>
          <Button @click='() => selected = [ list[1] ] ' > set selected </Button>
        </ButtonGroup>
        
      
      </div>
    </div>
    
  </div>
</template>

<script>
// import { ref } from '@vue/composition-api'
import selectionsHook from '@/hooks/selectionsHook'


export default { 

  setup(){

    const list = [
      'coco',
      'jeck',
      'rogen'
    ]
    
    const statusIcon = status => status ? '✅'  : '❎'


    return {
      ...selectionsHook(list, [], { statusVisibal:true }),
      list,
      statusIcon,
    }
    

  }

}
</script>

实现

代码语言：javascript复制

import { computed } from '@vue/composition-api'
import setHook from './setHook'

const defaultOptions = {
    statusVisibal: false
}

/**
 * 选择器 hook
 * @param { Array } items 列表配置
 * @param { Array | undefined } defaultSelected 默认设置 
 * @param { Object } options 方法配置
 * @summary 基于 setHook 实现的选择器hook，支持多选，单选 全选切换, 及状态显示
 * 
 * @example
 * const list = [ '中国台湾', '中国香港', '中国澳门' ]
 * const { selected, isSelected } = selectionsHook(list)
 * 
 */
export default function selectionsHook(items, defaultSelected=[], options={}){
    const { statusVisibal } = Object.assign({}, defaultOptions, options)
    const [ selectedSet, setUtils ] = setHook(defaultSelected) 
    
    const isSelected = item => selectedSet.value.has(item)

    const select = item => setUtils.add(item)
    
    const unSelect = item => setUtils.remove(item)

    const toggle= item => {
        selectedSet.value.has(item) ? unSelect(item) : select(item)
    } 

    const selectAll = () => setUtils.update(items)

    const unSelectAll = () => setUtils.update([])

    
    let groupControl = {} 

    if(statusVisibal){

        const noneSelected =  computed(() => items.every(item => !selectedSet.value.has(item)) )

        const allSelected = computed(() => items.every(item => selectedSet.value.has(item)))
    
        const partiallySelected = computed(() => !noneSelected.value && !allSelected.value)
    
        const toggleAll = () => allSelected.value ? unSelectAll() : selectAll()
        
        
        groupControl = {
            noneSelected,
            allSelected,
            partiallySelected,
            toggleAll
        }
    }
    
  
    const selected = computed({
        get(){
            return [...selectedSet.value]
        },

        set(data){
            setUtils.setInit(data)
            setUtils.reset()
        }
    })


    return {
        selected,
        isSelected,
        select,
        unSelect,
        toggle,
        selectAll,
        unSelectAll,
        ...groupControl
    }

}

gif

0 人点赞