基于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

基于vue的iviewui组件应用和封装开发_第1张图片

页面主题配置:
<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 导航菜单

基于vue的iviewui组件应用和封装开发_第2张图片

<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 标签页

基于vue的iviewui组件应用和封装开发_第3张图片

<Tabs type="card">
        <TabPane label="标签一">标签一的内容</TabPane>
        <TabPane label="标签二">标签二的内容</TabPane>
        <TabPane label="标签三">标签三的内容</TabPane>
    </Tabs>
Switch 开关

基于vue的iviewui组件应用和封装开发_第4张图片

 <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 选择器

基于vue的iviewui组件应用和封装开发_第5张图片

<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 数字输入框

基于vue的iviewui组件应用和封装开发_第6张图片

 <InputNumber :max="100" :min="1" v-model="" style="width: 100%;height: 100%;"></InputNumber>  style="width:100%"/>
Message 全局提示

基于vue的iviewui组件应用和封装开发_第7张图片

//消息提醒  info|success|warning|error
      msgSubDialog: function(_this,type, content) {
     
            _this.$Message[type]({
     
              background: true,
              content: content
            });
      }
Modal 对话框

基于vue的iviewui组件应用和封装开发_第8张图片

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 返回顶部

基于vue的iviewui组件应用和封装开发_第9张图片

<BackTop></BackTop>
Table组件

基于vue的iviewui组件应用和封装开发_第10张图片
满足增删查改

<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 评分

基于vue的iviewui组件应用和封装开发_第11张图片

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

基于vue的iviewui组件应用和封装开发_第12张图片
第二种:上下拖动、删除、添加目录等等
参考该文章依照官网和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>

你可能感兴趣的:(#,Vue)