无法在这个位置找到: head2.htm
当前位置: 建站首页 > 新闻动态 > 行业新闻 >

element提交部件循环系统引入及简易時间倒数计时

时间:2021-04-07 04:07来源:未知 作者:jianzhan 点击:
今日纪录好多个简易的小难题,前端开发時间开发设计采用的,以前见到blog中沒有纪录,简易纪录一下。 一个是element提交部件循环系统引入的方法,一个是简易的倒数计时。提交部件

今日纪录好多个简易的小难题,前端开发時间开发设计采用的,以前见到blog中沒有纪录,简易纪录一下。 一个是element提交部件循环系统引入的方法,一个是简易的倒数计时。

提交部件每一个提交必须特定相对的涵数,并且涵数不可以传到主要参数,10个提交按键要写10个提交涵数,十分不便。对于这一,大家能够循环系统这种涵数。

实例

element一个提交部件以下:

 el-upload
 action="posts/"
 :show-file-list="false"
 :ess="ess"
 :before-upload="beforeAvatarUpload" 
 img v-if="imageUrl" :src="imageUrl" 
 i v-else /i 
 /el-upload 

ess这一回掉涵数?这种太不便了!!!

no! 大家能够无需那么写。强烈推荐的一个书写以下:

 div v-for="(item,index) in sValueAddedServiceData" :key="index" !--这一块循环系统出去 -- 
 div 
 div {{item.name}} span v-if="item.showimg" @click.stop="showImg.show = true;showImg.url = item.showimg" 点一下查询实例 /span 
 /div 
 div 
 img v-if="svalueImg[item.value]" :src="`${viewUrl}${svalueImg[item.value]}`" 
 el-upload
 v-if="!svalueImg[item.value]"
 accept="image/jpeg,image/png,image/gif"
 :action="baseUpload"
 :show-file-list="false"
 :ess="ess[item.value]"
 :before-upload="beforeAvatarUpload" 
 i /i 
 /el-upload 
 /div 
 /div 
 /div 

如上边编码,大家立即循环系统提交。

大家在data()ess: {},

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

原始化的情况下,对提交开展设定

for (let i = 1; i = 10; i++) { //循环系统的数量
 ess[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++) {
 // 文图视頻提交涵数
 ess[`${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)

总结

简易的小实例就共享到这儿,十一国庆开心,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多的适用诺心互联网。

(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
无法在这个位置找到: ajaxfeedback.htm
栏目列表
推荐内容


扫描二维码分享到微信