<style type="text/css">
.tui-actionsheet {
width: 100%;
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
visibility: hidden;
transform: translate3d(0, 100%, 0);
transform-origin: center;
transition: all 0.3s ease-in-out;
background: #eaeaec;
}
.popup-content {
width: 100%;
position: fixed;
bottom: 0;
left: 0;
background: #fff;
transition: transform .3s
}
.slide-leave-active {
transform: translate3d(0, 100%, 0);
}
.tui-actionsheet-show {
transform: translate3d(0, 0, 0);
visibility: visible;
}
.tui-actionsheet-mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 9996;
transition: all 0.3s ease-in-out;
opacity: 0;
visibility: hidden;
}
.tui-mask-show {
opacity: 1;
visibility: visible;
}
#btn{
padding: 20px;
border: 1px solid red;
border-radius: 5px;
}
</style>
</head>
<body>
<div>
<div id="btn" >点击</div>
<div class="tui-actionsheet-mask" id="mask"></div>
<div class="tui-actionsheet-class tui-actionsheet" id="pop">
<div style="height: 500px;width: 100%">hhoh</div>
</div>
</div>
<script>
const oPop = document.querySelector('#pop');
const oBtn = document.querySelector('#btn');
const omask = document.querySelector('#mask');
oBtn.addEventListener('click', function(e){
console.log(oPop.classList);
oPop.classList.add('tui-actionsheet-show');
omask.classList.add('tui-mask-show');
}, false);
omask.addEventListener('click', function(){
oPop.classList.remove('tui-actionsheet-show');
omask.classList.remove('tui-mask-show');
}, false)
</script>
vue
<template>
<div class="popup">
<div class="tui-action-sheet-mask" :class="{'tui-mask-show': show}" @click="emit('doClick')"></div>
<div class="tui-action-sheet-class tui-action-sheet" :class="{'tui-action-sheet-show': show}">
<slot></slot>
</div>
</div>
</template>
<script setup>
defineProps({
show: {
type: Boolean,
default: false
}
})
const emit = defineEmits(['doClick'])
</script>
<style scoped lang="scss">
.tui-action-sheet {
width: 100%;
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
visibility: hidden;
transform: translate3d(0, 100%, 0);
transform-origin: center;
transition: all 0.3s ease-in-out;
background: #eaeaec;
}
.popup-content {
width: 100%;
position: fixed;
bottom: 0;
left: 0;
background: #fff;
transition: transform .3s
}
.slide-leave-active {
transform: translate3d(0, 100%, 0);
}
.tui-action-sheet-show {
transform: translate3d(0, 0, 0);
visibility: visible;
}
.tui-action-sheet-mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 9996;
transition: all 0.3s ease-in-out;
opacity: 0;
visibility: hidden;
}
.tui-mask-show {
opacity: 1;
visibility: visible;
}
</style>
