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 相关文章推荐
新手入门常用代码集锦
Jan 11 Javascript
javascript小数四舍五入多种方法实现
Dec 23 Javascript
jQuery.event兼容各浏览器的event详细解析
Dec 18 Javascript
使用javascript将时间转换成今天,昨天,前天等格式
Jun 25 Javascript
ionic隐藏tabs的方法
Aug 29 Javascript
微信小程序 swiper组件详解及实例代码
Oct 25 Javascript
js记录点击某个按钮的次数-刷新次数为初始状态的实例
Feb 15 Javascript
前端主流框架vue学习笔记第一篇
Jul 26 Javascript
inner join 内联与left join 左联的实例代码
Sep 18 Javascript
js序列化和反序列化的使用讲解
Jan 19 Javascript
JS使用队列对数组排列,基数排序算法示例
Mar 02 Javascript
JavaScript 防抖和节流遇见的奇怪问题及解决
Nov 20 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数组函数序列之rsort() - 对数组的元素值进行降序排序
2011/11/02 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
jquery实现盒子下拉效果示例代码
2013/09/12 Javascript
JavaScript中this关键词的使用技巧、工作原理以及注意事项
2014/05/20 Javascript
JavaScript模板引擎用法实例
2015/07/10 Javascript
AngularJs定制样式插入到ueditor中的问题小结
2016/08/01 Javascript
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
2016/08/03 Javascript
JS数组返回去重后数据的方法解析
2017/01/03 Javascript
Vue2.0表单校验组件vee-validate的使用详解
2017/05/02 Javascript
JS中使用media实现响应式布局
2017/08/04 Javascript
Angular2的管道Pipe的使用方法
2017/11/07 Javascript
详解如何实现一个简单的Node.js脚手架
2017/12/04 Javascript
JS的函数调用栈stack size的计算方法
2018/06/24 Javascript
详解写好JS条件语句的5条守则
2019/02/28 Javascript
mpvue实现左侧导航与右侧内容的联动
2019/10/21 Javascript
JS常用排序方法实例代码解析
2020/03/03 Javascript
vue中axios封装使用的完整教程
2021/03/03 Vue.js
[04:42]5分钟带你了解什么是DOTA2(第一期)
2017/02/07 DOTA
编写Python脚本使得web页面上的代码高亮显示
2015/04/24 Python
Python实现数据库编程方法详解
2015/06/09 Python
Python实现查找数组中任意第k大的数字算法示例
2019/01/23 Python
Python tkinter实现图片标注功能(完整代码)
2019/12/08 Python
Python爬虫爬取博客实现可视化过程解析
2020/06/29 Python
美国在线打印网站:Overnight Prints
2018/10/11 全球购物
建筑工程实习自我鉴定
2013/09/19 职场文书
勤奋学习演讲稿
2014/05/10 职场文书
诚实守信道德模范事迹材料
2014/08/15 职场文书
写给妈妈的感谢信
2015/01/22 职场文书
入党积极分子培养人意见
2015/06/02 职场文书
运动会闭幕式主持词
2015/07/01 职场文书
员工考勤管理制度
2015/08/06 职场文书
奖学金申请书(范文)
2019/08/14 职场文书
python基础详解之if循环语句
2021/04/24 Python
JavaWeb Servlet实现网页登录功能
2021/07/04 Java/Android
Kubernetes控制节点的部署
2022/04/01 Servers
GO语言字符串处理函数之处理Strings包
2022/04/14 Golang