Train_1：按钮组件

来源：互联网发布：淘宝网非主流女装编辑：程序博客网时间：2024/06/14 01:04
<style>    .button{        display: inline-block;        padding: 7.5px 20px;        font-size: 14px;        color: #888;        border: 1px solid #000;        border-radius: 2px;        background-color: #fff;        outline: none;    }    .button.disable {        cursor: not-allowed;    }</style><body>    <div id = 'app'>        <div>            <div></div>            <div>                <sep-button name = 'button_this' text = '提交' wtext = '提交中...' :onclick = 'm_submit'></sep-button>            </div>            <div></div>        </div>    </div>    <template id = 'sep-button'>         <div>            <button class="button" :class = '{disable : 1 == this.statue }'  @click = 'm_click'>{{show_text}}</button>        </div>    </template>    <script src="https://cdn.bootcss.com/vue/2.5.8/vue.min.js"></script>    <script type="text/javascript">        var SEPBUTTON = {            template : '#sep-button',            props : {                name : String,                text : String,                wtext : String,                onclick : Function,                onreset : Function            },            data : function() {                return {                    show_text : this.text,                    statue : 0                }            },            methods : {                m_click : function() {                    if(0 == this.statue) {                        this.statue = 1 ;                        this.show_text = this.wtext ;                         if('function' == typeof this.onclick) {                            this.onclick();                        }                    }                },                m_reset : function() {                    if(1 == this.statue) {                        this.statue = 0 ;                        this.show_text = this.text ;                         if('function' == this.onreset) {                            this.onreset() ;                        }                    }                }            },            mounted : function() {                /**                 *  Vue.set()使用方法：                 *                  */                // 把组件的“this”关键字通过组件的“name”关键字传到“根”上，在“根”上定义一个与“name”值相同的对象                 Vue.set(this.$root, this.name , this) ;                }        } ;        Vue.component('sep-button', SEPBUTTON) ;        var _vm = new Vue({            data : {                button_this : {},           // 这个“button”要对应组件“name”的值，用来接收从组件传来的“this”对象                other_button : {}            },            methods : {                m_submit : function() {                    console.log('_vm.button_this', _vm.button_this) ;                    console.log('_vm.button_this.name：', _vm.button_this.name) ;                    console.log('_vm.button_this.text：', _vm.button_this.text) ;                    console.log('_vm.button_this.texwtext：', _vm.button_this.wtext) ;                    console.log('_vm.button_this.onclick', _vm.button_this.onclick) ;                    console.log('------------------------------------------------------------------------') ;                    console.log('_vm.other_button', _vm.other_button) ;                    console.log('_vm.other_button.name：', _vm.other_button.name) ;                    console.log('_vm.other_button.text：', _vm.other_button.text) ;                    console.log('_vm.other_button.texwtext：', _vm.other_button.wtext) ;                    console.log('_vm.other_button.onclick', _vm.other_button.onclick) ;                    console.log('------------------------------------------------------------------------') ;                    alert('向服务器发出请求了') ;                    setTimeout(function() {                        alert('服务器返回数据了') ;                        _vm.button_this.m_reset() ;                    },3000) ;                }            }        }).$mount('#app');    </script></body>
阅读全文
0 0