element上传组件循环引用及简单时间倒计时的实现


Posted in Javascript onOctober 01, 2018

前言

今天记录几个简单的小问题,前端时间开发用到的,之前看到博客中没有记录,简单记录一下。 一个是element上传组件循环引用的方式,一个是简单的倒计时。

上传组件每个上传都要指定相应的函数,而且函数不能传入参数,10个上传按钮要写10个上传函数,非常麻烦。针对这个,我们可以循环这些函数。

案例

element一个上传组件如下:

<el-upload
 class="avatar-uploader"
 action="https://jsonplaceholder.typicode.com/posts/"
 :show-file-list="false"
 :on-success="handleAvatarSuccess"
 :before-upload="beforeAvatarUpload">
 <img v-if="imageUrl" :src="imageUrl" class="avatar">
 <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

假如有10个上传,岂不是要指定10个handleAvatarSuccess这个回掉函数?这些太麻烦了!!!

no! 我们可以不用这么写。推荐的一个写法如下:

<div class="pzsrltv" v-for="(item,index) in sValueAddedServiceData" :key="index"> <!--这一块循环出来 -->
  <div class="s_step1">
    <div class="stitle">{{item.name}}<span class="sblue" v-if="item.showimg" @click.stop="showImg.show = true;showImg.url = item.showimg">点击查看示例</span>
    </div>
    <div class="one_line">
      <img class="imagelist" v-if="svalueImg[item.value]" :src="`${viewUrl}${svalueImg[item.value]}`" >
      <el-upload
      v-if="!svalueImg[item.value]"
      class="avatar-uploader mt10"
      accept="image/jpeg,image/png,image/gif"
      :action="baseUpload"
      :show-file-list="false"
      :on-success="handlescSuccess[item.value]"
      :before-upload="beforeAvatarUpload">
      <i class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </div>
  </div>
 </div>

如上面代码,我们直接循环上传。

我们在data()里面指定handlescSuccess: {},

data(){
 return {
 handlescSuccess: {},
 svalueImg: {},
 }
}

初始化的时候,对上传进行设置

for (let i = 1; i <= 10; i++) { //循环的个数
 this.handlescSuccess[i] = function(res, file) {
  // console.log(res, _this.svalueImg)
  if (_this.svalueImg) {
   _this.$set(_this.svalueImg, i, res.file.sFile)
  }
 }
}

上面的代码是针对一个上传按钮只能上传一张图片的情况。上传多种做法类似。

例如如下:

//以下代码写在回调里面
  for (let i = 0; i < item.iNum; i++) {
   // 图文视频上传函数
   _this.handleTWSuccess[`${i}`] = function(res, file) {
    _this.sEvaluate['2'][i].sImg.push(res.file.sFile)
   }
  }

时间倒计时

这个实现起来很简单,但是在vue Dom 中实时展示,要用$set方式

天,小时,分钟,秒的倒计时函数:

data里面:

data(){
 return {
 letTimes: { nowTime: '' },
 }
}

methods里面:

countDown(times) {
   const _this = this
   let timer = null
   timer = setInterval(function() {
    let day = 0,
     hour = 0,
     minute = 0,
     second = 0// 时间默认值
    if (times > 0) {
     day = Math.floor(times / (60 * 60 * 24))
     hour = Math.floor(times / (60 * 60)) - (day * 24)
     minute = Math.floor(times / 60) - (day * 24 * 60) - (hour * 60)
     second = Math.floor(times) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60)
    }
    if (day <= 9) day = '0' + day
    if (hour <= 9) hour = '0' + hour
    if (minute <= 9) minute = '0' + minute
    if (second <= 9) second = '0' + second
    _this.$set(_this.letTimes, 'nowTime', `${day !== '00' ? `${day}天:` : ''}${hour}小时:${minute}分钟:${second}秒`)
    times--
   }, 1000)
   if (times <= 0) {
    _this.$set(_this.letTimes, 'nowTime', '')
    clearInterval(timer)
   }
  },

单纯分钟和秒倒计时

function resetTime(time){
 var timer=null;
 var t=time;
 var m=0;
 var s=0;
 m=Math.floor(t/60%60);
 m<10&&(m='0'+m);
 s=Math.floor(t%60);
 function countDown(){
  s--;
  s<10&&(s='0'+s);
  if(s.length>=3){
  s=59;
  m="0"+(Number(m)-1);
  }
  if(m.length>=3){
  m='00';
  s='00';
  clearInterval(timer);
  }
  console.log(m+"分钟"+s+"秒");
 }
 timer=setInterval(countDown,1000);
}

