vue3+ts+element 從新封裝el-link 修改默認(rèn)參數(shù) 以及跳轉(zhuǎn)路由使用vueRouter跳轉(zhuǎn) 以及常用路徑封裝

注釋已經(jīng)寫好了 如果哪里有問題 或者寫法不對 請指教 謝謝

<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'>
// 參數(shù)
const ElLinkDefaultProps: ElLinkDefaultPropsKey = ['type', 'underline', 'disabled', 'href', 'icon']
//常用跳轉(zhuǎn)格式
const toMap = (): Map<string, any> =>
    new Map([
        [
            'login',
            {
                path: '/user/login',
                query: '',
                param: '',
            },
        ],
        [
            'test',
            {
                path: '/tstt',
            },
        ],
    ])
const componetn = defineComponent({
    name: 'ElLink',
    props: {
        //自帶參數(shù)
        ...ElLink.props,
        // 修改默認(rèn)參數(shù)
        underline: {
            type: Boolean,
            default: false,
        },
        href: {
            type: String,
            default: '#',
        },
        // 自定義參數(shù)
        // 是否在新窗口打開
        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
            }
            // 傳遞參數(shù)
            let routeData = { query: query }
            if (href) {
                // 如果 href 路由存在
                routeData['path'] = href
            } else if (name) {
                // 如果 name 存在
                routeData['name'] = name
                routeData['params'] = params
            } else if (to) {
                // 自定義路由跳轉(zhuǎn)
                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]
            })
            //自設(shè)屬性
            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>