diff --git a/docs/zh-CN/components/carousel.md b/docs/zh-CN/components/carousel.md index be18af56e..6f2e9302c 100755 --- a/docs/zh-CN/components/carousel.md +++ b/docs/zh-CN/components/carousel.md @@ -66,6 +66,30 @@ order: 33 其中的 `imageList` 要和配置的 `name` 值对应。 +## 点击图片打开外部链接 + +> 1.3.3 及以上版本 + +需要放回的字段中除了前面的 image，还有 href 属性 + +```schema: scope="body" +{ + "type": "page", + "data": { + "imageList": [ + { + "image": "https://internal-amis-res.cdn.bcebos.com/images/2019-12/1577157239810/da6376bf988c.png", + "href": "https://github.com/baidu/amis" + } + ] + }, + "body": { + "type": "carousel", + "name": "imageList" + } +} +``` + ## 自定义轮播图的展现 通过配置 `itemSchema` 可以自定义轮播图的展现，比如图片默认背景配置是 contain，可以改成 cover： @@ -85,6 +109,7 @@ itemSchema: { | className | `string` | `"panel-default"` | 外层 Dom 的类名 | | options | `array` | `[]` | 轮播面板数据 | | options.image | `string` | | 图片链接 | +| options.href | `string` | | 图片打开网址的链接 | | options.imageClassName | `string` | | 图片类名 | | options.title | `string` | | 图片标题 | | options.titleClassName | `string` | | 图片标题类名 | diff --git a/docs/zh-CN/components/form/static.md b/docs/zh-CN/components/form/static.md index ec8475f4c..acdf16dee 100755 --- a/docs/zh-CN/components/form/static.md +++ b/docs/zh-CN/components/form/static.md @@ -273,3 +273,27 @@ order: 52 ``` 其他配置项参考 [快速编辑](../crud#快速编辑) + +## 弹出框（popOver） + +可以通过 `popOver` 属性配置弹出框 + +```schema: scope="body" +{ + "type": "form", + "body": [ + { + "name": "static", + "type": "static", + "label": "静态展示", + "value": "aaa", + "popOver": { + "body": { + "type": "tpl", + "tpl": "弹出内容" + } + } + } + ] +} +``` diff --git a/docs/zh-CN/components/image.md b/docs/zh-CN/components/image.md index 7e03af0f7..e57f2de7d 100755 --- a/docs/zh-CN/components/image.md +++ b/docs/zh-CN/components/image.md @@ -189,7 +189,7 @@ order: 52 ## 原图模式 -> since 1.2.3 +> 1.2.3 及以上版本 默认图片为缩略图模式，可以通过配置 imageMode: "original" 修改为原图模式，原图模式为块状展示，宽度尽可能占满。 @@ -209,6 +209,37 @@ order: 52 } ``` +## 打开外部链接 + +> 1.3.3 及以上版本 + +可以设置 href 属性来支持图片点击打开链接，需要注意这和放大功能是冲突的，只能二选一。 + +```schema: scope="body" +{ + "type": "image", + "src": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80", + "href": "https://github.com/baidu/amis" +} +``` + +href 也可以是模板 + +```schema +{ + "type": "page", + "data": { + "imageUrl": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg", + "imageHref": "https://github.com/baidu/amis" + }, + "body": { + "type": "image", + "name": "imageUrl", + "href": "${imageHref}" + } +} +``` + ## 用作 Field 时 当用在 Table 的列配置 Column、List 的内容、Card 卡片的内容和表单的 Static-XXX 中时，可以设置`name`属性，映射同名变量 @@ -271,23 +302,24 @@ List 的内容、Card 卡片的内容配置同上 ## 属性表 -| 属性名 | 类型 | 默认值 | 说明 | -| -------------- | --------- | --------- | -------------------------------------------------------------------------------------- | -| type | `string` | | 如果在 Table、Card 和 List 中，为`"color"`；在 Form 中用作静态展示，为`"static-color"` | -| className | `string` | | 外层 CSS 类名 | -| imageClassName | `string` | | 图片 CSS 类名 | -| thumbClassName | `string` | | 图片缩率图 CSS 类名 | -| height | `string` | | 图片缩率高度 | -| width | `string` | | 图片缩率宽度 | -| title | `string` | | 标题 | -| imageCaption | `string` | | 描述 | -| placeholder | `string` | | 占位文本 | -| defaultImage | `string` | | 默认显示的图片地址 | -| src | `string` | | 缩略图地址 | -| originalSrc | `string` | | 原图地址 | -| enlargeAble | `boolean` | | 支持放大预览 | -| enlargeTitle | `string` | | 放大预览的标题 | -| enlargeCaption | `string` | | 放大预览的描述 | -| thumbMode | `string` | `contain` | 预览图模式，可选：`'w-full'`, `'h-full'`, `'contain'`, `'cover'` | -| thumbRatio | `string` | `1:1` | 预览图比例，可选：`'1:1'`, `'4:3'`, `'16:9'` | -| imageMode | `string` | `thumb` | 图片展示模式，可选：`'thumb'`, `'original'` 即：缩略图模式 或者 原图模式 | +| 属性名 | 类型 | 默认值 | 说明 | +| -------------- | ------------------------------------ | --------- | -------------------------------------------------------------------------------------- | +| type | `string` | | 如果在 Table、Card 和 List 中，为`"color"`；在 Form 中用作静态展示，为`"static-color"` | +| className | `string` | | 外层 CSS 类名 | +| imageClassName | `string` | | 图片 CSS 类名 | +| thumbClassName | `string` | | 图片缩率图 CSS 类名 | +| height | `string` | | 图片缩率高度 | +| width | `string` | | 图片缩率宽度 | +| title | `string` | | 标题 | +| imageCaption | `string` | | 描述 | +| placeholder | `string` | | 占位文本 | +| defaultImage | `string` | | 默认显示的图片地址 | +| src | `string` | | 缩略图地址 | +| href | [模板](../../docs/concepts/template) | | 外部链接地址 | +| originalSrc | `string` | | 原图地址 | +| enlargeAble | `boolean` | | 支持放大预览 | +| enlargeTitle | `string` | | 放大预览的标题 | +| enlargeCaption | `string` | | 放大预览的描述 | +| thumbMode | `string` | `contain` | 预览图模式，可选：`'w-full'`, `'h-full'`, `'contain'`, `'cover'` | +| thumbRatio | `string` | `1:1` | 预览图比例，可选：`'1:1'`, `'4:3'`, `'16:9'` | +| imageMode | `string` | `thumb` | 图片展示模式，可选：`'thumb'`, `'original'` 即：缩略图模式 或者 原图模式 | diff --git a/scss/components/_carousel.scss b/scss/components/_carousel.scss index 5dcb24523..d91b67110 100644 --- a/scss/components/_carousel.scss +++ b/scss/components/_carousel.scss @@ -3,6 +3,8 @@ min-width: var(--Carousel-arrowControl-width); height: 100%; cursor: pointer; + top: 0; + bottom: 0; position: absolute; transition-duration: var(--Carousel-transitionDuration); svg { @@ -161,6 +163,27 @@ } } + .#{$ns}Carousel-leftArrow { + @include arrow-control; + display: none; + left: 0; + } + + .#{$ns}Carousel-rightArrow { + @include arrow-control; + display: none; + right: 0; + } + + &:hover { + .#{$ns}Carousel-leftArrow { + display: block; + } + .#{$ns}Carousel-rightArrow { + display: block; + } + } + &-arrowsControl { position: absolute; width: 100%; @@ -169,26 +192,5 @@ left: 0; z-index: 100; text-align: center; - - .#{$ns}Carousel-leftArrow { - @include arrow-control; - display: none; - left: 0; - } - - .#{$ns}Carousel-rightArrow { - @include arrow-control; - display: none; - right: 0; - } - - &:hover { - .#{$ns}Carousel-leftArrow { - display: block; - } - .#{$ns}Carousel-rightArrow { - display: block; - } - } } } diff --git a/scss/components/_images.scss b/scss/components/_images.scss index 10541c72f..d0538b195 100644 --- a/scss/components/_images.scss +++ b/scss/components/_images.scss @@ -37,7 +37,6 @@ &-thumb { width: px2rem(110px); height: px2rem(110px); - background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwMCIgaGVpZ2h0PSI0MDAiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdHRlcm4gaWQ9ImdyaWQiIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgICAgICAgICAgIDxyZWN0IGZpbGw9ImJsYWNrIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIG9wYWNpdHk9IjAuMSIgLz4KICAgICAgICAgICAgPHJlY3QgZmlsbD0id2hpdGUiIHg9IjEwIiB5PSIwIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIC8+CiAgICAgICAgICAgIDxyZWN0IGZpbGw9ImJsYWNrIiB4PSIxMCIgeT0iMTAiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgb3BhY2l0eT0iMC4xIiAvPgogICAgICAgICAgICA8cmVjdCBmaWxsPSJ3aGl0ZSIgeD0iMCIgeT0iMTAiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgLz4KICAgICAgICA8L3BhdHRlcm4+CiAgICA8L2RlZnM+CiAgICA8cmVjdCBmaWxsPSJ1cmwoI2dyaWQpIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiAvPgo8L3N2Zz4='); position: relative; overflow: hidden; diff --git a/src/compat.ts b/src/compat.ts index 01e1f3392..06261675d 100644 --- a/src/compat.ts +++ b/src/compat.ts @@ -531,7 +531,11 @@ addSchemaFilter(function (schema: Schema, renderer: any, props: any) { }; } - if (schema?.controls && schema.type !== 'audio') { + if ( + schema?.controls && + schema.type !== 'audio' && + schema.type !== 'carousel' + ) { schema = { ...schema, [schema.type === 'combo' ? `items` : 'body']: (Array.isArray( diff --git a/src/components/Overlay.tsx b/src/components/Overlay.tsx index 41e83aa74..18f57db9d 100644 --- a/src/components/Overlay.tsx +++ b/src/components/Overlay.tsx @@ -290,12 +290,15 @@ export default class Overlay extends React.Component< // This goes after everything else because it adds a wrapping div. if (rootClose) { - child = ( - - {(ref: any) => { - return
{child}
; - }} - + return ( + // @ts-ignore + + + {(ref: any) => { + return
{child}
; + }} + + ); } diff --git a/src/components/Transfer.tsx b/src/components/Transfer.tsx index cf29a2a6f..d99c07084 100644 --- a/src/components/Transfer.tsx +++ b/src/components/Transfer.tsx @@ -276,6 +276,7 @@ export class Transfer extends React.Component { selectMode, noResultsText, searchResultColumns, + columns, classnames: cx, value, disabled, @@ -286,12 +287,13 @@ export class Transfer extends React.Component { } = this.props; const options = this.state.searchResult || []; const mode = searchResultMode || selectMode; + const resultColumns = searchResultColumns || columns; return mode === 'table' ? ( { {body ? body : placeholder} {dots ? this.renderDots() : null} - {arrows ? this.renderArrows() : null} + {arrows ? ( +
+ +
+ ) : null} + {arrows ? ( +
+ +
+ ) : null} ); } diff --git a/src/renderers/Form/Transfer.tsx b/src/renderers/Form/Transfer.tsx index 9ad7a4349..88e2ceb5a 100644 --- a/src/renderers/Form/Transfer.tsx +++ b/src/renderers/Form/Transfer.tsx @@ -67,6 +67,11 @@ export interface TransferControlSchema extends FormOptionsControl { */ columns?: Array; + /** + * 当 searchResultMode 为 table 时定义表格列信息。 + */ + searchResultColumns?: Array; + /** * 可搜索？ */ @@ -252,6 +257,7 @@ export class BaseTransferRenderer< loading, searchable, searchResultMode, + searchResultColumns, deferLoad, leftOptions, leftMode, @@ -275,6 +281,7 @@ export class BaseTransferRenderer< showArrow={showArrow} selectMode={selectMode} searchResultMode={searchResultMode} + searchResultColumns={searchResultColumns} columns={columns} onSearch={searchable ? this.handleSearch : undefined} onDeferLoad={deferLoad} diff --git a/src/renderers/Image.tsx b/src/renderers/Image.tsx index 0e0ff7038..63abca8ef 100644 --- a/src/renderers/Image.tsx +++ b/src/renderers/Image.tsx @@ -104,6 +104,21 @@ export interface ImageSchema extends BaseSchema { * 预览图比率 */ thumbRatio?: '1:1' | '4:3' | '16:9'; + + /** + * 链接地址 + */ + href?: SchemaTpl; + + /** + * 是否新窗口打开 + */ + blank?: boolean; + + /** + * 链接的 target + */ + htmlTarget?: string; } export interface ImageThumbProps @@ -137,6 +152,9 @@ export class ImageThumb extends React.Component { alt, title, caption, + href, + blank = true, + htmlTarget, onLoad, enlargeAble, translate: __, @@ -144,7 +162,7 @@ export class ImageThumb extends React.Component { imageMode } = this.props; - return ( + let image = (
{ ) : null}
); + + if (href) { + image = ( + + {image} + + ); + } + + return image; } } const ThemedImageThumb = themeable(localeable(ImageThumb)); @@ -302,6 +335,7 @@ export class ImageField extends React.Component { width, classnames: cx, src, + href, thumbMode, thumbRatio, placeholder, @@ -314,6 +348,8 @@ export class ImageField extends React.Component { let value = finnalSrc || getPropValue(this.props) || defaultImage || imagePlaceholder; + const finnalHref = href ? filter(href, data, '| raw') : ''; + return (
{ height={height} width={width} src={value} + href={finnalHref} title={filter(title, data)} caption={filter(imageCaption, data)} thumbMode={thumbMode}