uniapp配合colorUI制作简单的信封

ゝ一世哀愁。 2023-01-12 01:59 178阅读 0赞

## uniapp配合colorUI制作简单的信封 ##

没有审美，所以样式比较简陋，背景图可以换成自己想要的样子  
![在这里插入图片描述][20210127180403325.png]  
![在这里插入图片描述][20210127180432804.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0Mjk1NjY3_size_16_color_FFFFFF_t_70]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0Mjk1NjY3_size_16_color_FFFFFF_t_70 1]  
一.先写一个点击事件用来弹出信封。

二.不想写弹出来的效果，所以直接引用了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>

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

四.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标签代替，自行设置。

[20210127180403325.png]: /images/20221119/c0d36edbc722491db209988e5bf01020.png
[20210127180432804.png]: /images/20221119/c6f359dfc2fe461ab5faf40b14144d69.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0Mjk1NjY3_size_16_color_FFFFFF_t_70]: /images/20221119/540b9041e1ea42959b3bb41a721bfe1a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0Mjk1NjY3_size_16_color_FFFFFF_t_70 1]: /images/20221119/daaf51a65cfa472480ab32946182733f.png