element-ui element-plus checkbox - 分析

源代码地址-checkbox
源代码地址-checkbox-group
源代码地址-checkbox-button

version:element-plus 1.0.1-beta.0

useCheckbox.ts

import {
   
   
  ref,
  computed,
  inject,
  getCurrentInstance,
  watch,
} from 'vue'
import {
   
    toTypeString } from '@vue/shared'
import {
   
    UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
import {
   
    useGlobalConfig } from '@element-plus/utils/util'
import {
   
    PartialReturnType } from '@element-plus/utils/types'
import {
   
    elFormKey, elFormItemKey } from '@element-plus/form'
import {
   
    ICheckboxGroupInstance, ICheckboxProps } from './checkbox.type'

import type {
   
    ElFormContext, ElFormItemContext } from '@element-plus/form'

export const useCheckboxGroup = () => {
   
   
  // 拿到初始化的element全局配置
  const ELEMENT = useGlobalConfig()
  // 拿到elForm中provide的数据
  const elForm = inject(elFormKey, {
   
   } as ElFormContext)
  // 拿到elFormItem中provide的数据
  const elFormItem = inject(elFormItemKey, {
   
   } as ElFormItemContext)
  // 拿到 checkboxGroup 的 provide
  const checkboxGroup = inject<ICheckboxGroupInstance>('CheckboxGroup', {
   
   })
  // 判断是不是group
  const isGroup = computed(() => checkboxGroup && checkboxGroup?.name === 'ElCheckboxGroup')
  const elFormItemSize = computed(() => {
   
   
    return elFormItem.size
  })
  return {
   
   
    isGroup,
    checkboxGroup,
    elForm,
    ELEMENT,
    elFormItemSize,
    elFormItem,
  }
}

const useModel = (props: ICheckboxProps) => {
   
   
  let selfModel = false
  const {
   
    emit } = getCurrentInstance()
  const {
   
    isGroup, checkboxGroup } = useCheckboxGroup()
  const isLimitExceeded = ref(false)
  // 如果是checkboxGroup 那么如果checkboxGroup.modelValue.value存在就取，不然就取props传进来的modelValue
  const store = computed(() => checkboxGroup ? checkboxGroup.modelValue?.value : props.modelValue)
  const model = computed({
   
   
    // ?? Null 判断运算符
    // ?? 只有运算符左侧的值为null或undefined时，才会返回右侧的值
    get() {
   
   
      return isGroup.value
        ? store.value
        : props.modelValue ?? selfModel
    },

    set(val: unknown) {
   
   
      if (isGroup.value && Array.isArray(val)) {
   
   
        isLimitExceeded.value = false

        if (checkboxGroup.min !== undefined && val.length < checkboxGroup.min.value) {
   
   
          isLimitExceeded.value = true
        }
        if (checkboxGroup.max !== undefined && val.length > checkboxGroup.max.value) {
   
   
          isLimitExceeded.value = true
        }

        isLimitExceeded.value === false && checkboxGroup?.changeEvent?.(val)
      } else {
   
   
        emit(UPDATE_MODEL_EVENT, val)
        selfModel = val as boolean
      }
    },
  })

  return {
   
   
    model,
    isLimitExceeded,
  }
}

const useCheckboxStatus = (props: ICheckboxProps, {
   
    model }: PartialReturnType<typeof useModel>) => {
   
   
  const {
   
    isGroup, checkboxGroup, elFormItemSize, ELEMENT } = useCheckboxGroup()
  // 默认false
  const focus = ref(false)
  // 读取size 就近原则
  const size = computed<string | undefined>(() => checkboxGroup?.checkboxGroupSize?.value || elFormItemSize.value || ELEMENT.size)
  // 是否选中状态
  const isChecked = computed(() => {
   
   
    const value = model.value
    if (toTypeString(value) === '[object Boolean]') {
   
   
      // boolean 类型直接返回
      return value
    } else if (Array.isArray(value)) {
   
   
      // 数组类型 返回 数组中是否存在props.label