Fes Design

Link 链接 ​

文字超链接

组件注册 ​

js
import { FLink } from '@fesjs/fes-design';

app.use(FLink);

代码演示 ​

基础用法 ​

play
<template>
    <FForm :labelWidth="60">
        <FFormItem label="尺寸:">
            <FRadioGroup
                v-model="size"
                :options="[
                    { label: 'small', value: 'small' },
                    { label: 'middle(默认)', value: 'middle' },
                    { label: 'large', value: 'large' },
                ]"
            />
        </FFormItem>
        <FFormItem label="下划线:">
            <FRadioGroup
                v-model="underline"
                :options="[
                    { label: '启用', value: true },
                    { label: '不启用(默认)', value: false },
                ]"
            />
        </FFormItem>
        <FFormItem label="禁用:">
            <FRadioGroup
                v-model="disabled"
                :options="[
                    { label: '是', value: true },
                    { label: '否(默认)', value: false },
                ]"
            />
        </FFormItem>
    </FForm>

    <FDivider />

    <FSpace>
        <FLink :underline="underline" :disabled="disabled" :size="size" type="default" @click="handleClick">default</FLink>
        <FLink :underline="underline" :disabled="disabled" :size="size" type="primary">primary</FLink>
        <FLink :underline="underline" :disabled="disabled" :size="size" type="success">success</FLink>
        <FLink :underline="underline" :disabled="disabled" :size="size" type="warning">warning</FLink>
        <FLink :underline="underline" :disabled="disabled" :size="size" type="danger">danger</FLink>
    </FSpace>
</template>

<script setup>
import { ref } from 'vue';

const size = ref('middle');

const underline = ref(false);

const disabled = ref(false);

const handleClick = () => {
    console.log('[link.base] handClick');
};
</script>

<style scoped>
</style>

跳转 ​

通过设置target，设定跳转行为，同原生 a 标签的target属性
若href不设置，则点击不会发生任何跳转

play
<template>
    <FSpace>
        <FLink href="https://fesjs.mumblefe.cn/" target="_blank">Fes.js官网</FLink>
        <FLink type="primary">
            <a href="https://fesjs.mumblefe.cn/" target="_blank">Fes.js官网</a>
        </FLink>
    </FSpace>
</template>

图标 ​

提供了图标的插槽

play
<template>
    <FLink href="https://fes-design.mumblefe.cn/">
        <template #icon>
            <ProductOutlined />
        </template>
        首页
    </FLink>
</template>

Props ​

属性说明类型默认值
size尺寸大小，可选small，middle，largestringmiddle
type类型，可选default，primary，success，danger，warningstringdefault
underline展示下划线booleanfalse
disabled是否禁用booleanfalse
href跳转链接string-
target跳转行为，同原生 targetstring-

Slots ​

名称说明参数
default链接内容-
icon图标-