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 {
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;
right: 5px;
top: 5px;
}
.app-popover-wrapper {
position: absolute;
top: 0;
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 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 './app-popover.less';
import { ViewTool } from '../view-tool/view-tool';
import store from '../../store';
import i18n from '@/locale';
import { Subject } from 'rxjs';
import './app-popover.less';
/**
* 悬浮窗控制器实例
......@@ -24,6 +24,7 @@ export class AppPopover {
* @memberof AppPopover
*/
private static readonly $popover = new AppPopover();
/**
* vue实例
*
......@@ -32,14 +33,16 @@ export class AppPopover {
* @memberof AppPopover
*/
private vueExample!: Vue;
/**
* PopperJs实例
*
* @private
* @type {PopperJs}
* @type {Instance}
* @memberof AppPopover
*/
private popperExample?: PopperJs;
private popperExample?: Instance;
/**
* 是否显示悬浮窗
*
......@@ -48,6 +51,7 @@ export class AppPopover {
* @memberof AppPopover
*/
private showPopper: boolean = false;
/**
* 是否在点击空白区域时自动关闭
*
......@@ -56,33 +60,15 @@ export class AppPopover {
* @memberof AppPopover
*/
private isAutoClose: boolean = true;
/**
* 当前激活popver标识
*
* @private
* @type {string}
* @memberof AppPopover
*/
private activePopoverTag?: string;
/**
* 返回数据
*/
private tempResult = { ret: '' };
/**
* 数据传递对象
*/
private subject: any;
/**
* 气泡卡片层级
* 当前显示层级
*
* @private
* @type {(number | null)}
* @type {number}
* @memberof AppPopover
*/
private zIndex: number | null = null;
private zIndex: number = 0;
/**
* Creates an instance of AppPopover.
......@@ -92,12 +78,6 @@ export class AppPopover {
if (AppPopover.$popover) {
return AppPopover.$popover;
}
on(document, 'click', () => {
if (!this.showPopper || !this.isAutoClose) {
return;
}
this.destroy();
});
}
/**
......@@ -108,207 +88,112 @@ export class AppPopover {
* @memberof AppPopover
*/
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');
document.body.appendChild(div);
container.appendChild(div);
document.body.appendChild(container);
this.vueExample = new Vue({
el: div,
store: store,
i18n: i18n,
data: {
title: null,
content: null,
isShow: false
data: { content: null, width: 300, height: 300 },
methods: {
click(e: MouseEvent) {
e.stopPropagation();
}
},
render(h: CreateElement) {
const content: any = this.content;
const style: string = `display: ${this.isShow ? 'block' : 'none'};`;
return <div style={style} class="el-popover el-popper panel-design-popover">
<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();
container.style.zIndex = (self.zIndex - 1).toString();
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>;
}
});
}
/**
/**
* 打开悬浮窗
*
* @param {MouseEvent} event 事件
* @param {*} view 视图
* @param {*} [context={}] 应用上下文参数
* @param {any[]} deResParameters 关系实体参数对象
* @param {any[]} parameters 当前应用视图参数对象
* @param {any[]} args 多项数据
* @param {*} data 行为参数
* @param {string} [title] 标题
* @param {PopperJs.Placement} [position='left'] 悬浮窗位置
* @param {boolean} [isAutoClose=true] 是否自动关闭
* @param {number} [width] 宽度
* @param {number} [height] 高度
* @returns {Subject<any>}
* @param {Placement} position 显示位置
* @param {boolean} isAutoClose 是否可自动关闭
* @returns {Observable<any>}
* @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> {
let viewdata: any = {};
Object.assign(viewdata, JSON.parse(JSON.stringify(context)));
this.subject = new Subject<any>();
public openPop(event: any, view: any, context: any = {}, data: any, position?: Placement, isAutoClose?: boolean): Observable<any> {
const subject = new Subject<any>();
if(!event){
console.error("事件触发源无值，强制返回");
return subject.asObservable();
}
if(!view.width) view.width = 300;
if(!view.height) view.height = 300;
this.openPopover(event, (h: CreateElement) => {
return h(view.viewname, {
class: {
viewcontainer2: true,
},
props: {
viewdata: JSON.stringify(viewdata),
viewdata: JSON.stringify(context),
viewDefaultUsage: false,
viewparam:JSON.stringify(data)
viewUsage: 4,
viewparam: JSON.stringify(data)
},
on: {
viewdataschange: ($event: any) => this.dataChange($event),
close: ($event: any) => this.viewclose($event)
},
close: (result: any) => {
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 {string} [title]
* @param {PopperJs.Placement} [position='left']
* @param {Placement} [position='left']
* @param {boolean} [isAutoClose=true]
* @param {number} [width]
* @param {number} [height]
* @returns {void}
* @param {number} [width=300]
* @param {number} [height=300]
* @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();
const element: Element = event.toElement || event.srcElement;
if (element.hasAttribute('app-popover-tag')) {
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();
if (!this.vueExample) {
this.initVueExample();
}
this.initVueExample();
const _element: any = this.vueExample.$el;
this.popperDestroy();
const zIndex = this.vueExample.$store.getters.getZIndex();
if (zIndex) {
this.zIndex = zIndex + 100;
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;
// 更新vue实例内容
this.vueExample.$data.title = title;
this.vueExample.$data.content = content;
this.vueExample.$data.isShow = true;
this.vueExample.$forceUpdate();
// 绘制popover
const config: PopperJs.PopperOptions = {
this.showPopper = true;
Object.assign(this.vueExample.$data, { content, width, height, zIndex: this.zIndex });
const el: any = this.vueExample.$el;
this.popperExample = createPopper(element, el, {
placement: position,
onCreate: () => {
this.showPopper = true;
},
onUpdate: (arg) => {
const popper: any = arg.instance.popper;
popper.style.display = 'none';
},
modifiers: {
flip: {
boundariesElement: 'viewport'
},
preventOverflow: {
boundariesElement: document.getElementsByClassName('app-index')[0]
}
}
};
this.popperExample = new PopperJs(element, this.vueExample.$el, config);
this.popperExample.update();
strategy: 'absolute',
modifiers: [preventOverflow, flip]
});
this.vueExample.$forceUpdate();
}
/**
......@@ -316,22 +201,15 @@ export class AppPopover {
*
* @memberof AppPopover
*/
public destroy(): void {
public popperDestroy(): void {
if (this.popperExample) {
this.popperExample.destroy();
if (this.zIndex) {
if (this.zIndex !== 0) {
const zIndex: any = this.zIndex;
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.activePopoverTag = '';
this.vueExample.$data.isShow = false;
this.vueExample.$forceUpdate();
}
}
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或