弹出层 (bui-popup)

用法

  1.  <div class="center" style="padding:10px;">
    2.     <bui-button class="ex-btn" type="warning" value="下面弹出" @click="open1()"></bui-button>
    3.     <bui-button class="ex-btn" type="warning" value="上面弹出" @click="open2()"></bui-button>
    4.     <bui-button class="ex-btn" type="warning" value="左边弹出" @click="open3()"></bui-button>
    5.     <bui-button class="ex-btn" type="warning" value="右边弹出" @click="open4()"></bui-button>
    6. </div>
    7.   8. <bui-popup v-model="showPopup1" height="300">
    9.     <text class="h4">下方弹出内容</text>
    10. </bui-popup>
    11.   12. <bui-popup v-model="showPopup2" pos="top" backgroundColor="#ff9900" height="300">
    13.     <text class="h4">上面弹出内容</text>
    14. </bui-popup>
    15.   16. <bui-popup v-model="showPopup3" pos="left" backgroundColor="#ff4e24" width="300">
    17.     <text class="h4">左边弹出内容</text>
    18. </bui-popup>
    19.   20. <bui-popup v-model="showPopup4" pos="right" width="300">
    21.     <text class="h4">右边弹出内容</text>
    22. </bui-popup>


  1. data: function () {
    2.     return {
    3.         showPopup1: false,
    4.         showPopup2: false,
    5.         showPopup3: false,
    6.         showPopup4: false,
    7.     }
    8. },
    9. methods: {
    10.     open1() {
    11.         this.showPopup1 = true;
    12.     },
    13.     open2() {
    14.         this.showPopup2 = true;
    15.     },
    16.     open3() {
    17.         this.showPopup3 = true;
    18.     },
    19.     open4() {
    20.         this.showPopup4 = true;
    21.     }
    22. }

Example: bui-popup

属性