用法很简单,传秒数进来就可以了

例如:

this.countDown(5689)

this.resetTime(256)

小结

简单的小案例就分享到这里,国庆愉快,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery自己写tab滑动门(通用版)
Oct 30 Javascript
javascript Event对象详解及使用示例
Nov 22 Javascript
document.write的几点使用心得
May 14 Javascript
简单的jquery左侧导航栏和页面选中效果
Aug 21 Javascript
移动端JQ插件hammer使用详解
Jul 03 Javascript
bootstrap中添加额外的图标实例代码
Feb 15 Javascript
JavaScript反弹动画效果的实现代码
Jul 13 Javascript
详解ES6 系列之异步处理实战
Oct 26 Javascript
原生JS实现动态添加新元素、删除元素方法
May 05 Javascript
鸿蒙系统中的 JS 开发框架
Sep 18 Javascript
vue3.0自定义指令(drectives)知识点总结
Dec 27 Vue.js
微信小程序 根据不同用户切换不同TabBar
Apr 21 Javascript
使用iView Upload 组件实现手动上传图片的示例代码
Oct 01 #Javascript
vue项目持久化存储数据的实现代码
Oct 01 #Javascript
详解mpvue scroll-view自动回弹bug解决方案
Oct 01 #Javascript
在create-react-app中使用sass的方法示例
Oct 01 #Javascript
详解mpvue小程序中怎么引入iconfont字体图标
Oct 01 #Javascript
Vue 组件封装 并使用 NPM 发布的教程
Sep 30 #Javascript
浅谈angular表单提交中ng-submit的默认使用方法
Sep 30 #Javascript
You might like
PHP经典面试题集锦
2015/03/19 PHP
PHP版本常用的排序算法汇总
2015/12/20 PHP
thinkPHP实现多字段模糊匹配查询的方法
2016/12/01 PHP
phpMyAdmin无法登陆的解决方法
2017/04/27 PHP
php 浮点数比较方法详解
2017/05/05 PHP
PHP下 Mongodb 连接远程数据库的实例代码
2017/08/30 PHP
Mac下快速搭建PHP开发环境步骤详解
2019/05/05 PHP
jquery tools之tabs 选项卡/页签
2009/07/25 Javascript
讨论javascript(一)工厂方式 js面象对象的定义方法
2009/12/15 Javascript
jquery学习笔记二 实现可编辑的表格
2010/04/09 Javascript
jquery获得页面元素的坐标值实现思路及代码
2013/04/15 Javascript
JavaScript Math.ceil() 函数使用介绍
2013/12/11 Javascript
javascript实现带节日和农历的日历特效
2015/02/01 Javascript
javascript每日必学之条件分支
2016/02/17 Javascript
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
2017/07/08 jQuery
jQuery dateRangePicker插件使用方法详解
2017/07/28 jQuery
vue组件传递对象中实现单向绑定的示例
2018/02/28 Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
2019/09/28 Javascript
js对象简介与基本用法示例
2020/03/13 Javascript
jQuery实现简单全选框
2020/09/13 jQuery
python魔法方法-属性转换和类的表示详解
2016/07/22 Python
django数据关系一对多、多对多模型、自关联的建立
2019/07/24 Python
Django框架 Pagination分页实现代码实例
2019/09/04 Python
pygame实现俄罗斯方块游戏(AI篇2)
2019/10/29 Python
Django添加bootstrap框架时无法加载静态文件的解决方式
2020/03/27 Python
Python中zip函数如何使用
2020/06/04 Python
俄罗斯汽车零件和配件在线商店:CarvilleShop
2019/11/29 全球购物
党委书记个人对照检查材料
2014/09/15 职场文书
政府个人对照检查材料思想汇报
2014/10/08 职场文书
2014年银行工作总结范文
2014/11/12 职场文书
摘录式读书笔记
2015/07/01 职场文书
优质护理服务心得体会
2016/01/22 职场文书
PO模式在selenium自动化测试框架的优势
2022/03/20 Python
用PYTHON去计算88键钢琴的琴键频率和音高
2022/04/10 Python
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
2022/04/24 Vue.js
Tomcat安装使用及部署Web项目的3种方法汇总
2022/08/14 Servers