uni-app 求一个对话框小插件

https://ext.dcloud.net.cn/plugin?id=801

当然，为了满足你的需求，下面是一个简单的uni-app对话框小插件的实现示例。这个示例包括一个对话框组件和一个使用该组件的页面。

1. 创建对话框组件

首先，在你的uni-app项目的components目录下创建一个名为MyDialog.vue的文件，内容如下：

<template>
  <view v-if="visible" class="dialog-overlay">
    <view class="dialog-content">
      <view class="dialog-header">
        <text>{{ title }}</text>
        <button @click="closeDialog">X</button>
      </view>
      <view class="dialog-body">
        <slot></slot>
      </view>
      <view class="dialog-footer">
        <button @click="confirm">确认</button>
        <button @click="cancel">取消</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);
    },
    confirm() {
      this.$emit('confirm');
      this.closeDialog();
    },
    cancel() {
      this.$emit('cancel');
      this.closeDialog();
    }
  }
}
</script>

<style>
.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-content {
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  width: 80%;
  max-width: 400px;
}
/* 其他样式可以根据需要调整 */
</style>

2. 使用对话框组件

接下来，在你的某个页面中（例如pages/index/index.vue），引入并使用这个对话框组件：

<template>
  <view>
    <button @click="showDialog">显示对话框</button>
    <MyDialog :visible.sync="dialogVisible" @confirm="handleConfirm" @cancel="handleCancel">
      <text>这是一个对话框内容</text>
    </MyDialog>
  </view>
</template>

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

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

这样，你就拥有了一个简单的对话框小插件，可以在页面中使用它来显示提示信息或进行用户交互。你可以根据需要进一步自定义和扩展这个组件。