From 25fc9697be41c26529a4a64bf8479a9f76145fb2 Mon Sep 17 00:00:00 2001 From: qiwei Date: Fri, 1 Nov 2024 18:02:32 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=9B=BE=E7=89=87=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E5=8F=82=E6=95=B0=EF=BC=8C=E5=A2=9E=E5=8A=A0=E5=B1=9E?= =?UTF-8?q?=E6=80=A7=E9=9D=A2=E6=9D=BF=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/zh/api/common/attribute-panel.md | 33 +++++++++++ docs/zh/api/common/image.md | 1 + src/common/_lang/en.js | 3 +- src/common/_lang/zh.js | 3 +- src/common/attribute-panel/AttributePanel.vue | 4 +- src/common/image/Image.vue | 59 +++++++++++-------- src/common/image/__tests__/Image.spec.js | 13 +++- src/common/image/style/image.scss | 18 ++++++ src/mapboxgl/web-map/LayerGroup.vue | 2 +- 9 files changed, 103 insertions(+), 33 deletions(-) create mode 100644 docs/zh/api/common/attribute-panel.md diff --git a/docs/zh/api/common/attribute-panel.md b/docs/zh/api/common/attribute-panel.md new file mode 100644 index 00000000..262f29e0 --- /dev/null +++ b/docs/zh/api/common/attribute-panel.md @@ -0,0 +1,33 @@ +# 属性面板 + +```vue + +``` + +### Attributes + +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +| :------------- | :------------------------------------------------------------------------------------- | :------ | :----- | :----- | +| showIcon | 显示分页 | boolean | - | false | +| currentIndex | 当前页索引 | number | - | 0 | +| paginationText | 自定义分页文本 | string | - | +| total | 总分页数 | number | - | - | +| title | 标题 | string | - | - | +| attributes | 属性数据 | array | - | [] | +| columns | 列配置, 具体属性参考[表格列配置文档](https://1x.antdv.com/components/table-cn/#Column) | array | - | [] | +| showBorder | 显示边框 | boolean | - | true | + +> 支持[主题混入参数](/zh/api/mixin/mixin.md#theme) diff --git a/docs/zh/api/common/image.md b/docs/zh/api/common/image.md index 9b586d82..12361445 100644 --- a/docs/zh/api/common/image.md +++ b/docs/zh/api/common/image.md @@ -10,6 +10,7 @@ | :----- | :--------- | :----- | :------------------------------------------------------------- | :------- | | src | 图片地址 | string | - | - | | repeat | 图片重复 | string | 'center' \| 'noRepeat' \| 'repeatX' \| 'repeatY' \| 'repeatXY' | 'center' | +| preivewMode | 图片预览 | string | 'none' \| 'popup' \| 'full' | 'none' | | href | 超链接地址 | string | - | - | | target | 跳转窗口 | string | - | '\_self' | diff --git a/src/common/_lang/en.js b/src/common/_lang/en.js index 980d28de..4e0a1db5 100644 --- a/src/common/_lang/en.js +++ b/src/common/_lang/en.js @@ -37,7 +37,8 @@ export default { success: { copySucccess: 'copy success' }, info: { loading: 'Loading...', - pressEscToExit: 'Press the ESC key or click the close button to exit' + pressEscToExit: 'Press the ESC key or click the close button to exit', + pressEscOrClickToExit: 'Press the ESC key or click anywhere to exit' }, unit: { kilometers: 'km', diff --git a/src/common/_lang/zh.js b/src/common/_lang/zh.js index 3fe967f7..4f8ec8be 100644 --- a/src/common/_lang/zh.js +++ b/src/common/_lang/zh.js @@ -39,7 +39,8 @@ export default { }, info: { loading: '加载中', - pressEscToExit: '按下 ESC 键或点击关闭按钮退出' + pressEscToExit: '按下 ESC 键或点击关闭按钮退出', + pressEscOrClickToExit: '按下 ESC 键或点击任意位置退出' }, unit: { kilometers: '千米', diff --git a/src/common/attribute-panel/AttributePanel.vue b/src/common/attribute-panel/AttributePanel.vue index 9535be23..56c38b8f 100644 --- a/src/common/attribute-panel/AttributePanel.vue +++ b/src/common/attribute-panel/AttributePanel.vue @@ -44,8 +44,6 @@ class SmAttributePanel extends Mixins(Theme) { @Prop() title: String; - @Prop({ default: true }) showHeader: Boolean; - @Prop({ default: true }) showBorder: Boolean; @Prop({ @@ -78,7 +76,7 @@ class SmAttributePanel extends Mixins(Theme) { return { data: this.attributes, columns: this.columns, - showHeader: this.showHeader, + showHeader: false, background: 'transparent', textColor: this.textColor }; diff --git a/src/common/image/Image.vue b/src/common/image/Image.vue index 97a62f6c..8ab1d9d3 100644 --- a/src/common/image/Image.vue +++ b/src/common/image/Image.vue @@ -1,24 +1,20 @@ @@ -27,6 +23,7 @@ import Theme from 'vue-iclient/src/common/_mixin/Theme'; import { parseUrl } from 'vue-iclient/src/common/_utils/util'; import SmModal from 'vue-iclient/src/common/modal/Modal.vue'; +import Message from 'vue-iclient/src/common/message/index.js'; export default { name: 'SmImage', @@ -44,9 +41,9 @@ export default { type: String, default: '' }, - preview: { - type: Boolean, - default: true + previewMode: { + type: String, + default: 'none' }, target: { type: String, @@ -55,16 +52,6 @@ export default { }, data() { return { - dialogStyle: { - backgroundColor: 'transparent', - height: '100%' - }, - dialogClass: 'sm-component-image__preview', - bodyStyle: { - padding: 0, - width: '100%', - height: '100%' - }, previewVisible: false, repeatOption: { center: { @@ -92,6 +79,27 @@ export default { }; }, computed: { + fullScreenStyle() { + return this.previewMode === 'fullScreen' + ? { + dialogStyle: { + backgroundColor: 'transparent', + height: '100%' + }, + dialogClass: 'sm-component-image__full', + bodyStyle: { + padding: 0, + width: '100%', + height: '100%' + } + } + : { + dialogClass: 'sm-component-image__preview', + bodyStyle: { + padding: 0 + } + }; + }, repeatStyle() { return this.repeatOption[this.repeat]; }, @@ -115,9 +123,10 @@ export default { } }, startPreview() { - if (!this.preview) { + if (this.previewMode === 'none') { return; } + Message.info(this.previewMode === 'popup' ? this.$t('info.pressEscToExit') : this.$t('info.pressEscOrClickToExit'), 3); this.previewVisible = true; }, endPreview() { diff --git a/src/common/image/__tests__/Image.spec.js b/src/common/image/__tests__/Image.spec.js index 6b49ee51..9cd782c5 100644 --- a/src/common/image/__tests__/Image.spec.js +++ b/src/common/image/__tests__/Image.spec.js @@ -38,12 +38,21 @@ describe('Image.vue', () => { expect(wrapper.find('.sm-component-image').exists()).toBe(true); }); - it('preview', () => { + it('no preview', () => { wrapper = mount(Image); wrapper.setProps({ - preview: false + previewMode: 'none' }); wrapper.vm.startPreview(); expect(wrapper.vm.previewVisible).toBeFalsy(); }); + + it('preview', () => { + wrapper = mount(Image); + wrapper.setProps({ + previewMode: 'popup' + }); + wrapper.vm.startPreview(); + expect(wrapper.vm.previewVisible).toBeTruthy(); + }); }); diff --git a/src/common/image/style/image.scss b/src/common/image/style/image.scss index dd5dfac8..7297e081 100644 --- a/src/common/image/style/image.scss +++ b/src/common/image/style/image.scss @@ -18,6 +18,17 @@ } } @include e(preview) { + .sm-component-modal-content { + .sm-component-modal-close { + margin-left: -64px; + .sm-component-modal-close-x { + font-size: 40px; + } + } + + } + } + @include e(previewFull) { width: 100% !important; padding: 0 !important; .sm-component-modal-content { @@ -28,6 +39,13 @@ .sm-component-modal-close { display: none; } + .sm-component-modal-close { + margin-left: -64px; + .sm-component-modal-close-x { + font-size: 40px; + } + } + } } diff --git a/src/mapboxgl/web-map/LayerGroup.vue b/src/mapboxgl/web-map/LayerGroup.vue index 96e16625..0113f200 100644 --- a/src/mapboxgl/web-map/LayerGroup.vue +++ b/src/mapboxgl/web-map/LayerGroup.vue @@ -21,7 +21,7 @@