{"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';
