vue实现通讯录功能

2020-06-13 10:38:24易采站长站整理

}
},handleScroll:function(){ //监听滚动时,设置字母的样式
var that = this;
var aP = document.getElementsByTagName('p');
var scroll = document.body.scrollTop||document.documentElement.scrollTop;
for(var i=1;i<aP.length;i++){
if(aP[i].offsetTop<scroll) {
this.redColorIndex = i; //设置当前字母的样式
if(aP[i+1].offsetTop-scroll<0){
that.showBigLetter(aP[i+1].innerHTML);
}
}
}
}

},ready : function(){
this.setLisIndexPos();
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
window.addEventListener('scroll', this.handleScroll)
}
});

var Vm = new Vue({
el:"#app",
data:{
userData:userData
},methods:{

}
});

/*动态的创建alert组件,基于vue的js插件的开发*/
var myAlert = (function(){
var defaults = {
title:'弹窗',
body:'',
confirm:'',
cancel:''
};
var alertEl = {
template:`<div id="alert" >
<div class="alert_content">
<div class="alert_title">{{alertTitle}}</div>
<div class="alert_tel" >{{alertTel}}</div>
<div class="alert_btn">
<button v-if="confirm" @touchstart="confirm">确定</button>
<button v-if="cancel" @touchstart="cancel">取消</button>
</div>
</div>
</div>`
}
var myComponent = Vue.extend(alertEl);

return function(opts){
for(var attr in opts){
defaults[attr] = opts[attr];
}
var vm = new myComponent({
el:document.createElement('div'),
data:{
alertTitle:defaults.title,
alertTel:defaults.body,
confirm:defaults.confirm,
cancel:defaults.cancel
}
})
document.body.appendChild(vm.$el);
}
})();

/*动态的创建alert组件,基于vue的js插件的开发*/
var myLetter = (function(){
var defaults = {
showLetter:''
};
var alertEl = {
template:`<div class="showLetter" id="showLetter">
<div class="letter">{{showLetter}}</div>
</div>`
}
var myComponent = Vue.extend(alertEl);

return function(opts){
for(var attr in opts){
defaults[attr] = opts[attr];
}
var vm = new myComponent({
el:document.createElement('div'),
data:{
showLetter:defaults.showLetter,