何时使用
弹窗型组件指的是有容器（如modal，drawer）包裹的，由属性栏上渲染的弹窗触发器触发的组件。
弹窗触发器为平铺组件，框架内置了默认的弹窗触发器，用户可参考默认触发器开发新的弹窗触发器
弹窗组件示例
源码展示
import { Component, Vue, Prop } from 'vue-property-decorator';
import { cloneDeep } from 'lodash';
import { ComponentNeedShow } from 'cloudpivot/common';
import { mixins } from 'vue-class-component';
@Component
export class PropertyModalBase extends mixins(ComponentNeedShow) {
modalData: any = null;
afterSHow(initData) {
this.modalData = cloneDeep(initData);
}
backData(value: any) {
this.$emit('backData', value);
}
otherValueChange(key, value) {
this.$emit('otherValueChange', key, value);
}
}// 需要外部组件通过ref调用show方法才能显示的组件，需要混入此mixin
import { Component, Vue, Prop } from 'vue-property-decorator';
import { observeModal } from 'cloudpivot/common/src/utils/dom';
@Component
export class ComponentNeedShow extends Vue {
//核心组件类型
componentType: 'modal' | 'drawer' | 'popover' | 'big-dialog' = 'modal';
componentVisible = false;
//核心组件的包装class
wrapClassName = '';
noFooter = false;
/**
* 组件的显示只有一个入口，就是本方法
* @param initData 初始化数据，某些数据需要在显示时传入
*/
show(initData?: any) {
let modalWrapClass = this.wrapClassName;
if (this.wrapClassName.includes(' ')) {
modalWrapClass = this.wrapClassName.split(' ')[0];
}
this.beforeShow(initData);
this.componentVisible = true;
this.afterShow(initData);
if (this.componentType === 'modal' && modalWrapClass) {
this.$nextTick(() => {
observeModal(modalWrapClass, {
noFooter: this.noFooter,
});
});
}
}
/**
* 组件的隐藏应该只有一个入口，就是本方法
*/
hidden() {
this.componentVisible = false;
this.afterHidden();
}
beforeShow(initData?: any) {}
afterShow(initData?: any) {}
afterHidden() {}
}属性说明
-
有用（6）
-
没有用（0）
