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

简介: 【实用模板】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>


相关文章
|
1天前
|
JavaScript
error Component name “Login“ should always be multi-word vue/multi-word-component-names【已解决】
error Component name “Login“ should always be multi-word vue/multi-word-component-names【已解决】
6 1
|
2天前
|
JavaScript 前端开发 Java
【vue实战项目】通用管理系统:作业列表
【vue实战项目】通用管理系统:作业列表
15 0
|
2天前
|
JavaScript API
【vue实战项目】通用管理系统:信息列表,信息的编辑和删除
【vue实战项目】通用管理系统:信息列表,信息的编辑和删除
12 2
|
JavaScript 数据安全/隐私保护
work02_vue页面打印水印
work02_vue页面打印水印
284 0
work02_vue页面打印水印
|
9天前
|
JavaScript 前端开发 开发者
vue3+ts配置跨域报错问题解决:> newpro2@0.1.0 serve > vue-cli-service serve ERROR Invalid options in vue.
【6月更文挑战第3天】在 Vue CLI 项目中遇到 &quot;ERROR Invalid options in vue.config.js: ‘server’ is not allowed&quot; 错误是因为尝试在 `vue.config.js` 中使用不被支持的 `server` 选项。正确配置开发服务器(如代理)应使用 `devServer` 对象,例如设置代理到 `http://xxx.com/`: ```javascript module.exports = { devServer: {
24 1
|
2天前
|
JavaScript API
【vue实战项目】通用管理系统:信息列表,信息录入
【vue实战项目】通用管理系统:信息列表,信息录入
9 3
|
2天前
|
JavaScript 前端开发 API
【vue实战项目】通用管理系统:学生列表
【vue实战项目】通用管理系统:学生列表
12 2
|
2天前
|
缓存 JavaScript
【vue实战项目】通用管理系统:首页
【vue实战项目】通用管理系统:首页
9 2
|
2天前
|
JavaScript 前端开发 数据安全/隐私保护
【vue实战项目】通用管理系统:登录页
【vue实战项目】通用管理系统:登录页
10 2
|
2天前
|
JavaScript 网络架构
Vue中三个点(...)的意思
**孤立元素**:通过扩展运算符(`...`)可以将数组元素打印出来,如 `console.log(...iArray)`。 - **添加元素**:可以使用扩展运算符结合数组合并来添加元素,例如 `[&#39;0&#39;, ...iArray, &#39;4&#39;]` 或者使用 `push` 方法。 - **删除元素**:通过解构赋值取出数组第一个元素,如 `const [first, ...last] = arr`。 - **数组合并**:可以使用扩展运算符将多个数组合并,如 `[...arr1, ...arr2]`。
5 0