<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>vue仿微信菜单</title>
<style type="text/css">
*{padding: 0;margin:0;}
body, html {
height: 100%;
-webkit-tap-highlight-color: transparent;
}
body {
font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
line-height: 1.6;
}
.weui-mask {
position: fixed;
z-index: 1000;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
display: none;
}
.weui-actionsheet {
position: fixed;
left: 0;
bottom: 0;
-webkit-transform: translate(0, 100%);
transform: translate(0, 100%);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 5000;
width: 100%;
background-color: #EFEFF4;
-webkit-transition: -webkit-transform .3s;
transition: -webkit-transform .3s;
transition: transform .3s;
transition: transform .3s, -webkit-transform .3s;
}
.weui-skin_android .weui-actionsheet {
position: fixed;
left: 50%;
top: 50%;
bottom: auto;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 274px;
max-height: 240px;
overflow-y: auto;
z-index: 5000;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
background: transparent;
-webkit-transition: -webkit-transform .3s;
transition: -webkit-transform .3s;
transition: transform .3s;
transition: transform .3s, -webkit-transform .3s;
}
.weui-skin_android .weui-actionsheet__menu {
border-radius: 2px;
box-shadow: 0 6px 30px 0 rgba(0, 0, 0, 0.1);
}
.weui-actionsheet__menu {
background-color: #FCFCFD;
}
.weui-actionsheet__cell {
position: relative;
padding: 10px 0;
text-align: center;
font-size: 18px;
}
.weui-skin_android .weui-actionsheet__cell {
padding: 13px 24px;
font-size: 16px;
line-height: 1.4;
text-align: left;
}
.weui-skin_android .weui-actionsheet__cell:first-child {
border-top-left-radius: 2px;
border-top-right-radius: 2px;
}
.weui-actionsheet__cell:before {
content: " ";
position: absolute;
left: 0;
top: 0;
right: 0;
height: 1px;
border-top: 1px solid #e5e5e5;
color: #e5e5e5;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
.weui-actionsheet__action {
margin-top: 6px;
background-color: #FCFCFD;
}
.weui-actionsheet_toggle {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
</style>
</head>
<body>
<div id="app">
<div style="margin:30px;padding:15px;" @click="showWatchMenu">弹出菜单</div>
<zhmenu :showmenu="isShowMenu" :theme="theme" :menus="menus" :canceltxt="cancelMenuName" :showcancel="isShowCancelMunu" @menuclick="clickmenu" @cancelmenuclick="cancelClick"></zhmenu>
</div>
<script type="text/x-template" id="hotNewsTemp">
<div v-if="theme=='ios'">
<div id="iosMask" @click="cancelClick"></div>
<div id="iosActionsheet" >
<div>
<div v-for="(item,index) in menus" @click="menuclick(item)">{{item.menuname}}</div>
</div>
<div v-show="showcancel">
<div id="iosActionsheetCancel" @click="cancelClick">{{canceltxt}}</div>
</div>
</div>
</div>
<div v-else="theme=='android'">
<div id="androidActionsheet">
<div @click="cancelClick"></div>
<div>
<div>
<div v-for="(item,index) in menus" @click="menuclick(item)">{{item.menuname}}</div>
</div>
</div>
</div>
</div>
</script>
<script type="text/javascript" src="https://cdn.bootcss.com/zepto/1.1.6/zepto.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.5.14/vue.js"></script>
<script type="text/javascript">
var options = {
template:'#hotNewsTemp',
props:['showmenu','theme','menus','canceltxt','showcancel'],
data:function(){
return {
isshow:this.showmenu
}
},
create:function(){},
mounted:function(){
var self = this;
if(self.isshow){
self.showMenu();
}
},
methods:{
init:function(){},
showMenu:function(){
if(this.menus instanceof Array && this.menus.length > 0){
var ("#iosMask");
var ("#androidActionsheet .weui-mask");
var ("#iosActionsheet");
var ("#androidActionsheet");
if(this.theme == 'ios'){
if(this.isshow){
$iosmask.css({'display':'block'});
$iosMenuEl.addClass('weui-actionsheet_toggle');
}else{
$iosmask.css({'display':'none'});
$iosMenuEl.removeClass('weui-actionsheet_toggle');
}
}
if(this.theme == 'android'){
if(this.isshow){
$andromask.css({'display':'block'});
$androidEl.css('opacity','1');
}else{
$andromask.css({'display':'none'});
$androidEl.css('opacity','0');
}
}
}else{
if(window.console)
console.error('menus is error,please check it!');
}
},
menuclick:function(data){
this.isshow = false;
if(this.showmenu == false) return;
this.$emit('menuclick',data);
},
cancelClick:function(){
this.isshow = false;
if(this.showmenu == false) return;
this.$emit('cancelmenuclick');
}
},
watch:{
menus:function(){
this.init();
},
showmenu:function(){
if(this.showmenu){
this.isshow = true;
this.showMenu();
}else{
this.isshow = false;
this.showMenu();
}
}
}
}
Vue.component('zhmenu',options);
</script>
<script type="text/javascript">
var vue = new Vue({
el:'#app',
data:{
isShowMenu:true,
theme:'ios',
cancelMenuName:'取消',
isShowCancelMunu:true,
menus:[{'key':'1','menuname':'发送给朋友'},{'key':'2','menuname':'收藏'},{'key':'3','menuname':'保存图片'}],
},
methods:{
clickmenu:function(data){
this.isShowMenu = false;
console.log(data.key+','+data.menuname);
},
cancelClick:function(){
this.isShowMenu = false;
},
showWatchMenu:function(){
this.isShowMenu = true;
}
},
mounted:function(){
}
})
</script>
</body>
</html>
