vue 使用hook 对 chekbox 做简单的逻辑抽离，一个核心多套模板

现在的组件库都会包含些相同的基础组件功能大差不差只是不同UI规范下的具体实现。这些基础组件基本能满足大部分的开发需求。 但世上无银弹有时我们需要对组件做细微的调整可能是功能上的可能是UI上的例如 tab切换需要自定义标签头修改标签布局显示或隐藏等这些功能组件都是在大致的功能基础上做的定向扩展或修改。如果每次都重新编写一套逻辑就显得累赘繁琐。

在vue3提供hook的逻辑复用方式后我们能通过hook将公共逻辑抽离出来提高复用, 小的功能业务逻辑可以基础组件交互逻辑当然也可以。 这里就遇到的一个菜单的单选复选需求 为了能以后快速开发类似的组件功能。尝试将逻辑封装成hook。 以hook提供的API 在实现不同的组件。

需求

开始需要明确我们需要的基础功能点功能尽量基础才能保证通用性后续的功能也能在基础功能上做扩展.

• 单选
• 多选
• 跨组件通信

单选多选是基础能力, 跨组件是为了将实际的值控制与独立的 checkItem 分离这样checkItem可以不受 html 层级限制

可以多种不同的checkItem切换或嵌套使用

checkContainer -> [ checkItemType1, checkItemType2 ] 

使用例子

实现多选组件

容器组件 chekcboxContainer

<script setup>
import { useCheckboxContainer } from '@/hooks/useCheckbox'
import { toRefs } from 'vue'
import { PROVIDE_KEY } from './common'


const props = defineProps({value: {type: Array,default: () => ([])}
})


const emit = defineEmits(['input', 'change'])
const { value } = toRefs(props)
// 绑定 v-model 等事件
function selectHandler (selected) {emit('input', selected)emit('change', selected)
}
// 调用钩子逻辑
useCheckboxContainer({setCb: selectHandler,provideKey: PROVIDE_KEY,valueRef: value
})


</script>
<template><div class="container"><slot></slot></div>
</template>
<style lang="scss" scoped>
.container{overflow: hidden;border-radius: 4px;border: 1px solid #00385a;
}
</style> 

子项 chekcboxItem

<script setup>
import { ref } from 'vue'
import { useCheckboxItem } from '@/hooks/useCheckbox'
import { PROVIDE_KEY } from './common'


const emit = defineEmits(['change'])


const props = defineProps({label: {type: String,default: ''},value: {type: [Number, String],default: ''}
})


const { value, label } = toRefs(props)


const {active,pushItem,updateActive
} = useCheckboxItem({injectKey: PROVIDE_KEY,value: unref(value)
})


// 先容器注册子项
pushItem(unref(value), {value: unref(value),label: unref(label)
})


// 绑定激活样式类
const cls = computed(() => {return {active: unref(active)}
})
// 触发选择事件
function clickHandler(){updateActive(unref(value))emit('change', value)
}


</script>
<template><div class='checkbox-item' :class="cls" @click="clickHandler"><slot>{{ label }}</slot></div>
</template>
<style lang='scss' scoped>
.checkbox-item{padding: 8px 16px;border: 1px solid #eee;border-radius: 4px;color: #333;
}
.active{background: orange;color: #fff;
}


</style> 

组件使用

const selected = ref([])


<ChekcboxContainer v-model='selected'><ChekcboxItem value='red'> red </ChekcboxItem><ChekcboxItem value='orange'> orange </ChekcboxItem><ChekcboxItem value='blue'> blue </ChekcboxItem>
</ChekcboxContainer> 

useCheckbox 实现

这里将功能才分到 useCheckboxContainer useCheckboxItem 两个hook中, useCheckboxContainer 包含主要逻辑 useCheckboxItem 用于触发选择显示激活状态

import useBool from '../useBool'
import { shallowRef, inject, provide, computed, unref, watch } from 'vue'
import {unique,merge
} from './utils'

/**
 * 新旧响应值标识符防止无限循环更新组件内外值
 */
export const OLD_ACTIVE_VALUE_MAKR = Symbol('OLD_ACTIVE_VALUE_MAKR')
export const DEFAULT_SIGN = Symbol('DEFAULT_SIGN')
export const DEFAULT_CONTAINER_OPTIONS = {provideKey: DEFAULT_SIGN
}

