uniapp自定义消息提示框

在uniapp中，可以通过自定义组件来实现自定义消息提示框。以下是一个示例：

1. 创建一个名为 `MessageDialog` 的自定义组件，在components文件夹下创建一个名为 `MessageDialog.vue` 的文件。代码如下：

<template>
  <div class="message-dialog" v-show="show">
    <div class="message-content">
      <p>{{ message }}</p>
      <button @click="hide">关闭</button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      show: true
    }
  },
  methods: {
    hide() {
      this.show = false;
    }
  }
}
</script>

<style scoped>
.message-dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.message-content {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
}

.message-content p {
  margin-bottom: 10px;
}

.message-content button {
  background-color: #e5e5e5;
  border: none;
  padding: 8px 16px;
}
</style>

2. 在需要使用消息提示框的地方，引入 `MessageDialog` 组件，并在需要的时候使用该组件进行消息提示。例如，在一个页面的 `script` 部分：

import MessageDialog from '@/components/MessageDialog.vue';

export default {
  components: {
    MessageDialog
  },
  data() {
    return {
      showMessage: false,
      message: ''
    }
  },
  methods: {
    showCustomMessage() {
      this.message = '这是一个自定义消息提示框';
      this.showMessage = true;
    }
  }
}

3. 在模板中使用 `MessageDialog` 组件，例如：

<template>
  <div>
    <button @click="showCustomMessage">显示消息提示框</button>
    <MessageDialog :message="message" v-show="showMessage" />
  </div>
</template>

通过点击 "显示消息提示框" 按钮，就可以显示自定义的消息提示框了。你可以根据需要修改消息提示框的样式和功能。