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小组件 原生table排序表格脚本(兼容ie firefox opera chrome)
Jul 25 Javascript
Js动态添加复选框Checkbox的实例方法
Apr 08 Javascript
深入理解JavaScript 闭包究竟是什么
Apr 12 Javascript
jquery中map函数遍历数组用法实例
May 18 Javascript
纯javascript实现自动发送邮件
Oct 21 Javascript
图解js图片轮播效果
Dec 20 Javascript
谈谈target=_new和_blank的不同之处
Oct 25 Javascript
jQuery实现隔行变色的方法分析(对比原生JS)
Nov 18 Javascript
微信小程序 石头剪刀布实例代码
Jan 04 Javascript
bootstrapValidator bootstrap-select验证不可用的解决办法
Jan 11 Javascript
QRCode.js:基于JQuery的生成二维码JS库的使用
Jun 23 jQuery
JS匿名函数和匿名自执行函数概念与用法分析
Mar 16 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/10/09 PHP
PHP仿盗链代码
2012/06/03 PHP
PHP文件锁定写入实例解析
2014/07/14 PHP
PHP技术开发微信公众平台
2015/07/22 PHP
jQuery 源码分析笔记(7) Queue
2011/06/19 Javascript
jqGrid随窗口大小变化自适应大小的示例代码
2013/12/28 Javascript
Jquery实现自定义tooltip示例代码
2014/02/12 Javascript
jQuery插件scroll实现无缝滚动效果
2015/04/27 Javascript
谈谈javascript中使用连等赋值操作带来的问题
2015/11/26 Javascript
IE8 内存泄露(内存一直增长 )的原因及解决办法
2016/04/06 Javascript
js实现添加可信站点、修改activex安全设置,禁用弹出窗口阻止程序
2016/08/17 Javascript
学习vue.js表单控件绑定操作
2016/12/05 Javascript
AngularJS指令与指令之间的交互功能示例
2016/12/14 Javascript
实现一个简单的vue无限加载指令方法
2017/01/10 Javascript
JS如何判断浏览器类型和详细区分IE各版本浏览器
2017/03/04 Javascript
将Sublime Text 3 添加到右键中的简单方法
2017/12/12 Javascript
《javascript少儿编程》location术语总结
2018/05/27 Javascript
vue富文本编辑器组件vue-quill-edit使用教程
2018/09/21 Javascript
基于Vue 服务端Cookies删除的问题
2018/09/21 Javascript
Vue 前端实现登陆拦截及axios 拦截器的使用
2019/07/17 Javascript
使用layer.msg 时间设置不起作用的解决方法
2019/09/12 Javascript
Vue 禁用浏览器的前进后退操作
2020/09/04 Javascript
[52:05]EG vs OG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python删除空文件和空文件夹的方法
2015/07/14 Python
对Python 网络设备巡检脚本的实例讲解
2018/04/22 Python
python方法生成txt标签文件的实例代码
2018/05/10 Python
浅谈Python类中的self到底是干啥的
2019/11/11 Python
CSS3控制HTML元素动画效果
2014/02/08 HTML / CSS
Zadig&Voltaire官网:法国时装品牌
2018/01/05 全球购物
PHP高级工程师面试问题推荐
2013/01/18 面试题
2014年九一八事变演讲稿
2014/09/14 职场文书
民政局个人整改措施
2014/09/24 职场文书
网络营销计划
2015/01/17 职场文书
2015年前台文员工作总结
2015/05/18 职场文书
《中彩那天》教学反思
2016/02/24 职场文书
Redis命令处理过程源码解析
2022/02/12 Redis