温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

怎么在vue 中利用自定义组件实现通讯录功能

发布时间:2021-05-22 17:22:50 阅读:338 作者:Leah 栏目:web开发
Vue开发者专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

这篇文章给大家介绍怎么在vue 中利用自定义组件实现通讯录功能,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

<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" :>
   <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;
 left0;
 top0;
 width100%;
 height100%;
}
#alert{width100%height100%backgroundrgba(0,0,0,0.5); position: fixed; top0top0z-index20pxdisplay: none;}
#alert .alert_content{width200px;position: relative; height150pxbackground#fff;border-radius10pxmargin: auto;}
.alert_body{height50pxline-height50pxtext-align: center;}
.alert_btn{position: absolute;right0 ;bottom:0;}
.list_index{  position: fixed;list-style: none; padding-right10pxfont-size20pxfont-weight700;
  top50%;
  right0;}
  .alert_title{padding-top20px;}
#list .list_user p{background#cccpadding-left10px}
#list .list_user ul lipadding-left10px;border-bottom1px solid #cccline-height:30px;}
#list{
   width100%;
  text-align: left;
   float: left;
 position: relative; top40pxoverflow: hidden;
}
.aler_tbn{padding5pxmargin-bottom5pxborder-radius5px;}
button{background#f60color#fff;}
#header{width100%;height:40pxbackground#666z-index:9999;color#fff;text-align: center;line-height40px;font-size20px;}
#header button{height100%;padding0 5px}
#header button:nth-of-type(1){float: left}
#header button:nth-of-type(2){float: right}
</style>

为什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架,使用vue可以创建可维护性和可测试性更强的代码库,Vue允许可以将一个网页分割成可复用的组件,每个组件都包含属于自己的HTML、CSS、JavaScript,以用来渲染网页中相应的地方,所以越来越多的前端开发者使用vue。

关于怎么在vue 中利用自定义组件实现通讯录功能就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue
AI

开发者交流群×