Detailed explanation of the steps to use the vue pop-up component

This time I will bring you a detailed explanation of the steps for using the vue pop-up component. What are the precautions when using the vue pop-up component? Here are practical cases, let’s take a look.

nbsp;html>


  <meta>
  <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 p {
      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></script>


  <p> 
    <input>
    <ys-modal-component>
      <p>
        尊敬的用户，您购买的商品将于支付成功后3-7个工作日内发货，敬请周知。祝您购物愉快！
      </p>
    </ys-modal-component>
  </p>
  <script>
    /*
      props：
        modalTitle: 弹窗标题
        okBtn: 确认按钮
        cancelBtn: 取消按钮
        注意事项：传参时候使用烤串的书写方式xx-xxx
      slot:
        modal-content: 内容区域
        modal-footer： 页脚按钮区域
      methods: 
        okHandle: 触发确认on-ok自定义事件
        cancelHandle： 触发取消on-cancel自定义事件
     */
    Vue.component(&#39;ys-modal-component&#39;, {
      props: {
        modalTitle: {
          type: String,
          default: &#39;标题区域&#39;
        },
        okBtn: {
          type: String,
          default: &#39;确认&#39;
        },
        cancelBtn: {
          type: String,
          default: &#39;取消&#39;
        }
      },
      template: `
        <p class="modal">
          <p class="modal-header">
            <h4>{{ modalTitle }}
          
          <p class="modal-content">
            <p>
              <slot name="modal-content">内容区域
            
          
          <p class="modal-footer">
              <input class="btn blue" type="button" v-model="okBtn" @click="okHandle" />
              <input class="btn" type="button" v-model="cancelBtn" @click="cancelHandle" />
          
        
      `,
      methods: {
        okHandle () {
          console.log("点击确定");
          this.$emit("on-ok"); 
        },
        cancelHandle () {
          console.log("点击取消");
          this.$emit("on-cancel");
        }
      }
    })
    new Vue({
      el: "#app",
      data: {
        isHide: false
      },
      methods: {
        ok () {
          alert("欢迎您购买本产品");
        },
        cancel () {
          this.isHide = !this.isHide;
        }
      }
    })
  </script>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Angular5 routing value transfer method summary

detailed explanation of the vue2.0 plug-in using npm publishing steps

The above is the detailed content of Detailed explanation of the steps to use the vue pop-up component. For more information, please follow other related articles on the PHP Chinese website!