如今，向wj菜單組件添加項的方法將不限于：將其綁定到菜單項數(shù)據(jù)數(shù)組。

以聲明方式添加Vue菜單項

此前，要自定義項目的外觀，您必須使用formatItem事件并在JS代碼中生成其內(nèi)容。但是當(dāng)您在Vue模板中創(chuàng)建UI時，這種方法（其中一部分菜單必須在模板中定義，而另一部分應(yīng)該在代碼隱藏塊中創(chuàng)建）看起來并不方便。介于此，您可能更傾向于這種方式：在模板的同一位置中定義菜單及其項目。

點擊下載WijmoJS正式版

使用WijmoJS，通過\@grapecity/wijmo.vue2.input模塊中的新wj-menu-item組件即可實現(xiàn)這一點。

您現(xiàn)在可以使用嵌套到其wj菜單的wj-menu-item組件，而不是在數(shù)組中定義項目。每個wj-menu-item均可定義一個單獨的菜單項，可以是包含任意復(fù)雜性的內(nèi)容，也可以是綁定了其他組件的內(nèi)容。

除了定義單獨的菜單項外，還可以使用wj-menu-separator組件在菜單項之間插入分隔符。

例如，此示例中的以下Vue標(biāo)記定義了具有豐富內(nèi)容的菜單項，并在退出項之前使用分隔符：

<wj-menu :header="'File'" :itemClicked="menuItemClicked">
    <wj-menu-item>
        <span class="glyphicon glyphicon-asterisk"></span>&nbsp;&nbsp;
        <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>&nbsp;&nbsp;
        <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>&nbsp;&nbsp;
        <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>&nbsp;&nbsp;
        <b>Exit</b>
        <br>
        <small><i>exit the application</i></small>
    </wj-menu-item>
</wj-menu>

您還可以在Vue v-for指令的幫助下，從定義其數(shù)據(jù)的項目數(shù)組中動態(tài)生成多個wj-menu-item。

例如，下面的示例是從調(diào)色板數(shù)組中生成菜單項：

<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屬性綁定到數(shù)據(jù)數(shù)組。相反，它直接從數(shù)據(jù)數(shù)組中生成子wj-menu-item組件。

命令（Command）

您現(xiàn)在可以以聲明的方式，定義綁定帶參數(shù)/命令的菜單項。wj-menu-item組件從其接口中公開cmd和cmdParam屬性，這些屬性可以分別綁定菜單項的命令及其參數(shù)。

下面的代碼示例，演示了如何使用這些屬性來定義遞增或遞減的菜單項。每個項目表示作為命令參數(shù)指定的不同增量值：

<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 Picker）

wj-menu組件現(xiàn)在可以用作值選擇器。

wj-menu-item組件的value屬性包含與該項關(guān)聯(lián)的值。wj-menu本身具有value屬性，其值顯示在菜單標(biāo)題旁邊，此屬性可以綁定到父組件狀態(tài)，其中itemClicked事件可用于更新與所選菜單項相關(guān)聯(lián)的值的狀態(tài)。

此示例演示了用于選擇瀏覽器名稱的菜單：

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;
}

結(jié)論

隨著wj-menu-item和wj-menu-separator組件的引入，使用WijmoJS前端開發(fā)工具包在Vue應(yīng)用程序中定義菜單將變得更加容易。

如今，您可以在組件模板中定義包含其整個項目的菜單，該項目可以包含豐富的內(nèi)容，也可以包含HTML元素或其他綁定的組件。

想要獲得 WijimoJS 更多資源或正版授權(quán)的伙伴，

掃描關(guān)注慧聚IT微信公眾號，及時獲取最新動態(tài)及最新資訊