diff --git a/docs/zh-CN/components/link.md b/docs/zh-CN/components/link.md index 720885f43d3..283f7ae5080 100755 --- a/docs/zh-CN/components/link.md +++ b/docs/zh-CN/components/link.md @@ -65,16 +65,48 @@ order: 55 } ``` +## 最大显示行数 + +```schema +{ + "type": "page", + "body": { + "type": "link", + "href": "https://www.baidu.com", + "body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam venenatis et lorem sit amet vehicula. Etiam vel nibh nec nisi euismod mollis ultrices condimentum velit. Proin velit libero, interdum ac rhoncus sit amet, pellentesque ac turpis. Quisque ac luctus turpis, vel efficitur ante. Cras convallis risus vel vehicula dapibus. Donec eget neque fringilla, faucibus mi quis, porttitor magna. Cras pellentesque leo est, et luctus neque rutrum eu. Aliquam consequat velit sed sem posuere, vitae sollicitudin mi consequat. Mauris eget ipsum sed dui rutrum fringilla. Donec varius vehicula magna sit amet auctor. Ut congue vehicula lectus in blandit. Vivamus suscipit eleifend turpis, nec sodales sem vulputate a. Curabitur pulvinar libero viverra, efficitur odio eu, finibus justo. Etiam eu vehicula felis.", + "blank": true, + "maxLine": 2 + } +} +``` + +## 显示提示文字 + +```schema +{ + "type": "page", + "body": { + "type": "link", + "href": "https://www.baidu.com", + "body": "百度一下，你就知道", + "blank": true, + "tooltip": "百度一下" + } +} +``` + ## 属性表 -| 属性名 | 类型 | 默认值 | 说明 | -| ---------- | --------- | ------ | ------------------------------------------------------------------------------------ | -| type | `string` | | 如果在 Table、Card 和 List 中，为`"link"`；在 Form 中用作静态展示，为`"static-link"` | -| body | `string` | | 标签内文本 | -| href | `string` | | 链接地址 | -| blank | `boolean` | | 是否在新标签页打开 | -| htmlTarget | `string` | | a 标签的 target，优先于 blank 属性 | -| title | `string` | | a 标签的 title | -| disabled | `boolean` | | 禁用超链接 | -| icon | `string` | | 超链接图标，以加强显示 | -| rightIcon | `string` | | 右侧图标 | +| 属性名 | 类型 | 默认值 | 说明 | +| ---------- | -------------------------------------------------------------- | ------ | ------------------------------------------------------------------------------------ | +| type | `string` | | 如果在 Table、Card 和 List 中，为`"link"`；在 Form 中用作静态展示，为`"static-link"` | +| body | `string` | | 标签内文本 | +| href | `string` | | 链接地址 | +| blank | `boolean` | | 是否在新标签页打开 | +| htmlTarget | `string` | | a 标签的 target，优先于 blank 属性 | +| title | `string` | | a 标签的 title | +| disabled | `boolean` | | 禁用超链接 | +| icon | `string` | | 超链接图标，以加强显示 | +| rightIcon | `string` | | 右侧图标 | +| maxLine | `number` | | 最大显示行数 | +| tooltip | `'string' \| 'TooltipObject'` | | 气泡提示内容 | diff --git a/packages/amis-editor/src/plugin/Link.tsx b/packages/amis-editor/src/plugin/Link.tsx index 54dbd8b79d2..09ed40e326f 100644 --- a/packages/amis-editor/src/plugin/Link.tsx +++ b/packages/amis-editor/src/plugin/Link.tsx @@ -2,7 +2,8 @@ import { registerEditorPlugin, BasePlugin, getSchemaTpl, - tipedLabel + tipedLabel, + defaultValue } from 'amis-editor-core'; export class LinkPlugin extends BasePlugin { @@ -49,6 +50,30 @@ export class LinkPlugin extends BasePlugin { type: 'input-text' } }), + { + type: 'input-number', + label: '最大显示行数', + name: 'maxLine', + min: 0 + }, + { + type: 'ae-switch-more', + formType: 'extend', + mode: 'normal', + label: '气泡提示', + form: { + body: [ + getSchemaTpl('textareaFormulaControl', { + name: 'tooltip', + mode: 'normal', + label: tipedLabel( + '正常提示', + '正常状态下的提示内容，不填则不弹出提示。可从数据域变量中取值。' + ) + }) + ] + } + }, { label: tipedLabel('内容', '不填写时，自动使用目标地址值'), type: 'ae-textareaFormulaControl', diff --git a/packages/amis-ui/scss/components/_link.scss b/packages/amis-ui/scss/components/_link.scss index c8d67fd4fdf..5a9a46760e4 100644 --- a/packages/amis-ui/scss/components/_link.scss +++ b/packages/amis-ui/scss/components/_link.scss @@ -20,3 +20,11 @@ vertical-align: text-top; } } + +.max-line { + display: -webkit-box; + -webkit-box-orient: vertical; + word-break: break-word; + overflow: hidden; + text-overflow: ellipsis; +} diff --git a/packages/amis/__tests__/renderers/Link.test.tsx b/packages/amis/__tests__/renderers/Link.test.tsx index b49865dad04..ce781c6af03 100644 --- a/packages/amis/__tests__/renderers/Link.test.tsx +++ b/packages/amis/__tests__/renderers/Link.test.tsx @@ -8,7 +8,7 @@ */ import React from 'react'; -import {render} from '@testing-library/react'; +import {render, fireEvent} from '@testing-library/react'; import '../../src'; import {render as amisRender} from '../../src'; import {makeEnv} from '../helper'; @@ -100,3 +100,36 @@ test('Renderer:link with title & icon & rightIcon', async () => { expect(container).toMatchSnapshot(); }); + +test('Renderer:link with maxLine', async () => { + const {container} = render( + amisRender({ + type: 'link', + href: 'https://www.baidu.com', + body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam venenatis et lorem sit amet vehicula. Etiam vel nibh nec nisi euismod mollis ultrices condimentum velit. Proin velit libero, interdum ac rhoncus sit amet, pellentesque ac turpis. Quisque ac luctus turpis, vel efficitur ante. Cras convallis risus vel vehicula dapibus. Donec eget neque fringilla, faucibus mi quis, porttitor magna. Cras pellentesque leo est, et luctus neque rutrum eu. Aliquam consequat velit sed sem posuere, vitae sollicitudin mi consequat. Mauris eget ipsum sed dui rutrum fringilla. Donec varius vehicula magna sit amet auctor. Ut congue vehicula lectus in blandit. Vivamus suscipit eleifend turpis, nec sodales sem vulputate a. Curabitur pulvinar libero viverra, efficitur odio eu, finibus justo. Etiam eu vehicula felis.', + maxLine: 2 + }) + ); + + const link = container.querySelector('.cxd-Link'); + expect(link).toHaveClass('max-line'); + + expect(container).toMatchSnapshot(); +}); + +test('Renderer:link with tooltip', async () => { + const {container, getByText, findByText} = render( + amisRender({ + type: 'link', + href: 'https://www.baidu.com', + body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam venenatis et lorem sit amet vehicula. Etiam vel nibh nec nisi euismod mollis ultrices condimentum velit. Proin velit libero, interdum ac rhoncus sit amet, pellentesque ac turpis. Quisque ac luctus turpis, vel efficitur ante. Cras convallis risus vel vehicula dapibus. Donec eget neque fringilla, faucibus mi quis, porttitor magna. Cras pellentesque leo est, et luctus neque rutrum eu. Aliquam consequat velit sed sem posuere, vitae sollicitudin mi consequat. Mauris eget ipsum sed dui rutrum fringilla. Donec varius vehicula magna sit amet auctor. Ut congue vehicula lectus in blandit. Vivamus suscipit eleifend turpis, nec sodales sem vulputate a. Curabitur pulvinar libero viverra, efficitur odio eu, finibus justo. Etiam eu vehicula felis.', + tooltip: '百度一下' + }) + ); + + fireEvent.mouseOver(getByText(/Lorem/)); + + await findByText('百度一下'); + + expect(container).toMatchSnapshot(); +}); diff --git a/packages/amis/__tests__/renderers/__snapshots__/Link.test.tsx.snap b/packages/amis/__tests__/renderers/__snapshots__/Link.test.tsx.snap index cc6c18586ac..3760279ad6b 100644 --- a/packages/amis/__tests__/renderers/__snapshots__/Link.test.tsx.snap +++ b/packages/amis/__tests__/renderers/__snapshots__/Link.test.tsx.snap @@ -48,6 +48,24 @@ exports[`Renderer:link with href & blank & htmlTarget 1`] = ` `; +exports[`Renderer:link with maxLine 1`] = ` +
+ + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam venenatis et lorem sit amet vehicula. Etiam vel nibh nec nisi euismod mollis ultrices condimentum velit. Proin velit libero, interdum ac rhoncus sit amet, pellentesque ac turpis. Quisque ac luctus turpis, vel efficitur ante. Cras convallis risus vel vehicula dapibus. Donec eget neque fringilla, faucibus mi quis, porttitor magna. Cras pellentesque leo est, et luctus neque rutrum eu. Aliquam consequat velit sed sem posuere, vitae sollicitudin mi consequat. Mauris eget ipsum sed dui rutrum fringilla. Donec varius vehicula magna sit amet auctor. Ut congue vehicula lectus in blandit. Vivamus suscipit eleifend turpis, nec sodales sem vulputate a. Curabitur pulvinar libero viverra, efficitur odio eu, finibus justo. Etiam eu vehicula felis. + + + +
+`; + exports[`Renderer:link with title & icon & rightIcon 1`] = `
`; + +exports[`Renderer:link with tooltip 1`] = ` +
+ + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam venenatis et lorem sit amet vehicula. Etiam vel nibh nec nisi euismod mollis ultrices condimentum velit. Proin velit libero, interdum ac rhoncus sit amet, pellentesque ac turpis. Quisque ac luctus turpis, vel efficitur ante. Cras convallis risus vel vehicula dapibus. Donec eget neque fringilla, faucibus mi quis, porttitor magna. Cras pellentesque leo est, et luctus neque rutrum eu. Aliquam consequat velit sed sem posuere, vitae sollicitudin mi consequat. Mauris eget ipsum sed dui rutrum fringilla. Donec varius vehicula magna sit amet auctor. Ut congue vehicula lectus in blandit. Vivamus suscipit eleifend turpis, nec sodales sem vulputate a. Curabitur pulvinar libero viverra, efficitur odio eu, finibus justo. Etiam eu vehicula felis. + + +