yfs/components/detail-popup

DetailPopup 弹窗组件

这是一个简单的弹窗组件，支持自定义内容，提供开启和关闭方法。

使用方法

1. 导入组件

<script>
import DetailPopup from '@/components/detail-popup';

export default {
  components: {
    DetailPopup
  }
}
</script>

2. 在模板中使用

<template>
  <view>
    <!-- 按钮触发弹窗 -->
    <button @click="openPopup">打开弹窗</button>
    
    <!-- 弹窗组件 -->
    <detail-popup ref="popup">
      <!-- 自定义弹窗内容 -->
      <view class="custom-content">
        <view class="title">这是弹窗标题</view>
        <view class="content">这是弹窗内容</view>
        <button @click="closePopup">确定</button>
      </view>
    </detail-popup>
  </view>
</template>

<script>
export default {
  methods: {
    // 打开弹窗
    openPopup() {
      this.$refs.popup.open();
    },
    
    // 关闭弹窗
    closePopup() {
      this.$refs.popup.close();
    }
  }
}
</script>

<style>
.custom-content {
  padding: 20rpx;
}
.title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  text-align: center;
}
.content {
  font-size: 28rpx;
  margin-bottom: 30rpx;
}
</style>

3. 事件监听

组件会在打开和关闭时触发相应的事件：

<detail-popup ref="popup" @open="onPopupOpen" @close="onPopupClose">
  <!-- 内容 -->
</detail-popup>

<script>
export default {
  methods: {
    onPopupOpen() {
      console.log('弹窗已打开');
    },
    onPopupClose() {
      console.log('弹窗已关闭');
    }
  }
}
</script>