使用van-popup封装的popup弹出层

最新推荐文章于 2024-07-26 10:14:44 发布

程序媛兮兮

最新推荐文章于 2024-07-26 10:14:44 发布

阅读量2.4k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/di970411/article/details/123800160

版权

html部分

<van-popup v-model="show" round position="bottom" :style="{ height: `${hight}%` }" >
      <div class="popup_content">
        <div class="title">
          <div class="content">
            <div class="text">{{title}}</div>
            <img :src="closeIcon" alt="" @click="show=false">
          </div>
        </div>
        <slot></slot>
      </div>
    </van-popup>
在这里插入代码片

JS部分

export default{
  props: {
	 hight: Number|String,
	 title:String
  },
  data(){
  	return{
  		show:false,
  		closeIcon:require('../assets/img/schoolclose_icon.png')
  	}
  }
  
}

css样式

.popup_content{
	width：100%;
	height: 100%;
    display: flex;
    flex-direction: column;
    .title{
      height:1rem;
      padding:0.22rem 0rem;
      .content{
        height: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        img{
          width: 0.32rem;
          height: 0.32rem;
          position: absolute;
          right:0.3rem;
          top: 50%;
          margin-top: -0.16rem;
        }
      }
    }
}