gasInjection-project/src/views/vent/monitorManager/airDoor/components/syncModal.vue

<template>
  <div class="sync-modal">
    <a-modal v-model:visible="Visible" width="450px" :title="Title" centered destroyOnClose @ok="handleOk"
      @cancel="handleCancel">
      <p>您正在执行 “开启/关闭” 全部风门的操作，请输入密码执行。</p>
      <a-form :model="formState" name="basic" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" autocomplete="off">
        <a-form-item label="输入密码" name="passWord" :rules="[{ required: true, message: '请输入密码!' }]">
          <a-input-password style="width:220px" v-model:value="formState.passWord" />
        </a-form-item>

      </a-form>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watchEffect } from 'vue'

let props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  Title: {
    type: String,
    default: '操作确认'
  }
})

let Visible = ref(false)
let formState = reactive({
  passWord: ''
})
let $emit = defineEmits(['handleOk','handleCancel'])
//确定
function handleOk() {
  $emit('handleOk', { pass: formState.passWord, visib: false })
}
//取消
function handleCancel(){
  formState.passWord=''
  $emit('handleCancel',false)
}


watchEffect(() => {
  Visible.value = props.visible
})
</script>

<style lang="less" scoped>
p {
  margin: 20px 40px;
}
</style>