弹窗

// 导入
import ComDialog from '@/components/ComDialog'
import useDialogData from '@/hooks/useDialogData.js'

// table是绑定给ProTable的ref
const table = ref()
const refreshTable = () => {
  table.value.refresh()
}
// 如果需要提交成功，需要刷新页面，给useDialogData传递第二个参数
const { dialogData, visible, onSubmit, onCancel, form } = useDialogData(api, refreshTable)

//定义api
const api = () => {
  return new Promise((resolve, reject) => {
    //点击提交要干的事情（发请求）
    setTimeout(() => {
      resolve({
        code: 200,
        msg: '200，请求成功'
      })
    })
  })
}

html

<!-- 模板中使用 -->
  <ComDialog v-model="visible" width="50%" title="标题" top="5vh">
    <!-- 这里放自定义弹窗内容 form用来传递给弹窗里面的自定义内容-->
    <add-edit :dialogData="dialogData" :form="form"></add-edit>
    <template #footer>
      <el-button @click="dialog.onSubmit">提交</el-button>
      <el-button @click="dialog.onCancel">取消</el-button>
    </template>
  </ComDialog>

html

<!--add-edit.vue -->
  <!-- 只关注展示层 检验,逻辑规则, -->
<template>
  <div class="add-edit">
    <el-form label-position="top" :model="dialogData" ref="form" :rules="rules">
      <div class="title">输入框少于八个，上下结构，可以适配英文版,文本域调整到最后</div>
      <el-form-item label="Name" prop="name">
        <el-input v-model="dialogData.name" />
      </el-form-item>
      <el-form-item label="Activity zone">
        <el-select v-model="dialogData.value" filterable remote :remote-method="remoteMethod" placeholder="Select">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="Activity form">
        <el-input v-model="dialogData.type" type="textarea" :rows="2" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive, nextTick, inject } from 'vue'


const props = defineProps({
  dialogData: {
    type: Object,
    default: () => ({})
  },
  form: {
    type: Object,
    default: () => ({})
  }
})
// 接收传递过来的form传给el-form做表单校验
const form = props.form.el
const rules = {
  name: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }
  ]
}
const options = ref([])
const remoteMethod = () => {
  options.value = [
    {
      value: 'Option1',
      label: 'Option1'
    }
  ]
}
</script>

<style lang="scss" scoped>
.add-edit {
  padding: 0 30px;
  .el-select {
    width: 100%;
  }
}
</style>

TIP

width="50%" title="标题" top="5vh" 都是可配置项，支持透传，可传递饿了么文档其他支持的属性。

dialog 属性

属性名	说明	类型
dialogData	给后台的数据	object
visible	v-model，解构的话不需要.value	boolean
onSubmit	提交	Function
onCancel	取消	Function
form	给弹窗el-form 做校验	object

弹窗 ​

弹窗