細數使用View UI（iView）開發中遇到的坑

一、前言

View UI，即原先的 iView，是一套基於 Vue.js 的開源 UI 組件庫，主要服務於 PC 界面的中后台產品。

官網地址：https://www.iviewui.com/docs/introduce

 

二、正文

由於之前Vue的項目主要使用的UI框架為elementUI，近期有個新項目有機會可以使用一下沒有使用過的UI框架，在使用中遇到一些問題，總結如下：

1.下拉菜單的點擊事件

<Select v-model="model1" style="width:200px">
    <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>

 這是官網中下拉菜單的API，實際使用中，發現on-change並不生效（@change也不生效），正確寫法應為@on-change=" "，例如：

<Select v-model="model1" style="width:200px" @on-change="changeFunc">
    <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>

 

2.下拉框的點擊事件

<Dropdown>
    <a href="javascript:void(0)">
        下拉菜單
        <Icon type="ios-arrow-down"></Icon>
    </a>
    <DropdownMenu slot="list">
        <DropdownItem>驢打滾</DropdownItem>
        <DropdownItem>炸醬面</DropdownItem>
        <DropdownItem disabled>豆汁兒</DropdownItem>
        <DropdownItem>冰糖葫蘆</DropdownItem>
        <DropdownItem divided>北京烤鴨</DropdownItem>
    </DropdownMenu>
</Dropdown>

實際使用中，發現on-click並不生效（@click也不生效），正確寫法應為@click.native=" "，例如:

<Dropdown>
    <a href="javascript:void(0)">
        下拉菜單
        <Icon type="ios-arrow-down"></Icon>
    </a>
    <DropdownMenu slot="list">
        <DropdownItem @click.native="clickFunc">驢打滾</DropdownItem>
        <DropdownItem>炸醬面</DropdownItem>
        <DropdownItem disabled>豆汁兒</DropdownItem>
        <DropdownItem>冰糖葫蘆</DropdownItem>
        <DropdownItem divided>北京烤鴨</DropdownItem>
    </DropdownMenu>
</Dropdown>

 

三、后記

本篇博客將會持續記錄使用View UI過程中遇到的問題並更新，希望大家提出寶貴的意見和建議。