uniapp配合colorUI制作简单的信封

uniapp配合colorUI制作简单的信封

没有审美，所以样式比较简陋，背景图可以换成自己想要的样子

一.先写一个点击事件用来弹出信封。

<view @click="dianji">点击</view>

二.不想写弹出来的效果，所以直接引用了colorUI的弹窗的外部框架（遮罩以及弹出来的模块），在模块内将信封样式写入。

 <view class="cu-modal" :class="modalName=='Modal'?'show':''" @click="hideModal()">	//点击遮罩可以关闭
      <view class="cu-dialog" @click.stop>		//阻止事件冒泡
        <view class="xinfeng-content">				//我的信封封面
    	  <view class="perpars" :class="xin==true?'ActivePerpar':''" v-if="xin">纸</view>
    	  <view class="xinfengtop" v-if="xin"></view>		//信封上面的三角形
    	   <view class="kai" @click="changexin" >open</view>			//打开信封的按钮,可以设置条件来隐藏
    	</view>
        </view>
    </view>

三.操作方法，切换信封的状态。

<script>
  export default{
    data(){
      return{
        xin:false,
        modalName:''
      }
    },
    methods:{
      changexin(){
        this.xin=!this.xin;
      },
      dianji(){
        this.modalName='Modal'
      },
      hideModal(){
        this.xin=false;
        this.modalName='';
      }
    }
  }
</script>

四.css样式
.cu-dialog{
width: 500rpx;
overflow: initial;
border-radius: 10rpx;
}
.xinfeng-content{
height: 300rpx;
width: 500rpx;
margin: auto;
background: #FDE6D2;
margin-top: 0%;
z-index: 100;
left: 20%;
border-radius: 10rpx;
}
.xinfengtop{
position: absolute;
left: 0;
right: 0;
top: -200rpx;
width:0;
height:0;
border-right:250rpx solid transparent;
border-left:250rpx solid transparent;
border-bottom:200rpx solid red;
}
.kai{
position: absolute;
width: 300rpx;
height: 60rpx;
border: 1rpx solid #333;
font-size: 40rpx;
font-weight: bold;
border-radius: 10rpx;
text-align: center;
line-height: 60rpx;
left: 0;
right: 0;
margin: 0 auto;
top: 40%;
z-index: 12;
}
.perpars{
position: absolute;
width:470rpx;
background:#fff;
padding: 20rpx;
height: 200rpx;
right: 0;
left: 15rpx;
bottom: 10rpx;
}
.ActivePerpar{
animation: zhi 1s;
animation-fill-mode: forwards; //保持动画的最后样式
z-index:5;
}
@keyframes zhi{
from{transform: translateY(0);}
to{transform: translateY(-20rpx);height:430rpx;}
}
//如果内容多时，可以将内容的view标签用scroll-view标签代替，自行设置。