element-ui element-plus link - 分析

最新推荐文章于 2025-03-25 16:59:03 发布

huxianc

最新推荐文章于 2025-03-25 16:59:03 发布

阅读量1.3k

点赞数

分类专栏： vue3 element-ui 文章标签： vue elementui

本文链接：https://blog.youkuaiyun.com/qq_33221861/article/details/111582463

版权

element-ui 同时被 2 个专栏收录

26 篇文章

订阅专栏

15 篇文章

订阅专栏

源代码地址 - link

version:element-plus 1.0.1-beta.0

link组件相对比较简单

<template>
  <a
    :class="[
      'el-link',
      type ? `el-link--${type}` : '',
      disabled && 'is-disabled',
      underline && !disabled && 'is-underline'
    ]"
    :href="disabled ? null : href"
    @click="handleClick"
  >
    <!-- 传入 icon 才会渲染 也只支持element-ui自己的icon -->
    <i v-if="icon" :class="icon"></i>
    <!-- 默认插槽 -->
    <span v-if="$slots.default" class="el-link--inner">
      <slot></slot>
    </span>
    <!-- 自定义最后的具名插槽 icon -->
    <!-- 但是我看官方示例直接在默认插槽里面用的 i 标签 -->
    <slot v-if="$slots.icon" name="icon"></slot>
  </a>
</template>

<script lang='ts'>
import { defineComponent, PropType } from 'vue'

type ILinkType = PropType<'primary' | 'success' | 'warning' | 'info' | 'danger' | 'default'>

export default defineComponent({
  name: 'ElLink',
  props: {
    type: {
      type: String as ILinkType,
      default: 'default',
      validator: (val: string) => {
        return ['default', 'primary', 'success', 'warning', 'info', 'danger'].includes(val)
      },
    },
    underline: {
      type: Boolean,
      default: true,
    },
    disabled: { type: Boolean, default: false },
    href: { type: String, default: '' },
    icon: { type: String, default: '' },
  },
  emits: ['click'],
  setup(props, { emit }) {

    function handleClick(event: Event) {
      if (!props.disabled) {
        emit('click', event)
      }
    }

    return {
      handleClick,
    }
  },
})
</script>