ModalInput 模态输入框

带有模态框的输入框，对 el-input 及 s-modal 进行了二次封装，用于设置复杂类型数据。

基本用法

点击查看代码

<template>
  <s-modal-input v-model="inputValue" :input-value="inputValue.name" title="模态输入框" placeholder="请设置内容"
                 @open="handleModalOpen" @ok="handleModalOk">
    <s-form :model="modalForm">
      <s-form-item label="姓名" prop="name">
        <el-input v-model="modalForm.name" placeholder="请输入姓名" />
      </s-form-item>
      <s-form-item label="性别" prop="sex">
        <el-select v-model="modalForm.sex" placeholder="请选择性别">
          <el-option label="男" value="男" />
          <el-option label="女" value="女" />
        </el-select>
      </s-form-item>
    </s-form>
  </s-modal-input>
</template>

<script setup lang="ts">
  import { cloneDeep } from "lodash";
  import { ref } from "vue";

  const inputValue = ref<Record<string, any>>({});
  const modalForm = ref<Record<string, any>>({});

  const handleModalOpen = () => {
    modalForm.value = cloneDeep(inputValue.value);
  };

  const handleModalOk = (done: Function) => {
    inputValue.value = cloneDeep(modalForm.value);
    done && done();
  };
</script>

文本域模式

点击查看代码

<template>
  <s-modal-input v-model="inputValue" :input-value="inputValue.name" title="模态输入框" placeholder="请设置内容"
                 textarea @open="handleModalOpen" @ok="handleModalOk">
    <s-form :model="modalForm">
      <s-form-item label="姓名" prop="name">
        <el-input v-model="modalForm.name" placeholder="请输入姓名" />
      </s-form-item>
      <s-form-item label="性别" prop="sex">
        <el-select v-model="modalForm.sex" placeholder="请选择性别">
          <el-option label="男" value="男" />
          <el-option label="女" value="女" />
        </el-select>
      </s-form-item>
    </s-form>
  </s-modal-input>
</template>

<script setup lang="ts">
  import { cloneDeep } from "lodash";
  import { ref } from "vue";

  const inputValue = ref<Record<string, any>>({});
  const modalForm = ref<Record<string, any>>({});

  const handleModalOpen = () => {
    modalForm.value = cloneDeep(inputValue.value);
  };

  const handleModalOk = (done: Function) => {
    inputValue.value = cloneDeep(modalForm.value);
    done && done();
  };
</script>

自定义模态框

点击查看代码

<template>
  <s-modal-input v-model="inputValue" :input-value="inputValue.name" title="模态输入框" placeholder="请设置内容"
                 :extModal="extModalProps" @open="handleModalOpen" @ok="handleModalOk">
    <s-form ref="modalFormRef" :model="modalForm">
      <s-form-item label="姓名" prop="name" :rules="[ { required: true, message: '请输入姓名', trigger: 'blur' } ]">
        <el-input v-model="modalForm.name" placeholder="请输入姓名" />
      </s-form-item>
      <s-form-item label="性别" prop="sex">
        <el-select v-model="modalForm.sex" placeholder="请选择性别">
          <el-option label="男" value="男" />
          <el-option label="女" value="女" />
        </el-select>
      </s-form-item>
    </s-form>
  </s-modal-input>
</template>

<script setup lang="ts">
  import { cloneDeep } from "lodash";
  import { ref } from "vue";

  const modalFormRef = ref();
  const inputValue = ref<Record<string, any>>({});
  const modalForm = ref<Record<string, any>>({});
  const extModalProps = ref<Record<string, any>>({
    width: 600,
    loading: false,
    destroyOnClose: true
  });

  const handleModalOpen = () => {
    Object.assign(extModalProps.value, {
      loading: true
    });
    setTimeout(() => {
      modalForm.value = cloneDeep(inputValue.value);
      Object.assign(extModalProps.value, {
        loading: false
      });
    }, 500);
  };

  const handleModalOk = (done: Function) => {
    modalFormRef.value?.validate((valid: boolean) => {
      if (!valid) return;
      Object.assign(extModalProps.value, {
        loading: true
      });
      setTimeout(() => {
        inputValue.value = cloneDeep(modalForm.value);
        done && done();
        Object.assign(extModalProps.value, {
          loading: false
        });
      }, 500);
    });
  };
</script>

Props

Slots

Emits