更新记录

1.0.3（2022-07-12） 下载此版本

修改弹窗不居中的问题

1.0.2（2022-06-01） 下载此版本

修复了数据类型警告

1.0.1（2022-05-23） 下载此版本

dankke

平台兼容性

dankePop

介绍

{dankePop 一个自定义Pop,}

安装教程

1. 下载压缩包，与通常的自定义组件导入方式相同
2. 导入
3. 导入

使用说明

1. 组件参数说明
   • position //弹出的开始位置 类型: String, 可选 right、left、top、bottom、middle（默认返回middle）
   • shows //控制弹出层的显示 类型: Boolean, 必填
   • mask //遮罩层时间 类型: Number, 1 点击遮罩隐藏弹出层,0 遮罩层点击没反应
   • change //控制动画的样式 类型: Boolean, 必填
   • @lows //点击遮罩事件

2. 组件使用示例

   
   <template>
   <view class="content">
       <pops position="bottom" mask="1" @lows="closeTopPop" :change="move" :shows="popTopShow">
           <view class="pops">
               <image src="../../static/icon1.png"></image>
               <view>{{pop}}</view>
               <view>{{email}}</view>
           </view>
       </pops>
       <view class="body " >
           <button @click="closeTopPop(1)">点我打开</button>
       </view>
   </view>
   </template> 
   <script>
   import pops from '../component/pop.vue'
   export default {
       components: {
           pops,
       },
       data() {
           return {
               pop: '这是一个弹窗',
               email:'问题反馈 ： danke0526@163.com',
               popTopShow: false,
               move: true
           }
       },
       methods: {
           closeTopPop(id) { //关闭弹窗
               if (id == 1) {
                   this.move = true
                   this.popTopShow = true
               } else {
                   this.move = false
                   setTimeout(() => {
                       this.popTopShow = false
                   }, 300)
               }
           },
       }
   }
   </script>
   <style>
   .content,.body ,.pops{
       display: flex;
       flex-direction: column;
   
   }
   .content,.body {
       height: 100vh;
       width: 100vw;
   }
   .body{
       justify-content: center;
       align-items: center;
   }
   .pops {
       width: 400rpx;
       height: 600rpx;
       background-color: #FFFFFF;
       align-items: center;
       justify-content: center;
       border-radius: 20rpx;
   }
   .pops image{
       width: 200rpx;
       height: 200rpx;
       margin: 20rpx 0 50rpx 0;
       box-shadow: #333333 0 0 10rpx; 
   }
   .pops{
       font-size: 20rpx;
       font-weight: 600;
   }

</style>

#### 2022-05-23
#### danke0526@163.com
#### Copyright©2017-2022.暴风蛋壳DANKEBIBI  Rights Reserved