/**
 * 多选容器钩子
 * @summary
 * 提供 1.多选 2.全选
 * 通过依赖注入保证子项与容器的通信。所以需要提供依赖注入标识
 * @param options
 * @param options.provideKey 依赖注入标识
 * @param options.valueRef props 接收的已选列表
 * @param options.setCb 更新已选值回调
 * @returns [ state, tools ]返回内部状态工具函数
 * state:
 *- allCheck 全选状态
 *- activeList 已选列表
 * tools:
 *- closeValueWatch 清除 valueRef 监听
 *- updateActive 更新当前已选项 1.已选列表无已选时添加。 2.已选列表存在时移除
 *- pushItem 向容器中注册子项信息
 *- checkAll 全选
 *- clearAll 全清空
 *- setAllCheck allCheck设为true
 *- removeAllCheck allCheck设为false
 *- updateAllCheck 通过已选项更新 allCheck 状态
 *- closeAllCheckStatusWatch 清除 allCheck 监听
 *
 */
export function useCheckboxContainer (options = {}) {const { provideKey, valueRef, setCb } = merge(DEFAULT_CONTAINER_OPTIONS, options)const activeList = shallowRef([])const [allCheck, { setTrue: setAllCheck, setFalse: removeAllCheck }] = useBool()const allItem = new Map([])function pushItem (key, item) {allItem.set(key, item)}function checkAll () {activeList.value = [...allItem.keys()]setAllCheck()}function clearAll () {activeList.value = []removeActive()}function addSign (list) {list[OLD_ACTIVE_VALUE_MAKR] = truereturn list}function hasItem (item) {return unref(activeList).includes(item)}function addActive (value) {activeList.value = unique([...unref(activeList), value])}function removeActive (value) {activeList.value = unref(activeList).filter(i => i !== value)}function updateActive (value) {hasItem(value) ? removeActive(value) : addActive(value)updateAllCheck()setCb && setCb(addSign([...unref(activeList)]))}function updateAllCheck () {allCheck.value = unref(activeList).length === [...allItem.keys()].length}const closeAllCheckStatusWatch = watch(allCheck, (newVal, oldVal) => {if (newVal === oldVal) {return}newVal ? checkAll() : clearAll()})// 同步预设值 or 外部动态修改const closeValueWatch = watch(valueRef, (newVal) => {if (newVal[OLD_ACTIVE_VALUE_MAKR] && newVal.length === unref(activeList).length) {return}activeList.value = [...unref(valueRef)]}, { immediate: true })provide(provideKey, {hasItem,activeList,updateActive,pushItem})return [{allCheck,activeList},{closeValueWatch,updateActive,pushItem,checkAll,clearAll,setAllCheck,removeAllCheck,updateAllCheck,closeAllCheckStatusWatch}]
}


export const DEFAULT_ITEM_OPTIONS = {injectKey: DEFAULT_SIGN
}

/**
 * 多选子项钩子
 * @param options
 * @param options.injectKey 依赖注入标识
 * @param options.value 当前项值or标识
 * @returns
 * - active 当前项是否已选
 * - hasItem 已选判断函数
 * - activeList 已选列表
 * - updateActive 更新已选项
 * - pushItem 向容器注册子项
 */
export function useCheckboxItem (options = {}) {const _options = merge(DEFAULT_ITEM_OPTIONS, options)const {injectKey,value} = _optionsconst injecteStore = inject(injectKey)const active = computed(() => {return injecteStore.hasItem(value)})return {active,...injecteStore}
} 

utils

export function unique (list) {return Array.from(new Set(list))
}


export function isUndefined (v) {return v === undefined
}


// 混合非 undefined 属性
export function merge (source = {}, target = {}) {const keys = new Set([...Object.keys(source), ...Object.keys(target)])return [...keys].reduce((acc, prop) => {return {...acc,[prop]: isUndefined(source[prop]) ? target[prop] : source[prop]}}, {})
} 

最后

整理了一套《前端大厂面试宝典》包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法一共201道面试题并对每个问题作出了回答和解析。

有需要的小伙伴可以点击文末卡片领取这份文档无偿分享

部分文档展示

文章篇幅有限后面的内容就不一一展示了

有需要的小伙伴可以点下方卡片免费领取