关于vue组件的简单自作

最新推荐文章于 2024-08-22 19:38:13 发布

新手菜鸡01号

最新推荐文章于 2024-08-22 19:38:13 发布

阅读量165

点赞数

本文链接：https://blog.csdn.net/a1251782738/article/details/106374085

版权

                        
                     
 </div>
<script>
    Vue.component("my-input",{
        props:
            {
                corporation:String,
                name:String,
                position:String,
                handset:{
                    type:String,
                    validator: function (value) {
                        if (/^1[3-9][0-9]{9}$/.test(value)) {
                            return true;
                        }
                        else {
                            alert("请输入正确的手机号")
                            return false
                        }
                    }
                },
                two:{
                    type: String,
                    validator: function (value) {
                        var mailReg = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
                        if (mailReg.test(value)){
                            return true;
                        } else {
                        return false;
                        }
                    }
                },

            },
        template:`
        <div class="event" >
            <div class="corporation"> {{corporation}} </div>
            <div class="event-name" > {{name}} </div>
            <div class="event-position"> {{position}}</div>
            <div class="event-num">
                <div class="event-handset">手机： {{handset}}</div>
                <div class="event-postbox">邮箱：{{two}}</div>
            </div>
            
            <div class="event-two"><img src="./img/1.png" alt="" width="100%"></div>
        </div>
        `,
    });
    var app = new Vue({
        el:"#app",
       
    }); 
</script>
 