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 相关文章推荐
各浏览器中querySelector和querySelectorAll的实现差异分析
May 23 Javascript
js实例属性和原型属性示例详解
Nov 23 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
Feb 28 Javascript
Python脚本后台运行的几种方式
Mar 09 Javascript
兼容各大浏览器的JavaScript阻止事件冒泡代码
Jul 09 Javascript
Bootstrap表单布局样式代码
May 31 Javascript
Javascript中函数名.length属性用法分析(对比arguments.length)
Sep 16 Javascript
javascript实现数字配对游戏的实例讲解
Dec 14 Javascript
Vue路由切换时的左滑和右滑效果示例
May 29 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
Apr 13 Javascript
JS代码检查工具ESLint介绍与使用方法
Feb 04 Javascript
vue实现两个组件之间数据共享和修改操作
Nov 12 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 文章采集正则代码
2009/12/28 PHP
php中使用$_REQUEST需要注意的一个问题
2013/05/02 PHP
Yii框架扩展CGridView增加导出CSV功能的方法
2017/05/24 PHP
实例分析基于PHP微信网页获取用户信息
2017/11/24 PHP
jQuery 对象中的类数组操作
2009/04/27 Javascript
用jquery统计子菜单的条数示例代码
2013/10/18 Javascript
关于编写性能高效的javascript事件的技术
2014/11/28 Javascript
jQuery表单美化插件jqTransform使用详解
2015/04/12 Javascript
jquery简单的弹出层浮动层代码
2015/04/27 Javascript
jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)
2016/06/22 Javascript
jquery 多个radio的click事件实例
2016/12/03 Javascript
react系列从零开始_简单谈谈react
2017/07/06 Javascript
使用jquery的cookie实现登录页记住用户名和密码的方法
2019/03/13 jQuery
vue轮播组件实现$children和$parent 附带好用的gif录制工具
2019/09/26 Javascript
Windows上node.js的多版本管理工具用法实例分析
2019/11/06 Javascript
Js on及addEventListener原理用法区别解析
2020/07/11 Javascript
vue+高德地图实现地图搜索及点击定位操作
2020/09/09 Javascript
python启动办公软件进程(word、excel、ppt、以及wps的et、wps、wpp)
2009/04/09 Python
利用Pyhton中的requests包进行网页访问测试的方法
2018/12/26 Python
Python玩转加密的技巧【推荐】
2019/05/13 Python
python3.6中@property装饰器的使用方法示例
2019/08/17 Python
python3.x 生成3维随机数组实例
2019/11/28 Python
详解pandas映射与数据转换
2021/01/22 Python
利用CSS3的flexbox实现水平垂直居中与三列等高布局
2016/09/12 HTML / CSS
HTML5+CSS3实例 :canvas 模拟实现电子彩票刮刮乐代码
2016/12/30 HTML / CSS
Carter’s OshKosh加拿大:购买婴幼儿服装和童装
2018/11/27 全球购物
100%羊绒:NakedCashmere
2020/08/26 全球购物
幼儿园中秋节活动方案
2014/02/06 职场文书
员工拓展培训方案
2014/02/15 职场文书
工作骂脏话检讨书
2014/10/05 职场文书
刑事辩护授权委托书范本
2014/10/17 职场文书
工作调动申请报告
2015/05/18 职场文书
高二英语教学反思
2016/03/03 职场文书
python3美化表格数据输出结果的实现代码
2021/04/14 Python
Python爬虫之爬取某文库文档数据
2021/04/21 Python
SpringBoot 拦截器妙用你真的了解吗
2021/07/01 Java/Android