精华内容
参与话题
问答
  • iview_入门

    万次阅读 2018-07-09 19:01:07
    执行npm install iview --save 在项目中引入iview 引入 iView # 一般在 webpack 入口页面 main.js 中如下配置: import iView from 'iview' import 'iview/dist/styles/iview.css' //导入样式 Vue.config....

    执行npm install iview --save 在项目中引入iview
    引入 iView #
    一般在 webpack 入口页面 main.js 中如下配置:

    import iView from 'iview'
    import 'iview/dist/styles/iview.css'
    //导入样式
    
    Vue.config.productionTip = false
    Vue.use(iView)
    

    在非 template/render 模式下(例如使用 CDN 引用时),组件名要分隔,例如 DatePicker 必须要写成 date-picker。

    以下组件,在非 template/render 模式下,需要加前缀 i-:

    Button: i-button
    Col: i-col
    Table: i-table
    Input: i-input
    Form: i-form
    Menu: i-menu
    Select: i-select
    Option: i-option
    Progress: i-progress
    以下组件,在所有模式下,必须加前缀 i-,除非使用 iview-loader:
    Switch: i-switch
    Circle: i-circle
    2.因为iView 的所有组件文案默认使用的是中文,通过设置可以使用其它语言。
    在 Webpack 中使用 #
    完整引入 iView

    import Vue from 'vue';
    import iView from 'iview';
    import locale from 'iview/dist/locale/en-US';

    3.
    iView Loader
    用途 #
    统一 iView 标签书写规范,所有标签都可以使用首字母大写的形式,包括 Vue 限制的两个标签 Switch 和 Circle。

    虽然不推荐,但通过 loader 选项配置,可以开启所有标签前缀的写法了,比如 i-date-picker。
    安装 #
    首先通过 npm 安装 iview-loader

    npm install iview-loader --save-dev

    4.栅格
    采用了24栅格系统,将区域进行24等分
    使用row在水平方向创建一行
    将一组col插入在row中
    在每个col中,键入自己的内容
    通过设置col的span参数,指定跨越的范围,其范围是1到24
    每个row中的col总和应该为24
    水平排列的布局。
    col必须放在row里面。

    使用报错:
    Parsing error: x-invalid-end-tag :
    问题原因
    iView将标签渲染为原生html标签时,由于这些标签是自闭合的,所以有end标签会报错。
    解决方案
    修改配置文件,忽略该项检查:

    根目录下 - .eslintrc.js - rules
    添加一行:

    'vue/no-parsing-error': [2, { "x-invalid-end-tag": false }]

    重启dev: npm run dev

    5.layout
    组件概述 #
    Layout:布局容器,其下可嵌套 HeaderSiderContentFooter或 Layout 本身,可以放在任何父容器中。
    Header:顶部布局,自带默认样式,其下可嵌套任何元素,只能放在 Layout 中。
    Sider:侧边栏,自带默认样式及基本功能,其下可嵌套任何元素,只能放在 Layout 中。
    Content:内容部分,自带默认样式,其下可嵌套任何元素,只能放在 Layout 中。
    Footer:底部布局,自带默认样式,其下可嵌套任何元素,只能放在 Layout 中。

    展开全文
  • vue + iview项目构建

    万次阅读 多人点赞 2018-06-24 12:58:48
    最近在着手搭建自己的个人博客,确定技术栈为vue + node.js(express)+mysql,所以需要用vue写博客pc端以及后台管理系统页面,而UI组件则是用iview。把自己搭建项目的过程写出来,方便自己查阅,也供大家学习。 ...

    最近在着手搭建自己的个人博客,确定技术栈为vue + node.js(express)+mysql,所以需要用vue写博客pc端以及后台管理系统页面,而UI组件则是用iview。把自己搭建项目的过程写出来,方便自己查阅,也供大家学习。

    PS:vue.js有著名的全家桶系列,包含了vue-router,vuex, vue-resource,再加上构建工具vue-cli,就是一个完整的vue项目的核心构成。


    使用Vue-cli是快速构建VUE项目

    vue-cli是官方推荐的构建工具,简化了我们使用webpack的难度,并且支持热更新,所以我们只需要关注开发,从而省去了繁琐的服务重启以及webpack配置打包过程。

    此处是vue-cli构建过程,git构建过程在文章末

    //安装前需要配置node及npm环境
    //全局安装 vue-cli 如果本机以前安装过  就无须执行避免重复安装 
    $ npm install --global vue-cli
    //创建一个基于 webpack 的vue项目
    $ vue init webpack vue-iview-master // 后续按回车安装默认即可
    //进入到创建的vue项目
    $ cd vue-iview-master
    //安装依赖
    $ npm install
    //启动项目
    $ npm run dev //启动成功 http://localhost:8080 即可打开测试首页

    我的构建过程

    执行命令

    $ vue init webpack vue-iview-master

    打印信息

    ? Target directory exists. Continue? Yes
      A newer version of vue-cli is available.
    
      latest:    2.9.6
      installed: 2.9.3
    
    'git' �����ڲ����ⲿ���Ҳ���ǿ����еij���
    ���������ļ���
    ? Project name vue-iview-master
    ? Project description vue iview project
    ? Author wq
    ? Vue build standalone
    ? Install vue-router? Yes
    ? Use ESLint to lint your code? Yes
    ? Pick an ESLint preset Standard
    ? Set up unit tests Yes
    ? Pick a test runner jest
    ? Setup e2e tests with Nightwatch? Yes
    ? Should we run `npm install` for you after the project has been created? (recommended) npm
    
       vue-cli · Generated "vue-iview-master".

    执行命令

    $ npm run dev

    打印信息

    > vue-iview-master@1.0.0 dev G:\Git\public\vue-iview-master
    > webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
    
     95% emitting
    
     DONE  Compiled successfully in 4029ms                                                           12:36:44
    
     I  Your application is running here: http://localhost:8080

    安装iview

    当前项目根目录执行命令

    $ npm install --save iview

    引入iview

    src/main.js

    // The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import Vue from 'vue'
    import App from './App'
    import router from './router'
    import iView from 'iview' // 引入iview依赖
    import 'iview/dist/styles/iview.css' // 引入iview css样式
    
    Vue.config.productionTip = false
    Vue.use(iView) //使用iview组件 
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      components: { App },
      template: '<App/>'
    })

    新加入了三行代码

    import iView from 'iview' // 引入iview依赖
    import 'iview/dist/styles/iview.css' // 引入iview css样式
    Vue.use(iView) //使用iview组件 

    项目中使用iview组件

    做个简单的登录页面

    src/components 新建 login.vue文件

    <style>
    html,body {
        width: 100%;
        height: 100%;
        background-color: #1c2438;
    }
    .login {
        width: 100%;
        height: 100%;
        background-color: #1c2438;
        position: relative;
    }
    .login .from-wrap{
        position: fixed;
        left: 50%;
        margin-left: -200px;
        top: 50%;
        margin-top: -150px;
        width: 400px;
        height: 240px;
        border-radius: 10px;
        background-color: #fff;
        padding: 20px 30px;
    }
    .login h2 {
        text-align: center;
        margin-bottom: 20px;
    }
    .login FormItem {
        margin-bottom: 15px;
    }
    .login .form-footer {
        text-align: right;
    }
    .ivu-form-item-required .ivu-form-item-label:before {
        display: none;
    }
    </style>
    <template>
        <div class="login">
            <div class="from-wrap">
                <h2>登录</h2>
                <Form ref="loginData" :model="loginData" :rules="ruleValidate" :label-width="80">
                    <FormItem label="Account" prop="acct">
                        <Input type="password" v-model="loginData.acct" placeholder="请输入账号"></Input>
                    </FormItem>
                    <FormItem label="Password" prop="pass">
                        <Input type="password" v-model="loginData.pass" placeholder="请输入密码"></Input>
                    </FormItem>
                    <FormItem class="form-footer">
                        <Button type="primary" @click="handleSubmit('loginData')">Submit</Button>
                        <Button type="ghost" @click="handleReset('loginData')" style="margin-left: 8px">Reset</Button>
                    </FormItem>
                </Form>
            </div>
        </div>
    </template>
    <script>
    export default {
      data () {
        return {
          loginData: {
            acct:'',
            pass:''
          },
          ruleValidate: {
            acct: [
                { required: true, message: '账号不能为空', trigger: 'blur' },
                { min: 3, max: 16, message: '账号长度3-16个字符', trigger: 'blur' }
            ],
            pass: [
                { required: true, message: '密码不能为空', trigger: 'blur' },
                { type: 'string', min: 6, max: 16, message: '密码长度6-16个字符', trigger: 'blur' }
            ]
          }
        }
      },
      methods: {
        handleSubmit (name) {
          this.$refs[name].validate((valid) => {
            if (valid) {
              this.$Message.success('提交成功!')
            } else {
              this.$Message.error('表单验证失败!')
            }
          })
        },
        handleReset (name) {
            this.$refs[name].resetFields();
        }
      }
    }
    </script>

    修改src/App.vue

    <template>
      <div id="app">
        <login></login> // 显示组件
      </div>
    </template>
    
    <script>
    import login from './components/login' // 引入login.vue组件
    export default {
      name: 'App',
      components: {
        'login': login 
      }
    }
    </script>
    
    <style>
    </style>

    接下来可以运行(可能会报错 下面有解决方案)

    $ npm run dev

    报错解决

    1 Unexpected tab character错误
    ✘  http://eslint.org/docs/rules/no-tabs                   Unexpected tab character
    src\components\login.vue:3:2
          width: 100%;
           ^
    ✘  http://eslint.org/docs/rules/no-tabs                   Unexpected tab character
    src\components\login.vue:4:2
          height: 100%;
           ^
    ✘  http://eslint.org/docs/rules/no-tabs                   Unexpected tab character
    src\components\login.vue:5:2
          background-color: #1c2438;
           ^
    ✘  http://eslint.org/docs/rules/no-tabs                   Unexpected tab character
    src\components\login.vue:9:2
          <div class="wrap login">                                              
           ^                                                                    ......
    解决

    .eslintrc.js 文件 rules下添加 ‘no-tabs’: ‘off’

    rules: {
      // allow async-await
      'generator-star-spacing': 'off',
      // allow debugger during development
      'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
      'no-tabs': 'off' // Unexpected tab character错误解决
    }
    2 Mixed spaces and tabs错误

    原因是项目构建时设置eslint,主要是因为代码不规范报错。缩进不规范,分号不需要等原因
    最好是在项目构建时 Use ESLint to lint your code? (Y/n) 这一步选no

    ✘  http://eslint.org/docs/rules/no-mixed-spaces-and-tabs  Mixed spaces and tabs
    src\components\login.vue:12:2
                       <Input type="password" v-model="loginData.user" placeholder="请输入账号"></Input>
            ^
     ✘  https://google.com/#q=vue%2Fno-parsing-error           Parsing error: x-invalid-end-tag
     src\components\login.vue:12:82
                       <Input type="password" v-model="loginData.user" placeholder="请输入账号"></Input>
                                                                                     ^
     ✘  http://eslint.org/docs/rules/no-mixed-spaces-and-tabs  Mixed spaces and tabs
     src\components\login.vue:13:2
                   </FormItem>
            ^
     ✘  http://eslint.org/docs/rules/no-mixed-spaces-and-tabs  Mixed spaces and tabs
     src\components\login.vue:14:2
                   <FormItem label="Password" prop="passwd">
    解决

    在 config/index.js 里配置 useEslint: false

    useEslint: false,

    解决错误后启动项目

    npm run dev

    启动成功

     DONE  Compiled successfully in 5198ms                                                  15:52:25
    
     I  Your application is running here: http://localhost:8080

    login页面这里写图片描述

    git项目源码构建过程

    //解压安装包到英文路径下
    //打开cmd窗口
    //cd到当前项目根目录 我的是 G:\web\git\vue-iview-master>
    //安装前需要配置node及npm环境
    //初始化项目生成 Package.json等配置文件 
    $ npm init -f
    //安装依赖
    $ npm install 
    // 启动服务
    $ npm run dev //成功后 以下命令不需要执行
    ------------------------------------------
    //报错执行
    //初始化项目生成 Package.json等配置文件 
    $ npm init -f
    //清除缓存
    $ npm cache clean --force
    //安装依赖
    $ npm install
    //启动服务
    $ npm run dev
    展开全文
  • 关于iview的使用心得

    千次阅读 2017-12-07 16:37:46
    使用iview一定会用到render,毕业设计项目,赶鸭子上架,经过一番纠结,最终决定使用iview,感觉入坑了,bug很多,资料好少,用的人实在太少了,还有官方的各种解释各种不清楚,哎。。。。但是已经开始了这么多,就...
    使用iview一定会用到render,毕业设计项目,赶鸭子上架,经过一番纠结,最终决定使用iview,感觉入坑了,bug很多,资料好少,用的人实在太少了,还有官方的各种解释各种不清楚,哎。。。。但是已经开始了这么多,就不能放弃!加油吧。。。。
    render函数的解释在官方文档里写的很清楚,但是我是小白啊,经过一夜的奋斗,终于弄清楚了它的使用,不是大神,不敢说源码什么的全部清楚。。。哈哈哈。。。
    我的项目中用的最多的就是render的嵌套了,它的嵌套要尤其注意{}、[]的使用,坑很多,有时候突然不灵什么的很正常,反正不咋的。
    

    `
    render: (h, params) => {
    return h('div', [
    h('Icon', {
    props: {
    value: 'edit',
    type: 'edit',
    size: 25
    },
    style: {
    float: 'left'
    },
    nativeOn: {
    click: () => {
    //假装干了很多活
    }
    }
    })

    这不是完整的代码,太长了,嵌套了很多。不过用起来还是很好用的。。

    另外,在使用tab的时候,发现如果tab页面多,必须要有一个母页面,也就是打死不动的,如果全部都是动态获取,打包发布的时候居然渲染不出来。。。。

    另外组合的radiogroup,在表格里面的,单击一个,其他的所有radio居然会闪一下。。。。

    展开全文
  • iview--使用总结

    千次阅读 2019-02-02 10:04:31
    说在最前面——实测iview有内存泄漏的问题,正式项目还是别用了,除非官方修复了这个问题。 虽然说这个组件库有很大的问题,不过作为学习vue以来使用的第一个组件库,对我的帮助还是很大的,另一方面也要归功于他...

    说在最前面—实测iview有一定的内存泄漏的问题,但并不严重,公司内部项目自己覆盖了select组件来解决了这个问题。

            虽然说这个组件库一些问题,不过作为学习vue以来使用的第一个组件库,对我的帮助还是很大的,另一方面也要归功于他的设计有许多地方无法满足公司业务需求,导致我经常需要去看iview的源码来想办法覆盖iview组件以实现自己的需求。不过他的设计还是值得学习的,我们在设计组件的时候依然可以参考他的设计方式。接下来就总结(吐槽)一下最近在项目中碰到问题以及解决方案。

    1、Input

    最常用的莫过于输入框Input了,大部分都是和form一起使用,他的clearable属性问题比较大。

    一 是没有clear的事件,业务中有一个需求是清空输入框后重新搜索,这里我们也只能监听change事件判断值为空时搜索。

    第二个问题就是clearable的时候,使用disabled禁用输入框的clear的按钮却没有被禁用,依然可以点击叉清空输入框,需要手动控制cleaeable为false。

     

    2、InputNumber

    一没有enter事件,按下回车后进行搜索这个功能就比较麻烦,原来是在外层套一层span在span上加keyup事件,后来发现有更加优秀的办法就是就用native事件,native修饰符会把事件添加到组件的最外层元素上作为原生事件,这么以来觉得input的on-enter有点多余了。

    二 精度问题,理想状态是输入框失去焦点后进行四舍五入,但是他这输入框一变化就开始四舍五入,导致用户体验很差,目前都是自己写blur事件手动控制精度,parser和formatter也不好用,行为不好控制。

    三 增减按钮没有属性控制开启或关闭,不需要时需要手动覆盖样式display:none

    四 没有clearable和input不统一,现在也没有解决

    五 没有前后插槽,单位百分号等都是用绝对定位定过去的(parser和formater不好用)

    3、Select

    select没多少问题,注意多选和远程搜索可以同时使用,唯一的问题多选时样式

    还有就是当里面已经有选项,直接复制文字进去文字的位置被label盖住了,这个目前还没有解决

    4、form表单

    表单的验证是一个难点,在实际场景中,验证逻辑千变万化。复杂一点和需要后端验证的都要用自定义的验证器。

    一 循环出来的表单元素的验证,用下图的方式

    二 强行触发一个表单元素的验证并且用传入值来验证

    三 自定义错误提示

    iview的form里错误提示只能是文本,并且高度是固定的,当错误提示比较复杂甚至需要有交互效果时,用view自带的错误提示是无法实现的目前有两种情况

    1 验证错误提示超过两行

    将原来的固定高度改为自动扩展,根据实际情况调整间距

    2  错误提示里有按钮可以点击

    将show-message置为false,自己插入错误提示,这里实际上把iview的FormItem代码直接复制了一部分出来进行了修改,主要是为了样式保持一致。

    5 Cascader 级联选择框

    级联选择框的问题在于,iview对于下拉列表是用v-show控制的,如果数据量较大如全国的地区,会导致页面加载很慢(2-3秒),

    现在是把iview的cascader拷贝了一份下来,修改里面的三个v-show为v-if,让下拉框不在页面加载时就渲染出来

    6 Table 

    table最大的问题就是内存泄漏,每次有table的页面进入后,浏览器的内存占用量就会上升很多而且不会被垃圾回收掉,这个问题还有没有结果。项目过程中遇到过一次进入列表后自动弹出列表的侧弹窗详情,查看源码后发现table内部实际上有点击某行的方法clickCurrentRow,解决方法如下。

     

    7 DropDown

    dropdown最难受的地方在于他的DropdownItem没有点击事件,虽然说在模板里可以用native事件,但是在render函数里没办法使用native修饰符(可能目前还不知道),所以只能在外面包了一层div,在div上写事件

    展开全文
  • iview使用总结

    万次阅读 2018-07-06 10:31:40
    一、实现table表格实现多选和指定条件复选框不能选中的效果 (1)实现多选表格 <Table ref="selection" @on-selection-change="changeChose" @on-select-all="selectAll" style="margin-top:6px;...
  • IVIEW的安装和问题解决

    千次阅读 2018-04-21 10:54:11
    第一步:前往github下载整个iview-admin框架的全部源码github地址:https://github.com/iview/iview-admin第二步:点击Clone or download绿色按钮。下载整个压缩包第三步:解压至D盘,在根目录中按照 shift+右键,...
  • iVIew

    2019-09-26 16:36:25
    要求 完成“第三期在线测评”的网页布局及...iView是基于Vue.js的UI组件库,为了用好iView需要掌握一定的Vue.js基础知识。Vue.js官网 开发工具: HBuilder X 官方推荐(针对Vue.js进行优化),方便创建项目文件,代码...
  • iview-admin

    2018-08-16 11:29:26
    iview-admin 好多人在 GitHub 下不下来,这块提供下载包
  • iview使用入门

    2019-05-21 11:23:17
    Split 面板分割(官网地址)
  • Iview 表单验证的规则总结

    万次阅读 2018-09-20 16:04:20
    Iview 表单验证的规则总结 &lt;FormItem prop="UserId" :rules=" [ { required: true, message: '请选择一项', trigger: 'change',type:'number',min:1}, ]" &gt; &lt;...
  • 多说无益,上代码 *HTML <Table width="100%" :columns="lineCol" :data="lineData" stripe></Table> TS private lineCol = [ { title: "序号", // key: "outAgencyName", type: "index", ... },
  • 安装: npm install iview --save 引入: 1.全局引用 ...import 'iview/dist/styles/iview.css' //iview的样式文件,必须引入 Vue.use(iView); 2.按需引入 // 在需要的地方按需引入 import Vue from...
  • 如图,table的ID需要前台显示隐藏,但是代码仍需要用到。 我的代码如下,但是没效果。求大神帮看下。怎么改?跪谢! ``` { title: 'ID', key: 'id', render:(h,params)=>{ return h('Icon', { ...
  • vue iview 隐藏Table组件里的

    千次阅读 2020-05-28 14:09:16
    假设我要隐藏columns里的 “账户组名称” columns: [ { type: 'selection', width: 60, align: 'center' }, { title: '账号ID', key: 'accountIdString' }, { title: '账号名称', key: 'accountName' }, { ...
  • vue iview 隐藏列

    2020-07-11 13:24:04
    renderHeader; isFlag是自己写的对比判断是否相等的方法
  • iviewtable添加图片

    千次阅读 2018-12-19 18:01:03
    我们知道iviewtable封装的太好,如果只是展示数据简直不要太简单,但是比如合并单元格就很麻烦,而我要做的是在table中添加图片 建议大家先看一下这个:https://www.iviewui.com/components/table#column 我们要用...
  • code: <template> <div style="width:600px;margin:0 auto"> <Tabs value="name1" @on-click="changeTab"> <TabPane label="标签一" name="name1">...Table :columns="c...
  • iview-table中每列都使用复选框CheckBox使用组件说明使用场景说明代码效果具体实现1.通过数据动态生成表格(每生成checkbox)2.实现每个复选框的选择和取消选择3.实现每的全选和取消全选功能4.清理没有选择的数据...
  • vue+iview 动态渲染表格(iview插件table)

    千次阅读 2018-12-21 19:46:28
    vue+iview 动态渲染表格(iview插件table) 效果图 (表格头部和表格主体都是动态渲染) 重要代码 (第一次使用csdn博客,如果有代码遗漏,评论我会回复哦!!
  • 1.iview了解; 开发过项目后台管理系统的人都知道,很多数据都是呈一个列表的形式展现给管理员,或者以各种图展现。就比如,用户数据和一些优惠券信息等都需要以一个列表的形式展现给管理员;再就是一些用户的消费...
  • 使用iview组件的table时,在第一添加选择框,进行批量操作 1. 方式 vue部分 <Table stripe ref="tables" :data="tableData" :columns="columns" @on-select="handleSelectRow()" ...
  • vuetable的数据太多了怎么处理??用的iview vue.js table 前端 如图,我这个字段数据太多了。一般遇到这种问题怎么处理?? 阅读 1.1k 评论 更新于 2019-07-04 6 个回答 得票时间 kidddder ...
  • <...div class="table"> <Table :columns="columns" :data="pageData" :border="true" > <Page :total="progressData.length" :current="page" :page-size="30" show-total
  • 文 / 景朝霞 来源公号 / 朝霞的光影笔记 ID / zhaoxiajingjing 图 / 自己画 【前情提要】 题目 | let和var的区别(一、二) 图解 | let和var的区别(一、二) 题目 | 带VAR和不带VAR的区别 ...
  • 话不多说,结果显示图 表头信息和数据的代码在之前的博客 接下来是修改的代码、 columns:[ { title: "操作", fixed: "right", key:"number", width: 120, render: (h, params) => { ...
  • vue+iviewtable分页与后台数据交互,在分页切换的时候能够实时的更新数据,避免数据更新缓慢不及时,造成的数据误差问题,希望能够帮助到大家
  • 在项目开发中,需要操作表格,使用的是iviewtable组件,操作需求如下: 1、表格需要显示复选框,可以进行单选和全选 2、选择一行数据,复选框选中,取得当前行数据进行操作 3、更新当前选中行的数据 遇到的问题:...
  • methods:{ init(){ let cloneData = Object.assign({},this.libraryList) let handles = [] this.columns1.map((item)=>{ ...
  • iviewtable组件中渲染自定义vue组件

    千次阅读 2018-09-04 11:55:53
    自定义了一个条形展示百分比的vue组件scalebar。代码如下: &lt;style&gt; .intoDiv { border-radius: 2px; box-shadow: 1px 1px 3px #c5c5c5; } &lt;/style&gt; &lt;template&gt; &...
  • 使用iviewTable组件实现合并demo

    千次阅读 2018-08-14 03:11:17
    iviewTable组件表头分组 iviewTable组件表头分组 ...实现合并——需要修改Table组件来实现 1、合并表头 根据iview提供的demo可以看出,表头的编辑是比较容易的,只需要根据格式编写即可。 问题:表...

空空如也

1 2 3 4 5 ... 20
收藏数 23,273
精华内容 9,309
关键字:

iview