【实用模板】Vue代码文件常用弹窗页面组件

<template>
  <div :class="$options.name" v-if="dialogVisible">
    <el-dialog
      :custom-class="`弹窗页面组件-el-dialog`"
      :append-to-body="true"
      :close-on-click-modal="true"
      :close-on-press-escape="true"
      :destroy-on-close="true"
      :fullscreen="false"
      :show-close="true"
      :title="`弹窗标题`"
      :width="`600px`"
      :visible.sync="dialogVisible"
      style="animation: none"
    >
      <div style="margin: -20px 0">
        <!-- 这里添加弹窗内容 -->
 
        <div class="form-body" @keyup.ctrl.enter="save">
          <el-form
            @submit.native.prevent
            :disabled="disabledForm"
            label-position="right"
            size=""
          >
            <el-form-item :label="`名称`" label-width="80px" required>
              <el-input
                v-model.trim="form.MC"
                ref="MC"
                @focus="$refs.MC.select()"
                :placeholder="`输入名称`"
                :maxlength="20"
                clearable
                show-word-limit
              />
            </el-form-item>
            <el-form-item :label="`备注`" label-width="80px">
              <el-input
                type="textarea"
                v-model="form.BZ"
                ref="BZ"
                @focus="$refs.BZ.select()"
                :placeholder="`请输入内容`"
                :maxlength="200"
                :rows="3"
                show-word-limit
              />
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div slot="footer">
        <el-button type="info" @click="cancel" plain>取消</el-button>
        <el-button type="primary" @click="save" v-if="!disabledForm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "弹窗页面组件",
  components: {},
  data() {
    return {
      loading: false, //加载状态
      elementLoadingText: ``, //加载提示文字
 
      dialogVisible: false,
      form: {}, //表单信息
      disabledForm: false,
    };
  },
  props: [
    "value", //是否显示
    "disabled", //是否禁用
    "data",
    "readonly",
  ],
  computed: {},
  watch: {
    value: {
      handler(d) {
        this.dialogVisible = d;
      },
      deep: true,
      immediate: true,
    },
    dialogVisible(d) {
      this.$emit("input", d);
    }, //是否显示（双向绑定）
    readonly: {
      handler(d) {
        this.disabledForm = d;
      },
      deep: true,
      immediate: true,
    },
    data: {
      handler(newValue, oldValue) {
        //console.log('深度监听：', newValue, oldValue);
        if (newValue && Object.keys(newValue).length) {
          this.form = JSON.parse(JSON.stringify(newValue));
        } else {
          this.form = {
            // 字段名: 默认值, //默认字段、属性值
          };
        }
      },
      deep: true, //深度监听
      immediate: true, //立即执行
    },
  },
  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    valid(d) {
      if (!this.form.MC)
        return this.$message.error(this.$refs.MC.$el.querySelector("input").placeholder);
    },
    save() {
      if (this.valid()) return;
      if (this.form.ID) {
        // 修改
      } else {
        // 新增
      }
      let data = {
        ...this.form,
        sgLog: `前端请求来源：${this.$options.name}保存数据接口`,
      };
      this.$d.保存数据接口({
        data,
        r: {
          l: { show: () => (this.loading = true), close: () => (this.loading = false) },
          s: (d) => {
            this.initList({ keyword: "" });
            this.$emit(`save`, this.form);
            this.cancel(this.form);
          },
        },
      });
    },
    cancel(d) {
      this.dialogVisible = false;
      this.$emit(`hide`, d);
    },
  },
};
</script>
<style lang="scss" scoped>
.弹窗页面组件 {
}
</style>
<style lang="scss">
.弹窗页面组件-el-dialog {
}
</style>