iView框架问题整理小结

2024-10-16 19:40:54

总结1：**import Vue from ‘vue';什么意思？

在js中，是加载vue模块并输入变量Vue import后面的from指定模块文件的位置，可以是相对路径，也可以是绝对路径，如果是模块名带有路径，那么必须有配置文件，告诉js引擎该模块的位置

总结2：iView如何实现页面跳转？

使用vue-router实现单页应用的跳转

使用流程：

1：引入vue-router <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

2：定义VueRouter对应的属性例如：path和template

3：使用<router-link to="/login">登录</router-link>

总结3：iview本地文件上传？

视图层：

<img :src="preview_pic_src" v-if="preview_pic_src!=''">
     <input type="file" @change="preview_pic()" ref="weibo_file" >

JS层：

   preview_pic:function () {
   // 预览图片
   var file = this.$refs.weibo_file.files[0]
    // 1、创建一个reader
    var fr = new FileReader()
    // 2、将图片将转成 base64 格式
    fr.readAsDataURL(file)
    // 3、读取成功后的回调
    var self = this
    fr.onloadend = function() {
      self.preview_pic_src = this.result
    }
  },

总结4：iview自定义组件开发？

import sliderBox from '.slider.vue'
vue.compenent('组件名称'sliderBox)

总结5 TimePicker 和 DatePicker 两种日期选择组件虽然方便，但使用时需要注意：使用DatePicker 绑定on-change事件，可以通过：

on-change:function(date) {
 console.log(date)
}

获取到当前选择的日期，但TimePicker 这样做每次更改时、分、秒都会触发此事件，建议给TimePicker 加上confirm 选项，并用on-ok事件获取当前选择的时间（注意要进行Date的格式化）

总结6.对于一些组件如<Menu>,<Page>，如果需要手动控制打开的菜单，当前页码，需要给组件设置ref属性，然后在方法中使用this.$refs.xxx = "xxx"进行控制

<Page ref="dataPage" :total="recordData.length" :page-size="recordPageCapacity" show-elevator class="fr" style="margin-top: 10px;" @on-change="recordChangePage"></Page>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

浅谈关于iview表单验证的问题

关于iview表单验证的问题 iview表单验证的步骤: 第一步:给 Form 设置属性 rules :rules 第二步:同时给需要验证的每个 FormItem 设置属性 prop 指向对应字段即可 prop="" 第三步:注意:Form标签里面是 :model 第四步:注意:在Form标签里面必须添加 ref,相当于id,在此范围内的表单验证有效第五步:在操作保存按钮时,添加方法,对整个表单进行校验,参数为检验完的回调,会返回一个 Boolean 表示成功与失败. <
在vue项目中引用Iview的方法

关于 iView iView 是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品. 特性 # 高质量.功能丰富友好的 API ,自由灵活地使用空间细致.漂亮的 UI 事无巨细的文档可自定义主题 iview 安装 npm install iview --save 引入iview import Vue from 'vue' import App from './App' import router from './router' import iView fro
iView-admin 动态路由问题的解决方法

IView-admin 在使用的时候跳转客户详细后,点击其它页面,然后再从选项卡进入页面时,发下控制台报错,不能正常打开客户详细页面 [vue-router] Route with name 'customer/detail/:id' does not exist 地址栏的地址变为 http://localhost:8080/ 正确的地址为 http://localhost:8080/customer/detail/150 路由器配置如下 { path: 'detail/:id', nam
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)

像我们平日里做惯了 Java 或者 .NET 这种后端程序员,对于前端的认识还常常停留在 jQuery 时代,包括其插件在需要时就引用一下,不需要就删除.故观念使然,尽管 Nuget 和 Maven 用得顺溜,但对 NPM 仍不带感,兴许是周边无人带动的稀薄气氛,也或者是没参加过类似的大型活动,于是在自发性上差了许多.再者,我不用 MVVM 模式,领导也不会扣绩效. 为了快速体验 MVVM 模式,我选择了非工程化方式来起步,并选择使用 Vue.js,以及基于它构建的 iView UI 框架. V
vue+iview+less 实现换肤功能

项目搭建用的vue-cli,css框架选择的iview 1.首先安装less支持 npm install --save-dev less-loader less 然后去build文件夹下的webpack.base.conf.js文件中,添加对.less的支持 2.准备工作做好了,开始换肤 2.1新建一个文件夹styles,在里面新建一个文件theme.less 定义一个.theme()方法,写上需要的颜色参数如图: 2.2 styles文件夹下再新建一个存放各类主题的color.less文件,里
iView框架问题整理小结

总结1:**import Vue from 'vue';什么意思? 在js中,是加载vue模块并输入变量Vue import后面的from指定模块文件的位置,可以是相对路径,也可以是绝对路径,如果是模块名带有路径,那么必须有配置文件,告诉js引擎该模块的位置总结2:iView如何实现页面跳转? 使用vue-router实现单页应用的跳转使用流程: 1:引入vue-router <script src="https://unpkg.com/vue-router/dist/vue-ro
webpack4.0打包优化策略整理小结

