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 相关文章推荐
javascript 定义新对象方法
Feb 20 Javascript
JS文本框默认值处理详解
Jul 10 Javascript
如何获取网站icon有哪些可行的方法
Jun 05 Javascript
jquery实现鼠标滑过小图时显示大图的方法
Jan 14 Javascript
jQuery实现动态添加tr到table的方法
Dec 26 Javascript
详解升级react-router 4 踩坑指南
Aug 14 Javascript
JS实现十字坐标跟随鼠标效果
Dec 25 Javascript
JS实现获取word文档内容并输出显示到html页面示例
Jun 23 Javascript
微信小程序顶部导航栏滑动tab效果
Jan 28 Javascript
详解关于微信setData回调函数中的坑
Feb 18 Javascript
Vue按时间段查询数据组件使用详解
Aug 21 Javascript
区分vue-router的hash和history模式
Oct 03 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 array_push 数组函数
2009/12/26 PHP
PHP中的array数组类型分析说明
2010/07/27 PHP
初步介绍PHP扩展开发经验分享
2012/09/06 PHP
PHP数组传递是值传递而非引用传递概念纠正
2013/01/31 PHP
2014年10个最佳的PHP图像操作库
2014/07/14 PHP
php正则匹配文章中的远程图片地址并下载图片至本地
2015/09/29 PHP
ECSHOP完美解决Deprecated: preg_replace()报错的问题
2016/05/17 PHP
JavaScript 类似flash效果的立体图片浏览器
2010/02/08 Javascript
js实现上传图片之上传前预览图片
2013/03/25 Javascript
jQuery实现自动切换播放的经典滑动门效果
2015/09/12 Javascript
jquery加载单文件vue组件的方法
2017/06/20 jQuery
vue watch自动检测数据变化实时渲染的方法
2018/01/16 Javascript
JS匿名函数和匿名自执行函数概念与用法分析
2018/03/16 Javascript
JS实现将链接生成二维码并转为图片的方法
2018/03/17 Javascript
JS实现面向对象继承的5种方式分析
2018/07/21 Javascript
解决select2在bootstrap modal中不能正常使用的问题
2018/08/09 Javascript
详解jenkins自动化部署vue
2019/05/14 Javascript
vue中利用Promise封装jsonp并调取数据
2019/06/18 Javascript
Angular 中使用 FineReport不显示报表直接打印预览
2019/08/21 Javascript
使用Python中的cookielib模拟登录网站
2015/04/09 Python
Python实现数据库编程方法详解
2015/06/09 Python
python 脚本生成随机 字母 + 数字密码功能
2018/05/26 Python
浅谈python写入大量文件的问题
2018/11/09 Python
python 提取文件指定列的方法示例
2019/08/07 Python
Python实现非正太分布的异常值检测方式
2019/12/09 Python
TensorFlow获取加载模型中的全部张量名称代码
2020/02/11 Python
python GUI库图形界面开发之PyQt5树形结构控件QTreeWidget详细使用方法与实例
2020/03/02 Python
吃透移动端 1px的具体用法
2019/12/16 HTML / CSS
英国和世界各地预订便宜的酒店:LateRooms.com
2019/05/05 全球购物
全球异乡人的跨境社交电商平台:Kouhigh口嗨网
2020/07/24 全球购物
实现向右循环移位
2014/07/31 面试题
若通过ObjectOutputStream向一个文件中多次以追加方式写入object,为什么用ObjectInputStream读取这些object时会产生StreamCorruptedException?
2016/10/17 面试题
2014年质量工作总结
2014/11/22 职场文书
地雷战观后感
2015/06/09 职场文书
儿子满月酒致辞
2015/07/29 职场文书
navicat 连接Ubuntu虚拟机的mysql的操作方法
2022/04/02 MySQL