Merge pull request #814 from WeBankFinTech/fix-link-style

feat(Link): 组件交互及样式优化
WeBankFinTech · May 23, 2024 · 12eba56 · 12eba56
2 parents f8e7d02 + 8e0f4fc
commit 12eba56
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 92 deletions.
diff --git a/components/link/link.tsx b/components/link/link.tsx
@@ -8,32 +8,32 @@ const prefixCls = getPrefixCls('link');
 export default defineComponent({
     name: 'FLink',
     props: linkProps,
-    setup(props, { slots }) {
+    emits: ['click'],
+    setup(props, { slots, emit }) {
         useTheme();
 
         const linkClassList = computed(() => {
-            const clsList = [`${prefixCls}-content`,
-                 `${prefixCls}-content-type-${props.type}`,
-                 `${prefixCls}-content-size-${props.size}`,
+            const clsList = [
+                `${prefixCls}`,
+                `${prefixCls}-type-${props.type}`,
+                `${prefixCls}-size-${props.size}`,
             ];
-            props.disabled && clsList.push(`${prefixCls}-content-disabled`);
-            props.underline && clsList.push('underline');
+            props.disabled && clsList.push(`is-disabled`);
+            props.underline && clsList.push('is-underline');
             return clsList;
         });
 
-        const renderLink = () => {
-            return (
-                <a href={props.href} target={props.target} class={linkClassList.value}>
-                    {slots.icon ? (<div class="icon"> {slots.icon()}</div>) : null}
-                    <div>{slots.default?.()}</div>
-                </a>
-            );
-        };
+        function handleClick(event: MouseEvent) {
+            if (!props.disabled) {
+                emit('click', event);
+            }
+        }
 
         return () => (
-            <div class={prefixCls}>
-                {renderLink()}
-            </div>
+            <a href={props.href} target={props.target} class={linkClassList.value} onClick={handleClick}>
+                {slots.icon ? (<div class="icon"> {slots.icon()}</div>) : null}
+                <div>{slots.default?.()}</div>
+            </a>
         );
     },
 });
diff --git a/components/link/props.ts b/components/link/props.ts
@@ -18,7 +18,7 @@ export const linkProps = {
     },
     underline: {
         type: Boolean,
-        default: true,
+        default: false,
     },
     disabled: {
         type: Boolean,

diff --git a/components/link/style/index.less b/components/link/style/index.less
@@ -4,86 +4,78 @@
 
 @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;
+    position: relative;
     display: inline-flex;
-    height: var(--f-link-height);
-    line-height:  var(--f-link-height);       
+    align-items: center;
+    justify-content: flex-start;
+    cursor: pointer;
 
-    &-content {
-        display: inline-flex;
+    .icon {
+        display: 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{
-            cursor: not-allowed;
-            opacity: 0.7;
-        }
+        justify-content: center;
+        margin-right: 4px;
+    }
 
-        &:not(&-disabled).underline:hover {
-            border-bottom: 1px solid currentcolor;
-        }    
+    &.is-disabled {
+        cursor: not-allowed;
+        opacity: 0.7;
+    }
+    &.is-underline:not(.is-disabled):hover::after {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        height: 0;
+        border-bottom: 1px solid currentcolor;
+        content: "";
+    }
 
-        &-type-success {
-            color: var(--f-success-color);
-            &:hover {
-                color: var(--f-hover-success-text-color);
-            }
+    &-type-default {
+        color: var(--f-text-color);
+        &:hover:not(.is-disabled) {
+            color: var(--f-hover-color-base);
         }
+    }
 
-        &-type-danger {
-            color: var(--f-danger-color);
-            &:hover {
-                color: var(--f-hover-danger-text-color);
-            }
+    &-type-primary {
+        color: var(--f-primary-color);
+        &:hover:not(.is-disabled) {
+            color: var(--f-hover-color-base);
         }
+    }
 
-        &-type-warning {
-            color: var(--f-warning-color);
-            &:hover {
-                color: var(--f-hover-warning-text-color);
-            }
+    &-type-success {
+        color: var(--f-success-color);
+        &:hover:not(.is-disabled) {
+            color: var(--f-hover-success-text-color);
         }
+    }
 
-        &-type-primary {
-            color: var(--f-primary-color);
-            &:hover {
-                color: var(--f-hover-color-base);
-            }
+    &-type-warning {
+        color: var(--f-warning-color);
+        &:hover:not(.is-disabled) {
+            color: var(--f-hover-warning-text-color);
         }
+    }
 
-        &-type-default {
-            color: var(--f-text-color);
-            &:hover {
-                color: var(--f-hover-text-color);
-            }
+    &-type-danger {
+        color: var(--f-danger-color);
+        &:hover:not(.is-disabled) {
+            color: var(--f-hover-danger-text-color);
         }
+    }
 
-        &-size-middle {
-            font-size: var(--f-font-size-base);
-        }
+    &-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-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);
-        }
+    &-size-large {
+        font-size: calc(var(--f-font-size-base) + 2px);
     }
 }
diff --git a/docs/.vitepress/components/link/base.vue b/docs/.vitepress/components/link/base.vue
@@ -14,8 +14,8 @@
             <FRadioGroup
                 v-model="underline"
                 :options="[
-                    { label: '启用(默认)', value: true },
-                    { label: '不启用', value: false },
+                    { label: '启用', value: true },
+                    { label: '不启用(默认)', value: false },
                 ]"
             />
         </FFormItem>
@@ -33,7 +33,7 @@
     <FDivider />
 
     <FSpace>
-        <FLink :underline="underline" :disabled="disabled" :size="size" type="default">default</FLink>
+        <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>
@@ -46,13 +46,14 @@ import { ref } from 'vue';
 
 const size = ref('middle');
 
-const underline = ref(true);
+const underline = ref(false);
 
 const disabled = ref(false);
+
+const handleClick = () => {
+    console.log('[link.base] handClick');
+};
 </script>
 
 <style scoped>
-.fes-link {
-    margin-right: 8px;
-}
 </style>
diff --git a/docs/.vitepress/components/link/index.md b/docs/.vitepress/components/link/index.md
@@ -19,33 +19,36 @@ base.vue
 :::
 
 ### 跳转
-通过设置`target`，设定跳转行为，同原生a标签的`target`属性  
+
+通过设置`target`，设定跳转行为，同原生 a 标签的`target`属性  
 若`href`不设置，则点击不会发生任何跳转
 
 :::demo
 href.vue
 :::
 
 ### 图标
+
 提供了图标的插槽
 
 :::demo
 icon.vue
 :::
 
 ## Props
+
 | 属性      | 说明                                                           | 类型      | 默认值    |
 | --------- | -------------------------------------------------------------- | --------- | --------- |
 | size      | 尺寸大小，可选`small`，`middle`，`large`                       | `string`  | `middle`  |
 | type      | 类型，可选`default`，`primary`，`success`，`danger`，`warning` | `string`  | `default` |
-| underline | 展示下划线                                                     | `boolean` | `true`    |
+| underline | 展示下划线                                                     | `boolean` | `false`   |
 | disabled  | 是否禁用                                                       | `boolean` | `false`   |
 | href      | 跳转链接                                                       | `string`  | `-`       |
-| target    | 跳转行为，同原生target                                         | `string`  | `-`       |
+| target    | 跳转行为，同原生 target                                        | `string`  | `-`       |
 
 ## Slots
 
 | 名称    | 说明     | 参数 |
 | ------- | -------- | ---- |
 | default | 链接内容 | `-`  |
-| icon    | 图标     | `-`  |
+| icon    | 图标     | `-`  |