| | |
| | | </template> |
| | | |
| | | <script> |
| | | |
| | | export default { |
| | | name: "dynamic-custom", |
| | | components:{ |
| | | 'UI':()=>import('@/views/base/UIContentViewerInDialog'), |
| | | 'test':()=>import('@/components/custom-ui/test'), |
| | | 'test2':()=>import('@/components/custom-ui/test2'), |
| | | }, |
| | | props:{ |
| | | componentVO:{ |
| | | type:Object, |
| | |
| | | default: true |
| | | }, |
| | | }, |
| | | components:{ |
| | | 'my-dynamic-component': ()=>import('@/views/base/UIContentViewerInDialog') |
| | | }, |
| | | data() { |
| | | return { |
| | | height:'300px', |
| | | customClass:this.componentVO.customClass, //UI:type#content?param=xxx或者 组件name:type#content?param=xxx |
| | | isError:false, //路径解析失败 |
| | | currentComponent: 'my-dynamic-component', |
| | | componentPath:'@/views/base/UIContentViewerInDialog' //自定义使用的组件路径 |
| | | currentComponent: 'UI',//组件name |
| | | } |
| | | }, |
| | | computed:{ |
| | | customOptions() { |
| | | let componentPath='@/views/base/UIContentViewerInDialog'; |
| | | if(this.customClass.indexOf(":") <0){ |
| | | this.isError=true; |
| | | return ; |
| | | } |
| | | |
| | | if(this.customClass.split(':')[0]!='UI' && this.customClass.split(':')[0]!='ui'){ |
| | | componentPath='@/views/custom/'+this.customClass.split(':')[0]; |
| | | this.currentComponent=this.customClass.split(':')[0]; |
| | | } |
| | | let urlParams={}; |
| | | let btmType='' |
| | |
| | | }) |
| | | } |
| | | |
| | | this.componentPath=componentPath; |
| | | return { |
| | | btmType:btmType, |
| | | content:content, |
| | | urlParams: urlParams, |
| | | uiComponentType: this.componentVO.uiComponentType, |
| | | uiComponentTypeText: this.componentVO.uiComponentTypeText, |
| | | uiParseClass: this.componentVO.uiParseClass |
| | | urlParams: urlParams |
| | | } |
| | | }, |
| | | asyncComponent() { |
| | | return import(this.componentPath); |
| | | } |
| | | }, |
| | | created() { |
| | | debugger; |
| | | this.components["my-dynamic-component"] = import(this.componentPath); |
| | | |
| | | }, |
| | | mounted() { |
| | | //this.getHeight(this.$parent); |
| | | }, |
| | | methods:{ |
| | | getHeight(el){ |
| | | if(el.$el.clientHeight>50){ |
| | | this.height=el.$el.clientHeight+'px'; |
| | | }else { |
| | | this.getHeight(el.$parent); |
| | | } |
| | | } |
| | | } |
| | | } |
| | | </script> |