zoukankan      html  css  js  c++  java
  • vue组件系列-验证码倒计时组件

    <style scoped>
        .veri-code{
             100%;
            .veri-send{
                 100%;
                height: 91px;
                position:relative;
                overflow:hidden;
                >.sendBtn{
                    background:url(../assets/images/hongbao_code_btn.jpg) 100% 100% no-repeat;
                    background-size: contain;
                    display: inline-block;
                     171px;
                    height: 91px;
                    z-index:2;
                    position: absolute;
                    right:0;
                    top:0;
                    span{
                        display: inline-block;
                         171px;
                        height: 91px;
                        line-height: 91px;
                        text-align: center;
                        font-family: PingFangSC;
                        font-size: 32px;
                        font-weight: 600;
                        color: #c31222;
                    }
                }
            }
            .veri-activated{
                >.sendBtn{
                    span{
                        background:url(../assets/images/hongbao_code_btn_disabled.jpg) 100% 100% no-repeat;
                        background-size: contain;
                        color:#8e0612;
                    }
                }
            }
        }
    </style>
    
    <template>
        <div class="veri-code">
            <div :class="['veri-send',{'veri-activated':isSended || activityEnd}]">
                <txt-input placeholder="请输入手机号" max-length="11" type="tel"></txt-input>
                <div class="sendBtn">
                    <span v-if="!isSended" @click="getVeriCode">验证码</span>
                    <span v-if="isSended">{{seconds}}s</span>
                </div>
            </div>
        </div>
    </template>
    
    <script>
        import Vue from 'vue';
        import TxtInput from './TxtInput.vue';
        import bus from '../lib/bus';
        export default Vue.extend({
            name:'veri-code',
            components:{
                'txt-input':TxtInput
            },
            data(){
                return {
                    seconds:60,
                    left_time:0,
                    isSended: false
                }
            },
            props: {
                sended: {
                    default: this.isSended
                },
                activityEnd:{
                    default: false
                }
            },
            watch:{
                sended: function(val,oldVal){
                    this.isSended = this.sended;
                    if(this.sended & this.left_time == 0){
                        let _this = this,flag = this.seconds;
                        let setSended = () => {
                            clearInterval(timmer);
                            _this.isSended = false;
                            _this.seconds = flag;
                            _this.$parent.codeSended = false;
                        };
                        let timmer = setInterval(function(){
                            _this.seconds > 1 ? _this.seconds-- : setSended()
                        },1000);
                    }
                },
                left_time: function(val,oldVal){
                    this.defaultState()
                }
            },
            methods: {
                getVeriCode: function(){
                    this.$parent.getVeriCode()
                },
                defaultState: function(){
                  if(this.left_time != 0){
                    let _this = this,flag = this.seconds;
                    this.seconds = this.left_time
                    this.sended = true
                    let setSended = () => {
                        clearInterval(timmer);
                        _this.sended = false;
                        _this.seconds = flag;
                        this.left_time = 0;
                    };
                    let timmer = setInterval(function(){
                        _this.seconds > 0 ? _this.seconds-- : setSended()
                    },1000);
                  }
                },
            },
            // created(){
            //   this.defaultState()
            // }
        })
    </script>
  • 相关阅读:
    【Winform】Find out the changed rows in DataGridView
    DataGridView merge colunm header
    Spread日付セールのカレンダーに本日を初期値として表示する
    JLPT
    sql server数据库是否区分大小写的设置
    IIS7に.NET Framework 4を登録する
    [翻译]使用ASP.NET AJAX让GridView的数据行显示提示框(ToolTip)
    SILVERLIGHT开始在整个网站积累更深入的体验(转载)
    net连接access数据库,输出结果到页面
    利用JavaScript实现简单的拖动层(只使用于IE)
  • 原文地址:https://www.cnblogs.com/sybboy/p/12207230.html
Copyright © 2011-2022 走看看