mpvue開發微信小程式（3）—— van-popup

Popup 彈出層

1、接入

"usingComponents": {
  "van-popup": "/static/vant-weapp/popup/index"
}
           

2、彈出層

<van-popup
  :show="show"
  position="right"
  custom-style="width: 80%; height: 100%;"
  @close="onClose"
/>
           

注：從左右彈出，需要設定“height: 100%”

3、彈出邏輯 

<script>
export default {
  data () {
    return {
      show: false
    }
  },
  methods: {
    showPopup () {
      this.show = true
    },
    onClose () {
      this.show = false
    }
  }
}
</script>
           

4、點選按鈕觸發

<van-button type="primary" @click="showPopup">主要按鈕</van-button>
           

5、彈出層上顯示其他元素

<van-popup
  :show="show"
  position="right"
  custom-style="width: 80%; height: 100%;"
  @close="onClose"
>
  <van-button type="info">資訊按鈕</van-button>
  <van-button type="warning">警告按鈕</van-button>
  <van-button type="danger">危險按鈕</van-button>
  <van-button icon="star-o" type="primary" />
  <van-button icon="star-o" type="primary">按鈕</van-button>
  <van-button icon="https://img.yzcdn.cn/vant/logo.png" type="info">按鈕</van-button>
</van-popup>
           

參考資料：

https://youzan.github.io/vant-weapp/#/popup