vue 自定义组件实现通讯录功能
程序员文章站
2022-06-29 19:03:47
在线demo：
在线demo：
<template>
<div>
<my-header custom-title="通讯录" custom-fixed >
<button @touchstart="backbtn" slot="left">首页</button>
<button @touchstart="homebtn" slot="right">+</button>
</my-header>
<my-list :user-data="userdata"></my-list> <!-- 传递数据 -->
<my-alert custom-title="呼叫">
<div class="alert_btn">
<button class="aler_tbn" @touchstart="confirmbtn">确认</button>
<button class="aler_tbn" @touchstart="cancelbtn">取消</button>
</div>
</my-alert>
</div>
</template>
<script>
import vue from 'vue';
import vuex from 'vuex';
var userdata=[
{"index":"a","users":[
{"name":"a1","tel":"13333333331"},
{"name":"a2","tel":"13333333332"},
{"name":"a3","tel":"13333333333"},
]},
{"index":"b","users":[
{"name":"b1","tel":"13333333331"},
{"name":"b2","tel":"13333333332"},
{"name":"b3","tel":"13333333333"},
]},
{"index":"c","users":[
{"name":"c1","tel":"13333333331"},
{"name":"c2","tel":"13333333332"},
{"name":"c3","tel":"13333333333"},
]},
{"index":"d","users":[
{"name":"d1","tel":"13333333331"},
{"name":"d2","tel":"13333333332"},
{"name":"d3","tel":"13333333333"},
]},
{"index":"e","users":[
{"name":"e1","tel":"13333333331"},
{"name":"e2","tel":"13333333332"},
{"name":"e3","tel":"13333333333"},
]},
{"index":"f","users":[
{"name":"f1","tel":"13333333331"},
{"name":"f2","tel":"13333333332"},
{"name":"f3","tel":"13333333333"},
]},
{"index":"f1","users":[
{"name":"f1","tel":"13333333331"},
{"name":"f2","tel":"13333333332"},
{"name":"f3","tel":"13333333333"},
]},
{"index":"f2","users":[
{"name":"f1","tel":"13333333331"},
{"name":"f2","tel":"13333333332"},
{"name":"f3","tel":"13333333333"},
]},
{"index":"f3","users":[
{"name":"f1","tel":"13333333331"},
{"name":"f2","tel":"13333333332"},
{"name":"f3","tel":"13333333333"},
]},
{"index":"f4","users":[
{"name":"f1","tel":"13333333331"},
{"name":"f2","tel":"13333333332"},
{"name":"f3","tel":"13333333333"},
]},
{"index":"f5","users":[
{"name":"f1","tel":"13333333331"},
{"name":"f2","tel":"13333333332"},
{"name":"f3","tel":"13333333333"},
]},
];
var busvm=new vue(); //空实例 非父子传递值
vue.component('my-header',{
template:`<div id="header" :style="{'position':customfixed ? 'fixed':'static'}">
<slot name="left"></slot>
{{customtitle}}
<slot name="right"></slot>
</div>`,
props:{
'customtitle':{
type:string,
default:"标题"
},
'customfixed':{
type:boolean,
default:false
}
}
})
vue.component('my-alert',{
template:`<div id="alert" ref="alert">
<div class="alert_content">
<div class="alert_title">
{{customtitle}}
</div>
<div class="alert_body">{{custombody}}</div>
<slot></slot>
</div>
</div>`,
props:{
'customtitle':{
type:string,
default:"弹窗"
},
},
data:function(){
return{
'custombody':''
}
},
mounted:function(){
busvm.$on('changeevents',function(ev){
console.log(ev);
this.custombody=ev;
this.$refs.alert.style.display="flex"
}.bind(this));
}
})
vue.component('my-list',{
template:`<div id="list">
<ul class="list_user" ref="listuser" @touchmove="bmove=true">
<li v-for="item in userdata">
<p>{{item.index}}</p>
<ul>
<li @touchend="showtel(user.tel)" v-for="user in item.users">{{user.name}}</li>
</ul>
</li>
</ul>
<ul class="list_index" ref="listindex">
<li @touchstart="setscroll" v-for="item in userindex">{{item}}</li>
</ul>
</div>`,
props:{
'user-data':{
type:array,
default:function(){
return [];
}
}
},
data:function(){
return {
bmove:false
}
},
computed:{
userindex:function(){
console.log(this.userdata)
console.log(this.filterindex(this.userdata))
return this.filterindex(this.userdata);
}
},
methods:{
filterindex:function(data){
var result=[];
for(var i=0; i<data.length;i++){
if(data[i].index){
result.push(data[i].index);
}
}
return result;
},
setlistindexpos:function(){
// 1、ref 加在普通的元素上，用this.ref.name 获取到的是dom元素
// 2、ref 加在子组件上，用this.ref.name 获取到的是组件实例，可以使用组件的所有方法。
// 3、如何利用 v-for 和 ref 获取一组数组或者dom 节点
var ih= this.$refs.listindex.offsetheight;
this.$refs.listindex.style.margintop=-ih/2 +'px';
},
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 通讯录 自定义组件功能的实例代码，希望对大家有所帮助
上一篇： 基于VUE实现的九宫格抽奖功能