iView框架问题整理小结


Posted in Javascript onOctober 16, 2018

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery实现excel导出的方法
Apr 04 Javascript
jquery实现弹出层完美居中效果
Mar 03 Javascript
浅谈javascript中自定义模版
Jan 29 Javascript
JavaScript实现将UPC转换成ISBN的方法
May 26 Javascript
JS实现简单的图书馆享元模式实例
Jun 30 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
Mar 01 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
Dec 12 Javascript
webpack优化的深入理解
Dec 10 Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
Aug 23 Javascript
微信小程序 checkbox使用实例解析
Sep 09 Javascript
解决axios post 后端无法接收数据的问题
Oct 29 Javascript
JavaScript实现简单的图片切换功能(实例代码)
Apr 10 Javascript
详解多页应用 Webpack4 配置优化与踩坑记录
Oct 16 #Javascript
js拖动滑块和点击水波纹效果实例代码
Oct 16 #Javascript
ajax与jsonp的区别及用法
Oct 16 #Javascript
JS调用安卓手机摄像头扫描二维码
Oct 16 #Javascript
QRCode.js二维码生成并能长按识别
Oct 16 #Javascript
移动端图片上传旋转、压缩问题的方法
Oct 16 #Javascript
JavaScript实现表单注册、表单验证、运算符功能
Oct 15 #Javascript
You might like
PHP经典的给图片加水印程序
2006/12/06 PHP
php创建基本身份认证站点的方法详解
2013/06/08 PHP
PHP时间格式控制符对照表分享
2013/07/23 PHP
php跨站攻击实例分析
2014/10/28 PHP
php基于GD库画五星红旗的方法
2015/02/24 PHP
PHP strip_tags保留多个HTML标签的方法
2016/05/22 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
ThinkPHP3.2框架操作Redis的方法分析
2019/05/05 PHP
IE6与IE7中,innerHTML获取param的区别
2009/03/15 Javascript
jQuery 隔行换色 支持键盘上下键,按Enter选定值
2009/08/02 Javascript
用 Javascript 验证表单(form)中多选框(checkbox)值
2009/09/08 Javascript
jQuery live( type, fn ) 委派事件实现
2009/10/11 Javascript
Javascript实现的类似Google的Div拖动效果代码
2011/08/09 Javascript
jQuery列表拖动排列具体实现
2013/11/04 Javascript
jquery实现焦点图片随机切换效果的方法
2015/03/12 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
2015/04/06 Javascript
使用JavaScript实现旋转的彩圈特效
2015/06/23 Javascript
javascript弹性运动效果简单实现方法
2016/01/08 Javascript
JS中如何实现点击a标签返回页面顶部的问题
2017/01/19 Javascript
JavaScript实现的XML与JSON互转功能详解
2017/02/16 Javascript
webpack学习笔记之优化缓存、合并、懒加载
2017/08/24 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
2019/11/07 Javascript
[46:00]Ti4 冒泡赛第二轮LGD vs C9 2
2014/07/14 DOTA
[50:44]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第二场 2月22日
2021/03/11 DOTA
Python 2.7.x 和 3.x 版本的重要区别小结
2014/11/28 Python
Python实现身份证号码解析
2015/09/01 Python
Python实现生成随机数据插入mysql数据库的方法
2017/12/25 Python
python连接PostgreSQL数据库的过程详解
2019/09/18 Python
Python可变对象与不可变对象原理解析
2020/02/25 Python
python 6.7 编写printTable()函数表格打印(完整代码)
2020/03/25 Python
使用python计算三角形的斜边例子
2020/04/15 Python
UGG美国官网:购买UGG雪地靴、拖鞋和鞋子
2017/12/31 全球购物
歌唱比赛获奖感言
2014/01/21 职场文书
优秀管理者事迹材料
2014/05/22 职场文书
中学生的1000字检讨书
2014/10/11 职场文书
解决python绘图使用subplots出现标题重叠的问题
2021/04/30 Python