JSFiddle - React, Tailwind, and code Playground

by Sun Binbin

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//cdn.jsdelivr.net/gh/beyoursun/vue-popup/dist/vue-popup.js"></script>

<div id="app">
  <popup arrow-class="drop-arrow" class="drop-msg-fail" ref="popup1" :display.sync="showPop">
    <p>消息发送失败</p>
    <div class="drop-wrap">
      <a href="javascript:;" @click="showPop = false">重发</a>
      <a href="javascript:;" @click="showPop = false">删除</a>
    </div>
  </popup>
  <a v-popup:popup1 class="btn" href="javascript:;">
    <span>展示弹出框</span>
  </a>
</div>

CSS

@import url("//cdn.jsdelivr.net/gh/beyoursun/vue-popup/src/demo.css");

JavaScript

Vue.use(VuePopup)

new Vue({
  el: '#app',
  data: {
    showPop: false
  }
})