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 的Document属性和方法集合
Jan 25 Javascript
jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)
Jan 15 Javascript
详解Angularjs filter过滤器
Feb 06 Javascript
javascript实现移动端上的触屏拖拽功能
Mar 04 Javascript
JS Ajax请求如何防止重复提交
Jun 13 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
Jul 07 Javascript
微信小程序 后台https域名绑定和免费的https证书申请详解
Nov 10 Javascript
原生的强大DOM选择器querySelector介绍
Dec 21 Javascript
Angularjs 双向绑定时字符串的转换成数字类型的问题
Jun 12 Javascript
JS解惑之Object中的key是有序的么
May 06 Javascript
ant design中upload组件上传大文件,显示进度条进度的实例
Oct 29 Javascript
vue使用echarts实现折线图
Mar 21 Vue.js
详解多页应用 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
玩家交还《星际争霸》原始码光盘 暴雪报以厚礼
2017/05/05 星际争霸
PHP Undefined index报错的修复方法
2011/07/17 PHP
php float不四舍五入截取浮点型字符串方法总结
2013/10/28 PHP
PHP生成图表pChart的示例解析
2020/07/31 PHP
jQuery.Validate 使用笔记(jQuery Validation范例 )
2010/06/25 Javascript
document节点对象的获取方式示例介绍
2013/12/24 Javascript
jquery操作checked属性以及disabled属性的多种方法
2014/06/20 Javascript
一个通过script自定义属性传递配置参数的方法
2014/09/15 Javascript
js闭包实例汇总
2014/11/09 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
2016/04/28 Javascript
限制文本框只能输入数字||只能是数字和小数点||只能是整数和浮点数
2016/05/27 Javascript
js 连续赋值的简单实现
2016/06/13 Javascript
jQuery如何获取动态添加的元素
2016/06/24 Javascript
详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())
2016/08/15 Javascript
Jquery组件easyUi实现表单验证示例
2016/08/23 Javascript
AngularJS 过滤与排序详解及实例代码
2016/09/14 Javascript
js+css3制作时钟特效
2016/10/16 Javascript
微信小程序 教程之WXSS
2016/10/18 Javascript
jquery实现直播弹幕效果
2019/11/28 jQuery
JavaScript进制转换实现方法解析
2020/01/18 Javascript
vue引用外部JS的两种种方法
2020/01/28 Javascript
JavaScript享元模式原理与用法实例详解
2020/03/09 Javascript
微信小程序仿抖音视频之整屏上下切换功能的实现代码
2020/05/24 Javascript
[02:41]DOTA2英雄基础教程 亚巴顿
2014/01/02 DOTA
python去除空格和换行符的实现方法(推荐)
2017/01/04 Python
python 实现敏感词过滤的方法
2019/01/21 Python
python生成特定分布数的实例
2019/12/05 Python
使用Django清空数据库并重新生成
2020/04/03 Python
CSS3制作炫酷带方向感应的鼠标滑过图片3D动画
2016/03/16 HTML / CSS
惠普香港官方商店:HP香港
2019/04/30 全球购物
自荐信的五个重要部分
2013/10/29 职场文书
打架检讨书100字
2014/01/19 职场文书
贷款委托书怎么写
2014/08/02 职场文书
销售顾问工作计划书
2014/09/15 职场文书
mysql查询的控制语句图文详解
2021/04/11 MySQL
MySQL系列之四 SQL语法
2021/07/02 MySQL