-
Notifications
You must be signed in to change notification settings - Fork 19
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
blankzhang
authored and
blankzhang
committed
May 13, 2024
1 parent
710af78
commit f8101a9
Showing
12 changed files
with
306 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
import { withInstall } from '../_util/withInstall'; | ||
import type { SFCWithInstall } from '../_util/interface'; | ||
import Link from './link'; | ||
|
||
export { linkProps } from './props'; | ||
export type { LinkProps } from './props'; | ||
|
||
type LinkType = SFCWithInstall<typeof Link>; | ||
export const FLink = withInstall<LinkType>(Link as LinkType); | ||
|
||
export default FLink; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,40 @@ | ||
import { computed, defineComponent } from 'vue'; | ||
import getPrefixCls from '../_util/getPrefixCls'; | ||
import { useTheme } from '../_theme/useTheme'; | ||
import { linkProps } from './props'; | ||
|
||
const prefixCls = getPrefixCls('link'); | ||
|
||
export default defineComponent({ | ||
name: 'FLink', | ||
props: linkProps, | ||
setup(props, { slots }) { | ||
useTheme(); | ||
|
||
const linkClass = computed(() => { | ||
const cls: string[] = [`${prefixCls}-container`, | ||
`${prefixCls}-type-${props.type}`, | ||
`${prefixCls}-size-${props.size}`, | ||
]; | ||
|
||
props.disabled && cls.push(`${prefixCls}-container-disabled`); | ||
props.underline && cls.push('underline'); | ||
return cls; | ||
}); | ||
|
||
const renderLink = () => { | ||
return ( | ||
<a href={props.href} target={props.target} class={linkClass.value}> | ||
{slots.icon ? (<div class="icon"> {slots.icon?.()}</div>) : null} | ||
{slots.default?.()} | ||
</a> | ||
); | ||
}; | ||
|
||
return () => ( | ||
<div class={prefixCls}> | ||
{renderLink()} | ||
</div> | ||
); | ||
}, | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,50 @@ | ||
import type { ComponentObjectPropsOptions, PropType } from 'vue'; | ||
import type { ExtractPublicPropTypes } from '../_util/interface'; | ||
|
||
export enum Size { | ||
LARGE = 'large', | ||
MIDDLE = 'middle', | ||
SMALL = 'small', | ||
} | ||
|
||
export enum Type { | ||
PRIMARY = 'primary', | ||
SUCCESS = 'success', | ||
DANGER = 'danger', | ||
WARNING = 'warning', | ||
} | ||
|
||
export enum TargetType { | ||
BLANK = '_blank', | ||
SELF = '_self', | ||
PARENT = '_parent', | ||
TOP = '_top', | ||
} | ||
|
||
export const linkProps = { | ||
size: { | ||
type: String as PropType<Size>, | ||
default: Size.MIDDLE, | ||
}, | ||
type: { | ||
type: String as PropType<Type>, | ||
default: Type.PRIMARY, | ||
}, | ||
underline: { | ||
type: Boolean, | ||
default: true, | ||
}, | ||
disabled: { | ||
type: Boolean, | ||
default: false, | ||
}, | ||
href: { | ||
type: String, | ||
}, | ||
target: { | ||
type: String as PropType<TargetType>, | ||
default: TargetType.SELF, | ||
}, | ||
} as const satisfies ComponentObjectPropsOptions; | ||
|
||
export type LinkProps = ExtractPublicPropTypes<typeof linkProps>; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,83 @@ | ||
@import '../../style/themes/index'; | ||
@import '../../style/mixins/index'; | ||
|
||
|
||
@link-prefix-cls: ~'@{cls-prefix}-link'; | ||
|
||
@link-height-small: @link-height-base - 2; | ||
@link-height-base: 20px; | ||
@link-height-large: @link-height-base + 2; | ||
|
||
.@{link-prefix-cls} { | ||
--f-link-height: @link-height-base; | ||
display: inline-flex; | ||
height: var(--f-link-height); | ||
line-height: var(--f-link-height); | ||
|
||
&-container { | ||
position: relative; | ||
display: inline-flex; | ||
align-items: center; | ||
height: var(--f-link-height); | ||
line-height: var(--f-link-height); | ||
cursor: pointer; | ||
|
||
.icon { | ||
display: flex; | ||
align-items: center; | ||
justify-content: center; | ||
margin-right: 4px; | ||
} | ||
|
||
&-disabled, &:hover { | ||
&::after { | ||
position: absolute; | ||
top: 0; | ||
left: 0; | ||
width: 100%; | ||
height: 100%; | ||
background-color: rgb(255 255 255 / 0.4); /* 半透明的白色 */ | ||
content: ""; | ||
pointer-events: none; /* 让鼠标事件穿透蒙层 */ | ||
} | ||
} | ||
|
||
&-disabled { | ||
cursor: not-allowed; | ||
} | ||
|
||
&:not(&-disabled).underline:hover { | ||
border-bottom: 1px solid currentcolor; | ||
} | ||
} | ||
|
||
&-size-middle { | ||
font-size: var(--f-font-size-base); | ||
} | ||
|
||
&-size-small { | ||
--f-link-height: @link-height-small; | ||
font-size: calc(var(--f-font-size-base) - 2px); | ||
} | ||
|
||
&-size-large { | ||
--f-link-height: @link-height-large; | ||
font-size: calc(var(--f-font-size-base) + 2px); | ||
} | ||
|
||
&-type-success { | ||
color: var(--f-success-color); | ||
} | ||
|
||
&-type-danger { | ||
color: var(--f-danger-color); | ||
} | ||
|
||
&-type-warning { | ||
color: var(--f-warning-color); | ||
} | ||
|
||
&-type-primary { | ||
color: var(--f-primary-color); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
import '../../style'; | ||
import './index.less'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,47 @@ | ||
<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> | ||
</FForm> | ||
|
||
<FDivider /> | ||
|
||
<FSpace> | ||
<FLink href="https://www.baidu.com" target="_blank" :underline="underline" :size="size" type="primary">primary</FLink> | ||
<FLink :underline="underline" :size="size" type="success">success</FLink> | ||
<FLink :underline="underline" :size="size" type="warning">warning</FLink> | ||
<FLink :underline="underline" :size="size" type="danger">danger</FLink> | ||
<FLink :underline="underline" disabled :size="size">disabled</FLink> | ||
</FSpace> | ||
</template> | ||
|
||
<script setup> | ||
import { ref } from 'vue'; | ||
const size = ref('middle'); | ||
const underline = ref(true); | ||
</script> | ||
|
||
<style scoped> | ||
.fes-link { | ||
margin-right: 8px; | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
<template> | ||
<FLink href="https://fesjs.mumblefe.cn/" target="_blank">Fes.js官网</FLink> | ||
</template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
<template> | ||
<FLink href="https://fes-design.mumblefe.cn/" target="_blank"> | ||
<template #icon> | ||
<ProductOutlined /> | ||
</template> | ||
首页 | ||
</FLink> | ||
</template> | ||
|
||
<script setup> | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,51 @@ | ||
# Link 链接 | ||
|
||
文字超链接 | ||
|
||
## 组件注册 | ||
|
||
```js | ||
import { FLink } from '@fesjs/fes-design'; | ||
|
||
app.use(FLink); | ||
``` | ||
|
||
## 代码演示 | ||
|
||
### 基础用法 | ||
|
||
:::demo | ||
base.vue | ||
::: | ||
|
||
### 跳转 | ||
通过设置`target`,设定跳转行为,同原生a标签的`target`属性 | ||
若`href`不设置,则点击不会发生任何跳转 | ||
|
||
:::demo | ||
href.vue | ||
::: | ||
|
||
### 图标 | ||
提供了图标的插槽 | ||
|
||
:::demo | ||
icon.vue | ||
::: | ||
|
||
## Props | ||
| 属性 | 说明 | 类型 | 默认值 | | ||
| --------- | --------------------------------------------------- | --------- | --------- | | ||
| size | 尺寸大小,可选`small`,`middle`,`large` | `string` | `middle` | | ||
| type | 类型,可选`primary`,`success`,`danger`,`warning` | `string` | `primary` | | ||
| underline | 展示下划线 | `boolean` | `true` | | ||
| disabled | 是否禁用 | `boolean` | `false` | | ||
| href | 跳转链接 | `string` | `-` | | ||
| target | 跳转行为,同原生target | `string` | `_self` | | ||
|
||
## Slots | ||
|
||
| 名称 | 说明 | 参数 | | ||
| ------- | -------- | ---- | | ||
| default | 链接内容 | `-` | | ||
| icon | 图标 | `-` | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters