feat: add download API to Link

Tencent · Aug 2, 2023 · abb9dd0 · abb9dd0
1 parent 1d79795
commit abb9dd0
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 3 deletions.
diff --git a/src/link/_example/download.vue b/src/link/_example/download.vue
@@ -0,0 +1,6 @@
+<template>
+  <t-space>
+    <t-link theme="primary" download href="/starter/assets/vue.ee956b80.svg">跳转链接</t-link>
+    <t-link theme="primary" download="test/download-file.png" href="/starter/assets/vue.ee956b80.svg">跳转链接</t-link>
+  </t-space>
+</template>
diff --git a/src/link/link.en-US.md b/src/link/link.en-US.md
@@ -8,13 +8,14 @@ name | type | default | description | required
 content | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 default | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 disabled | Boolean | - | make link to be disabled | N
-hover | String | underline | hover link style。options：color/underline | N
+download | String / Boolean | - | Causes the browser to treat the linked URL as a download | N
+hover | String | underline | hover link style。options: color/underline | N
 href | String | - | \- | N
 prefixIcon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
-size | String | medium | options：small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 suffixIcon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 target | String | - | target is an attribute of `<a>` | N
-theme | String | default | options：default/primary/danger/warning/success | N
+theme | String | default | options: default/primary/danger/warning/success | N
 underline | Boolean | - | \- | N
 onClick | Function |  | Typescript：`(e: MouseEvent) => void`<br/>click event, it won't trigger when it's disabled | N
 

diff --git a/src/link/link.md b/src/link/link.md
@@ -8,6 +8,7 @@
 content | String / Slot / Function | - | 链接内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 default | String / Slot / Function | - | 链接内容，同 content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 disabled | Boolean | - | 禁用链接 | N
+download | String / Boolean | - | 使得浏览器将链接的 URL 视为可下载资源 | N
 hover | String | underline | 链接悬浮态样式，有 文本颜色变化、添加下划线等 2 种方法。可选项：color/underline | N
 href | String | - | 跳转链接 | N
 prefixIcon | Slot / Function | - | 前置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N

diff --git a/src/link/link.tsx b/src/link/link.tsx
@@ -36,6 +36,7 @@ export default mixins(classPrefixMixins).extend({
         class={linkClass}
         href={this.disabled || !this.href ? undefined : this.href}
         target={this.target}
+        download={this.download}
         onClick={this.handleClick}
       >
         {prefixContent && <span class={`${this.componentName}__prefix-icon`}>{prefixContent}</span>}

diff --git a/src/link/props.ts b/src/link/props.ts
@@ -18,6 +18,10 @@ export default {
   },
   /** 禁用链接 */
   disabled: Boolean,
+  /** 使得浏览器将链接的 URL 视为可下载资源 */
+  download: {
+    type: [String, Boolean] as PropType<TdLinkProps['download']>,
+  },
   /** 链接悬浮态样式，有 文本颜色变化、添加下划线等 2 种方法 */
   hover: {
     type: String as PropType<TdLinkProps['hover']>,

diff --git a/src/link/type.ts b/src/link/type.ts
@@ -19,6 +19,10 @@ export interface TdLinkProps {
    * 禁用链接
    */
   disabled?: boolean;
+  /**
+   * 使得浏览器将链接的 URL 视为可下载资源
+   */
+  download?: string | boolean;
   /**
    * 链接悬浮态样式，有 文本颜色变化、添加下划线等 2 种方法
    * @default underline