标签：封装 CN 示例 timeStr timeTitle dataIndex vue2 getDateYMDHM stringToDate

组件封装注意事项：

1、props：属性。是子组件和父容器之间参数传递的桥梁

2、this.$emit：事件。子组件通知父容器事件发生，并传递参数

3、子组件中经常要用watch监控数据变化

下面示例：一个播放器组件

<template>
        <div style="display: flex;align-items:center;">
          <div class="play" id="playpause" data-context="f"  @click="handlplay">
            <span>
              <a-icon :type="iconfig?'pause':'caret-right'" class="icon"/>
            </span>
          </div>

          <div class="airMoniTitle" >
            <p>{{timeTitle}}</p>
          </div>
        </div>
</template>
<script>
  import {getDateYMDHMS,getDateYMDHM_CN,stringToDate,dateAdd} from '@utils/date'
export default { 
    name:'singleTime', //单时间组件，日期组件包含一个日期和一个小时，鼠标点击日期修改事件：changeEvent(time)，
    props:{
      timeInterval:{
        type:Number, //秒1000等于1秒,默认2秒
        default:1500
      },
      initialDate:{//初始化日期，如果初始化不给值，则默认用当天日期，格式：yyyyMMddHHmmss
          type:String
      },
    },
    data() {
        return {
            timeStr:'',//时间字符串
            timeTitle:'',//时间标题
            iconfig:false,  //false停止，true播放
            Time:null,    // 计时器
            dataIndex:0,//播放序号
        }
    },
    created(){
        this.dataIndex=0;
        if(this.initialDate)
        { //当他要初始化日期时
            this.timeStr = this.initialDate;
            this.timeTitle=getDateYMDHM_CN(stringToDate(this.timeStr));
        }
        else
        {
            this.timeStr = getDateYMDHMS(new Date(),'');
            this.timeTitle=getDateYMDHM_CN(stringToDate(this.timeStr));
        }
    },
    watch:{
        initialDate(val){//当多次模拟的initialDate一样的时候watch不执行，这个时候要配合resetTime()一起使用
            this.timeStr = val;
            this.timeTitle=getDateYMDHM_CN(stringToDate(this.timeStr));
            this.dataIndex=0;
        },
    },
    methods: {
      resetTime(time)
      {
        this.timeStr = time;
        this.timeTitle=getDateYMDHM_CN(stringToDate(this.timeStr));
        this.dataIndex=0;
      },
      resetStatus()//让播放器的状态重置
      {
        //console.log("reset");
        clearInterval(this.Time)//清除计时器
        this.Time = null;//设置为null
        this.dataIndex=0;
        this.iconfig=false;
      },
      handlplay()//播放
      {
        this.iconfig = !this.iconfig;
        if (this.iconfig) {// 开始播放
          this.Time = setInterval(() => {
            if(this.dataIndex >= 13)
            {//播放结束，从新开始播放
              this.dataIndex=0;
              let dates=dateAdd(stringToDate(this.timeStr),'f',this.dataIndex*5);
              this.timeTitle=getDateYMDHM_CN(dates);
              let timess=getDateYMDHMS(dates,'');

              this.$emit('playerTimeChange',{xh:(this.dataIndex+ 1),timestr:timess})
            }
            else
              {//播放中
              this.dataIndex  = (this.dataIndex+ 1);
              let dates=dateAdd(stringToDate(this.timeStr),'f',this.dataIndex*5);
              this.timeTitle=getDateYMDHM_CN(dates);
              let timess=getDateYMDHMS(dates,'');

              this.$emit('playerTimeChange',{xh:(this.dataIndex+ 1),timestr:timess})
            }


          }, this.timeInterval)
        } else {
          clearInterval(this.Time)//清除计时器
          this.Time = null;//设置为null
        }
      }
    }
    
}
</script>
<style lang="less" scoped>
  #playpause{
    font-family: iconfont;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    cursor: pointer;
    font-size: 25px;
    width: 60px;
    height: 33px;
    z-index: 999;
    color: white;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid #888888;
    span{
      padding-top: 3px;
      color: #fff;
      text-align: center;
      display: block;
    }
  }
  .airMoniTitle{
    width: 210px;
    height: 33px;
    z-index: 999;
    background: rgba(0, 0, 0, 0.7);
    font-size: 16px;
    color: #fff;
    text-align: center;
    padding: 0 10px;
    border: 1px solid #888888;
    p{
      line-height: 20px;
      font-size: 16px;
      font-weight: 500;
    }
    p:nth-child(1){
      padding-top: 5px;
    }
  }
</style>

标签：封装,CN,示例,timeStr,timeTitle,dataIndex,vue2,getDateYMDHM,stringToDate
来源： https://www.cnblogs.com/tiandi/p/16355134.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。