Vue.js 中的 GridLayout 组件点击事件处理

<template>
    <div class='indexHome'>
        <grid-layout
            :layout.sync='layout'
            :col-num='24'
            :row-height='2'
            :is-draggable='false'
            :is-resizable='false'
            :is-mirrored='false'
            :vertical-compact='true'
            :autoSize='true'
            :margin='[10, 10]'
            :use-css-transforms='true'
        >
<pre><code>        &lt;grid-item v-for='item in layout'
                   :x='item.x'
                   :y='item.y'
                   :w='item.w'
                   :h='item.h'
                   :i='item.i'
                   :key='item.i'&gt;
            &lt;!--Tab--&gt;
            &lt;layout-tab :ref='item.config.name' v-if='item.defConf == 'tab' ' :config='item.config'&gt;&lt;/layout-tab&gt;
            &lt;!--图表--&gt;
            &lt;chart-view v-else-if='item.defConf == 'chart' ' :layoutItem='item' :config='item.config'&gt;&lt;/chart-view&gt;
            &lt;!--ureport报表--&gt;
            &lt;ureport-view v-else-if='item.defConf == 'ureport' ' :config='item.config' :layoutItem='item'&gt;&lt;/ureport-view&gt;
            &lt;!--自定义组件--&gt;
            &lt;custom-view v-else-if='item.defConf == 'custom' ' :config='item.config' &gt;&lt;/custom-view&gt;
            &lt;!--Form List Tree--&gt;
            &lt;component v-else-if='item.defConf == 'form' || item.defConf == 'list' || item.defConf == 'tree' ' :ref='item.config.alias' :is='item.config.component'
                       :config='item.config'&gt;&lt;/component&gt;
            &lt;!--日历组件--&gt;
            &lt;calendar-view v-else-if='item.defConf == 'calendar' ' :config='item.config' &gt;&lt;/calendar-view&gt;
            &lt;!--自定义组件--&gt;
            &lt;portal-layoutview v-else ref='portalLayoutview' :insColumnDef='item.insColumnDef'&gt;&lt;/portal-layoutview&gt;
        &lt;/grid-item&gt;
    &lt;/grid-layout&gt;
&lt;/div&gt;
</code></pre>
</template>
<script src='vue-grid-layout.umd.min.js'></script>
<script>
import {RxDialog, Util, DomUtil} from 'jpaas-common-lib';
import VueGridLayout from 'vue-grid-layout';
import insPortalDefApi from '@/api/portal/core/insPortalDef';
import PortalLayoutview from './PortalLayoutview';
import ChartView from '@/views/modules/form/core/formComponent/ChartView';
import CustomView from '@/views/modules/form/core/formComponent/CustomView';
import layoutTab from '@/views/modules/form/core/formCustomLayout/LayoutTab';
import UreportView from '@/views/modules/form/core/formComponent/UreportView';
import Vue from 'vue';
import FormComponent from '@/views/modules/form/core/formComponent/FormComponent';
import ListComponent from '@/views/modules/form/core/formComponent/ListComponent';
import TreeCompoment from '@/views/modules/form/core/formComponent/TreeCompoment';
import CalendarView from '@/views/modules/form/core/formComponent/CalendarView';
<p>Vue.component('portal-layoutview', PortalLayoutview);
Vue.component(FormComponent.name, FormComponent);
Vue.component(ListComponent.name, ListComponent);
Vue.component(TreeCompoment.name, TreeCompoment);</p>
<p>export default {
name: 'portal-layout-preview',
props: ['portId',
//这个是从DialogView打开时需要用到的。
'menuParams'
],
data() {
return {
layout: [],
indexNum: 0,
isOpenThis: false,//是否进入当前组件
}
},
components: {
RxDialog,
insPortalDefApi,
GridLayout: VueGridLayout.GridLayout,
GridItem: VueGridLayout.GridItem,
ChartView,
layoutTab,
UreportView,
CustomView,
CalendarView
},
created() {
this.isOpenThis = true;
this.getDataList();
},
activated() {
this.isOpenThis = true;
},
deactivated() {
this.isOpenThis = false;
},
methods: {
getAlias() {
var alias = '';
if (this.$route.meta.params) {
var json = JSON.parse(this.$route.meta.params);
alias = json.alias;
} else if (this.$route.params) {
alias = this.$route.params.alias;
} else if (this.menuParams) {
var params = JSON.parse(this.menuParams);
alias = params.alias;
}
return alias;
},
getDataList() {
if (this.portId) {
this.getLayoutListByPortalId();
} else {
var alias = this.getAlias();
if (alias) {
this.getLayoutListByPortalKey(alias);
} else {
this.getLayoutListByLoginUser();
}
}
},
getLayoutListByPortalKey(key) {
return insPortalDefApi.getLayoutListByPortalKey(key).then(res =&gt; {
if (res.length &gt; 0) {
this.indexNum = res.length;
this.layout = res;
}
});
},
getLayoutListByPortalId() {
return insPortalDefApi.getLayoutListByPortalId(this.portId).then(res =&gt; {
if (res.length &gt; 0) {
this.indexNum = res.length;
this.layout = res;
}
});
},
getLayoutListByLoginUser() {
return insPortalDefApi.getLayoutListByLoginUser().then(res =&gt; {
if (res &amp;&amp; res.length &gt; 0) {
this.indexNum = res.length;
this.layout = res;
}
});
},
},
watch: {
'$route': {
handler: function (val) {
//防止 因为keep-alive的原因 路由改变 这个方法一直被调用；
if (!this.isOpenThis) {
return;
}
var alias = this.getAlias();
if (alias) {
this.getLayoutListByPortalKey(alias);
} else {
this.getLayoutListByLoginUser();
}
},
deep: true
}
}
}
</script></p>
<style lang='less' scoped>
.indexHome {
    width: 100%;
    height: 100%;

    box-sizing: border-box;
    background-color: #f0f2f5;
}

.btnSpan {
    border-radius: 10px;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 18px;
    background: #1890ff;
    display: inline-block;
    margin-left: 6px;
    cursor: pointer;
}

.btnSpan i {
    color: #fff;
    font-size: 10px;
    margin-top: 3px;
}

.gridLayoutClass {
    background: #fff;
    border: 1px solid #ddd;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column
}

.headPClass {
    line-height: 40px;
    border-bottom: 1px solid #ddd;
}

.bodyDivClass {
    flex: 1;
}

.toolTabs {
    height: 100%;
}

ul, li {
    list-style: none;
}
</style>
<p>在这个代码中，点击事件是在 <code>&lt;grid-item&gt;</code> 组件内部定义的。根据 <code>item.defConf</code> 的不同取值，会渲染不同的组件，每个组件都会有相应的点击事件。例如，对于 <code>&lt;layout-tab&gt;</code> 组件，可以在其内部定义点击事件。同样，对于其他组件，如 <code>&lt;chart-view&gt;</code>、<code>&lt;ureport-view&gt;</code> 等，也可以在其内部定义相应的点击事件。</p>