首页 > 其他分享 >el-dialog-form组件封装，真的好用，可以让你开发效率提高

el-dialog-form组件封装，真的好用，可以让你开发效率提高

时间：2023-06-09 17:55:32浏览次数：37  
标签：el form label elName dialog type

1、新建DialogForm.vue文件

<template>
  <div class="base-dialog">
    <el-dialog
      :type="type"
      :custom-class="customClass"
      :close-on-click-modal="closeOnClickModal"
      :visible="visible"
      :title="title"
      :width="width"
      :show-close="true"
      :before-close="beforeClose"
    >
      <!-- <el-card> -->
        <el-form
          ref="d-form"
          :model="form"
          :label-position="labelPosition"
          label-width="120px"
        >
          <el-row :gutter="20">
            <el-col
              v-for="(item, index) in items"
              v-show="item.hidden ? !item.hidden(form) : true"
              :key="index"
              :span="item.span || 20"
            >
              <el-form-item
                :label="item.label"
                :prop="item.prop"
                :rules="item.hidden && item.hidden(form) ? null : item.rules"
              >
                <el-tooltip
                  :disabled="!item.tip"
                  effect="dark"
                  :content="item.tip"
                  placement="top"
                >
                  <slot
                    v-if="item.elName === 'slot'"
                    :name="item.prop"
                    :form="form"
                  ></slot>
                  <el-component
                    v-else
                    v-model="form[item.prop]"
                    :el-name="item.elName"
                    :on="item.on || {}"
                    :attrs="item.attrs || {}"
                    :options="item.options || []"
                    :disabled="item.disabled ? item.disabled(form) : false"
                  ></el-component>
                </el-tooltip>
              </el-form-item>
            </el-col>
            <slot></slot>
          </el-row>
        </el-form>
      <!-- </el-card> -->

      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="onCancel">取 消</el-button>
        <el-button type="primary" size="small" @click="onSubmit"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 验证器文档地址:https://github.com/yiminghe/async-validator
import elComponent from "@/lib/elComponent.js";
export default {
  name: "ElDialogForm",
  components: {
    elComponent
  },
  props: {
    closeOnClickModal: { type: Boolean, default: false }, // 是否可以点击关闭
    type: String, // 对话框类型：1.基础表单[base-dialog-form] 2.表格[base-dialog-table] 3.全屏 [base-dialog-fullscreen]
    // 是否显示dialog
    visible: {
      type: Boolean,
      default: false
    },
    // 标题
    title: {
      type: String,
      default: ""
    },
    // 宽度
    width: {
      type: String,
      default: ""
    },
    // 表单项
    items: {
      type: Array,
      default: () => []
    },
    // 表单值
    form: {
      type: Object,
      default: () => {
        return {};
      }
    },
    labelPosition: {
      type: String,
      default: "right"
    }
  },
  computed: {
    customClass() {
      let className = "";
      switch (this.type) {
        case "form":
          className = "base-dialog-form";
          break;
        case "table":
          className = "base-dialog-table";
          break;
        case "fullscreen":
          className = "base-dialog-fullscreen";
          break;
      }
      return className;
    }
  },
  created() {
    this.type === "fullscreen" && (this.fullscreen = true);
  },
  methods: {
    onSubmit() {
      this.$refs["d-form"].validate(valid => {
        if (valid) {
          this.$emit("submit", this.form);
        }
      });
    },
    onCancel() {
      this.$emit("update:visible", false);
      this.$emit("cancel");
      this.$refs['d-form'].resetFields();
    },
    close() {
      this.$emit("update:visible", false);
      this.$refs['d-form'].resetFields();
    },
    beforeClose() {
      this.$emit("update:visible", false);
      this.$refs['d-form'].resetFields();
    }
  }
};
</script>

