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 Object.extend
May 18 Javascript
jquery对表单操作2
Apr 06 Javascript
JavaScript立即执行函数的三种不同写法
Sep 05 Javascript
JavaScript编写连连看小游戏
Jul 07 Javascript
原生js实现图片轮播特效
Dec 18 Javascript
webpack4 css打包压缩问题的解决
May 18 Javascript
node.js到底要不要加分号浅析
Jul 11 Javascript
浅谈angular2子组件的事件传递(任意组件事件传递)
Sep 30 Javascript
微信小程序textarea层级过高的解决方法
Mar 04 Javascript
JavaScript实现HSL拾色器
May 21 Javascript
vue iview 隐藏Table组件里的某一列操作
Nov 13 Javascript
浅析JavaScript中的事件委托机制跟深浅拷贝
Jan 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中this,self,parent的区别详解
2013/06/08 PHP
Yii2――使用数据库操作汇总(增删查改、事务)
2016/12/19 PHP
完美的php分页类
2017/10/24 PHP
thinkphp5框架API token身份验证功能示例
2019/05/21 PHP
php让json_encode不自动转义斜杠“/”的方法
2020/04/27 PHP
js滚动条多种样式,推荐
2007/02/05 Javascript
通用JS事件写法实现代码
2009/01/07 Javascript
namespace.js Javascript的命名空间库
2011/10/11 Javascript
jquery可见性过滤选择器使用示例
2013/06/24 Javascript
jQuery中after的两种用法实例
2013/07/03 Javascript
jquery validate在ie8下的bug解决方法
2013/11/13 Javascript
jQuery Easyui学习之datagrid 动态添加、移除editor
2016/01/27 Javascript
AngularJs  Creating Services详解及示例代码
2016/09/02 Javascript
微信小程序之ES6与事项助手的功能实现
2016/11/30 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
2016/12/02 Javascript
javascript读取文本节点方法小结
2016/12/15 Javascript
原生JS实现左右箭头选择日期实例代码
2017/03/14 Javascript
React Native 图片查看组件的方法
2018/03/01 Javascript
Vue中使用Sortable的示例代码
2018/04/07 Javascript
详解nodejs解压版安装和配置(带有搭建前端项目脚手架)
2018/12/06 NodeJs
微信小程序全局变量功能与用法详解
2019/01/22 Javascript
Selenium执行Javascript脚本参数及返回值过程详解
2020/04/01 Javascript
使用Mock.js生成前端测试数据
2020/12/13 Javascript
python将人民币转换大写的脚本代码
2013/02/10 Python
Python版的文曲星猜数字游戏代码
2013/09/02 Python
浅析python中numpy包中的argsort函数的使用
2018/08/30 Python
Python Scrapy多页数据爬取实现过程解析
2020/06/12 Python
详解CSS3新增的背景属性
2019/12/25 HTML / CSS
英国高街奥特莱斯:Highstreet Outlet
2019/11/21 全球购物
自我鉴定范文200字
2013/10/02 职场文书
函授本科自我鉴定
2014/02/04 职场文书
暂住证明怎么写
2015/06/19 职场文书
2015年电气技术员工作总结
2015/07/24 职场文书
2016春季幼儿园大班开学寄语
2015/12/03 职场文书
小学班主任培训心得体会
2016/01/07 职场文书
在Django中使用MQTT的方法
2021/05/10 Python