uni-app 插件需求 活动弹窗

在处理uni-app中的活动弹窗插件需求时，我们可以通过自定义组件的方式来实现一个灵活且可复用的活动弹窗。下面是一个简单的示例代码，展示了如何创建一个活动弹窗组件并在页面中调用它。

1. 创建活动弹窗组件（ActivityDialog.vue）

<template>
  <view v-if="visible" class="dialog-overlay">
    <view class="dialog">
      <view class="dialog-header">
        <text>{{ title }}</text>
        <view class="close-btn" @click="closeDialog">X</view>
      </view>
      <view class="dialog-body">
        <slot></slot> <!-- 插槽用于自定义内容 -->
      </view>
      <view class="dialog-footer">
        <button @click="confirmAction">确定</button>
        <button @click="closeDialog">取消</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '活动弹窗'
    }
  },
  methods: {
    closeDialog() {
      this.$emit('update:visible', false);
    },
    confirmAction() {
      this.$emit('confirm');
      this.closeDialog();
    }
  }
}
</script>

<style scoped>
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.dialog {
  background: white;
  padding: 20px;
  border-radius: 10px;
  width: 80%;
  max-width: 500px;
}
/* 其他样式... */
</style>

2. 在页面中使用活动弹窗组件（Index.vue）

<template>
  <view>
    <button @click="showDialog">显示活动弹窗</button>
    <ActivityDialog :visible.sync="dialogVisible" @confirm="handleConfirm">
      <text>这是弹窗的活动内容</text>
    </ActivityDialog>
  </view>
</template>

<script>
import ActivityDialog from '@/components/ActivityDialog.vue';

export default {
  components: {
    ActivityDialog
  },
  data() {
    return {
      dialogVisible: false
    };
  },
  methods: {
    showDialog() {
      this.dialogVisible = true;
    },
    handleConfirm() {
      console.log('用户点击确定');
    }
  }
}
</script>

以上代码展示了一个基本的活动弹窗组件的实现和在页面中的使用方法。通过visible.sync修饰符，我们可以轻松地在父组件中控制弹窗的显示与隐藏，并通过插槽机制自定义弹窗内容。此外，通过事件机制处理用户交互，如确定和取消操作。