From 0bd8b6a7f1681a5e4b4735d6523b4ead6ffa4d80 Mon Sep 17 00:00:00 2001 From: azhe Date: Thu, 10 Aug 2023 10:30:41 +0800 Subject: [PATCH] feat: add download API to Link (#2659) * feat: add download API to Link * feat: update common * test: update snapshot * feat: update common --- src/link/_example/download.vue | 6 +++++ src/link/link.en-US.md | 7 +++--- src/link/link.md | 1 + src/link/link.tsx | 1 + src/link/props.ts | 4 +++ src/link/type.ts | 4 +++ test/snap/__snapshots__/csr.test.js.snap | 32 ++++++++++++++++++++++++ test/snap/__snapshots__/ssr.test.js.snap | 2 ++ 8 files changed, 54 insertions(+), 3 deletions(-) create mode 100644 src/link/_example/download.vue diff --git a/src/link/_example/download.vue b/src/link/_example/download.vue new file mode 100644 index 000000000..c568acbd2 --- /dev/null +++ b/src/link/_example/download.vue @@ -0,0 +1,6 @@ + diff --git a/src/link/link.en-US.md b/src/link/link.en-US.md index 28fd15f48..8f03c5ed3 100644 --- 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 `` | 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`
click event, it won't trigger when it's disabled | N diff --git a/src/link/link.md b/src/link/link.md index a8f2ccee5..5a86b6a59 100644 --- 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 index baf27da6f..05a10063d 100644 --- 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 && {prefixContent}} diff --git a/src/link/props.ts b/src/link/props.ts index 43a182d94..853987c15 100644 --- 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, + }, /** 链接悬浮态样式，有 文本颜色变化、添加下划线等 2 种方法 */ hover: { type: String as PropType, diff --git a/src/link/type.ts b/src/link/type.ts index 7748826f1..64bfe6161 100644 --- 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 diff --git a/test/snap/__snapshots__/csr.test.js.snap b/test/snap/__snapshots__/csr.test.js.snap index 6b0cde67b..c85a628d5 100644 --- a/test/snap/__snapshots__/csr.test.js.snap +++ b/test/snap/__snapshots__/csr.test.js.snap @@ -65355,6 +65355,38 @@ exports[`csr snapshot test > csr test ./src/link/_example/disabled.vue 1`] = ` `; +exports[`csr snapshot test > csr test ./src/link/_example/download.vue 1`] = ` +
+
+ + 跳转链接 + +
+
+ + 跳转链接 + +
+
+`; + exports[`csr snapshot test > csr test ./src/link/_example/hover.vue 1`] = `
renders ./src/link/_example/base.vue correctly 1`] exports[`ssr snapshot test > renders ./src/link/_example/disabled.vue correctly 1`] = `"
跳转链接
跳转链接
跳转链接
跳转链接
跳转链接
"`; +exports[`ssr snapshot test > renders ./src/link/_example/download.vue correctly 1`] = `"
跳转链接
跳转链接
"`; + exports[`ssr snapshot test > renders ./src/link/_example/hover.vue correctly 1`] = `"
跳转链接
跳转链接
跳转链接
跳转链接
跳转链接
跳转链接
跳转链接
跳转链接
跳转链接
跳转链接
跳转链接
跳转链接
跳转链接
跳转链接
跳转链接
"`; exports[`ssr snapshot test > renders ./src/link/_example/icon.vue correctly 1`] = `"
跳转链接
跳转链接
跳转链接
跳转链接
"`;