处理驼峰命名的封装

/**
 * @description 处理驼峰命名
 * @param value string (modifyHumpNaming)
 * @returns string  (modify-hump-naming)
 */
export const modifyHumpNaming = (value: string): string => {
    return value.replace(/[A-Z]/g, (match: string) => '-' + match.toLowerCase())
}

复制文本函数的封装

//引入处理驼峰命名函数
import {modifyHumpNaming} from '@/utils'
//引入message组件
import {message} from 'ant-design-vue'
/**
 * @description 文本复制
 * @param value string
 */
export const useCopy = async (value: string) => {

    //--第一种方法（已废弃）

    // //创建一个input节点
    // const input = document.createElement('input')
    // //给input赋值
    // input.value = `<bo-${modifyHumpNaming(value)} />`
    // //添加到页面上
    // document.body.appendChild(input)
    // //选中input文本内容
    // input.select()
    // //调用复制函数
    // const copy= document.execCommand('Copy')
    // //删除节点
    // document.body.removeChild(input)
    // //判断是否复制成功  
    // if(copy) message.success('复制成功')
    // else  message.error('复制失败')
    // return copy

    //--第二种方法

    await navigator.clipboard.writeText(`<bo-${modifyHumpNaming(value)} />`)
    const copy =await navigator.clipboard.readText()
    //判断是否复制成功  
    if(copy) message.success('复制成功')
    else  message.error('复制失败')
}

下面是我封装的组件功能展示