vue 通讯录自定义组件

Myth丶恋晨 2021-09-16 13:12 539阅读 0赞

在线demo：[http://tangyupeng.top/dist/index.html\#/phone][http_tangyupeng.top_dist_index.html_phone]

![70][]

![70 1][]

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>

<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>

[http_tangyupeng.top_dist_index.html_phone]: http://tangyupeng.top/dist/index.html#/phone
[70]: /images/20210724/0ffae7d194594cd8803eb2949877f66a.png
[70 1]: /images/20210724/9346b88234954c5f98ce75b0f4698aa2.png