<style lang="scss">
.el-form-item {
  margin-bottom: 15px !important;
}
.base-dialog {
  text-align: left;
  .el-dialog__wrapper {
    // overflow: hidden;
    .el-dialog {
      display: flex;
      flex-direction: column;
      .el-dialog__header {
        height: 40px;
        line-height: 40px;
        padding: 0px 20px;
        background: #eff3fa;
        color: #fff;
        border-bottom: 1px solid #dcdfe6;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        .el-dialog__title {
          font-size: 16px;
          // font-weight: bold;
        }
        .el-dialog__headerbtn {
          top: 12px;
        }
      }
      .el-dialog__body {
        flex: 1;
        overflow: auto;
        padding: 20px !important;
      }
      .el-dialog__footer {
        text-align: center;
        border-top: 1px solid #eee;
        padding: 8px 20px;
        background: #fefefe;
      }
    }
    .base-dialog-form {
      height: auto;
      margin-top: 15vh !important;
      .el-dialog__body {
        padding: 20px 20px 0 20px !important;
      }
      .el-dialog__footer {
        border: none;
        padding: 10px 20px 20px;
        background: none;
      }
      .custom-table {
        // 取消表格下边线
        tbody tr:last-child td {
          border-bottom: none !important;
        }
      }
    }
    .base-dialog-table {
      height: 90vh;
      margin-top: 5vh !important;
      .el-dialog__body {
      }
    }
    .base-dialog-fullscreen {
      height: 100vh;
      width: 100vw;
      .el-dialog__body {
        padding: 10px;
      }
    }
  }
}
.el-date-editor.el-input{
  width: 100% !important;
}
.el-select {
  width: 100% !important;
}
.el-range-editor.el-input__inner{
  width: 100% !important;
}
.el-cascader{
  width: 100% !important;
}
</style>

2、新建lib文件夹，文件夹下面创建三个文件，分别是defaultAttrs.js，elComponent.js，slots.js，代码分别如下

defaultAttrs.js

const map = {
  'el-time-picker': {
    'size': 'small',
    'placeholder': '请选择时间',
    'value-format': 'HH:mm:ss',
  },
  'el-date-picker': {
    'size': 'small',
    'placeholder': '请选择日期',
    'value-format': 'yyyy-MM-dd',
    'type': 'date',
    'start-placeholder': '开始日期',
    'end-placeholder': '结束日期',
  },
};
export function getDefaultAttrs(elName) {
  return (
    map[elName] || {
      size: 'small',
    }
  );
}

 

elComponent.js

// 获取默认attrs
import { getDefaultAttrs } from './defaultAttrs.js';
// 获取子组件
import { getChild } from './slots.js';
// 导出新组件
export default {
  props: ['value', 'elName', 'options', 'disabled'],
  name: 'el-component',
  render(h) {
    const self = this;
    const slots = Object.keys(this.$slots)
      .reduce((arr, key) => arr.concat(this.$slots[key]), [])
      .map(vnode => {
        vnode.context = this._self;
        return vnode;
      });
    // 获取子组件,如果有的话
    const child = getChild(this.elName, h, this.options);
    // 获取事件监听
    const events = this.$attrs.on || {};
    // 渲染函数中没有与 v-model 的直接对应——必须自己实现相应的逻辑
    events['input'] = function(event) {
      self.$emit('input', event);
    };
    // 参数传进来的attrs
    const attrsinset = this.$attrs.attrs || {};
    // 默认的attrs
    const defaultAttrs = getDefaultAttrs(this.elName);
    // 根据type渲染组件
    return h(
      `${this.elName}`,
      {
        on: events,
        props: {
          ...this.$props,
          ...attrsinset,
        },
        // 透传 scopedSlots
        scopedSlots: this.$scopedSlots,
        attrs: {
          ...attrsinset,
          ...defaultAttrs,
          disabled: this.disabled,
        },
      },
      [...slots, ...child],
    );
  },
};

 

slots.js

const map = {
    'el-radio-group': 'el-radio',
    'el-checkbox-group': 'el-checkbox',
    'el-select': 'el-option',
};
export function getChild(elName, h, options = []) {
    const arr = [];
    if (map[elName] !== undefined) {
        for (const i of options) {
            const label = elName === 'el-select' ? i.label : i.value;
            const value = elName === 'el-select' ? i.value : i.label;
            arr.push(
                h(
                    `${map[elName]}`,
                    {
                        props: {
                            label,
                            value,
                        },
                    },
                    [h('span', i.label)]
                )
            );
        }
    }
    return arr;
}

3、如何在页面调用，代码如下

