Vue 메뉴 항목을 선언적으로 추가하는 방법
페이지 정보
작성자 GrapeCity
작성일 2019-07-23 13:45 조회 2,642회
댓글 0건
본문
관련링크
지금까지는 항목을 메뉴 항목 데이터 배열에 바인드하는 것이 wj-menu 컴포넌트에 항목을 추가하는 유일한 방법이었습니다. 항목의 모양을 사용자 정의하려면 formatItem 이벤트를 사용하고 해당 내용을 JS 코드로 생성해야 합니다.
그러나 Vue 템플릿에서 UI를 만들 때 메뉴의 한 부분은 템플릿에서 정의하고 다른 부분은 코드 뒤쪽에서 생성해야 하는 이 접근 방식이 불편할 수 있습니다. 메뉴와 해당 항목을 템플릿의 한 곳에서 모두 정의하는 것이 좋습니다.
이제 @grapecity/wijmo.vue2.input 모듈의 새로운 wj-menu-item 컴포넌트를 통해 가능합니다.
배열에서 항목을 정의하는 대신 이제 wj-menu에 중첩된 wj-menu-item 컴포넌트를 사용할 수 있습니다. 모든 wj-menu-item은 임의의 복잡한 내용으로 별도의 메뉴 항목을 정의하며 바인딩이 있는 다른 컴포넌트를 포함할 수 있습니다.
또한 wj-menu-separator 컴포넌트를 사용하여 메뉴 항목 사이에 구분 기호를 삽입할 수 있습니다.
예를 들어, 이 샘플의 다음 Vue 마크업은 종료 항목 앞에 풍부한 내용과 구분 기호가있는 파일 메뉴 항목을 정의합니다.
<wj-menu :header="'File'" :itemClicked="menuItemClicked">
<wj-menu-item>
<span class="glyphicon glyphicon-asterisk"></span>
<b>New</b>
<br>
<small><i>create a new file</i></small>
</wj-menu-item>
<wj-menu-item>
<span class="glyphicon glyphicon-folder-open"></span>
<b>Open</b>
<br>
<small><i>open an existing file or folder</i></small>
</wj-menu-item>
<wj-menu-item>
<span class="glyphicon glyphicon-floppy-disk"></span>
<b>Save</b>
<br>
<small><i>save the current file</i></small>
</wj-menu-item>
<wj-menu-separator></wj-menu-separator>
<wj-menu-item>
<span class="glyphicon glyphicon-remove"></span>
<b>Exit</b>
<br>
<small><i>exit the application</i></small>
</wj-menu-item>
</wj-menu>Vue v-for 지시문을 사용하여 데이터를 설명하는 항목 배열에서 여러 wj-menu-item(s)을 동적으로 생성할 수도 있습니다.
예를 들어, 이 샘플에서 가져온 아래의 마크업 스니펫은 palettes 배열에서 메뉴 항목을 생성합니다.
<wj-menu
:header="'Palette'"
:value="selectedPalette"
:itemClicked="selectedPaletteChanged">
<wj-menu-item :value="palette.name" v-for="palette in palettes">
<div>
<span style='float: right'>
<div
v-for="color in palette.colors"
v-bind:style="{
backgroundColor: color,
display:'inline',
padding:'2px',
height:'10px',
width:'3px'
}">
</div>
</span>
</div>
</wj-menu-item>
</wj-menu>여기서 wj-menu 컴포넌트는 itemsSource 속성을 사용하여 데이터 배열에 바인딩되지 않는 대신 데이터 배열에서 하위 wj-menu-item 컴포넌트를 생성합니다.
명령(Commands)
매개 변수를 사용하여 명령에 바인드 된 메뉴 항목을 선언적으로 정의 할 수 있습니다. wj-menu-item 컴포넌트는 인터페이스에서 cmd 및 cmdParam 속성을 노출하며, 이는 명령 및 해당 매개 변수에 각각 바인드 될 수 있습니다.
이 샘플에서 가져온 아래의 마크업 스니펫은 이러한 특성을 사용하여 값을 늘리거나 줄이는 메뉴 항목을 보여줍니다. 각 항목은 명령 매개 변수로 지정된 다른 증분 값을 나타냅니다.
<wj-menu id="changeTax" :header="'Tax Commands'">
<wj-menu-item :cmd="command" :cmdParam="0.50">Increment by 50%</wj-menu-item>
<wj-menu-item :cmd="command" :cmdParam="0.25">Increment by 25%</wj-menu-item>
<wj-menu-item :cmd="command" :cmdParam="0.05">Increment by 5%</wj-menu-item>
<wj-menu-separator></wj-menu-separator>
<wj-menu-item :cmd="command" :cmdParam="-0.05">Decrement by 5%</wj-menu-item>
<wj-menu-item :cmd="command" :cmdParam="-0.25">Decrement by 25%</wj-menu-item>
<wj-menu-item :cmd="command" :cmdParam="-0.50">Decrement by 50%</wj-menu-item>
</wj-menu>값 선택기(Value Pickers)
wj-menu 컴포넌트를 이제 값 선택기로 사용할 수 있습니다. wj-menu-item 컴포넌트는 항목과 관련된 값을 포함하고 있는 value 속성을 갖고 있습니다.
또한 wj-menu 자체에는 value 속성 이 있는데, 이 속성의 값은 메뉴 헤더 옆에 표시됩니다. 이 속성은 부모 컴포넌트 상태에 바인딩 될 수 있으며 itemClicked 이벤트를 사용하여 선택한 메뉴 항목과 관련된 값으로 상태를 업데이트할 수 있습니다.
이 예제에서는 브라우저 이름을 선택하는 데 사용할 수 있는 메뉴를 보여줍니다.
Template:
<wj-menu
:header="'Run'"
:value="browser"
:itemClicked="splitButtonItemClicked">
<wj-menu-item :value="'IE'">Internet Explorer</wj-menu-item>
<wj-menu-item :value="'Chrome'">Chrome</wj-menu-item>
<wj-menu-item :value="'FF'">FireFox</wj-menu-item>
<wj-menu-item :value="'Safari'">Safari</wj-menu-item>
<wj-menu-item :value="'Opera'">Opera</wj-menu-item>
</wj-menu>
JavaScript:
splitButtonItemClicked: function(menu) {
this.browser = menu.selectedItem.value;
}결론
wj-menu-item 및 wj-menu-separator 컴포넌트가 도입되면서 Vue 애플리케이션에서 메뉴를 정의하는 것이 훨씬 편리해졌습니다.
모든 항목이 포함된 전체 메뉴는 컴포넌트 템플릿에서 바로 정의할 수 있습니다. 항목에는 HTML 요소 또는 바인딩이 있는 다른 컴포넌트를 포함하여 풍부한 컨텐츠가 포함될 수 있습니다.
댓글목록
등록된 댓글이 없습니다.
