vue封装组件以及调用「建议收藏」

Jetbrains全系列IDE稳定放心使用

1.

index.js

export { default as addDialog } from './addDialog'
export { default as EditDialog } from './EditDialog'

editDialog.vue

<template>
    <div><el-dialog
      title="编辑"
      :visible.sync="dialogVisible"
      width="40%"
      custom-class="custonStyle">
      <el-row>
        <el-col :span="24">
          <el-form ref="addTagData" :model="tableData" :rules="rules" label-width="120px">
            <el-form-item label="标题名称" prop="title">
              <el-input v-model="tableData.title"></el-input>
            </el-form-item>
            <el-form-item label="标题类型" prop="titleType">
              <el-radio-group v-model="tableData.titleType">
                <el-radio label="0">企业</el-radio>
                <el-radio label="1">个人</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="元素类型" prop="eleType">
              <el-radio-group v-model="tableData.eleType">
                <el-radio label="0">复选</el-radio>
                <el-radio label="1">单选</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="必填" prop="unrequired">
              <el-radio-group v-model="tableData.unrequired">
                <el-radio label="0">是</el-radio>
                <el-radio label="1">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('addTagData')">提交</el-button>
              <el-button @click="resetForm('addTagData')">取消</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-dialog></div>
</template>

<script>
    export default {
      props: {
        tableArray: {
          type:Array,
          default: ()=>[]
        }
      },
      data(){
        return {
          dialogVisible:false,
          tableData: { },
          rules: {
            title: [
              {required: true,message: '标题名称不能空',trigger: 'blur'},
            ],
          }
        }
      },
      methods:{
        //  弹出框编辑模型
        relationFrom(row){
          this.dialogVisible = !this.dialogVisible
          this.reset()
          this.tableData = Object.assign({},row)
          console.log(this.tableData)
        },
        // todo 规则重置
        // 表单重置
        reset() {
          if (this.$refs['addTagData']) {
            this.$refs['addTagData'].resetFields();
          }
        },
        //todo 提交
        submitForm(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
                   console.log(this.tableData)
            } else {
              this.$message.warning("添加失败，必填未写")
              return false;
            }
          });
        },
        resetForm(formName) {
          this.dialogVisible =!this.dialogVisible
          this.reset()
          // this.$refs[formName].resetFields();
        },
      }
    }
</script>
<style lang="scss" scoped>
  /deep/ .custonStyle .el-dialog__body{border-top: 1px solid #ccc;}
</style>

2.使用

<EditDialog ref="Edit"></EditDialog>

import {EditDialog} from './Popup/index'

components:{
  EditDialog,
},

methods: {
  //添加弹出框
  editRow(row){
    this.$refs.Edit.relationFrom(row)
  },
},