使用方式

在 script 中引用组件

  1. import uniPopup from '@/components/uni-popup/uni-popup.vue'
  2. export default {
  3.     components: {
  4.         uniPopup,
  5.     },
  6.     methods:{
  7.         open(){
  8.            this.$refs.popup.open()
  9.         }
  10.      }
  11. }

在 template 中使用组件

  1. <button @click="open">打开弹窗</button>
  3. <uni-popup ref="popup" type="bottom">
  4.             <view class="qui-card panel" style="border-radius: 20rpx 20rpx 0 0;">
  5.                 <view class="card-hd">
  6.                     <view class="tc block">
  7.                         <text class="fw600">分享到</text>
  8.                     </view>
  9.                 </view>
  10.                 <view class="card-bd">
  11.                     <view class="flex a-center">
  12.                         <view class="flex-item tc">
  13.                             <image class="wh100" src="/static/images/share_pyq.png" mode=""></image>
  14.                             <view class="mt10">朋友圈</view>
  15.                         </view>
  16.                         <view class="flex-item tc">
  17.                             <image class="wh100" src="/static/images/share_wx.png" mode=""></image>
  18.                             <view class="mt10">微信</view>
  19.                         </view>
  20.                         <view class="flex-item tc">
  21.                             <image class="wh100" src="/static/images/share_link.png" mode=""></image>
  22.                             <view class="mt10">复制链接</view>
  23.                         </view>
  24.                     </view>
  25.                 </view>
  26.                 <view @click="closePopup('popup')" class="ptb30 tc bor-1px-t">取消</view>
  27.             </view>
  28.         </uni-popup>

popup.png

使用快捷的 打开和关闭 方法 ，就不用在methods自定义open方法了

@click=”openPopup(‘popup’)” // 打开
@click=”closePopup(‘popup’)” // 关闭

更多用法：
https://ext.dcloud.net.cn/plugin?id=329