//在main.js中全局注册组件
import DialogFrom from '@/components/Table/DialogForm.vue'
Vue.component('DialogFrom', DialogFrom)
<!-- 按钮触发弹窗 -->
<el-button type="primary" size="small" @click="dialog = true">打开表单</el-button>
<!-- 表单 -->
    <DialogFrom
      ref="DialogFrom"
      type="form"
      :visible.sync="dialog"
      title="表单标题"
      width="50%"
      :items="items"
      :form="form"
      @submit="onSubmit"
    >
      <template slot="image">
        <div
          class="upLoadPicBox"
          title="750*750px"
          @click="modalPicTap('1', 'image')"
        >
          <div v-if="form.image" class="pictrue">
            <img :src="form.image" />
          </div>
          <div v-else class="upLoad">
            <i class="el-icon-picture cameraIconfont" />
          </div>
        </div>
      </template>
    </DialogFrom>
//JS的data部分
form: {
        input: "",
        inputNumber: 0,
        switch: false,
        timePicker: "",
        datePicker: "",
        radioGroup: 1,
        checkboxGroup: [],
        select: [],
        checkbox: 1,
        datePickerTwo: "",
        image: "",
        cascader: []
      },
      dialog: false,
      items: [
        {
          elName: "el-input",
          span: 12,
          label: "普通输入",
          prop: "input",
          rules: [
            {
              required: true,
              message: "请输入名称",
              trigger: "blur"
            }
          ],
          attrs: {
            placeholder: "请输入名称"
          },
          hidden: function() {
            return false;
          },
          disabled: e => {
            if (this.form.checkbox == 1) {
              return true;
            } else {
              return false;
            }
          },
          on: {
            blur: e => {
              console.log(e);
            }
          }
        },
        {
          elName: "el-date-picker",
          span: 12,
          label: "日期选择",
          prop: "datePicker",
          attrs: {
            "value-format": "yyyy-MM-dd"
          }
        },
        {
          elName: "el-date-picker",
          span: 12,
          label: "日期范围选择",
          prop: "datePickerTwo",
          attrs: {
            type: "daterange"
          }
        },
        {
          elName: "el-time-picker",
          span: 12,
          label: "时间选择",
          prop: "timePicker",
          on: {}
        },
        {
          elName: "el-switch",
          span: 12,
          label: "开关",
          prop: "switch",
          on: {}
        },
        {
          elName: "slot",
          span: 12,
          label: "上传图片",
          prop: "image"
        },
        {
          elName: "el-radio-group",
          span: 12,
          label: "单选框组",
          prop: "radioGroup",
          tip: "",
          options: [
            {
              label: "苹果",
              value: 1
            },
            {
              label: "西瓜",
              value: 2
            }
          ],
          on: {
            change: e => {}
          }
        },
        {
          elName: "el-cascader",
          span: 12,
          label: "下拉级联选择",
          prop: "cascader",
          options: [],
          attrs: {
            placeholder: "请选择级联",
            multiple: false
          },
          on: {
            change: e => {
              console.log("-----------");
              console.log(e);
            }
          }
        },
        {
          elName: "el-select",
          span: 12,
          label: "下拉选择",
          prop: "select",
          options: [
            {
              label: "鼠标",
              value: 1
            },
            {
              label: "键盘",
              value: 2
            }
          ],
          attrs: {
            placeholder: "请输入名称",
            multiple: true
          },
          on: {
            change: e => {
              console.log("-----------");
              console.log(e);
            }
          }
        },
        {
          elName: "el-checkbox",
          span: 12,
          label: "选择",
          prop: "checkbox",
          attrs: {
            label: "我同意",
            "true-label": 1,
            "false-label": 0
          },
          on: {
            change: e => {
              console.log("-----------");
              console.log(e);
            }
          }
        },
        {
          elName: "el-checkbox-group",
          span: 12,
          label: "多选框组",
          prop: "checkboxGroup",
          options: [
            {
              label: "鼠标",
              value: 1
            },
            {
              label: "键盘",
              value: 2
            },
            {
              label: "电脑",
              value: 3
            }
          ],
          on: {
            change: e => {
              console.log("-----------");
              console.log(e);
            }
          }
        }
      ],
