vue 는 카운트다운 초읽기 구성 요소 에 대한 상세 한 설명 을 설계 합 니 다.
카운트다운 초살 구성 요 소 는 전자상거래 사이트 중층 에서 끊임없이 나온다. 그러나 사고방식 이 변화무쌍 하여 나 는 다른 자료 에 근거 하여 vue 판 을 설계 했다
핵심 사고방식:
하위 구성 요소
<template>
<div>
<button @click="handleClick" :disabled="disabled">
{{btnText}}
</button>
<span>{{tip}}</span>
</div>
</template>
<script>
import moment from 'moment'
export default {
name: "Spike",
props: {
startTime: {
required: true,
validator: (val) => {
return moment.isMoment(val)
}
},
endTime: {
required: true,
validator: (val) => {
return moment.isMoment(val)
}
}
},
data() {
return {
start: false,
end: false,
done: false,
tip: '',
timeGap: 0,
btnText:""
}
},
computed: {
disabled() {
// disable , ,
// this.updateState disable
return !(this.start && !this.end && !this.done);
}
},
async created() {
const serverTime=await this.getServerTime();
this.timeGap=Date.now()-serverTime;//
this.updateState();
this.timeInterval=setInterval(()=>{
this.updateState()
},1000)
},
updated(){
if(this.end||this.done){
clearInterval(this.timeInterval)
}
},
methods: {
handleClick() {
alert(" ");
this.done=true;
this.btnText=" "
},
getServerTime() {
//
return new Promise((resolve, reject) => {
setTimeout(() => {
// 10
resolve(new Date(Date.now() -10 * 1000).getTime())//
}, 0)
})
},
updateState() {
const now = moment(new Date(Date.now() - this.timeGap));//
const diffStart=this.startTime.diff(now);//
const diffEnd=this.endTime.diff(now);//
if(diffStart<0){
this.start=true;
this.tip=" ";
this.btnText=" "
}else{
this.tip=` ${Math.ceil(diffStart/1000)} `;
this.btnText=" ";
}
if(diffEnd<=0){
this.end=true;
if( !this.btnText===" "||this.btnText===" "){
this.tip=" ";
this.btnText=" ";
}
}
}
},
beforeDestroy() {
clearInterval(this.timeInterval)
}
}
</script>
<style scoped>
button[disabled]{
cursor: not-allowed;
}
</style>
부모 구성 요소
<template>
<div>
<h1 style="color: red"> </h1>
<Spike :startTime="startTime" :endTime="endTime"></Spike>
</div>
</template>
<script>
import Spike from './Spike'
import moment from 'moment'
export default {
name: "index",
components:{
Spike
},
data(){
return{
endTime:moment(new Date(Date.now()+10*1000)),
startTime:moment(new Date(Date.now()))
}
}
}
</script>
<style scoped>
</style>
위 에서 말 한 것 은 소 편 이 여러분 에 게 소개 한 vue 가 카운트다운 초살 의 구성 요 소 를 상세 하 게 통합 시 키 는 것 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 면 저 에 게 메 시 지 를 남 겨 주세요.소 편 은 제때에 여러분 에 게 답 할 것 입 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.