elementui创建dialog组件摸板

在components文件夹下建立myModel.vue文件

<template>
  <div>
    <el-dialog title="收货地址" :visible.sync="visible1" :before-close="cancelModal">
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item label="活动名称" :label-width="formLabelWidth" prop="name">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="活动区域" :label-width="formLabelWidth" prop="region">
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveFu">确 定</el-button>
        <el-button @click="cancelModal">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

export default {
  props:[
    'visible1'
  ],
  data() {
    return {
      form: {
        name: "",
        region: ""
      },
      formLabelWidth: "100px",
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        region: [
          { required: true, message: "请选择活动区域", trigger: "change" }
        ]
      }
    };
  },
  methods: {
    saveFu() {
      this.$refs["form"].validate(valid => {
        if (valid) {
            this.$message.success('提交成功')
            this.cancelModal()
        }else{
            this.$message.error('所有表单必须填写')
            return false
        }
      });
    },

    cancelModal(){
        this.$emit('update:visible1',false)
    }
  }
};
</script>

<style lang="less" scoped>
</style>

<template>
    <div>
    
    <el-button type="primary" @click="jumpModel">按钮</el-button>
    <my-model :visible1.sync='visible1'></my-model>
    
  </div>
</template>
<script>
import MyModelfrom "@/component/MyModel.vue";
    export default {
  data() {
    return {
      visible1: false
    };
  },

  components: {
    MyModel
  },
  methods: {
    jumpModel() {
      this.visible1 = true;
    }
  }
};
</script>