vue 는 카운트다운 초읽기 구성 요소 에 대한 상세 한 설명 을 설계 합 니 다.

4806 단어 vue카운트다운
프로필:
카운트다운 초살 구성 요 소 는 전자상거래 사이트 중층 에서 끊임없이 나온다.  그러나 사고방식 이 변화무쌍 하여 나 는 다른 자료 에 근거 하여 vue 판 을 설계 했다
핵심 사고방식:
  • 1.시간 은 로 컬 클 라 이언 트 의 시간 이 될 수 없습니다.  서버 시간 이 어야 합 니 다. 
  • 2.시작 시간,종료 시간 은 부모 구성 요 소 를 통 해 들 어 옵 니 다.서버 시간 이 이 시작 시간 과 종료 시간 범위 내 에 있 을 때  이벤트 참가 버튼 을 클릭 할 수 있 으 며,이벤트 참가 후 다시 참가 할 수 없습니다.
  • 3.구성 요 소 를 만 들 때 현재 시간 서비스 시간 차 를 동기 화하 고 이 안에 타 이 머 를 설치 하여 1 초 에 초살 이 시작 되 고 끝 나 는 지 판단 합 니 다.
  • 4.업데이트 시간의 함수 에서 시작 과 끝 여부,
  • 5.computed 갈고리 에서 disable 을 감청 하여 단 추 를 누 를 수 있 는 지 확인 합 니 다
  • 6.이벤트 에 참가 하여 update 에서 타이머 의 시간 을 멈 춘 적 이 있 고 페이지 가 소각 되 었 을 때 도 시간 을 멈 춘 적 이 있다
  • 다음은 코드 입 니 다.
    하위 구성 요소
    
    <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 가 카운트다운 초살 의 구성 요 소 를 상세 하 게 통합 시 키 는 것 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 면 저 에 게 메 시 지 를 남 겨 주세요.소 편 은 제때에 여러분 에 게 답 할 것 입 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!

    좋은 웹페이지 즐겨찾기