vue3+ts+element 从新封装el-link 修改默认参数 以及跳转路由使用vueRouter跳转 以及常用路径封装

vue3+ts+element 从新封装el-link 修改默认参数 以及跳转路由使用vueRouter跳转 以及常用路径封装

注释已经写好了 如果哪里有问题 或者写法不对 请指教 谢谢

<script lang="ts">
import { defineComponent, h } from  vue 
import { ElLink } from  element-plus 
import { Router, useRouter } from  vue-router 

type ElLinkDefaultPropsKey = Array< type  |  underline  |  disabled  |  href  |  icon >
// 参数
const ElLinkDefaultProps: ElLinkDefaultPropsKey = [ type ,  underline ,  disabled ,  href ,  icon ]
//常用跳转格式
const toMap = (): Map<string, any> =>
    new Map([
        [
             login ,
            {
                path:  /user/login ,
                query:   ,
                param:   ,
            },
        ],
        [
             test ,
            {
                path:  /tstt ,
            },
        ],
    ])
const componetn = defineComponent({
    name:  ElLink ,
    props: {
        //自带参数
        ...ElLink.props,
        // 修改默认参数
        underline: {
            type: Boolean,
            default: false,
        },
        href: {
            type: String,
            default:  # ,
        },
        // 自定义参数
        // 是否在新窗口打开
        openInNewWindow: {
            type: Boolean,
            default: false,
        },
        //router name
        name: {
            type: String,
            default:   ,
        },
        // router query
        query: {
            type: Object,
            default: () => ({}),
        },
        // router parms
        parmas: {
            type: Object,
            default: () => ({}),
        },
        // 是否记录路由
        isRecordRouter: {
            type: Boolean,
            default: false,
        },
        // 返回上一级页面
        go: {
            type: Number,
            default: 0,
        },
        //常用路由封装
        to: {
            type: String,
            default:   ,
        },
    },
    setup(props, { slots }) {
        //路由
        const router: Router = useRouter()
        //跳页面
        const toPage = (): boolean => {
            const { openInNewWindow, href, name, query, params, isRecordRouter, go, to } = props
            // 返回上一级页面
            if (go !== 0) {
                router.go(go)
                return false
            }
            //是否在新窗口中打开
            if (openInNewWindow) {
                return true
            }
            // 传递参数
            let routeData = { query: query }
            if (href) {
                // 如果 href 路由存在
                routeData[ path ] = href
            } else if (name) {
                // 如果 name 存在
                routeData[ name ] = name
                routeData[ params ] = params
            } else if (to) {
                // 自定义路由跳转
                routeData = toMap().get(to)
            }
            if (isRecordRouter) {
                // 不记录路由
                router.replace(routeData)
            } else {
                // 记录路由
                router.push(routeData)
            }
            return false
        }
        //获取指定props
        const getProps = () => {
            const propsData = {}
            // 组件属性
            ElLinkDefaultProps.forEach(item => {
                propsData[item] = props[item]
            })
            //自设属性
            if (props.openInNewWindow) {
                propsData[ target ] =  _blank 
            }
            return propsData
        }
        return {
            toPage,
            getProps,
        }
    },
    render(_ctx: any) {
        return h(
            ElLink,
            {
                ..._ctx.getProps(),
                onclick: _ctx.toPage,
            },
            _ctx.$slots
        )
    },
})
export default componetn
</script>