点击按钮文本内容以滑动的形式显示

 

 

<template>
<div>
<!-- 阴影层 -->
<div v-bind:class="{ shadeTask: open1 }" @click="closetaskDetail"></div>
<button @click="taskDetail()">fedsfgergf</button>
<!-- 浮在阴影上面的div ，可以在这个div里面写内容-->
<div class="practical-left" :class="[{'showTask': open1}]">

</div>
</div>
</template>
<script>
export default {
data(){
return{
open1: false,
}
},
methods:{
taskDetail() {
this.open1 = !this.open1;
document.body.style.overflow = 'hidden';
},
closetaskDetail(){
this.open1 = false;
document.body.style.overflow = '';
},
}
}
</script>
<style lang="scss" scoped>
// 右侧弹出阴影层
.practical-left {
        height: 100%;
        width: 70%;
        top: 0;
        bottom: 0;
        transition: width 0.5s;
        padding: 0;
        position: fixed;
        background-color: white;
        float: right;
        z-index: 800;
        overflow-x: hidden;
        overflow-y: scroll;
        right: -70%;
    }
    .showTask {
        transform: translateX(-100%);
        transition: transform 0.3s;
    }
    .shadeTask {
        background-color: rgba(0, 0, 0, 0.5);
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 100;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        overflow: hidden;
    }
</style>