uniapp webview弹窗如何做

<template>  <view class="container">    <web-view :src="url" :style="webViewStyle" @message="onMessage"></web-view>  </view></template><script>export default {  data() {    return {      webViewStyle: {        height: `${uni.upx2px(500)}px`      },      url: 'https://www.example.com'    }  },  methods: {    onMessage(e) {      //  接收来自webview组件发来的数据      console.log(e.detail.data)    }  }}</script>

<template>  <view>    <!-- 遮罩 -->    <view class="mask" v-show="visible" @click="onClose"></view>    <!-- 底部弹窗 -->    <view class="popup" :class="{ show: visible }">      <webview :src="url" :style="webViewStyle"></webview>    </view>  </view></template><script>export default {  data() {    return {      visible: false, // 是否展示底部弹窗      webViewStyle: {        height: `${uni.upx2px(500)}px`      },      url: 'https://www.example.com'    }  },  methods: {    // 打开底部弹窗    open() {      this.visible = true;    },    // 关闭底部弹窗    onClose() {      this.visible = false;    }  }}</script><style>.popup {  position: fixed;  bottom: 0;  width: 100%;  height: auto;  background-color: #fff;  z-index: 1000;  transform: translateY(100%);  transition: transform .3s;}.popup.show {  transform: translateY(0);}.mask {  position: fixed;  top: 0;  left: 0;  width: 100%;  height: 100%;  opacity: .6;  background-color: #000;  z-index: 999;  transition: opacity .3s;}.mask.show {  opacity: 1;}</style>

<template>  <view>    <view class="button" @click="showPopup">显示弹窗</view>    <popup ref="popup"></popup>  </view></template><script>    import Popup from './components/popup'    export default {        components: {            Popup        },        methods: {            // 显示弹窗            showPopup() {                this.$refs.popup.open()            }        }    }</script>