第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

更改模態(tài)窗口

更改模態(tài)窗口

猛跑小豬 2021-11-04 15:33:19
我有 2 個(gè)模態(tài)窗口:注冊(cè)和登錄。當(dāng)我點(diǎn)擊“注冊(cè)”按鈕時(shí),模態(tài)窗口應(yīng)該會(huì)改變。我該怎么辦?這是一個(gè)項(xiàng)目鏈接。https://jsfiddle.net/Alienwave/0kqj7tr1/4/Vue.component('signup', {    template: '#signup-template'})Vue.component('login', {    template: '#login-template',    data() {        return {            loginInput: '',            passwordInput: ''        }    },    methods: {        sendRequest(e) {                    //code not here        },        changeModal() {                        // THIS!!        }    }});new Vue({    el: "#app",    data() {        return {        showLogin: true,            showSignup: false        }        }        });這是登錄模板:<template id="login-template">        <transition name="modal">            <div class="login-mask">                <div class="login-wrapper">                    <div class="login-container">                        <div class="login-footer">                            <slot name="footer">                                <div class="change-mode">                                    <button class="change-mode-reg" @click="">Sign up</button> <!-- THIS BUTTON SHOULD CHANGE MODAL! -->                                </div>                            </slot>                        </div>                    </div>                </div>            </div>        </transition>    </template>注冊(cè)模板看起來(lái)一樣。我切了一大塊。
查看完整描述

1 回答

?
翻閱古今

TA貢獻(xiàn)1780條經(jīng)驗(yàn) 獲得超5個(gè)贊

這是 Vue自定義事件的一個(gè)很好的用例。我會(huì)按如下方式更新您的代碼:


#登錄模板


...


<div class="login-footer">

  <slot name="footer">

    <div class="change-mode">

      <button class="change-mode-reg" @click="changeModal">Sign up</button>

      <div class="change-mode-line"></div>

    </div>

  </slot>

</div>


...

登錄組件


Vue.component('login', {

  template: '#login-template',

  data() {

    return {

      loginInput: '',

      passwordInput: ''

    }

  },

  methods: {

    sendRequest(e) {

      //code not here

    },

    changeModal() {

      this.$emit('change');

    }

  }

});

#應(yīng)用程序


<div id="app">

  <login v-if="showLogin" @close="showLogin = false" @change="changeModal"></login>

  <signup v-if="showSignup" @close="showSignup = false"></signup>

</div>

這是一個(gè)更新的小提琴。


(注意:看起來(lái)您在這里可能還有其他一些問(wèn)題,但這可以解決您的模式切換問(wèn)題。)


查看完整回答
反對(duì) 回復(fù) 2021-11-04
  • 1 回答
  • 0 關(guān)注
  • 154 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)