Skip to content

iBiz-Vue-R7-Res
iBiz-Vue-R7-Res
提交 977438c3 编写于 作者: tony001's avatar tony001
浏览文件
操作

优化popover组件

上级 0ceea9a7
显示空白字符变更
内嵌 并排
正在显示 包含 90 行增加 和 239 行删除
src/utils/app-popover/app-popover.less
浏览文件 @ 977438c3
.el-popover { .app-popover-wrapper {
overflow-y: auto;
//z-index: 99 !important;
background: #ffffff;
border: 1px solid #dee0e4;
padding: 0px;
z-index: 2000;
color: var(--app-color-font-content);
line-height: 1.4;
text-align: justify;
font-size: 14px;
overflow-y: hidden;
overflow-x: hidden;
.el-card__header {
padding: 5px 10px;
border-bottom: 1px solid #dee0e4;
color: var(--app-color-font-content);
}
.el-card{
min-width: 150px;
border: none;
background-color: #ffffff;
color: var(--app-color-font-content);
}
.el-card__body {
padding: 0px;
overflow-x:hidden;
overflow-y: auto;
.viewcontainer2{
.content-container{
margin: 0;
}
}
}
}
.clearfix{
position: relative;
.cancel{
position: absolute; position: absolute;
right: 5px; top: 0;
top: 5px; right: 0;
bottom: 0;
left: 0;
.app-popover.app-popper {
border-radius: 5px;
overflow: auto;
border: 1px solid #e8e8e8;
padding: 5px;
background: #e8e8e8;
} }
} }
\ No newline at end of file
src/utils/app-popover/app-popover.tsx
浏览文件 @ 977438c3
import Vue, { CreateElement } from 'vue'; import Vue, { CreateElement } from 'vue';
import PopperJs from 'popper.js'; import { Subject, Observable } from 'rxjs';
import { createPopper, Instance } from '@popperjs/core/lib/popper-lite.js';
import preventOverflow from '@popperjs/core/lib/modifiers/preventOverflow.js';
import flip from '@popperjs/core/lib/modifiers/flip.js';
import { Placement } from '@popperjs/core/lib/enums';
import { on } from '../dom/dom'; import { on } from '../dom/dom';
import './app-popover.less';
import { ViewTool } from '../view-tool/view-tool';
import store from '../../store'; import store from '../../store';
import i18n from '@/locale'; import i18n from '@/locale';
import './app-popover.less';
import { Subject } from 'rxjs';
/** /**
* 悬浮窗控制器实例 * 悬浮窗控制器实例
...@@ -24,6 +24,7 @@ export class AppPopover { ...@@ -24,6 +24,7 @@ export class AppPopover {
* @memberof AppPopover * @memberof AppPopover
*/ */
private static readonly $popover = new AppPopover(); private static readonly $popover = new AppPopover();
/** /**
* vue实例 * vue实例
* *
...@@ -32,14 +33,16 @@ export class AppPopover { ...@@ -32,14 +33,16 @@ export class AppPopover {
* @memberof AppPopover * @memberof AppPopover
*/ */
private vueExample!: Vue; private vueExample!: Vue;
/** /**
* PopperJs实例 * PopperJs实例
* *
* @private * @private
* @type {PopperJs} * @type {Instance}
* @memberof AppPopover * @memberof AppPopover
*/ */
private popperExample?: PopperJs; private popperExample?: Instance;
/** /**
* 是否显示悬浮窗 * 是否显示悬浮窗
* *
...@@ -48,6 +51,7 @@ export class AppPopover { ...@@ -48,6 +51,7 @@ export class AppPopover {
* @memberof AppPopover * @memberof AppPopover
*/ */
private showPopper: boolean = false; private showPopper: boolean = false;
/** /**
* 是否在点击空白区域时自动关闭 * 是否在点击空白区域时自动关闭
* *
...@@ -56,33 +60,15 @@ export class AppPopover { ...@@ -56,33 +60,15 @@ export class AppPopover {
* @memberof AppPopover * @memberof AppPopover
*/ */
private isAutoClose: boolean = true; private isAutoClose: boolean = true;
/**
* 当前激活popver标识
*
* @private
* @type {string}
* @memberof AppPopover
*/
private activePopoverTag?: string;
/**
* 返回数据
*/
private tempResult = { ret: '' };
/**
* 数据传递对象
*/
private subject: any;
/** /**
* 气泡卡片层级 * 当前显示层级
* *
* @private * @private
* @type {(number | null)} * @type {number}
* @memberof AppPopover * @memberof AppPopover
*/ */
private zIndex: number | null = null; private zIndex: number = 0;
/** /**
* Creates an instance of AppPopover. * Creates an instance of AppPopover.
...@@ -92,12 +78,6 @@ export class AppPopover { ...@@ -92,12 +78,6 @@ export class AppPopover {
if (AppPopover.$popover) { if (AppPopover.$popover) {
return AppPopover.$popover; return AppPopover.$popover;
} }
on(document, 'click', () => {
if (!this.showPopper || !this.isAutoClose) {
return;
}
this.destroy();
});
} }
/** /**
...@@ -108,41 +88,32 @@ export class AppPopover { ...@@ -108,41 +88,32 @@ export class AppPopover {
* @memberof AppPopover * @memberof AppPopover
*/ */
private initVueExample(): void { private initVueExample(): void {
const self = this;
const container = document.createElement('div');
container.className = 'app-popover-wrapper';
on(container, 'click', () => {
if (!this.showPopper || !this.isAutoClose) {
return;
}
this.popperDestroy();
});
const div = document.createElement('div'); const div = document.createElement('div');
document.body.appendChild(div); container.appendChild(div);
document.body.appendChild(container);
this.vueExample = new Vue({ this.vueExample = new Vue({
el: div, el: div,
store: store, store: store,
i18n: i18n, i18n: i18n,
data: { data: { content: null, width: 300, height: 300 },
title: null, methods: {
content: null, click(e: MouseEvent) {
isShow: false e.stopPropagation();
}
}, },
render(h: CreateElement) { render(h: CreateElement) {
const content: any = this.content; const content: any = this.content;
const style: string = `display: ${this.isShow ? 'block' : 'none'};`; container.style.zIndex = (self.zIndex - 1).toString();
return <div style={style} class="el-popover el-popper panel-design-popover"> return <div v-show="self.showPopper" style={{ width: this.width + 'px', height: this.height + 'px', 'z-index': self.zIndex }} class="app-popover app-popper" on-click={this.click}>{(self.showPopper && content) ? content(h) : null}</div>;
<el-card ref="datacard">
{
this.title ? <div slot="header" class="clearfix">
<span>{this.title}</span>
<span class="cancel" ref="cancel"><i class="fa fa-times" aria-hidden="true" style="cursor: pointer;"></i></span>
</div> : null
}
<div style="height:100%;">
{content ? content(h) : null}
</div>
</el-card>
<div x-arrow class="popper__arrow"></div>
</div>;
}
});
on(this.vueExample.$el, 'click', (event: any) => {
if (Object.is(event.target.outerHTML, '<i aria-hidden="true" class="fa fa-times" style="cursor: pointer;"></i>')) {
this.destroy();
} else {
event.stopPropagation();
} }
}); });
} }
...@@ -153,162 +124,76 @@ export class AppPopover { ...@@ -153,162 +124,76 @@ export class AppPopover {
* @param {MouseEvent} event 事件 * @param {MouseEvent} event 事件
* @param {*} view 视图 * @param {*} view 视图
* @param {*} [context={}] 应用上下文参数 * @param {*} [context={}] 应用上下文参数
* @param {any[]} deResParameters 关系实体参数对象
* @param {any[]} parameters 当前应用视图参数对象
* @param {any[]} args 多项数据
* @param {*} data 行为参数 * @param {*} data 行为参数
* @param {string} [title] 标题 * @param {Placement} position 显示位置
* @param {PopperJs.Placement} [position='left'] 悬浮窗位置 * @param {boolean} isAutoClose 是否可自动关闭
* @param {boolean} [isAutoClose=true] 是否自动关闭 * @returns {Observable<any>}
* @param {number} [width] 宽度
* @param {number} [height] 高度
* @returns {Subject<any>}
* @memberof AppPopover * @memberof AppPopover
*/ */
public openPop(event: MouseEvent, view: any, context: any = {}, data: any, title?: string, position: PopperJs.Placement = 'left', isAutoClose: boolean = true, width?: number, height?: number): Subject<any> { public openPop(event: any, view: any, context: any = {}, data: any, position?: Placement, isAutoClose?: boolean): Observable<any> {
let viewdata: any = {}; const subject = new Subject<any>();
Object.assign(viewdata, JSON.parse(JSON.stringify(context))); if(!event){
this.subject = new Subject<any>(); console.error("事件触发源无值，强制返回");
return subject.asObservable();
}
if(!view.width) view.width = 300;
if(!view.height) view.height = 300;
this.openPopover(event, (h: CreateElement) => { this.openPopover(event, (h: CreateElement) => {
return h(view.viewname, { return h(view.viewname, {
class: {
viewcontainer2: true,
},
props: { props: {
viewdata: JSON.stringify(viewdata), viewdata: JSON.stringify(context),
viewDefaultUsage: false, viewDefaultUsage: false,
viewparam:JSON.stringify(data) viewUsage: 4,
viewparam: JSON.stringify(data)
}, },
on: { on: {
viewdataschange: ($event: any) => this.dataChange($event), close: (result: any) => {
close: ($event: any) => this.viewclose($event) subject.next({ ret: 'OK', datas: result });
}, subject.complete();
}) subject.unsubscribe();
}, view.title, undefined, false, view.width, view.height);
return this.subject;
} }
/**
* 数据变化回调
* @param $event
*/
public dataChange(result: any) {
this.tempResult = { ret: '' };
if (result && Array.isArray(result) && result.length > 0) {
Object.assign(this.tempResult, { ret: 'OK' }, { datas: JSON.parse(JSON.stringify(result)) });
}
this.close();
this.destroy();
}
/**
* 视图关闭
* @param result
*/
public viewclose(result: any) {
if (result && Array.isArray(result) && result.length > 0) {
Object.assign(this.tempResult, { datas: JSON.parse(JSON.stringify(result)) });
}
this.destroy();
}
/**
* 关闭回调(吐值)
*/
public close() {
if (this.tempResult && Object.is(this.tempResult.ret, 'OK')) {
this.subject.next(this.tempResult);
} }
})
}, position, isAutoClose, view.width, view.height);
return subject.asObservable();
} }
/** /**
* 打开悬浮窗 * 打开悬浮窗
* *
* @param {MouseEvent} event * @param {*} event
* @param {(h: CreateElement) => any} [content] * @param {(h: CreateElement) => any} [content]
* @param {string} [title] * @param {Placement} [position='left']
* @param {PopperJs.Placement} [position='left']
* @param {boolean} [isAutoClose=true] * @param {boolean} [isAutoClose=true]
* @param {number} [width] * @param {number} [width=300]
* @param {number} [height] * @param {number} [height=300]
* @returns {void}
* @memberof AppPopover * @memberof AppPopover
*/ */
public openPopover(event: any, content?: (h: CreateElement) => any, title?: string, position: PopperJs.Placement = 'left', isAutoClose: boolean = true, width?: number, height?: number): void { public openPopover(event: any, content?: (h: CreateElement) => any, position: Placement = 'left-end', isAutoClose: boolean = true, width: number = 300, height: number = 300): void {
// 阻止事件冒泡 // 阻止事件冒泡
event.stopPropagation(); event.stopPropagation();
const element: Element = event.toElement || event.srcElement; const element: Element = event.toElement || event.srcElement;
if (element.hasAttribute('app-popover-tag')) { if (!this.vueExample) {
const tag: any = element.getAttribute('app-popover-tag');
if (Object.is(this.activePopoverTag, tag)) {
this.destroy();
return;
}
this.activePopoverTag = tag;
} else {
const tag: string = 'app-popover-tag-' + new Date().getTime();
element.setAttribute('app-popover-tag', tag);
this.activePopoverTag = tag;
}
// if (!this.vueExample) {
// this.initVueExample();
// }
if (this.vueExample) {
this.destroy();
}
this.initVueExample(); this.initVueExample();
const _element: any = this.vueExample.$el; }
this.popperDestroy();
const zIndex = this.vueExample.$store.getters.getZIndex(); const zIndex = this.vueExample.$store.getters.getZIndex();
if (zIndex) { if (zIndex) {
this.zIndex = zIndex + 100; this.zIndex = zIndex + 100;
this.vueExample.$store.commit('updateZIndex', this.zIndex); this.vueExample.$store.commit('updateZIndex', this.zIndex);
} }
_element.style.zIndex = this.zIndex;
const datacard: any = this.vueExample.$refs.datacard;
datacard.$el.style.width = width !== 0 ? width + 'px' : '240px';
datacard.$el.getElementsByClassName('el-card__body')[0].style.height = height !== 0 ? height + 'px' : '562px';
// if (width !== '0px' && width) {
// this.vueExample.$refs.datacard.$el.style.width = width;
// } else {
// this.vueExample.$refs.datacard.$el.style.width = '240px';
// }
// if (height !== '0px' && height) {
// this.vueExample.$refs.datacard.$el.getElementsByClassName('el-card__body')[0].style.height = height;
// } else {
// this.vueExample.$refs.datacard.$el.getElementsByClassName('el-card__body')[0].style.height = '562px';
// }
// this.destroy();
// 是否可自动关闭 // 是否可自动关闭
this.isAutoClose = isAutoClose; this.isAutoClose = isAutoClose;
// 更新vue实例内容 // 更新vue实例内容
this.vueExample.$data.title = title;
this.vueExample.$data.content = content;
this.vueExample.$data.isShow = true;
this.vueExample.$forceUpdate();
// 绘制popover
const config: PopperJs.PopperOptions = {
placement: position,
onCreate: () => {
this.showPopper = true; this.showPopper = true;
}, Object.assign(this.vueExample.$data, { content, width, height, zIndex: this.zIndex });
onUpdate: (arg) => { const el: any = this.vueExample.$el;
const popper: any = arg.instance.popper; this.popperExample = createPopper(element, el, {
popper.style.display = 'none'; placement: position,
}, strategy: 'absolute',
modifiers: { modifiers: [preventOverflow, flip]
flip: { });
boundariesElement: 'viewport' this.vueExample.$forceUpdate();
},
preventOverflow: {
boundariesElement: document.getElementsByClassName('app-index')[0]
}
}
};
this.popperExample = new PopperJs(element, this.vueExample.$el, config);
this.popperExample.update();
} }
/** /**
...@@ -316,22 +201,15 @@ export class AppPopover { ...@@ -316,22 +201,15 @@ export class AppPopover {
* *
* @memberof AppPopover * @memberof AppPopover
*/ */
public destroy(): void { public popperDestroy(): void {
if (this.popperExample) { if (this.popperExample) {
this.popperExample.destroy(); this.popperExample.destroy();
if (this.zIndex !== 0) {
if (this.zIndex) {
const zIndex: any = this.zIndex; const zIndex: any = this.zIndex;
this.vueExample.$store.commit('updateZIndex', zIndex - 100); this.vueExample.$store.commit('updateZIndex', zIndex - 100);
this.zIndex = null; this.zIndex = 0;
} }
this.vueExample.$destroy();
document.body.removeChild(this.vueExample.$el);
this.popperExample = undefined;
this.showPopper = false; this.showPopper = false;
this.activePopoverTag = '';
this.vueExample.$data.isShow = false;
this.vueExample.$forceUpdate(); this.vueExample.$forceUpdate();
} }
} }
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或