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 相关文章推荐
基于jQuery实现的菜单切换效果
Oct 16 Javascript
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 jQuery
vue组件 $children,$refs,$parent的使用详解
Jul 31 Javascript
jQuery绑定事件方法及区别(bind,click,on,live,one)
Aug 14 jQuery
JS动态添加的div点击跳转到另一页面实现代码
Sep 30 Javascript
通俗易懂地解释JS中的闭包
Oct 23 Javascript
es6在react中的应用代码解析
Nov 08 Javascript
JS实现显示当前日期的实例代码
Jul 03 Javascript
通过说明与示例了解js五种设计模式
Jun 17 Javascript
七行JSON代码把你的网站变成移动应用过程详解
Jul 09 Javascript
layui 富文本赋值,取值,取纯文本值的实例
Sep 18 Javascript
js实现盒子滚动动画效果
Aug 09 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
Zerg建筑一览
2020/03/14 星际争霸
PHP目录函数实现创建、读取目录教程实例
2011/01/13 PHP
php定时计划任务的实现方法详解
2013/06/06 PHP
php实现生成PDF文件的方法示例【基于FPDF类库】
2018/07/21 PHP
几个常用的JavaScript字符串处理函数 - split()、join()、substring()和indexOf()
2009/06/02 Javascript
Ext JS 4官方文档之三 -- 类体系概述与实践
2012/12/16 Javascript
你必须知道的Javascript知识点之&quot;单线程事件驱动&quot;的使用
2013/04/23 Javascript
js操作IE浏览器弹出浏览文件夹可以返回目录路径
2014/07/14 Javascript
Jquery焦点图实例代码
2014/11/25 Javascript
innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
2015/03/13 Javascript
分享10个优化代码的CSS和JavaScript工具
2016/05/11 Javascript
js省市县三级联动效果实例
2020/04/15 Javascript
关于JavaScript中的this指向问题总结篇
2017/07/23 Javascript
react-router4按需加载(踩坑填坑)
2019/01/06 Javascript
JS获取本地地址及天气的方法实例小结
2019/05/10 Javascript
layui-table对返回的数据进行转变显示的实例
2019/09/04 Javascript
移动端手指操控左右滑动的菜单
2019/09/08 Javascript
js代码编写无缝轮播图
2020/09/13 Javascript
Python基于PycURL自动处理cookie的方法
2015/07/25 Python
Python3读取Excel数据存入MySQL的方法
2018/05/04 Python
Python画柱状统计图操作示例【基于matplotlib库】
2018/07/04 Python
Python利用matplotlib绘制约数个数统计图示例
2019/11/26 Python
Python telnet登陆功能实现代码
2020/04/16 Python
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
2019/01/23 HTML / CSS
Uber Eats台湾:寻找附近提供送餐服务的餐厅
2018/05/07 全球购物
澳大利亚优质葡萄酒专家:Vintage Cellars
2019/01/08 全球购物
PHP面试题及答案二
2015/05/23 面试题
本科生学习总结的自我评价
2013/10/02 职场文书
餐厅楼面部长岗位职责范文
2014/02/16 职场文书
《赶海》教学反思
2014/04/20 职场文书
民政局副局长民主生活会个人整改措施
2014/10/04 职场文书
企业宣传稿范文
2015/07/23 职场文书
新郎结婚感言
2015/07/31 职场文书
装修安全责任协议书
2016/03/22 职场文书
导游词之京东大峡谷旅游区
2019/10/29 职场文书
Python3的进程和线程你了解吗
2022/03/16 Python