iView的使用

 

iview是一个基于vue的UI框架，主要用于编写后台、PC端页面。
 

在vue-cli中使用iview

1、安装iview

npm install iview --save

不要用iview官网给出的npm install命令，那个命令容易出问题
 

2、在main.js中导入iview

//导入iview的js文件
import iView from 'iview'
//导入iview的css文件
import 'iview/dist/styles/iview.css'

Vue.use(iView)

 

常见问题

<Col>等许多地方报警告

项目可以正常运行，只是VSCode语法检查不通过。

首选项 -> 设置 -> 搜索 vetur.validation.template -> 取消勾选

在非 template/render 模式下（例如使用 CDN 引用时），组件名要分隔，例如 DatePicker 必须要写成 date-picker。建议组件名都写成单词分隔形式。

 

类型检查失败

提供的是字符串，但期待的类型是xxx（不是字符串类型），eg.

vue.runtime.esm.js?2b0e:619 [Vue warn]: Invalid prop: type check failed for prop “animated”. Expected Boolean, got String with value “false”.

<Tabs type="card" :animated="false" closable @on-tab-remove="handleTabRemove"></Tabs>

在属性名前面加冒号即可。

 

属性值中引用的变量没有被解析

不管在属性值中引用的是vue data中的变量，还是v-for等指令中的临时变量，属性名前面都应该加冒号。

 

this的指向问题

在<script>中可以用this表示当前Vue对象，但在html元素中，this指向的是当前html元素，在html元素中使用data中的变量时，不能加this。

 

使用v-for渲染下拉列表时报警告

component lists rendered with v-for should have explicit keys

使用v-for渲染下拉列表时，v-for应该设置明确的key。给<Option>加上key属性即可，key属性的值和value属性的值保持一致。

<Select v-model="">
    <Option v-for="(dep,index) in depList" :key="dep.dep_id" :value="dep.dep_id">{{dep.dep_name}}</Option>
</Select>

属性名前面加冒号表示属性值中引用了变量

 

事件监听不生效

1、事件要加@
2、注意事件监听的添加位置，eg. @on-change是写在<Select>中的，不是写在<Option>中

 

颜色选择器显示为向下箭头

<ColorPicker recommend v-model="color" />

原因：v-model绑定的变量的值，或者value指定的值，不是颜色值，比如是空串。

 

关于iview提供的事件监听

事件触发时，返回xxx

官方文档中这句话的意思是：调用对应的处理函数时，会自动传入该参数
 

示例：使用分页提供的事件

<!-- 值绑定内存变量时，属性名要加冒号-->
<Page show-total show-elevator show-sizer :total="page.total" :page-size="page.pageSize" @on-change="pageChanged" @on-page-size-change="pageSizeChanged" />

// 处理分页的页码改变事件，会自动传入pageNum
pageChanged(pageNum) {

},
// 处理pageSize改变事件，自动传入pageSize
pageSizeChanged(pageSize) {

},