vue实现通讯录功能
2018-09-26 20:08
vue实现手机通讯录功能，供大家参考，具体内容如下
<!DOCTYPE html> <html> <head> <title>动态加载组件tent{ position: relative; } .item p{ background: #ccc; color: white; padding-left: 20px; line-height: 30px; font-size: 0.9rem; } .item ul li{ border-bottom: 1px solid #ddd; line-height: 30px; padding: 3px 0px 3px 30px; font-size: 0.7rem; } .list_index{ position: fixed; right: 15px; top: 50%; text-align: center; z-index: 999; } .list_index ul li{ line-height: 20px; cursor: pointer; font-size: 0.625rem; } .redColor{ color: red; } #alert{ width: 100%; height: 100%; background: rgba(0,0,0,0.5); position: fixed; left: 0px; top: 0px; z-index: 99999; display: flex; } #alert .alert_content{ width: 70%; height: 140px; background: white; border-radius: 5px; margin: auto; position: relative; } #alert .alert_title{ padding: 8px; border-bottom: 1px solid #ddd; } #alert .alert_tel{ height: 50px; line-height: 50px; text-align: center; } #alert .alert_btn{ position: absolute; right: 0px; bottom: 5px; } #alert .alert_btn button{padding: 8px 12px;margin-right: 10px;border-width: 0px;border-radius:5px ;} button:active,button:focus{outline:none;} #alert .alert_btn button:first-child{background-color: #00a5e0;color: white;} .showLetter{ width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; position: fixed; left: 0px; top: 0px; z-index: 99; } .showLetter .letter{ width: 1.8rem; height: 1.8rem; text-align: center; line-height: 1.8rem; background-color: #A0A0A0; color: white; border-radius: 50%; font-size: 0.8rem; } </style> </head> <body> <div id=app> <!--<my-header custom-title=通讯录 custom-fixed>--> <!--<button slot=left>返回</button>--> <!--<button slot=right>主页</button>--> <!--</my-header>--> <my-list :user-data=userData></my-list> </div> </body> <script type=text/javascript src=vue.min.js></script> <script> var userData = [{letter:B,data:[包商银行,北京农村商业银行,北京顺义银座村镇银行,北京银行,渤海银行]},{letter:C,data:[沧州银行,承德银行,重庆农村商业银行,重庆黔江银座村镇银行,重庆银行,重庆渝北银座村镇银行]},{letter:D,data:[大连银行,德州银行,东莞农村商业银行,东亚银行,东营莱商村镇银行,东营银行]},{letter:E,data:[鄂尔多斯银行]},{letter:F,data:[福建海峡银行,福建省农村信用社联合社,阜新银行,富邦华一银行,富滇银行]},{letter:G,data:[赣州银行,工商银行,广东华兴银行,广东南粤银行,广东省农村信用社联合社,广发银行,广西北部湾银行,广西壮族自治区农村信用社联合社,广州农村商业银行,广州银行,桂林银行]},{letter:H,data:[哈尔滨银行,海口联合农村商业银行,韩亚银行,汉口银行,河北银行,恒丰银行,衡水银行,湖北银行,湖州银行,葫芦岛银行,华夏银行,徽商银行]},{letter:J,data:[吉林银行,济宁银行,嘉兴银行,建设银行,江苏银行,江苏长江商业银行,江西赣州银座村镇银行,江西省农村信用社联合社,交通银行,焦作中旅银行,金华银行,锦州银行,晋城银行,晋商银行,九江银行]},{letter:K,data:[昆仑银行,昆山农村商业银行]},{letter:L,data:[莱商银行,兰州银行,廊坊银行,临商银行,柳州银行,龙江银行,洛阳银行]},{letter:M,data:[绵阳市商业银行,民生银行]},{letter:N,data:[南京银行,内蒙古银行,宁波通商银行,宁波银行,宁夏黄河农村商业银行,宁夏银行,农业银行]},{letter:P,data:[攀枝花市商业银行,平安银行,平顶山银行,齐鲁银行,齐商银行,企业银行,青岛银行,青海银行]},{letter:Q,data:[泉州银行]},{letter:R,data:[日照银行]},{letter:S,data:[山东省农村信用社联合社,上海银行,上饶银行,绍兴银行,深圳福田银座村镇银行,深圳农村商业银行,深圳前海微众银行,四川省农村信用社联合社,苏州银行]},{letter:T,data:[台州银行,太仓农村商业银行,天津农村商业银行,天津银行]},{letter:W,data:[威海市商业银行,潍坊银行,温州银行,武汉农村商业银行]},{letter:X,data:[西安银行,厦门国际银行,厦门银行,新韩银行,邢台银行,兴业银行]},{letter:Y,data:[烟台银行,营口银行,邮政储蓄银行,友利银行]},{letter:Z,data:[枣庄银行,张家港农村商业银行,长安银行,长沙银行,招商银行,浙江稠州商业银行,浙江景宁银座村镇银行,浙江民泰商业银行,浙江三门银座村镇银行,浙江省农村信用社联合社,浙江泰隆商业银行,浙商银行,郑州银行,中国银行,中信银行,中原银行,珠海华润银行onent(my-header,{ template:`<div class=headerBox :style={position:customFixed ? fixed:static}> <div class=header > <slot name=left></slot> {{customTitle}} <slot name=right></slot> </div></div>`, props:{ customTitle:{ type:String, default:标题erText.toLocaleString() == letter.toLocaleString()){ el.scrollTop = aP[i].offsetTop; for(var j=0;j<aLi.length;j++){ if(aLi[j].getAttribute(data-index)==i){ this.redColorIndex = i; } } } } },showBigLetter:function(letter){ var that = this; that.showLetter = true; if(that.showLetter){ that.letter = letter; setTimeout(function(){ that.showLetter = false; },1000) } },handleScroll:function(){ //监听滚动时，设置字母的样式 var that = this; var aP = document.getElementsByTagName(p); var scroll = document.body.scrollTopdocument.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, } }) document.body.appendChild(vm.$el); } })(); </script> </html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。