element上傳組件循環(huán)引用及簡(jiǎn)單時(shí)間倒計(jì)時(shí)的實(shí)現(xiàn)
前言
今天記錄幾個(gè)簡(jiǎn)單的小問(wèn)題，前端時(shí)間開(kāi)發(fā)用到的，之前看到博客中沒(méi)有記錄，簡(jiǎn)單記錄一下。 一個(gè)是element上傳組件循環(huán)引用的方式，一個(gè)是簡(jiǎn)單的倒計(jì)時(shí)。
上傳組件每個(gè)上傳都要指定相應(yīng)的函數(shù)，而且函數(shù)不能傳入?yún)?shù)，10個(gè)上傳按鈕要寫10個(gè)上傳函數(shù)，非常麻煩。針對(duì)這個(gè)，我們可以循環(huán)這些函數(shù)。
案例
element一個(gè)上傳組件如下：
<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個(gè)上傳，豈不是要指定10個(gè)handleAvatarSuccess這個(gè)回掉函數(shù)？這些太麻煩了！??！
no! 我們可以不用這么寫。推薦的一個(gè)寫法如下：
<div class="pzsrltv" v-for="(item,index) in sValueAddedServiceData" :key="index"> <!--這一塊循環(huán)出來(lái) -->
<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">點(diǎn)擊查看示例</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>
如上面代碼，我們直接循環(huán)上傳。
我們?cè)赿ata（）里面指定handlescSuccess: {},
data(){
return {
handlescSuccess: {},
svalueImg: {},
}
}
初始化的時(shí)候，對(duì)上傳進(jìn)行設(shè)置
for (let i = 1; i <= 10; i++) { //循環(huán)的個(gè)數(shù)
this.handlescSuccess[i] = function(res, file) {
// console.log(res, _this.svalueImg)
if (_this.svalueImg) {
_this.$set(_this.svalueImg, i, res.file.sFile)
}
}
}
上面的代碼是針對(duì)一個(gè)上傳按鈕只能上傳一張圖片的情況。上傳多種做法類似。
例如如下：
//以下代碼寫在回調(diào)里面
for (let i = 0; i < item.iNum; i++) {
// 圖文視頻上傳函數(shù)
_this.handleTWSuccess[`${i}`] = function(res, file) {
_this.sEvaluate['2'][i].sImg.push(res.file.sFile)
}
}
時(shí)間倒計(jì)時(shí)
這個(gè)實(shí)現(xiàn)起來(lái)很簡(jiǎn)單，但是在vue Dom 中實(shí)時(shí)展示，要用$set方式
天，小時(shí)，分鐘，秒的倒計(jì)時(shí)函數(shù)：
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// 時(shí)間默認(rèn)值
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}小時(shí)：${minute}分鐘：${second}秒`)
times--
}, 1000)
if (times <= 0) {
_this.$set(_this.letTimes, 'nowTime', '')
clearInterval(timer)
}
},
單純分鐘和秒倒計(jì)時(shí)
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);
}
用法很簡(jiǎn)單，傳秒數(shù)進(jìn)來(lái)就可以了
例如：
this.countDown(5689) this.resetTime(256)
小結(jié)
簡(jiǎn)單的小案例就分享到這里，國(guó)慶愉快，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue+axios使用FormData方式向后端發(fā)送數(shù)據(jù)
在前后端分離的項(xiàng)目中經(jīng)常使用到Vue+axios通過(guò)FormData的方式向后端發(fā)送表單數(shù)據(jù),下面就來(lái)介紹一下如何實(shí)現(xiàn),感興趣的可以了解一下2023-09-09
vue如何給element-ui中的el-tabs動(dòng)態(tài)設(shè)置label屬性
這篇文章主要介紹了vue如何給element-ui中的el-tabs動(dòng)態(tài)設(shè)置label屬性，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue+webpack實(shí)現(xiàn)異步加載三種用法示例詳解
這篇文章主要介紹了vue+webpack實(shí)現(xiàn)異步加載的三種用法，文中給大家提到了vue+webpack實(shí)現(xiàn)異步組件加載的代碼，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2018-04-04
這篇文章主要介紹了ant-design-vue時(shí)間線使用踩坑及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
Vue2學(xué)習(xí)筆記之請(qǐng)求數(shù)據(jù)交互vue-resource
本篇文章主要介紹了Vue2學(xué)習(xí)筆記之?dāng)?shù)據(jù)交互vue-resource ，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
如何使用uniapp內(nèi)置組件webview消息傳遞詳解
uni-app的web-view組件用于在應(yīng)用中打開(kāi)網(wǎng)頁(yè),并支持應(yīng)用和網(wǎng)頁(yè)之間的消息傳遞,這篇文章主要介紹了如何使用uniapp內(nèi)置組件webview消息傳遞的相關(guān)資料,需要的朋友可以參考下2025-02-02
vue 組件數(shù)據(jù)加載解析順序的詳細(xì)代碼
Vue.js的解析順序可以概括為:模板編譯、組件創(chuàng)建、數(shù)據(jù)渲染、事件處理和生命周期鉤子函數(shù)執(zhí)行,接下來(lái)通過(guò)本文給大家介紹vue 組件數(shù)據(jù)加載解析順序的完整代碼,感興趣的朋友跟隨小編一起看看吧2024-03-03
在vue-cli搭建的項(xiàng)目中增加后臺(tái)mock接口的方法
這篇文章主要介紹了在vue-cli搭建的項(xiàng)目中增加后臺(tái)mock接口的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)頁(yè)面添加水印效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
ant design 日期格式化的實(shí)現(xiàn)
這篇文章主要介紹了ant design 日期格式化的實(shí)現(xiàn)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10