VueJS 컨텍스트 메뉴 활용법
추천0 비추천 0
페이지 정보
작성자 제이크
작성일 2024-03-11 13:17 조회 60회
댓글 0건
제품 버전 : 최신버전
본문
관련링크
https://demo.mescius.co.kr/wijmo/learn-wijmo/Input/Menu/ContextMenus/vue
이 링크와 같이 컨텍스트 메뉴를 적용하고자 하는데 어려움이 있어 질문 드립니다.
main.js
import { createApp } from 'vue'
import App from './App.vue'
import '@grapecity/wijmo.styles/wijmo.css';
import * as wjGrid from '@grapecity/wijmo.vue2.grid';
import * as wjInput from '@grapecity/wijmo.vue2.input';
const app = createApp(App);
// Wijmo Vue 컴포넌트를 전역으로 등록
app.component('WjFlexGrid', wjGrid.WjFlexGrid);
app.component('WjMenu', wjInput.WjMenu);
app.component('WjMenuItem', wjInput.WjMenuItem);
app.component('WjContextMenu', wjInput.WjContextMenu);
app.mount('#app');
App.vue
<template>
<div class="container-fluid">
<p>FlexGrid with ContextMenu</p>
<wj-flex-grid
id="FlexGrid"
v-wjContextMenu="'ctxMenuId'"
:itemsSource="data"
@contextmenu="gridContextMenu"
>
</wj-flex-grid>
<!-- 컨텍스트 메뉴 -->
<wj-menu
id="ctxMenuId"
ref="ctxMenu"
selectedValuePath="cmd"
style="display: none"
header="Context Menu"
dropDownCssClass="ctx-menu"
:itemClicked="menuItemClicked"
:initialized="menuInitialized"
>
<wj-menu-item cmd="cmdNew">
<span class="glyphicon glyphicon-asterisk"></span> New
</wj-menu-item>
<wj-menu-item cmd="cmdOpen">
<span class="glyphicon glyphicon-folder-open"></span> Open
</wj-menu-item>
<wj-menu-item cmd="cmdSave">
<span class="glyphicon glyphicon-floppy-disk"></span> Save
</wj-menu-item>
<wj-menu-separator />
<wj-menu-item cmd="cmdExit">
<span class="glyphicon glyphicon-remove"></span> Exit
</wj-menu-item>
</wj-menu>
</div>
</template>
<script>
import { getData } from "./data";
import * as wjInput from "@grapecity/wijmo.vue2.input";
export default {
name: "App",
components: {
WjMenu: wjInput.WjMenu,
WjMenuItem: wjInput.WjMenuItem,
},
data: function () {
return {
data: getData(),
ctxMenuEl: null,
ctxMenuControl: null,
};
},
methods: {
menuItemClicked: function (menu) {
alert(
"Executing **" +
menu.selectedValue +
"** for element **" +
menu.owner.id +
"**"
);
},
menuInitialized: function (menu) {
this.ctxMenuControl = menu;
},
},
};
</script>
<style>
.owners:after {
content: "";
clear: both;
display: block;
}
.owners > div {
float: left;
margin: 20px;
padding: 20px;
}
.container-fluid .wj-flexgrid {
max-height: 250px;
}
.container-fluid .wj-flexchart {
max-height: 250px;
}
.wj-content.ctx-menu {
padding: 3px;
min-width: 120px;
background: #fffbdd;
overflow: hidden;
}
.ctx-menu .wj-listbox-item {
text-align: center;
margin: 6px;
}
#customDetail .glyphicon {
font-size: 1.25em;
margin-right: 0.5em;
cursor: pointer;
color: gray;
}
body {
margin-bottom: 24pt;
}
</style>
data.js
// create some random data
export function getData() {
let countries = ['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece'], data = [];
//
for (let i = 0; i < countries.length; i++) {
data.push({
id: i,
country: countries[i % countries.length],
sales: Math.random() * 100000,
expenses: Math.random() * 50000
});
}
//
return data;
}
위와 같이 튜토리얼처럼 파일을 생성하였으나, wijmo.vue2.grid 모듈만 정상적으로 렌더링되고 wijmo.vue2.input 모듈은 적용이 안되는 것 같습니다. (우클릭해도 컨텍스트 메뉴가 나오지 않습니다.)
개발자 도구의 콘솔에서는 아래와 같이 경고 문구가 나옵니다.
댓글목록
등록된 댓글이 없습니다.
2 답변
