快捷導(dǎo)航

很棒的vue彈窗組件

更新時(shí)間：2017年05月24日 15:15:38 作者：章魚不丸子

這篇文章主要為大家詳細(xì)介紹了vue彈窗組件的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

彈窗是一個(gè)項(xiàng)目必備的復(fù)用利器，所以封裝起來，保證項(xiàng)目ui一致，是很有必要的。學(xué)了一段時(shí)間vue，想想還是用vue寫一下吧。用的很小白，但是會(huì)寫出來了，說明我也有進(jìn)步一丟丟了。繼續(xù)加油….
代碼貼圖如下，樣式比較丑，不要介意…

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>ys-vue-modal-component</title>
  <style>
    p,h4{
      margin:0;
    }
    .modal{
      width: 480px;
      background-color: #fff;
      border: 1px solid rgba(0, 0, 0, .3);
      border-radius: 6px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, .5);
      margin: 50px;
    }
    .modal-header {
      color: #fff;
      background: cadetblue;
      border-radius: 6px 6px 0 0;
      padding: 15px;
      border-bottom: 1px solid #5e9fa1;
    }
    .modal-content div {
      padding: 15px 10px;
    }
    .modal-footer {
      padding: 15px;
      text-align: right;
      border-top: 1px solid #e5e5e5;
    }
    .btn {
      border: 1px solid #d1d1d1;
      border-radius: 3px;
      background-color: #f7f7f7;
      background: -webkit-gradient(linear, 0 0, 0 100%, from(#f7f7f7),
     to(#f2f2f2));
      background: -moz-gradient(linear, 0 0, 0 100%, from(#f7f7f7),
     to(#f2f2f2));
      background: -o-gradient(linear, 0 0, 0 100%, from(#f7f7f7), to(#f2f2f2));
      background: -ms-gradient(linear, 0 0, 0 100%, from(#f7f7f7), to(#f2f2f2));
      height: 28px;
      padding: 0 20px;
      cursor: pointer;
      line-height: 28px;
      display: inline-block;
      color: #666666;
      margin-right: 5px;
      outline: none;
    }
    .blue {
       border: 1px solid #5e9fa1;
      background-color: #5e9fa1;
      background: -webkit-gradient(linear, 0 0, 0 100%, from(#74c4c6),
     to(#5e9fa1));
      background: -moz-gradient(linear, 0 0, 0 100%, from(#74c4c6),
     to(#5e9fa1));
      background: -o-gradient(linear, 0 0, 0 100%, from(#74c4c6), to(#5e9fa1));
      background: -ms-gradient(linear, 0 0, 0 100%, from(#74c4c6), to(#5e9fa1));
      color: #FFFFFF;
    }    
  </style>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app"> 
    <input type="button" class="btn blue" value="點(diǎn)擊我，呼喚彈窗，再來一遍" v-if="isHide" @click="isHide=!isHide">
    <ys-modal-component 
       v-if="!isHide"
       modal-title="溫馨提示" 
       ok-btn="確認(rèn)購買" 
       cancel-btn="去意已決"
       @on-ok="ok"
       @on-cancel="cancel"
     >
      <div slot="modal-content">
        尊敬的用戶，您購買的商品將于支付成功后3-7個(gè)工作日內(nèi)發(fā)貨，敬請(qǐng)周知。祝您購物愉快！
      </div>
    </ys-modal-component>
  </div>
  <script>
    /*
      props：
        modalTitle: 彈窗標(biāo)題
        okBtn: 確認(rèn)按鈕
        cancelBtn: 取消按鈕
        注意事項(xiàng)：傳參時(shí)候使用烤串的書寫方式xx-xxx
      slot:
        modal-content: 內(nèi)容區(qū)域
        modal-footer： 頁腳按鈕區(qū)域
      methods: 
        okHandle: 觸發(fā)確認(rèn)on-ok自定義事件
        cancelHandle： 觸發(fā)取消on-cancel自定義事件
     */
    Vue.component('ys-modal-component', {
      props: {
        modalTitle: {
          type: String,
          default: '標(biāo)題區(qū)域'
        },
        okBtn: {
          type: String,
          default: '確認(rèn)'
        },
        cancelBtn: {
          type: String,
          default: '取消'
        }
      },
      template: `
        <div class="modal">
          <div class="modal-header">
            <h4>{{ modalTitle }}</h4>
          </div>
          <div class="modal-content">
            <div>
              <slot name="modal-content">內(nèi)容區(qū)域</slot>
            </div>
          </div>
          <div class="modal-footer">
              <input class="btn blue" type="button" v-model="okBtn" @click="okHandle" />
              <input class="btn" type="button" v-model="cancelBtn" @click="cancelHandle" />
          </div>
        </div>
      `,
      methods: {
        okHandle () {
          console.log("點(diǎn)擊確定");
          this.$emit("on-ok"); 
        },
        cancelHandle () {
          console.log("點(diǎn)擊取消");
          this.$emit("on-cancel");
        }
      }
    })


    new Vue({
      el: "#app",
      data: {
        isHide: false
      },
      methods: {
        ok () {
          alert("歡迎您購買本產(chǎn)品");
        },
        cancel () {
          this.isHide = !this.isHide;
        }
      }
    })
  </script>
</body>
</html>

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: