当前位置：首页 > article >正文

elementPlus-button组件二次封装

article 2025/1/27 4:05:28

elementPlus-button组件二次封装

// 类型与图标映射
const TYPE_ICON_MAP = {
  add: { type: 'primary', icon: 'CirclePlus' },
  import: { type: 'default', icon: 'Upload' },
  export: { type: 'default', icon: 'Download' },
  delete: { type: 'danger', icon: 'Delete' }
} as const

// 根据 props.type 与 props.icon 计算出最终类型与图标
const computedProps = computed(() => {
  const fallback = { type: props.type, icon: props.icon || '' }
  const entry = TYPE_ICON_MAP[props.type] || fallback
  const icon = innerLoading.value ? 'Loading' : (TYPE_ICON_MAP[props.type] ? entry.icon : props.icon || '')
  return {
    type: entry.type,
    icon
  }
})

节流约束

通过接收的time来进行节流限制，并且在节流触发时会激活内置的loading状态，围绕这个loading状态来展开节流，之后将点击事件暴露给父组件并移除焦点

const handleClick = (event: MouseEvent) => {
  if (innerLoading.value) return
  if (props.time) {
    innerLoading.value = true
    setTimeout(() => {
      innerLoading.value = false
    }, props.time)
  }
  emits('click', event)
  buttonRef.value?.ref?.blur()
}

节流过程中会持续loading和disabled

const attrs = useAttrs()
const isDisabled = computed(() => {
  return innerLoading.value || attrs.disabled
})

loading联动

这里的loading是一种状态，采用内部定义，与disabled、节流函数和loading图标联动

在节流过程中自动触发loading状态，loading状态会将button设置成disabled状态并添加loading的icon图标。

const innerLoading = ref(false)

const computedProps = computed(() => {
  //省略
  const icon = innerLoading.value ? 'Loading' : (TYPE_ICON_MAP[props.type] ? entry.icon : props.icon || '')
  //省略
})

const buttonRef = ref<any>(null)

const handleClick = (event: MouseEvent) => {
  if (innerLoading.value) return
  if (props.time) {
    innerLoading.value = true //loading
    setTimeout(() => {
      innerLoading.value = false //loading
    }, props.time)
  }
  emits('click', event)
  buttonRef.value?.ref?.blur()
}

const attrs = useAttrs()
const isDisabled = computed(() => innerLoading.value || attrs.disabled)

源代码

<template>
  <el-button
    ref="buttonRef"
    v-bind="$attrs"
    :type="computedProps.type"
    :icon="computedProps.icon"
    :disabled="isDisabled"
    @click="handleClick"
  >
    <slot />
  </el-button>
</template>

<script setup lang="ts" name="TButton">
import { ref, computed, useAttrs } from 'vue'
import type { PropType } from 'vue'

type ButtonType =
  | 'add'
  | 'import'
  | 'export'
  | 'delete'
  | 'default'
  | 'primary'
  | 'success'
  | 'warning'
  | 'danger'
  | 'info'

// 内部loading状态
const innerLoading = ref(false)

const props = defineProps({
  time: {
    type: Number,
    default: undefined
  },
  type: {
    type: String as PropType<ButtonType>,
    default: 'default'
  },
  icon: {
    type: String,
    default: ''
  }
})

// 事件
const emits = defineEmits(['click'])

// 类型与图标映射
const TYPE_ICON_MAP = {
  add: { type: 'primary', icon: 'CirclePlus' },
  import: { type: 'default', icon: 'Upload' },
  export: { type: 'default', icon: 'Download' },
  delete: { type: 'danger', icon: 'Delete' }
} as const

// 根据 props.type 与 props.icon 计算出最终类型与图标
const computedProps = computed(() => {
  const fallback = { type: props.type, icon: props.icon || '' }
  const entry = TYPE_ICON_MAP[props.type] || fallback
  const icon = innerLoading.value ? 'Loading' : (TYPE_ICON_MAP[props.type] ? entry.icon : props.icon || '')
  return {
    type: entry.type,
    icon
  }
})

const buttonRef = ref<any>(null)

const handleClick = (event: MouseEvent) => {
  if (innerLoading.value) return
  if (props.time) {
    innerLoading.value = true
    setTimeout(() => {
      innerLoading.value = false
    }, props.time)
  }
  emits('click', event)
  buttonRef.value?.ref?.blur()
}

const attrs = useAttrs()
const isDisabled = computed(() => innerLoading.value || attrs.disabled)
</script>

查看全文

http://www.kler.cn/a/517637.html