【实用模板】Vue代码文件常用创建或编辑抽屉

<template>
  <div
    :class="$options.name"
    v-loading="loading"
    :element-loading-text="elementLoadingText"
    v-if="showDrawer"
  >
    <el-drawer
      :custom-class="`创建或编辑抽屉-el-drawer`"
      :append-to-body="true"
      :close-on-press-escape="true"
      :destroy-on-close="true"
      :show-close="true"
      :size="`400px`"
      :title="`${(form || {}).ID ? `修改` : `新增`}XXX`"
      :wrapperClosable="false"
      :visible.sync="showDrawer"
    >
      <div>
        <!--抽屉内容-->
 
        <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 class="form-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="save" v-if="!disabledForm">保存</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
export default {
  name: "创建或编辑抽屉",
  components: {},
  data() {
    return {
      loading: false, //加载状态
      elementLoadingText: ``, //加载提示文字
 
      showDrawer: false, //是否显示
      form: {}, //表单信息
      disabledForm: false,
    };
  },
  props: [
    "value", //是否显示
    "disabled", //是否禁用
    "data",
    "readonly",
  ],
  computed: {},
  watch: {
    loading(newValue, oldValue) {
      newValue || (this.elementLoadingText = ``);
    },
    value: {
      handler(d) {
        this.showDrawer = d;
      },
      deep: true,
      immediate: true,
    },
    showDrawer(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: {
          s: (d) => {
            this.$emit(`save`, this.form);
            this.cancel(this.form);
          },
        },
      });
    },
    cancel(d) {
      this.showDrawer = false;
      this.$emit(`hide`, d);
    },
  },
};
</script>
<style lang="scss" scoped>
.创建或编辑抽屉 {
}
</style>
<style lang="scss">
.创建或编辑抽屉-el-drawer {
}
</style>