vue  自定义组件实现通讯录功能


Posted in Javascript onSeptember 30, 2018

在线demo:http://tangyupeng.top/dist/index.html#/phone

vue  自定义组件实现通讯录功能

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" :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 通讯录 自定义组件功能的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript KeyDown、KeyPress和KeyUp事件的区别与联系
Dec 03 Javascript
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
May 07 Javascript
js登录弹出层特效
Mar 07 Javascript
Jquery+asp.net后台数据传到前台js进行解析的方法
May 11 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
Sep 04 Javascript
jquery实现表单验证简单实例演示
Nov 23 Javascript
javascript中闭包(Closure)详解
Jan 06 Javascript
JS获取url参数、主域名的方法实例分析
Aug 03 Javascript
js中let和var定义变量的区别
Feb 08 Javascript
微信小程序input框中加入小图标的实现方法
Jun 19 Javascript
vue template中slot-scope/scope的使用方法
Sep 06 Javascript
js canvas实现画图、滤镜效果
Nov 27 Javascript
对angularJs中2种自定义服务的实例讲解
Sep 30 #Javascript
angularJs在多个控制器中共享服务数据的方法
Sep 30 #Javascript
iview Upload组件多个文件上传的示例代码
Sep 30 #Javascript
VUE 配置vue-devtools调试工具及安装方法
Sep 30 #Javascript
angularJs中orderBy筛选以及filter过滤数据的方法
Sep 30 #Javascript
jQuery实现点击图标div循环放大缩小功能
Sep 30 #jQuery
angularJs使用ng-repeat遍历后选中某一个的方法
Sep 30 #Javascript
You might like
用PHP和ACCESS写聊天室(二)
2006/10/09 PHP
php数据库的增删改查 php与javascript之间的交互
2017/08/31 PHP
js 分页全选或反选标识实现代码
2011/08/09 Javascript
网页加载时页面显示进度条加载完成之后显示网页内容
2012/12/23 Javascript
jQuery实现点击标题输入详细信息
2013/04/16 Javascript
jquery统计输入文字的个数并对其进行判断
2014/01/07 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
2015/03/04 Javascript
Javascript中Array用法实例分析
2015/06/13 Javascript
Js实现简单的小球运动特效
2016/02/18 Javascript
Angularjs中使用Filters详解
2016/03/11 Javascript
Node.js实用代码段之正确拼接Buffer
2016/03/17 Javascript
js 点击a标签 获取a的自定义属性方法
2016/11/21 Javascript
jQuery实现鼠标经过显示动画边框特效
2017/03/24 jQuery
详解VueRouter进阶之导航钩子和路由元信息
2017/09/13 Javascript
js中el表达式的使用和非空判断方法
2018/03/28 Javascript
解决antd的Form组件setFieldsValue的警告问题
2020/10/29 Javascript
[01:16:50]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第一场 3月7日
2021/03/11 DOTA
使用Python脚本对Linux服务器进行监控的教程
2015/04/02 Python
让Python代码更快运行的5种方法
2015/06/21 Python
python切片的步进、添加、连接简单操作示例
2019/07/11 Python
python3实现用turtle模块画一棵随机樱花树
2019/11/21 Python
python中for in的用法详解
2020/04/17 Python
Python通过两个dataframe用for循环求笛卡尔积
2020/04/29 Python
澳大利亚小众服装品牌:Maurie & Eve
2018/03/27 全球购物
Bibloo荷兰:女士、男士和儿童的服装、鞋子和配饰
2019/02/25 全球购物
编写一个 C 函数,该函数在一个字符串中找到可能的最长的子字符串,且该字符串是由同一字符组成的
2015/07/23 面试题
部队学习十八大感言
2014/01/11 职场文书
八年级数学教学反思
2014/01/31 职场文书
财务出纳岗位职责
2014/02/03 职场文书
2014年三八妇女节活动总结
2014/03/01 职场文书
生日宴会策划方案
2014/06/03 职场文书
银行求职自荐信
2014/06/30 职场文书
群众路线剖析材料怎么写
2014/10/09 职场文书
2015年健康教育工作总结
2015/04/10 职场文书
Python time库的时间时钟处理
2021/05/02 Python
浅谈golang 中time.After释放的问题
2021/05/05 Golang