本文介绍了webpack4.0打包优化策略整理小结,分享给大家,具体如下: webapck4 新特性介绍-参考资料当前依赖包的版本 1.优化loader配置 1.1 缩小文件匹配范围(include/exclude) 通过排除node_modules下的文件从而缩小了loader加载搜索范围高概率命中文件 module: { rules: [ { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/, // 排除不处理的目录
vue v-for 使用问题整理小结

今天使用v-for指令的时候遇到一个错误 [Vue warn]: Error in render: "TypeError: Cannot read property 'children' of undefined" 页面使用代码 <template v-for="(c,i) in modelList.Course.children"> <div :key="i" class="course-block">
10大HBase常见运维工具整理小结

摘要:HBase自带许多运维工具,为用户提供管理.分析.修复和调试功能.本文将列举一些常用HBase工具,开发人员和运维人员可以参考本文内容,利用这些工具对HBase进行日常管理和运维. HBase组件介绍 HBase作为当前比较热门和广泛使用的NoSQL数据库,由于本身设计架构和流程上比较复杂,对大数据经验较少的运维人员门槛较高,本文对当前HBase上已有的工具做一些介绍以及总结. 写在前面的说明: 1) 由于HBase不同版本间的差异性较大(如HBase2.x上移走了hbck工具),本文使用
Pandas中DataFrame基本函数整理(小结)

构造函数 DataFrame([data, index, columns, dtype, copy]) #构造数据框属性和数据 DataFrame.axes #index: 行标签:columns: 列标签 DataFrame.as_matrix([columns]) #转换为矩阵 DataFrame.dtypes #返回数据的类型 DataFrame.ftypes #返回每一列的数据类型float64:dense DataFrame.get_dtype_counts() #返回数据框数据类
数据库索引的知识点整理小结,你所需要了解的都在这儿了

数据库索引,相信大家都不陌生吧. 索引是对数据库表中一列或多列的值进行排序的一种结构,使用索引可快速访问数据库表中的特定信息.作为辅助查询的工具,合理的设计索引能很大程度上减轻db的查询压力,db我们都知道,是项目最核心也是最薄弱的地方,如果压力太大很容易产生故障,造成难以预计的影响.所以,不管是日常开发还是面试,索引这一块知识体系都是必须掌握的. 当然,虽说是必须掌握,但索引的知识点很多,很多初学者经常会遗漏,这也是我为什么想写这篇知识点总结的原因,既是给读者的分享,也是给自己一次全面的复习,
vue+iview框架实现左侧动态菜单功能的示例代码

最近在使用vue-cli3配合iview框架搭建新的项目中用到了iview中的menu菜单,按照官网写法固定不太好,因为一般项目都是从后端动态获取菜单列表,所以我们需要将官网代码稍作修改,代码如下: 注意事项: [1]菜单高亮部分动态绑定路由跳转的页面 Menu组件中有一个active-name反映的是当前高亮区域,因此可以动态的绑定active-name来实现高亮显示.前提是需要将MenuItem绑定的name也设置成页面路由的name [2]动态获取菜单数据,需要更新菜单 this.$nex
Vue.js前端框架之事件处理小结

1. v-on 事件监听监听DOM事件使用 v-on 指令.该指令通常在模板中直接使用,在触发事件时会执行一些 JavaScript 代码. v-on 指令的基本用法 (1)在 HTML 中使用 v-on 指令,后面可以是所有的原生事件名称.基本用法如下: <button v-on:click="show">显示</button> 将 click 单击事件绑定到 show 方法中,单击"显示"按钮时,执行 show() 方法,show()
python 常用的异步框架汇总整理

目录正文开始 1. Tornado 2. Aiohttp 3.Sanic 4. FastAPI 5. Ruia 总结参考资料正文开始 asyncio 是 Python 3.4版本引入的标准库,直接内置了对异步IO的支持. asyncio 在单线程内部维护了 EventLoop 队列,然后把需要执行异步IO的任务添加到 EventLoop 队列中,至于任务的完成通过类似回调的逻辑是实现后续的任务.如果你有 JavaScript的基础那么理解python的 asyncio 很简单,关键字.语法
Java集合框架超详细小结

目录一:Collection集合 1.1集合概述: 1.2集合架构 1.3Collection集合常用方法二:迭代器Iterator 2.1Iterator接口 2.2Iterator的实现原理: 2.3增强for() 2.4迭代器注意事项三:泛型 3.1泛型概述 3.2泛型的优缺点 3.3泛型的定义与使用泛型方法泛型接口 3.4泛型的通配符通配符高级使用-----受限泛型四:Java常见数据结构 4.1栈 4.2队列 4.3数组 4.4链表 4.5红黑树五:List集合体系 5

iView框架问题整理小结

相关推荐

随机推荐