这是一款VUE仿微信自定义菜单项目特效代码，操作数据实现添加，删除，更改菜单信息等，操作简单方便。
使用方法
在页面引入需要的vue.min.js文件：
<script src="js/vue.min.js"></script>
Html方法
在需要的页面引入CSS样式代码menu.css和bootstrap.css样式代码：
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"> <link rel="stylesheet" href="css/menu.css">
在文章底部引入相关script代码：
<script>
new Vue({
el:'#box',
data:{
rightTitle:'',
url:'',
dataIndex:[0,0,null],
operationShow: true,
urlShow: true,
isRightTitle: false,
isUrl: false,
menuIndex:[
{isActive:false},
{isActive:false},
{isActive:false}
],
subBtnIndex: [
{num:-1},
{num:-1},
{num:-1}
],
menuObj:{
"button": [
{
"name": "今日歌曲",
"url": "http://www.baidu111.com/",
"sub_button": []
},
{
"name": "百度一下",
"url": "http://www.baidu.com/",
"sub_button": []
},
{
"name": "菜单",
"sub_button": [
{
"name": "搜索",
"url": "http://www.soso.com/"
},
{
"name": "视频",
"url": "http://v.qq.com/"
},
{
"name": "赞一下我们",
"url": "http://v.qq111.com/"
}
]
}
]
},
buttonObj:{
"name": "新建菜单",
"url": "",
"sub_button": []
},
subObj:{
"name": "新建子菜单",
"url": ""
}
},
computed:{
buttonWidth: function(){
return this.menuObj.button.length==3?'33.33%':100/(this.menuObj.button.length+1)+'%';
}
},
methods:{
del: function(){//删除菜单
let x=this.dataIndex[0];
let y=this.dataIndex[1];
let z=this.dataIndex[2];
z==0?this.menuObj.button.splice(x,1):this.menuObj.button[x].sub_button.splice(y,1);//判断删除一级菜单还是二级菜单
for(let i=0;i<this.menuObj.button.length;i++){
this.subBtnIndex[i].num=-1;//重置所有子菜单选中状态
this.menuIndex[i].isActive=false;//重置一级菜单
}
this.operationShow=true;//右侧隐藏操作框
},
addBtn: function(index){//添加一级菜单
var button=this.menuObj.button;
button.splice(button.length,0,JSON.parse(JSON.stringify(this.buttonObj)));//添加菜单按钮
for(let i=0;i<this.menuObj.button.length;i++){
this.subBtnIndex[i].num=-1;//重置所有子菜单选中状态
this.menuIndex[i].isActive=false;//重置一级菜单
}
this.menuIndex[index].isActive=true;
let menu_name=this.menuObj.button[index].name;
let menu_url=this.menuObj.button[index].url;
this.getInfo(menu_name,menu_url);
this.urlWindow(index);
this.dataIndex.splice(0,1,index);
this.dataIndex.splice(2,1,0);
this.operationShow=false;
},
subAddBtn: function(index){//添加子菜单
for(let i=0;i<this.menuObj.button.length;i++){
this.subBtnIndex[i].num=-1;//重置所有子菜单选中状态
this.menuIndex[i].isActive=false;//重置一级菜单
if(i ==index){
var sub_button=this.menuObj.button[i].sub_button;
sub_button.splice(this.menuObj.button[i].sub_button.length,0,JSON.parse(JSON.stringify(this.subObj)));//添加子菜单按钮
if(sub_button.length>0){
this.subBtnIndex[index].num=sub_button.length-2;
this.menuObj.button[i].url='';//增加子菜单，清空一级菜单url
}
this.subBtnIndex[index].num++;//子菜单选中状态
}
}
let sub_name=this.menuObj.button[index].sub_button[this.subBtnIndex[index].num].name;
let sub_url=this.menuObj.button[index].sub_button[this.subBtnIndex[index].num].url;
this.getInfo(sub_name,sub_url);
this.urlWindow(index,true);
this.dataIndex.splice(0,1,index);
this.dataIndex.splice(1,1,this.subBtnIndex[index].num);
this.dataIndex.splice(2,1,1);
this.operationShow=false;
},
menuTab: function(index){//点击一级菜单
for(let i=0;i<this.menuObj.button.length;i++){
this.subBtnIndex[i].num=-1;//重置所有子菜单选中状态
this.menuIndex[i].isActive=false;//重置一级菜单
}
this.menuIndex[index].isActive=true;
let menu_name=this.menuObj.button[index].name;
let menu_url=this.menuObj.button[index].url;
this.getInfo(menu_name,menu_url);
this.urlWindow(index);
this.dataIndex.splice(0,1,index);
this.dataIndex.splice(2,1,0);
this.operationShow=false;
},
liTab: function(index,subIndex){//点击子菜单
for(let i=0;i<this.menuObj.button.length;i++){
this.subBtnIndex[i].num=-1;//重置所有子菜单选中状态
this.menuIndex[i].isActive=false;//重置一级菜单
}
this.subBtnIndex[index].num=subIndex;
let sub_name=this.menuObj.button[index].sub_button[subIndex].name;
let sub_url=this.menuObj.button[index].sub_button[subIndex].url;
this.getInfo(sub_name,sub_url);
this.urlWindow(index,true);
this.dataIndex.splice(0,1,index);
this.dataIndex.splice(1,1,subIndex);
this.dataIndex.splice(2,1,1);
this.operationShow=false;
},
updateValue: function(){//更新按钮name
let match1=/^[\u4E00-\u9FA5]{1,5}$/;
let isName1=match1.test(this.rightTitle);
let match2=/^[a-zA-Z0-9]{1,16}$/;
let isName2=match2.test(this.rightTitle);
let x=this.dataIndex[0];
let y=this.dataIndex[1];
let z=this.dataIndex[2];
isName1 || isName2?this.isRightTitle=false:this.isRightTitle=true;
z==0?this.setmenu(x):this.setSubmenu(x,y);
},
updateUrl: function(){//更新按钮url
let match = /^((ht|f)tps?):\/\/[\w\-]+(\.[\w\-]+)+([\w\-\.,@?^=%&:\/~\+#]*[\w\-\@?^=%&\/~\+#])?$/;//验证url
let isUrl = match.test(this.url);
let x=this.dataIndex[0];
let y=this.dataIndex[1];
let z=this.dataIndex[2];
isUrl?this.isUrl=false:this.isUrl=true;
z==0?this.setmenu(x):this.setSubmenu(x,y);
},
getInfo: function(name,url){//显示name，url
this.rightTitle=name;
this.url=url;
},
setmenu: function(x){
this.menuObj.button[x].name=JSON.parse(JSON.stringify(this.rightTitle));//必须用JSON.parse(JSON.stringify(value)
this.menuObj.button[x].url=JSON.parse(JSON.stringify(this.url));
},
setSubmenu: function(x,y){
this.menuObj.button[x].sub_button[y].name=JSON.parse(JSON.stringify(this.rightTitle));
this.menuObj.button[x].sub_button[y].url=JSON.parse(JSON.stringify(this.url));
},
urlWindow: function(index,subIndex){//显示右侧url窗口
if(!subIndex && this.menuObj.button[index].sub_button.length>0){
this.urlShow = false;
}else{
this.urlShow = true;
}
},
save: function(){
let button=this.menuObj.button;
for(let i=0;i<button.length;i++){//验证url是否为空
if(button[i].sub_button.length==0){
if(button[i].url=='' || button[i].name==''){
alert('一级菜单内容不能为空');
return;
}
}else{
for(let j=0;j<button[i].sub_button.length;j++){
if(button[i].sub_button[j].url=='' || button[i].sub_button[j].name==''){
alert('二级菜单内容不能为空');
return;
}
}
}
}
//ajax保存至后台
alert('保存成功！！！')
}
}
})
</script>
相关描述
computed:初始化计算按钮宽度
del:删除菜单
addBtn:添加一级菜单
subAddBtn:添加子菜单
menuTab:点击一级菜单
liTab:点击子菜单
updateValue:更新按钮name
updateUrl:更新按钮url
getInfo:显示name，url
setmenu:设置一级菜单信息
setSubmenu:设置子菜单信息
urlWindow:显示右侧url窗口
save:保存按钮
