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