如何把页面里的ElementUI组件提取为子组件对话框el-dialog作为举例

最新推荐文章于 2024-03-01 15:15:59 发布

王工丶要专注

最新推荐文章于 2024-03-01 15:15:59 发布

阅读量936

点赞数 2

文章标签： elementui 前端 javascript

本文链接：https://blog.csdn.net/qq_44224811/article/details/127949942

版权

先看案例把页面中的弹窗抽取成为子组件

第一步在项目中的src目录结构下的components文件夹下面建好新的文件夹，我这边文件夹取名person，在person文件夹下建好子组件页面取名editPhoneNum.Vue

第二步在原本父组件页面

以下是关于父组件要修改的内容

1.点击事件

  <el-button size="medium" plain @click="handleEditPhoneNum"> 换绑 </el-button>

2.图中展示了<editPhoneNum ref="editPhoneNum"></editPhoneNum>写的位置层级

不要超过template 放在最大的div里面即可

 <editPhoneNum ref="editPhoneNum"></editPhoneNum>

3.导入import editPhoneNum from "@/components/person/editPhoneNum.vue";

4.注册这个组件

export default {
components: {
editPhoneNum,
},

<script>
import editPhoneNum from "@/components/person/editPhoneNum.vue";

export default {
  components: {
    editPhoneNum,
  },

5.在methods方法中添加之前绑定的事件

 methods: {
    handleEditPhoneNum() {
      this.$refs.editPhoneNum.onShow();
    },

第三步是子组件要修改的内容

1. dialogVisible: false,不要漏了。在return下面

 return {
      dialogVisible: false,
      /*  */
      rules: {
        mobile: [
          { message: '请输入手机号码', trigger: 'blur' },
          { validator: isMobileNumber, trigger: 'blur' }
        ]
      },
      editPhoneForm: {
        mobile: '',
        name1: ''
      }
    }

2.方法

methods: {
    onShow() {
      this.dialogVisible = true
    },
    /*  */
  }

3.原本el-dialog的组件代码

下面放一下父组件与子组件抽取完后的完整代码

父组件

<template>
  <div class="main">
    <!-- 小标题 -->
    <div class="maintitle">
      <div class="titlehengxian" />
      <div class="titletext">个人资料及认证</div>
    </div>
    <!-- 头像主账号 -->
    <div class="zzh">
      <div class="zzhavator">
        <img src="@/assets/images/header.jpg" alt="">
      </div>
      <div class="zzhnum">17666662478</div>
      <div class="zzhtext">主账号</div>
    </div>
    <!--  -->
    <div style="width: 100%; height: 100px" />
    <!-- 表格 -->
    <div class="personfour">
      <div class="personleft">
        <div class="persontitle">手机绑定</div>
        <div class="personmain">已绑定手机138xxxx8888</div>
      </div>
      <div class="personright">
        <el-button size="medium" plain @click="handleEditPhoneNum"> 换绑 </el-button>
      </div>
    </div>

    <div class="personfour">
      <div class="personleft">
        <div class="persontitle">微信绑定</div>
        <div class="personmain">已绑定微信</div>
      </div>
      <div class="personright">
        <el-button size="medium" plain> 换绑 </el-button>
      </div>
    </div>

    <div class="personfour">
      <div class="personleft">
        <div class="persontitle">登录密码</div>
        <div class="personmain">123456789</div>
      </div>
      <div class="personright">
        <el-button size="medium" plain> 设置 </el-button>
      </div>
    </div>

    <div class="personfour">
      <div class="personleft">
        <div class="persontitle">专属客服</div>
        <div class="personmain">
          <div class="wechathover">
            <div>联系专属导师，获得一对一运营指导服务</div>
            <div class="xiaovchatk">
              <div class="xiaov">
                <img src="@/assets/images/weixin.png" alt="">
                <div class="whitehoverk">
                  <div class="whitehoverkimg">
                    <img src="@/assets/images/xrerweima.png" alt="">
                    <div class="xiaoren">聚一数据-小任</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="personright">
        <!-- <el-button size="medium" plain>  </el-button> -->
      </div>
    </div>

    <editPhoneNum ref="editPhoneNum"></editPhoneNum>
  </div>
</template>
<script>
import editPhoneNum from "@/components/person/editPhoneNum.vue";

export default {
  components: {
    editPhoneNum,
  },
  data() {
    /* 手机号 */
    var isMobileNumber = (rule, value, callback) => {
      if (!value) {
        return new Error("请输入电话号码");
      } else {
        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
        const isPhone = reg.test(value);
        value = Number(value); // 转换为数字
        if (typeof value === "number" && !isNaN(value)) {
          // 判断是否为数字
          value = value.toString(); // 转换成字符串
          if (value.length < 0 || value.length > 12 || !isPhone) {
            // 判断是否为11位手机号
            callback(new Error("手机号码格式如:138xxxx8754"));
          } else {
            callback();
          }
        } else {
          callback(new Error("请输入电话号码"));
        }
      }
    };

    return {
      dialogVisible: false,
      /* 校验规则 */
      rules: {
        mobile: [
          { message: "请输入手机号码", trigger: "blur" },
          { validator: isMobileNumber, trigger: "blur" },
        ],
      },
      editPhoneForm: {
        mobile: "",
        name1: "",
      },
    };
  },
  created() {},
  methods: {
    handleEditPhoneNum() {
      this.$refs.editPhoneNum.onShow();
    },
  },
};
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  height: calc(100vh - 2.5rem);
  background: rgba(255, 255, 255, 1);
}
/*  */
.maintitle {
  width: 100%;
  height: 87px;
  display: flex;
  border-bottom: 1px solid rgba(229, 229, 229, 1);
}
.titlehengxian {
  width: 5px;
  height: 14px;
  opacity: 1;
  border-radius: 6px;
  background: rgba(255, 119, 82, 1);
  margin-left: 24px;
  margin-right: 13px;
  margin-top: 22px;
}
.titletext {
  color: rgba(56, 56, 56, 1);
  font-size: 18px;
  font-weight: 700;
  margin-top: 17px;
}
/*  */
.zzh {
  display: flex;
  padding-left: 34px;
  margin-top: 25px;
}
.zzhavator {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}
.zzhavator img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.zzhnum {
  font-size: 18px;
  font-weight: 700;
  color: rgba(56, 56, 56, 1);
  margin-left: 14px;
  line-height: 34px;
  margin-right: 30px;
}
.zzhtext {
  font-size: 18px;
  font-weight: 700;
  color: rgba(255, 119, 82, 1);
  line-height: 34px;
}
/*  */
.persontitle {
  font-size: 14px;
  font-weight: 400;
  margin-right: 60px;
}
.personfour {
  width: 100%;
  height: 54px;
  border-bottom: 1px solid rgba(229, 229, 229, 1);
  display: flex;
  justify-content: space-between;
}
.personleft {
  margin-left: 42px;
  display: flex;
  line-height: 52px;
}
.personmain {
  font-size: 14px;
  font-weight: 400;
  color: rgba(128, 128, 128, 1);
}
.personright {
  margin-right: 34px;
}
/*  */
.wechathover {
  display: flex;
}
.xiaov {
  width: 23px;
  height: 23px;
  margin-top: 5px;
  margin-left: 5px;
  cursor: pointer;
}
.xiaov img {
  width: 23px;
  height: 23px;
}

.xiaovchatk {
  position: relative;
}
.whitehoverk {
  width: 153px;
  height: 170px;
  background-image: url(@/assets/images/sjbg.png);
  background-size: 153px 170px;
  position: absolute;
  bottom: 40px;
  right: -65px;
  display: none;
}

.whitehoverkimg {
  width: 122px;
  height: auto;
  margin-top: 7px;
  margin-left: 15px;
}

.whitehoverk img {
  width: 122px;
  height: 122px;
}

.xiaoren {
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  margin-top: -35px;
  color: rgba(56, 56, 56, 1);
}

.xiaov:hover .whitehoverk {
  display: block;
}
.el-button--medium {
  padding: 8px 15px;
  font-size: 14px;
  border-radius: 4px;
  margin-top: 10px;
}
</style>

子组件

<template>
  <div>
     <el-dialog
      title="修改手机号"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form ref="form" :rules="rules" :model="editPhoneForm" label-width="90px">
        <el-form-item label="旧手机号码" prop="mobile">
          <el-input v-model="editPhoneForm.mobile" clearable maxlength="11" />
        </el-form-item>
        <el-form-item label="验证码">
          <el-input v-model="editPhoneForm.name1" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">下一步</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
export default {
  data() {
    /*  */
    /* 手机号 */
    var isMobileNumber = (rule, value, callback) => {
      if (!value) {
        return new Error('请输入电话号码')
      } else {
        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
        const isPhone = reg.test(value)
        value = Number(value) // 转换为数字
        if (typeof value === 'number' && !isNaN(value)) {
          // 判断是否为数字
          value = value.toString() // 转换成字符串
          if (value.length < 0 || value.length > 12 || !isPhone) {
            // 判断是否为11位手机号
            callback(new Error('手机号码格式如:138xxxx8754'))
          } else {
            callback()
          }
        } else {
          callback(new Error('请输入电话号码'))
        }
      }
    }
    return {
      dialogVisible: false,
      /*  */
      rules: {
        mobile: [
          { message: '请输入手机号码', trigger: 'blur' },
          { validator: isMobileNumber, trigger: 'blur' }
        ]
      },
      editPhoneForm: {
        mobile: '',
        name1: ''
      }
    }
  },
  methods: {
    onShow() {
      this.dialogVisible = true
    },
    /*  */
  }
}
</script>

<style scoped>
</style>

温馨提示：如果以上方法尝试过了，问题还没解决的朋友，如果您不嫌弃，欢迎私信联系，我会第一时间与您取得联系，和您一起探讨解决问题！绝不收取任何咨询费用！