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 相关文章推荐
document.documentElement的一些使用技巧
Apr 18 Javascript
FullCalendar日历插件应用之数据展现(一)
Dec 23 Javascript
实例详解jQuery结合GridView控件的使用方法
Jan 04 Javascript
jQuery 获取页面li数组并删除不在数组中的key
Aug 02 Javascript
JS实现简易刻度时钟示例代码
Mar 11 Javascript
详解设置Webstorm 利用babel将ES6自动转码成ES5
Dec 20 Javascript
说说node中的可读流和可写流的区别
Jun 01 Javascript
利用React Router4实现的服务端直出渲染(SSR)
Jan 07 Javascript
JS实现头条新闻的经典轮播图效果示例
Jan 30 Javascript
初学node.js中实现删除用户路由
May 27 Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
Jun 11 Javascript
如何用JavaScript实现一个数组惰性求值库
May 05 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
如何做到多笔资料的同步
2006/10/09 PHP
thinkphp实现like模糊查询实例
2014/10/29 PHP
php实现上传图片保存到数据库的方法
2015/02/11 PHP
header与缓冲区之间的深层次分析
2016/07/30 PHP
php性能分析之php-fpm慢执行日志slow log用法浅析
2016/10/17 PHP
PHP 加密 Password Hashing API基础知识点
2020/03/02 PHP
解决jquery的datepicker的本地化以及Today问题
2012/05/23 Javascript
Javascript 遮罩层和加载效果代码
2013/08/01 Javascript
使用 Node.js 做 Function Test实现方法
2013/10/25 Javascript
javascript常见操作汇总
2014/09/03 Javascript
使用控制台破解百小度一个月只准改一次名字
2015/08/13 Javascript
Angularjs注入拦截器实现Loading效果
2015/12/28 Javascript
利用bootstrapValidator验证UEditor
2016/09/14 Javascript
vue组件生命周期详解
2017/11/07 Javascript
解决iview打包时UglifyJs报错的问题
2018/03/07 Javascript
微信小程序wx:for循环的实例详解
2018/10/07 Javascript
vue实现购物车抛物线小球动画效果的方法详解
2019/02/13 Javascript
vue使用Font Awesome的方法步骤
2019/02/26 Javascript
Vue+Element实现网页版个人简历系统(推荐)
2019/12/31 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
2020/10/15 Javascript
Javascript实现单选框效果
2020/12/09 Javascript
Vue项目中使用mock.js的完整步骤
2021/01/12 Vue.js
[02:17]2016国际邀请赛中国区预选赛VG战队领队采访
2016/06/26 DOTA
Python中super()函数简介及用法分享
2016/07/11 Python
Python+Selenium自动化实现分页(pagination)处理
2017/03/31 Python
利用python提取wav文件的mfcc方法
2019/01/09 Python
Python之时间和日期使用小结
2019/02/14 Python
用Python实现最速下降法求极值的方法
2019/07/10 Python
python代码xml转txt实例
2020/03/10 Python
Python 解决相对路径问题:&quot;No such file or directory&quot;
2020/06/05 Python
Python把图片转化为pdf代码实例
2020/07/28 Python
详解pandas映射与数据转换
2021/01/22 Python
纯CSS实现设置半个字符的样式
2014/07/03 HTML / CSS
南京某软件公司的.net面试题
2015/11/30 面试题
Oracle删除归档日志及添加定时任务
2022/06/28 Oracle
Python编写车票订购系统 Python实现快递收费系统
2022/08/14 Python