vue.js通讯录
Posted 夕水
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue.js通讯录相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./css/iconfont.css">
<title>vue phone record</title>
</head>
<body>
<div id="container">
<div id="header" v-if="defaultData">
<span class="back"><</span>
<p>通讯录</p>
<span class="more">...</span>
</div>
<div id="search" v-if="defaultData">
<i class="icon-seach iconfont iconsearch" @click="suresearch"></i>
<input type="text" class="search_input" placeholder="请输入联系人名字" @input="searchName($event)" :value="search_name"/>
<div class="seachlist" v-if="seachlist.length">
<li v-for="(item,index) in seachlist" :key="index" @click="loadPerson(item,index)">
<span>{{ item.name }}</span>
</li>
</div>
</div>
<div id="content" v-if="defaultData">
<div id="right_menu">
<ul>
<li v-for="(item,index) in rightItems" :key="index">
<a href="#" @click.prevent="toDetailData(item)">{{ item.name }}</a>
</li>
</ul>
</div>
<div id="leftList">
<ul>
<li v-for="(list,key) in leftList" :key="key" ref="listitem">
<h2 class="title">{{ list.title }}</h2>
<div class="detailInfo" v-for="(left,count) in list.content" :key="count">
<!-- <img alt="" /> -->
<span>{{ left.value }}</span>
<span class="position">({{ left.position }})</span>
</div>
</li>
</ul>
</div>
</div>
<div id="addPhone" v-else>
<div class="add_header">
<button type="button" class="cancelAdd" @click="cancelAdd">取消</button>
<p>新建联系人</p>
<button type="button" class="sureAdd" @click="sureAdd">确定</button>
</div>
<!-- <div class="header_picture"></div> -->
<div class="personName">
<input type="text" class="input_name" placeholder="姓名" @input="inputName($event)" :value="person.name"/>
</div>
<div class="position">
<input type="text" class="input_position" placeholder="职位" @input="inputPosition($event)" :value="person.position"/>
</div>
</div>
<div class="addphone" @click="addPhonePerson">
<button type="button">+</button>
</div>
<div id="bottom">
<ul>
<li>
<a href="">
<i class="iconfont"></i>
<span>联系人</span>
</a>
</li>
<li>
<a href="">
<i class="iconfont"></i>
<span>通讯录</span>
</a>
</li>
<li>
<a href="">
<i class="iconfont"></i>
<span>首页</span>
</a>
</li>
<li>
<a href="">
<i class="iconfont"></i>
<span>应用</span>
</a>
</li>
<li>
<a href="">
<i class="iconfont"></i>
<span>我的</span>
</a>
</li>
</ul>
</div>
</div>
</body>
<script ></script>
<script ></script>
<script ></script>
<script ></script>
<script ></script>
<script>
new Vue({
el:'#container',
data(){
return{
rightItems:[],
leftList:[],
seachlist:[],
scrollHeight:0,
defaultData:true,
person:{
name:"",
position:""
},
search_name:''
}
},
mounted:function(){
this.getRightMenu();
},
methods:{
// 加载右侧菜单
getRightMenu:function(){
var _self = this;
this.request('./testdata.json',null,'GET').then(function(data){
_self.rightItems = data.data.leftvalue;
_self.leftList = data.data.data;
});
},
toDetailData:function(it){
this.leftList.forEach((item,index) => {
// 匹配字母从而计算高度值
if(item.title === it.name){
let totalHeight = 0;
if(index === 0){
totalHeight = 0;
}else{
for(let i = 0;i < index;i++){
totalHeight += this.$refs.listitem[i].clientHeight;
}
}
this.scrollHeight = totalHeight;
}
});
},
addPhonePerson:function(){
this.defaultData = false;
},
cancelAdd:function(){
this.defaultData = true;
},
loadPerson:function(item,idx){
this.seachlist = [];
this.search_name = item.name;
},
suresearch:function(){
if(this.search_name){
this.leftList.forEach((item,index) => {
item.content.forEach((inner,idx) => {
if(inner.value === this.search_name){
let totalHeight = 0;
if(index === 0){
totalHeight = 0;
}else{
for(let i = 0;i < index;i++){
totalHeight += this.$refs.listitem[i].clientHeight;
}
}
this.scrollHeight = totalHeight;
}
})
})
}
},
searchName:function(e){
this.search_name = e.target.value;
let value = e.target.value,match = '';
if(/[a-z|A-Z]/g.test(value.slice(0,1))){
match = value.slice(0,1);
}else{
match = getPinYin(value.slice(0,1));
}
this.leftList.forEach((data,index) => {
if(data.title === match.toUpperCase()){
this.seachlist = [];
data.content.forEach((inner,idx) => {
this.seachlist.push({
name:inner.value
})
})
}
})
},
inputName:function(e){
this.person.name = e.target.value;
},
inputPosition:function(e){
this.person.position = e.target.value;
},
sureAdd:function(){
if(!this.person.name){
alert('请输入姓名!');
}else if(!this.person.position){
alert('请输入职位!');
}else{
let firstName = this.person.name.slice(0,1);
console.log(this.leftList);
if(/[a-z|A-Z]/g.test(firstName)){
this.leftList.forEach((item,index) => {
if(firstName.toUpperCase() === item.title){
item.content.push({
header:"",
value:this.person.name,
position:this.person.position
});
}else{
this.leftList[this.leftList.length] = { title:firstName.toUpperCase(),content:[]};
}
});
alert('添加成功!');
this.defaultData = true;
}else if(/\s|[0-9]/g.test(firstName)){
alert('姓名不对!')
}else{
this.leftList.forEach((item,index) => {
if(getPinYin(firstName).toUpperCase() === item.title){
item.content.push({
header:"",
value:this.person.name,
position:this.person.position
})
}else{
this.leftList.forEach((item,index) => {
if(item.title === getPinYin(firstName).toUpperCase().slice(0,1)){
item.content.push({
header:"",
value:this.person.name,
position:this.person.position
})
}
})
}
});
alert('添加成功!');
this.defaultData = true;
}
}
this.person.name = '';
this.person.position = '';
}
},
watch:{
'scrollHeight':{
handler:function(val){
// 监听滚动高度值的改变
document.getElementById('content').scrollTop = parseInt(val);
},
deep:true
}
}
})
</script>
</html>
getPinyin.js:
function getPinYin(str) {
var length = str.length, unstr = '', result = '', regx = /[a-zA-Z]/g;
if (regx.test(str)) return;
if (length > 1) {
for (var i = 0; i < length; i++) {
unstr += '\\u' + str.charCodeAt(i).toString(16);
}
} else {
unstr = '\\u' + str.charCodeAt(0).toString(16);
}
for (var name in PinYin) {
if (PinYin[name].indexOf(str) !== -1) {
result = name; break;
}
}
return result;
}
index.js:
// 请求数据封装
Vue.prototype.request = function(url,param,method="POST"){
return axios({
headers: {
'Content-Type': 'application/json'
},
method:method,
data:param,
url:url
})
}
// 替代eval()
var equalEval = function(str){
if(str){
var script = document.createElement('script');
script.type = 'text/javascript';
script.text = str;
document.getElementsByTagName('head')[0].appendChild(script);
document.head.removeChild(document.head.lastChild);
}
}
实现搜索,新增功能(待完善)
以上是关于vue.js通讯录的主要内容，如果未能解决你的问题，请参考以下文章