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 相关文章推荐
JS Timing
Apr 21 Javascript
javascript判断数组内是否重复的方法
Apr 21 Javascript
深入理解关于javascript中apply()和call()方法的区别
Apr 12 Javascript
jQuery unbind 删除绑定事件详解
May 24 Javascript
JS取模、取商及取整运算方法示例
Oct 13 Javascript
原生JS仿QQ阅读点击展开、收起效果
Mar 08 Javascript
node使用UEditor富文本编辑器的方法实例
Jul 11 Javascript
实例详解JavaScript中setTimeout函数的执行顺序
Jul 12 Javascript
Vue插件从封装到发布的完整步骤记录
Feb 28 Javascript
微信小程序修改checkbox的样式代码实例
Jan 21 Javascript
JavaScript实现Tab选项卡切换
Feb 13 Javascript
详解前端任务构建利器Gulp.js使用指南
Apr 30 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使用unset()删除数组中某个单元(键)的方法
2015/02/17 PHP
PHP命名空间定义与用法实例分析
2019/08/14 PHP
Mozilla中显示textarea中选择的文字
2006/09/07 Javascript
javascript语言结构小记(一)
2011/09/10 Javascript
javascript里使用php代码实例
2014/12/13 Javascript
JS实现简单路由器功能的方法
2015/05/27 Javascript
理解javascript中try...catch...finally
2015/12/25 Javascript
jQuery实现的左右移动焦点图效果
2016/01/14 Javascript
jquery.form.js框架实现文件上传功能案例解析(springmvc)
2016/05/26 Javascript
jQuery Tags Input Plugin(添加/删除标签插件)详解
2016/06/20 Javascript
利用Vue.js指令实现全选功能
2016/09/08 Javascript
Javascript+CSS3实现进度条效果
2016/10/28 Javascript
JavaScript实现格式化字符串函数String.format
2016/12/16 Javascript
webpack进阶——缓存与独立打包的用法
2017/08/02 Javascript
使用vue实现各类弹出框组件
2019/07/03 Javascript
vue路由守卫及路由守卫无限循环问题详析
2019/09/05 Javascript
js实现盒子移动动画效果
2020/08/09 Javascript
DWR内存兼容及无法调用问题解决方案
2020/10/16 Javascript
echarts浮动显示单位的实现方法示例
2020/12/04 Javascript
[48:12]Secret vs Optic Supermajor 胜者组 BO3 第三场 6.4
2018/06/05 DOTA
用Python制作在地图上模拟瘟疫扩散的Gif图
2015/03/31 Python
Python删除windows垃圾文件的方法
2015/07/14 Python
python数据结构之列表和元组的详解
2017/09/23 Python
python中模块的__all__属性详解
2017/10/26 Python
numpy中的meshgrid函数的使用
2019/07/31 Python
Flask框架重定向,错误显示,Responses响应及Sessions会话操作示例
2019/08/01 Python
Nicole Miller官方网站:纽约女装品牌
2019/09/14 全球购物
Calphalon美国官网:美国顶级锅具品牌
2020/02/05 全球购物
美国乒乓球设备、配件和服装品牌:Killerspin
2020/06/07 全球购物
求职信需要的五点内容
2014/02/01 职场文书
2015年挂职锻炼工作总结
2014/12/12 职场文书
2015年度个人思想工作总结
2015/04/08 职场文书
丧事答谢词大全
2015/09/30 职场文书
js实现模拟购物商城案例
2021/05/18 Javascript
MYSQL 的10大经典优化案例场景实战
2021/09/14 MySQL