uniapp自定义弹框的方法

下面我将详细讲解uniapp自定义弹框的方法。

1. 弹框组件编写

在uniapp项目中，我们可以自定义一个弹框组件，以实现自定义弹框的效果。首先，在components目录下创建一个名为customDialog的组件文件夹，然后将该组件注册到全局：

// 在main.js中注册
import customDialog from '@/components/customDialog.vue'
Vue.component('customDialog', customDialog)

接下来，我们在customDialog.vue中编写弹框组件的代码，根据需求自定义组件的样式和功能，如下所示：

<template>
  <div class="custom-dialog" v-if="visible">
    <div class="custom-dialog-mask" @click="close"></div>
    <div class="custom-dialog-container" :style="{ width: width + 'px', height: height + 'px' }">
      <div class="custom-dialog-header">{{ title }}</div>
      <div class="custom-dialog-body">
        <slot></slot>
      </div>
      <div class="custom-dialog-footer">
        <button class="btn" @click="close">关闭</button>
        <button class="btn" @click="confirm">确定</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'customDialog',
  props: {
    visible: { // 控制弹框的显示隐藏
      type: Boolean,
      default: false
    },
    title: { // 弹框的标题
      type: String,
      default: ''
    },
    width: { // 弹框的宽度
      type: Number,
      default: 400
    },
    height: { // 弹框的高度
      type: Number,
      default: 200
    }
  },
  methods: {
    close() { // 关闭弹框
      this.$emit('update:visible', false)
    },
    confirm() { // 确认的操作
      this.$emit('confirm')
    }
  }
}
</script>

<style scoped>
.custom-dialog {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.custom-dialog-mask {
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.custom-dialog-container {
  position: relative;
  margin: auto;
  background-color: #fff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.custom-dialog-header {
  padding: 12px;
  font-size: 18px;
  background-color: #f4f4f4;
  border-bottom: 1px solid #ccc;
}

.custom-dialog-body {
  padding: 20px;
  font-size: 16px;
}

.custom-dialog-footer {
  display: flex;
  justify-content: flex-end;
  padding: 12px;
  border-top: 1px solid #ccc;
}

.btn {
  margin-left: 10px;
  padding: 6px 12px;
  font-size: 14px;
  border-radius: 4px;
  border: none;
  background-color: #58a;
  color: #fff;
  cursor: pointer;
}
</style>

2. 调用弹框组件

在组件中，你可以通过<customDialog />的方式，调用自定义弹框组件，并通过props控制弹框的显示、标题、宽高等参数。以下是示例代码：

<template>
  <div>
    <button class="btn" @click="showDialog">弹出自定义弹框</button>

    <customDialog
      :visible.sync="dialogVisible"
      title="我是自定义弹框"
      :width="420"
      :height="240"
      @confirm="handleConfirm"
    >
      <p>这里可以添加自定义的内容</p>
    </customDialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false
    }
  },
  methods: {
    showDialog() { // 显示弹框
      this.dialogVisible = true
    },
    handleConfirm() { // 处理弹框确认操作
      console.log('确认操作')
      this.dialogVisible = false
    }
  }
}
</script>

<style>
.btn {
  padding: 6px 12px;
  font-size: 14px;
  border-radius: 4px;
  border: none;
  background-color: #58a;
  color: #fff;
  cursor: pointer;
}
</style>

以上两个示例，分别演示了通过按钮点击事件来控制自定义弹框的显示、以及在弹框中添加自定义内容和处理确认操作的情况。

通过以上两个步骤，我们就可以完成uniapp自定义弹框的制作了。需要注意的是，弹框组件的样式和功能可以根据自己的需求来进行定制，这里只是提供了一个基础的示例。