当前位置:首页 > VUEJS > iview > 正文内容

VueCLI3.0干货系列之集成iview

anan2021-07-27iview1114

之前项目中一直使用jQuery+bootstrap,使用VueCLI3.0之后接触了iview,自此抛弃了jQuery+bootstrap的组合,iview是纯vue写的,非常的适合在VueCLI3.0中使用,下面将介绍VueCLI3.0集成iview的使用方法,和一些实用技巧。

概念介绍VueCLI3.0是vue的脚手架工具,可以快速的搭建项目原型,是一款非常好用的vue工具,集成众多前端组件包括:vue、vuex、vue-router、webPack等,俗称为vue全家桶。

VueCLI3.0干货系列之集成iview

iview是一套基于vue.js的高质量UI组件库,主要服务于 PC 界面的中后台产品。

VueCLI3.0干货系列之集成iview

特点:

丰富的组件和功能,满足绝大部分网站场景

提供开箱即用的 Admin 系统 和 高阶组件库,极大程度节省开发成本

友好的 API ,自由灵活地使用空间

细致、漂亮的 UI

详细的文档

可自定义主题

谁在使用:

阿里巴巴

百度

腾讯

今日头条

京东

滴滴出行

美团

新浪

联想

科大讯飞

引入View UI插件1.Npm安装view ui

$ npm install view-design –save也可以利用VueCLI3.0提供的可视化配置界面,直接在插件中搜索iview,安装后即可使用。

2.main.js中引入插件

一般在webPack入口文件,main.js中配置如下:

import ViewUI from 'view-design'; import 'view-design/dist/styles/iview.css'; Vue.use(ViewUI);也可以按需要引入,这样打包时可以缩减文件体积。

首先安装babel-plugin-import,并在文件 .babelrc 中配置:

npm install babel-plugin-import --save-dev // .babelrc { "plugins": [["import", { "libraryName": "view-design", "libraryDirectory": "src/components" }]] }然后这样按需引入组件

import { Button, Table } from 'view-design'; Vue.component('Button', Button); Vue.component('Table', Table);按需引用仍然需要导入样式,即在 main.js 文件添加以下代码

import 'view-design/dist/styles/iview.css';VueCLI3.0中iview的使用项目中为了使用方便,可以在iview的基础上进行二次封装组件,这样使用起来就方便了,iview包括一系列完整的组件库,导航、表单和试图等等,本人针对其中的Menu导航菜单、table和upload组件做了二次封装,其他组件的使用可以参考iview官方网站()。

1. Menu导航菜单

定义模板

<Menu theme="light" :open-names="[navList[0].url]" width="100" @on-select="navigateTo" @on-open-change="navChange" accordion> <Submenu v-for="(item,i) in navList" :key="i" :index="item.name" :name="item.url"> <template slot="title"> <Icon type="ios-people" /> {{item.name}} </template> <MenuItem v-for="(navItem,navI) in item.children" :key="navI" :index="navItem.name" :name="navItem.url"> <Icon type="ios-stats" /> {{navItem.name}} </MenuItem> </Submenu> </Menu>定义菜单数据

navList:[ { name:"用户管理",url:"1",children:[ {name:"用户管理1",url:"/1"}, {name:"用户管理2",url:"/2"}, ] }, { name:"设备管理",url:"2",children:[ {name:"设备1",url:"/1"}, {name:"设备2",url:"/2"}, ] }, ],VueCLI3.0干货系列之集成iview

2. table

固定表头的table

模板

<Table border ref="table" :columns="columns" :data="data" @on-selection-change="handleSelectRow()" @on-row-click="rowClick" :highlight-row="true" :loading="loading" :max-height="tableHeight"></Table>外部调用时传递的参数

props:{ columns:{ default:[] }, data:{ default:[] }, height:{ default:0 }, loading:{ default:false } }组件调用外部函数方法,点击行触发事件

rowClick(colum,index){ this.$emit('selectedRow', colum) },如果表格行嵌套调用其他组件的话

通过给 columns 数据设置一项,指定 type: 'expand',即可开启扩展功能。

给行数据 data 的某项设置 _expanded 为 true,可以默认展开当前行,设置 _disableExpand 可以禁用当前行的展开功能。

引入组件

import expandRow from './table-expand.vue';在列的第一个参数定义如下

{ type: 'expand', width: 50, render: (h, params) => { return h(expandRow, { props: { row: params.row } }) } },效果图

VueCLI3.0干货系列之集成iview

3. upload文件上传

模板

<Upload :before-upload="handleUpload" :action="Url" :on-success='handleSuccess> <Button icon="ios-cloud-upload-outline">上传文件</Button> </Upload>handleUpload方法,在文件上传后进行处理,后手动进行提交。

handleUpload (file)if(file){this.files.push(file);}return false;},进行手动上传:

Upload(){var data = new FormData();let _this= this;//此处可以上传多个文件for(var i=0;i< _this.files.length;i++){data.append("file", _this.files[i]);}this.$axios({method: 'post',url: ‘){});}此处文件上传本人遇到两个问题说一下:

如果是单文件上传可以直接使用iview upload的上传功能,this.$refs.upload.post(file),如果是多个文件可以使用循环多次post上传,但是这样做总感觉不妥,因为有时希望一次请求上传多个文件,此方法就不符合要求了。使用formData进行上传时,可以手动多次append ‘file’字段进行多文件上传,此时使用axios进行上传时需要设置请求头,'Content-Type': 'multipart/form-data;charset=UTF-8'。此方法也有另外一个好处,如果只修改表单内容,不上传文件的话,使用iview upload的post方法无法进行提交,会报上传文件为空的错误。而使用axios可以解决此问题。总结以上就是VueCLI3.0集成iview的整个过程,其中列举了比较常用的menu、table和upload组件,还有其他好多常用组件可以参考iview官网。经过实测iview还是非常好用的,比bootstrap要好一些,element ui 也很不错,但是和VueCLI3.0集成的话,首推iview,感觉嵌入的紧密感更强一些,调用也更简单,感兴趣的小伙伴们可以试试。

打赏
版权声明:所有来源为第三方内容,若本站收录的文章无意侵犯了贵司版权,请给下面邮箱地址来信,我们会及时处理和回复,谢谢。

管理员邮箱:42004990@qq.com

微信公众号

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。