基于vue的iviewui组件应用和封装开发
IviewUI官方文档
目录
-
-
- 什么是iviewUI?
- 应用组件及语法
-
-
- 引用
- 页面布局Layout
- Divider 分割线
- Menu 导航菜单
- Tabs 标签页
- Switch 开关
- Select 选择器
- InputNumber 数字输入框
- Message 全局提示
- Modal 对话框
- BackTop 返回顶部
- Table组件
- Rate 评分
- 树组件拖拽
- 路由
-
-
什么是iviewUI?
View UI®，即原先的 iView，是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品。
应用组件及语法
引用
在项目生产和开发配置文件中注入组件的依赖：
"iview": "^3.5.4",
在项目前端入口文件中实例化vue时，注册vue中
import ViewUI from 'view-design';
import 'view-design/dist/styles/iview.css';
Vue.use(ViewUI);
组件注册：
import Vue from 'vue';
//导入组件
import FieldyhmListfrom './fieldyhmList';
//注册组件y-field-list：为组件中自定义的标签名
Vue.component('y-field-list', FieldyhmListfrom );
//默认导出所有
export default {
};
下面在对应模块中直接引用你自定义好的标签即可
页面布局Layout
页面主题配置：
<template>
<div class="layout">
<Layout>
<Sider ref="side1" hide-trigger collapsible :collapsed-width="78" v-model="isCollapsed">
<Menu active-name="1-2" theme="dark" width="auto" :class="menuitemClasses">
<MenuItem name="1-1">
<Icon type="ios-navigate"></Icon>
<span>Option 1</span>
</MenuItem>
<MenuItem name="1-2">
<Icon type="ios-search"></Icon>
<span>Option 2</span>
</MenuItem>
<MenuItem name="1-3">
<Icon type="ios-settings"></Icon>
<span>Option 3</span>
</MenuItem>
</Menu>
</Sider>
<Layout>
<Header :style="{padding: 0}" class="layout-header-bar">
<Icon @click.native="collapsedSider" :class="rotateIcon" :style="{margin: '0 20px'}" type="md-menu" size="24"></Icon>
</Header>
<Content :style="{margin: '20px', background: '#fff', minHeight: '260px'}">
Content
</Content>
</Layout>
</Layout>
</div>
</template>
Divider 分割线
<Divider>With Text</Divider>
Menu 导航菜单
<Menu ref="sideMenu" :theme="theme" width="auto" :active-name="activeName" :open-names="openNames" :class="menuitemClasss">
<!-- @on-select="click" -->
<Submenu v-for="(item, index) in menuList" :name="item.id" :key="item.id" style="text-align:left;">
<div slot="title">
<div class="rowDirStyle" :title="item.topicName" @click="dirClick(item)">{
{
item.topicName }}</div>
<!-- 目录删除 -->
<Icon type="md-close" class="show-icon" @click.stop="delCatalogue(item)" />
</div>
<Menu-item v-for="(obj, index) in item.children" :name="obj.id" :key="obj.id">
<template>
<Row>
<i-col span="22">
<div class="rowSubStyle" :title="obj.topicName" @click="subjectClick(obj)">{
{
obj.topicName }}</div>
<Icon class="show-icon" :type="obj.visibleState == 1 ? 'md-eye' : 'md-eye-off'" @click.stop="concealData(obj)" />
<Icon class="show-icon" type="md-close" @click.stop="delSubCatalogue(obj)" />
</i-col>
</Row>
</template>
</Menu-item>
</Submenu>
</Menu>
theme：控制组件主题
menuList：数据集合
item.children：二级目录
组件的穿透事件，通过stop即可
Tabs 标签页
<Tabs type="card">
<TabPane label="标签一">标签一的内容</TabPane>
<TabPane label="标签二">标签二的内容</TabPane>
<TabPane label="标签三">标签三的内容</TabPane>
</Tabs>
Switch 开关
<Switch size="large">
<span slot="open">开启</span>
<span slot="close">关闭</span>
</Switch>
脚本形式：
render: (h, {
row, index}) => {
let edit;
if (self.editIndex === index) {
self.editState = row.state;
edit=[h('i-switch', {
props: {
size: 'large',
/* disabled:true, */
value: typeof(row.state)==="number"?(row.state===1?true:false):(row.state===true?true:false)
},
scopedSlots: {
open: () => h('span', '开启'),
close: () => h('span', '关闭')
},
on: {
'on-change': value => {
self.data[index].state = value;
}
}
})];
}else {
edit = typeof(self.data[index].state)==="number"?(self.data[index].state===1?"开启":"关闭"):(self.data[index].state===true?"开启":"关闭");
}
return h('div', [edit]);
}
Select 选择器
<Select v-model="model1" style="width:200px">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{
{
item.label }}</Option>
</Select>
<script>
export default {
data () {
return {
cityList: [
{
value: 'New York',
label: 'New York'
},
{
value: 'London',
label: 'London'
},
{
value: 'Sydney',
label: 'Sydney'
},
{
value: 'Ottawa',
label: 'Ottawa'
},
{
value: 'Paris',
label: 'Paris'
},
{
value: 'Canberra',
label: 'Canberra'
}
],
model1: ''
}
}
}
</script>
render: (h, {
row, index}) => {
let edit;
if (self.editIndex === index) {
let options = self.displayIdArray.map(v => {
return h('Option',{
props: {
value: v.code,
leble: v.name
}
}, v.name)
})
edit = [h('Select', {
props: {
value: self.data[index].displayCode,
placeholder: '请选择',
'label-in-value':true,
transfer: true
},
on: {
'on-change': (value) => {
//更新数据库--统一保存--提示更改此处会销毁上一次保存的结果
this.$Modal.confirm({
title: '切换提示',
content: 'xxx',
okText: '确定',
cancelText: '取消',
onOk: function() {
self.data[index].displayCode = value.value;
//提交行存储
/* self.$store.commit('mdmStyle', self.data[index]); */
//联动
self.rowClick(self.data[index]);
//删除
self.delStyleAttributeAndCache(self.data[index].id);
},
onCancel: function() {
//取消
return;
}
});
}
}
},options)]
} else {
edit = this.$tool.toDisplayIdArray(self.displayIdArray,self.data[index].displayCode);
}
return h('div', [edit]);
}
InputNumber 数字输入框
<InputNumber :max="100" :min="1" v-model="" style="width: 100%;height: 100%;"></InputNumber> style="width:100%"/>
Message 全局提示
//消息提醒 info|success|warning|error
msgSubDialog: function(_this,type, content) {
_this.$Message[type]({
background: true,
content: content
});
}
Modal 对话框
this.$Modal.confirm({
title: '切换提示',
content: '切换显示方式之后，会消除之前保存的显示方式配置。需要配置新的显示参数。',
okText: '确定',
cancelText: '取消',
onOk: function() {
self.data[index].displayCode = value.value;
//提交行存储
/* self.$store.commit('mdmStyle', self.data[index]); */
//联动
self.rowClick(self.data[index]);
//删除
self.delStyleAttributeAndCache(self.data[index].id);
},
onCancel: function() {
//取消
return;
}
});
BackTop 返回顶部
<BackTop></BackTop>
Table组件
满足增删查改
<Table max-height="170" border :columns="columns" :data="data" :size="small" :disabled-hover="true" highlight-row @on-row-click="rowClick"></Table>
columns: [
{
title: '序号',
type: 'index',
key: 'index',
align: 'center',
width: '80px'
},
{
title: '标题',
key: 'styleName',
align: 'center',
render: (h, {
row,index}) => {
let edit;
if (self.editIndex === index) {
edit = [h('Input', {
props: {
type: 'text',
maxlength: '20',
value: row.styleName
},
style: {
width: '100%'
},
on: {
input: (val) => {
self.data[index].styleName = val; //双向绑定
}
}
})]
} else {
edit = self.data[index].styleName;
}
return h('div', [edit]);
}
},
{
title: '下拉选项',
key: 'displayCode',
align: 'center',
render: (h, {
row, index}) => {
let edit;
if (self.editIndex === index) {
let options = self.displayIdArray.map(v => {
//枚举值动态显示和缓存
return h('Option',{
props: {
value: v.code,
leble: v.name
}
}, v.name)
})
edit = [h('Select', {
props: {
value: self.data[index].displayCode,
placeholder: '请选择',
'label-in-value':true,
transfer: true
},
on: {
'on-change': (value) => {
//更新数据库--统一保存--提示更改此处会销毁上一次保存的结果
this.$Modal.confirm({
title: '切换提示',
content: '切换显示方式之后，会消除之前保存的显示方式配置。需要配置新的显示参数。',
okText: '确定',
cancelText: '取消',
onOk: function() {
self.data[index].displayCode = value.value;
//提交行存储
/* self.$store.commit('mdmStyle', self.data[index]); */
//联动
self.rowClick(self.data[index]);
//删除
self.delStyleAttributeAndCache(self.data[index].id);
},
onCancel: function() {
//取消
return;
}
});
}
}
},options)]
} else {
edit = this.$tool.toDisplayIdArray(self.displayIdArray,self.data[index].displayCode);
}
return h('div', [edit]);
}
},
{
title: '状态',
key: 'state',
align: 'center',
width: '100px',
render: (h, {
row, index}) => {
let edit;
if (self.editIndex === index) {
self.editState = row.state;
edit=[h('i-switch', {
props: {
size: 'large',
/* disabled:true, */
value: typeof(row.state)==="number"?(row.state===1?true:false):(row.state===true?true:false)
},
scopedSlots: {
open: () => h('span', '开启'),
close: () => h('span', '关闭')
},
on: {
'on-change': value => {
self.data[index].state = value;
}
}
})];
}else {
edit = typeof(self.data[index].state)==="number"?(self.data[index].state===1?"开启":"关闭"):(self.data[index].state===true?"开启":"关闭");
}
return h('div', [edit]);
}
},
{
title: '操作',
key: 'operation',
align: 'center',
width: '100px',
renderHeader: (h, {
row, index}) => {
//添加
return [
h('span', ''),
h('Icon', {
props: {
type: 'md-add',
size: 'small'
},
style: {
fontSize: '24px', // 改变icon的样式
color: '#34C0A8',
cursor: 'pointer'
},
on: {
click: () => {
//添加数据
self.data.push({
id: this.$tool.uuid(),
topicId: '',
datamodeId: '',
styleName: '',
displayCode: 'heatValue',
state: true,
relationMdmStyleOneMdmStyleAttribute: []
});
//默认的显示方式联动
if((self.data.length-1)>=10){
self.$tool.msgSubDialog(self,'warning','样式列表行数已到最大行,请新建主题添加');
}else{
self.rowClick(self.data[self.data.length-1]);
}
}
}
})
];
},
render: (h, {
row, index}) => {
if (this.editIndex === index) {
return h('div',[h('Icon', {
props: {
--保存当前行锁定数据
type: 'md-checkmark',
size: 'small'
},
style: {
fontSize: '24px', // 改变icon的样式
color: '#aaaaaa',
cursor: 'pointer'
},
on: {
click: () => {
//单行的样式列表修改
this.editIndex = -1;
}
}
}, '保存')
]);
} else {
return h('div',[h('Icon', {
props: {
type: 'ios-create-outline',
size: 'small'
},
style: {
fontSize: '24px', // 改变icon的样式
color: '#aaaaaa',
cursor: 'pointer'
},
on: {
click: () => {
--编辑当前行数据
self.editName = row.styleName;
self.editDisplayId = row.displayCode;
self.editState = row.state;
self.editIndex = index;
}
}
}, '修改'),
h('Icon', {
//删除
props: {
type: 'md-close',
size: 'small'
},
style: {
fontSize: '24px', // 改变icon的样式
color: '#c1c1c1',
cursor: 'pointer'
},
on: {
click: index => {
this.delDatarow(row, self);
}
}
})
]);
}
}
}
]
Rate 评分
<Rate disabled v-model="valueDisabled" />
树组件拖拽
第一种：只需要满足拖入另外一个组件进行展示
<template>
<div class="hello">
<Tree :data="tree" :render="renderContent" style="text-align: left;margin-top: 10px;"></Tree>
<div @dragenter="allowDrop($event)">
<Input type="text" @on-blur="inputBlur" v-model="name.title"
placeholder="请拖入显示字段"/>
</div>
</div>
</template>
<script>
export default {
data() {
return {
name: {
title: '',
id: '',
fieldName: '',
fieldType: '',
fieldRemarkInfo: '',
},
buttonProps: {
type: 'default',
size: 'small'
},
dragstartNode: '',
dragstartData: '',
msg: '项目测试',
tree: [
{
title: '维度' /* label显示字段 */,
id: '' /* id */,
fieldName: '' /* 名称 */,
fieldType: '' /* 类型 */,
fieldRemarkInfo: '' /* 描述 */,
expand: true,
children: [
{
title: '网格属性',
expand: true,
id: '',
fieldName: '',
fieldType: '',
fieldRemarkInfo: '',
children: [
{
title: '网格编号', id: '1', fieldName: '2', fieldType: '3', fieldRemarkInfo: '4' },
{
title: '网格星级评价', id: '5', fieldName: '6', fieldType: '7', fieldRemarkInfo: '8' }
]
}
]
},
{
title: '度量',
expand: true,
children: [
{
title: '运行数据',
id: '',
fieldName: '',
fieldType: '',
fieldRemarkInfo: '',
expand: true,
children: [
{
title: '线路负载率', id: '', fieldName: '', fieldType: '', fieldRemarkInfo: '' },
{
title: '配变负载率', id: '', fieldName: '', fieldType: '', fieldRemarkInfo: '' }
]
}
]
}
]
};
},
mounted() {
},
methods: {
inputBlur: function() {
if(this.name.title=="" || typeof(this.name.title)=="undefined"){
this.name="";
}
},
allowDrop: function(event) {
this.nameval=JSON.parse(JSON.stringify(this.dragstartData));
},
renderContent(h, {
root, node, data }) {
return h(
'span',
{
style: {
display: 'inline-block',
width: '100%'
},
attrs: {
draggable: 'true'
},
on: {
// dragstart –> dragenter –> dragover –> drop –> dragend
/*
dragstart：开始拖元素触发
dragenter：元素拖进可drop元素（绑定drop事件的元素）时触发
dragover：当元素拖动到drop元素上时触发
drop：当元素放下到drop元素触发
dragleave ：当元素离开drop元素时触发
drag：每次元素被拖动时会触发
dragend：放开拖动元素时触发
*/
//dragenter:()=>this.handleDragenter(root, node, data),
dragstart: () => this.handleDragStart(root, node, data),
//dragover: () => this.handleDragOver(root, node, data),
//dragend: () => this.handleDragEnd(root, node, data),
// drop: ()=> this.handleDrop(root, node, data),
}
},
[
h('span', [
h('Icon', {
props: {
type: 'ios-paper-outline'
},
style: {
marginRight: '8px'
}
}),
h('span', data.title)
])
]
);
},
handleDragStart(root, node, data) {
//做目录和字段的级别识别
console.log(4);
const event = window.event || arguments[0];
this.dragstartNode = node;
this.dragstartData = data;
}
}
};
</script>
第二种：上下拖动、删除、添加目录等等
参考该文章依照官网和H5的拖拽
路由
主页面
<router-link to="/a">我是组件A</router-link>
<router-link to="/b">我是组件B</router-link>
<router-link to="/c">我是组件c</router-link>
子页面
<template>
<div>
<h2><router-link to="/c1">子组件1</router-link>|<router-link to="/c2">子组件2</router-link></h2>
<h2><router-link to="/">返回首页</router-link></h2>
<router-view></router-view>
</div>
</template>
子子页面
<template>
<div>
<h1>我是子组件1</h1>
<h2><router-link to="/c">返回上一层</router-link></h2>
<h2><router-link to="/c11">子组件1-1</router-link></h2>
<h2>将菜单固定显示到每个子组件的页面上</h2>
<router-view></router-view>
</div>
</template>
子子子页面
<template>
<div>
<h1>我是子组件1-1</h1>
<h2><router-link to="/c1">返回上一层</router-link></h2>
<router-view></router-view>
</div>
</template>
路由
export default new Router({
routes: [{
//平级路由
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/a',
name: 'First',
component: First
},
{
path: "/a2",
name: 'First2',
component: First2
},
{
path: '/b',
name: 'Two',
component: Two,
children: [{
//下级路由
path: "/b2",
name: 'Two2',
component: Two2
}]
},
{
path: '/c',
name: 'dirnew',
component: Dirnew,
children: [{
path: "/c1",
name: 'Dirnew1',
component: Dirnew1
},
{
path: "/c11",
name: 'Dirnew11',
component: Dirnew11
},
{
path: "/c2",
name: 'Dirnew2',
component: Dirnew2
}
]
}
]
})
//平级路由
页面整体内容会进行前后替换
//下级路由
会保留父级内容的基础上，进行子级内容展示
//路由视图挂载
<router-view></router-view>