vue项目实现倒计时结束后按钮可用

最新推荐文章于 2022-12-29 19:53:32 发布

real_lt

最新推荐文章于 2022-12-29 19:53:32 发布

阅读量2.9k

点赞数 1

分类专栏：教程文章标签： vue button 倒计时

本文链接：https://blog.csdn.net/real_lt/article/details/102688016

版权

教程专栏收录该内容

8 篇文章 0 订阅

订阅专栏

开始时样式
倒计时结束后
直接上代码（涉及项目，所以此处只贴出了该部分的功能代码）

    <button class="brown" @click="close()">取消</button>
    <button class="default" v-show="show" @click="()=>{deleteFamily()}">确定</button>
    <button class="default" disabled="disabled" v-show="!show">确定（{{count}}s）</button>

<script>
export default {
  data() { return { timer: null, count: null, show: true } },
  mounted() { this.getCode() },
  methods: {
    getCode() {
      let _this = this;
      _this.show = false;
      const TIME_COUNT = 5;
      if (!_this.timer) {
        _this.count = TIME_COUNT;
        _this.show = false;
        _this.timer = setInterval(() => {
          if (_this.count > 0 && _this.count <= TIME_COUNT) {
            _this.count--;
          } else {
            _this.show = true;
            clearInterval(_this.timer);
            _this.timer = null;
          }
        }, 1000)
      }
    }

  }
}
</script>

<style lang="scss">
  button {
    &.default {
      &:hover {
        background: rgba(239, 229, 222, 1);
      }

      &:disabled {
        opacity: 1 !important;
        padding: 6px 13px 5px 13px !important;
        color: rgba(173, 173, 173, 1);
        border: 1px solid rgba(207, 176, 155, 1);

        &:hover {
          background: #fff;
          cursor: not-allowed;
        }
      }
    }
}
</style>