},
showtel:function(ev){
if(!this.bMove){
busVm.$emit("changeEvents",ev)
}else{
this.bMove=false;
}
},
setScroll:function(ev){
console.log(ev.target.innerHTML);
var ap=this.$refs.listuser.getElementsByTagName('p');
for(var i=0;i<ap.length;i++){
if(ap[i].innerHTML==ev.target.innerHTML){
document.body.scrollTop=ap[i].offsetTop;
document.documentElement.scrollTop=ap[i].offsetTop;
window.scrollTop=ap[i].offsetTop;
console.log(ap[i].offsetTop);
}
}
}
},
mounted:function(){
this.setlistIndexPos();
}
})
export default {
name: "HelloWorld",
data() {
return {
userData:userData //挂载数据
}
},
methods:{
backBtn:function(){
alert("123")
},
homeBtn:function(){
alert("123")
},
confirmBtn:function(){
alert("a");
},
cancelBtn:function(){
console.log(this);
this.$children[2].$el.style.display="none"; //此处需要从外级找到
}
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.page-container {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
#alert{width: 100%; height: 100%; background: rgba(0,0,0,0.5); position: fixed; top: 0; top: 0; z-index: 20px; display: none;}
#alert .alert_content{width: 200px;position: relative; height: 150px; background: #fff;border-radius: 10px; margin: auto;}
.alert_body{height: 50px; line-height: 50px; text-align: center;}
.alert_btn{position: absolute;right: 0 ;bottom:0;}
.list_index{ position: fixed;list-style: none; padding-right: 10px; font-size: 20px; font-weight: 700;
top: 50%;
right: 0;}
.alert_title{padding-top: 20px;}
#list .list_user p{background: #ccc; padding-left: 10px}
#list .list_user ul li{ padding-left: 10px;border-bottom: 1px solid #ccc; line-height:30px;}
#list{
width: 100%;
text-align: left;
float: left;
position: relative; top: 40px; overflow: hidden;
}
.aler_tbn{padding: 5px; margin-bottom: 5px; border-radius: 5px;}
button{background: #f60; color: #fff;}
#header{width: 100%;height:40px; background: #666; z-index:9999;color: #fff;text-align: center;line-height: 40px;font-size: 20px;}
#header button{height: 100%;padding: 0 5px}
#header button:nth-of-type(1){float: left}
#header button:nth-of-type(2){float: right}
</style>
总结
以上所述是小编给大家介绍的vue 通讯录 自定义组件功能的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！
