投稿

vue拿来即用的封装短信验证

Vedu • • 程序开发 • 阅读 1098
封装好的短信验证

<template>
 <div class="message">
  <span class="acquire" @click="getCode" v-if="show">{{text}}</span>
  <span class="acquire" v-else>{{text}} {{ count }} (s)</span>
</div>
</template>
<script>
import { SMS_SEND} from "@/api";
export default {
  name: "Verify",
  data() {
    return {
      /* -------- 验证码----- */
      show: true,
      count: "",
      timer: null,
    };
  },
  props: ['phone','countDown','text'],
  methods: {
    //点击获取验证码
    async getCode() {
      this.showKeyboard = true
      let params =  {
        applyId: "",
        content: "",
        phoneNo: this.phone,
        templeteNo: "",
      };
      await this.axios.post(SMS_SEND, params)
      .then(({ data }) => {
        if (data.success) {
          const TIME_COUNT = this.countDown || 60;
          if (!this.timer) {
            this.count = TIME_COUNT;
            this.show = false;
            this.timer = setInterval(() => {
              if (this.count > 1 && this.count <= TIME_COUNT) {
                this.count--;
              } else {
                this.show = true;
                clearInterval(this.timer);
                this.timer = null;
              }
            }, 1000);
          }
        } else {
          this.__toast(data.errorMsg || "核心数据异常");
        }
      });
    },

  },
};
</script>
<style lang='less' rel="stylesheet/less" scoped>
.message {
  .acquire {
    display: block;
    margin: 20px auto;
    text-align: center;
    color: #24b13f;
  }
}
</style>

需要引用的页面

<template>
  <div class="Verify">
      <message
        :phone="phone"
        :countDown="countDown"
        text='获取短信验证码'
      >
      </message>
    </div>
</template>
<script>
import message from './message'
export default {
  name: "Verify",
  components: {
    message
  },
  data() {
      phone:'13112345678',
      countDown:120,
    };
  },
}
</script>

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/procedure/14070.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
VeduVedu
0 0
上一篇 2020-11-09 13:49
下一篇 2020-11-09 16:18

相关推荐

发表评论

登录后才能评论