vue+elementui,封装了一个对话框组件在别的页面里,通过点击一个按钮弹出这个对话框,但是对话框里又有一个按钮,点击这个按钮也是要打开一个对画框,并且在同一个组件里多次引用这个组件该怎么做呢

vue+elementui,封装了一个对话框组件

img


在别的页面里,通过点击一个按钮弹出这个对话框,但是对话框里又有一个按钮,点击这个按钮也是要打开一个对画框,封装了一个组件,并且在同一个组件里多次引用这个组件该怎么做呢。是多次引入这个组件传不同的值吗

可以封装一个.vue文件作为外层弹窗,在这个.vue文件中再写第二个对话框,这个vue文件作为组件引入到标签中即可

  • 帮你找了个相似的问题, 你可以看下: https://ask.csdn.net/questions/1061129
  • 你也可以参考下这篇文章:在做VUE项目时遇到的问题及解决办法:点击不同的标题加载不同的组件,使用路由去切换组件时,第一次进入这个页面没有默认显示的子组件
  • 除此之外, 这篇博客: 基于vue封装的正则表达验证中的 由于公司项目用到的表格比较多,考虑用到了vue+element开发,其中注册的表单填写,以及表格的增删改查用到了比较多的正则验证,element 也有自己封装的必填校验,以及简单的正则,但是这并不能满足我们公司的需求,所以特此封装了自己的插件来调用。 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  • 1.首先封装一个js进行囊括正则。

    formValidation.js
    
    const formValidation = {
        mobile: (rule, value, callback) => {
            // const reg = /^0?(13[0-9]|15[012356789]|18[0236789]|14[57])[0-9]{8}$/
            const reg = /^1(3|4|5|7|8)\d{9}$/;
            if(!reg.test(value)) {
                callback('请输入正确的手机号')
            }else {
                callback()
            }
        },
        // 邮编验证
        postcode:(rule,value,callback)=>{
            const reg = /^[0-9]{6}$/;
            if(!reg.test(value)){
                callback("请输入正确的手机号")
            }else {
                callback();
            }
        },
        plateNum:(rule, value, callback) => {
            if(value==""||value==undefined){
                callback()
                return false
            }
            // const reg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/;
            // if(!reg.test(value)) {
            //     callback('请输入正确的车牌号码')
            // }else {
            //     callback()
            // }
            const xreg=/^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}$/;
    
            const creg=
                       /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/;
                    //    /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]{1}$/;
            if(value.length == 7){
                if(!xreg.test(value.substr(0,2))) {
                    callback('请输入正确的车牌号码')
                }else{
                	 callback()
                }
            } else if(value.length == 8){
                if(!xreg.test(value.substr(0,2))) {
                    callback('请输入正确的车牌号码')
                }else{
                	 callback()
                }
            } else{
                callback('请输入正确的车牌号码')
            }
        },
        age: (rule, value, callback) => {
            const reg =/^[0-9]*[1-9][0-9]*$/
            if(!(reg.test(value) || (Number(value) === 0))) {
                callback('请输入大于等于0的整数')
            }else {
                callback()
            }
        },
        
    
    }
    
    export default formValidation