//JS的methods方法部分
modalPicTap(tit, type) {
      const _this = this;
      const attr = [];
      this.$modalUpload(function(img) {
        if (tit === "1" && type == "image") {
          _this.form.image = img[0];
        }
      }, tit);
    },
    onSubmit(form) {
      console.log(form);
    },

 

标签：el,form,label,elName,dialog,type
From： https://www.cnblogs.com/zcm1688/p/17469907.html

相关文章

  • Delphi 11.3编译旧项目APP安装出错
    今天编译一个旧的项目，已经记不得是什么版本的了，2018年项目，编译成功后，在华为HM3.0上安装正常，发给朋友，说安装出错。开始查原因，发现11.3，生成的targetSdkVersion为32，手工改成非32，如31，30都可以安装。DelphiTeacher说，加android:exported="true"能解决，看到有人用这种办法确实解决了。而......
  • python selenium 模拟实现滑块验证码
    canndy_test.pyimportcv2importnumpyasnpdefmatchImg(imgPath1,imgPath2):imgs=[]#原始图像，用于展示sou_img1=cv2.imread(imgPath1)sou_img2=cv2.imread(imgPath2)#原始图像，灰度#最小阈值100,最大阈值500img1=cv2......
  • .NET Developer Tools - What you should (could) have in your toolbox zz
    .NETDeveloperTools-Whatyoushould(could)haveinyourtoolboxSubmittedbyDenDelimarskyonSun,2010/12/26-9:26pm//z2011-12-202:34PMis2120@ScottHanslemanhasaprettydecentlistofsoftwaretoolsthatmightbeusefulfordeveloperandregul......
  • ASEMI代理英飞凌TLD5097EL：理解和使用LED驱动器的综合指南
    编辑-ZTLD5097EL是一款创新的LED驱动器，在照明行业掀起了波澜。这项先进的技术提供了广泛的好处，包括提高能源效率、延长使用寿命和增强性能。在本综合指南中，我们将探讨TLD5097EL的功能和优点，并提供如何有效利用该LED驱动器优化照明解决方案的提示。 什么是TLD5097EL？TLD5097EL是一款......
  • C# helper to dump any object to a log (zz)
    57IV3C#helpertodumpanyobjecttoalo944905381Published19/12/2011c#,codeLeaveaCommentTags:c#,debug,dumpobject,reflectionSometimebackIhadtheneedforcodetomakeareasonablegoatdumpingoutanyobjectintoadebuglog.Visual......
  • django form data如何传递到template的vue
    参考：https://docs.djangoproject.com/en/4.2/ref/templates/builtins/#json-scriptafelyoutputsaPythonobjectasJSON,wrappedina<script>tag,readyforusewithJavaScript.Argument:TheoptionalHTML“id”ofthe<script>tag.Forexample......
  • （转）七年老运维实战中的 Shell 开发经验总结
    原文：https://mp.weixin.qq.com/s/0VmbKcttZ0aKpVRb65ycew无论是系统运维，还是应用运维，均可分为“纯手工”—>“脚本化”—>“自动化”—>“智能化”几个阶段，其中自动化阶段，主要是将一些重复性人工操作和运维经验封装为程序或脚本，一方面避免重复性操作及风险，另一方面提高执行效率......
  • python3 del关键字
    1、介绍python中，del关键字可以用于销毁对象。一方面，可以用于实现业务，比如删除集合的元素。另一方面，可以节约内存资源，提升程序效率。 classStu:def__init__(self):self.name='abc'def__del__(self):print('del')stu_1=Stu()stu_2=S......
  • Excelize荣获2022年中国开源创新大赛一等奖
    近日，“2022年中国开源创新大赛”正式发布了获奖名单，Excelize电子表格文档开源基础库荣获一等奖。2022年中国开源创新大赛在乌镇世界互联网大会上正式启动，大赛由中央网信办信息化发展局指导，中国互联网发展基金会、中国网络空间研究院、中国互联网投资基金联合主办，北京长风信息技术......
  • 在excel中怎样控制一个单元格的内容随另一单元格变化而改变？
    http://zhidao.baidu.com/question/26715802/answer/3073469385跨表格的话：=VLOOKUP($C\(4,Sheet2!\)A:$B,2,0)$C$4是下拉菜单的位置AB是两个一一对应的列，比如：$C$4是下拉菜单的位置，公式写到要改变内容的单元格中。......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99