代码拉取完成,页面将自动刷新
一个自定义弹框组件,从上往下弹出,弹出位置基于 外层设置了定位的DOM元素
可设置:宽、高、距离左侧宽度、动画时长、背景色、是否生成一个等高元素撑开父元素
已完成
待完成
属性名 | 说明 | 类型 | 默认值 | 说明 |
---|---|---|---|---|
show | 控制弹框的显示与隐藏 | Boolean | false | 必填 |
height | 高度 传入数字或者字符串都以rpx为单位 | String | Number | '200rpx' | 必填 |
width | 宽度 | String | '100%' | - |
bgColor | 弹框背景色 | String | ‘#fff’ | - |
duration | 弹框动画时长【单位毫秒】 | String | Number | 300 | - |
left | 距离左侧偏移量 | String | Number | 0 | - |
placeholder | 组件默认使用绝对定位,是否生成一个等高元素撑开父元素 | Boolean | false | - |
在pages.json中注册组件
"easycom": {
"autoscan": true,
"custom": {
"h-(.*)": "@/components/h-$1/h-$1.vue",
}
}
<template>
<view class="pages">
<view class="edit-data" @click="isShowEdit = !isShowEdit">{{ isShowEdit ? '隐藏' : '显示' }}</view>
<view v-for="item in list" :key="item" class="item">
<view class="header">
<image src="" />
<view class="middle">
<view class="info">
<view class="name">{{ item.name }}</view>
<view class="props">{{ item.props }}</view>
<view class="is-default" v-if="item.isDefault">hello</view>
</view>
<view class="tips">{{ item.tips }}</view>
</view>
<view class="right-icon">
<view class="edit-icon"></view>
</view>
</view>
<h-popup-box placeholder :show="isShowEdit" height="80">
<view class="footer" :class="{ 'footer-active': isShowEdit }" v-show="isShowEdit">
我是带placeholder属性的弹框,传入placeholder 会撑开父元素的高度
</view>
</h-popup-box>
</view>
<!-- 【注意:card必须设置相对定位 position: relative 】 -->
<view class="card">
<button @click="show1 = !show1">默认宽度</button>
<button @click="show2 = !show2">自定义宽</button>
<button @click="show3 = !show3">自定义位置</button>
<button @click="show4 = !show4">自定义高度</button>
<h-popup-box :show="show1" height="200">h</h-popup-box>
<h-popup-box :show="show2" height="200" width="160rpx" left="185rpx">h</h-popup-box>
<h-popup-box :show="show3" height="100" width="160rpx" left="365rpx">h</h-popup-box>
<h-popup-box :show="show4" height="400">h</h-popup-box>
</view>
</view>
</template>
<script setup>
import { ref } from 'vue'
const isShowEdit = ref(false)
const show1 = ref(false)
const show2 = ref(false)
const show3 = ref(false)
const show4 = ref(false)
const list = ref([
{
id: 1,
name: 'h-popup-box',
props: 'placeholder',
tips: '新增属性@param {boolean} placeholder 是否显示占位符 默认false',
isDefault: true
},
{
id: 2,
name: 'h-popup-box',
props: '',
tips: '方便与二次开发,可以自定义弹窗的样式,比如背景色,宽高,动画时间等等',
isDefault: false
},
{
id: 3,
name: 'h-popup-box',
props: '',
tips: '方便与二次开发,可以自定义弹窗的样式,比如背景色,宽高,动画时间等等',
isDefault: false
},
])
</script>
<style scoped lang="scss">
.pages {
width: 750rpx;
min-height: 100vh;
background-color: #F6F6F6;
padding-top: 20rpx;
font-family: PingFang SC-Medium, PingFang SC;
.edit-data {
margin: 0 0 20rpx 24rpx;
font-size: 30rpx;
font-weight: 500;
color: #0074FC;
}
.item {
width: 100%;
padding: 20rpx 24rpx 24rpx;
background-color: #fff;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 130rpx;
position: relative;
.header {
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
align-items: flex-start;
image {
width: 78rpx;
height: 78rpx;
border-radius: 50%;
margin-right: 14rpx;
background-color: #eee;
}
.middle {
flex: 1;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
.info {
display: flex;
align-items: center;
.name {
font-size: 28rpx;
font-weight: 500;
margin-right: 12rpx;
color: #333333;
max-width: 190rpx;
}
.props {
max-width: 300rpx;
font-size: 26rpx;
font-weight: 500;
color: #666666;
margin-right: 30rpx;
}
.is-default {
width: 54rpx;
height: 26rpx;
background: #FFFFFF;
border-radius: 4rpx 4rpx 4rpx 4rpx;
opacity: 1;
border: 1rpx solid #EF7228;
display: flex;
align-items: center;
justify-content: center;
font-size: 20rpx;
font-weight: 400;
color: #EE7128;
}
}
.tips {
margin-top: 10rpx;
font-size: 26rpx;
font-weight: 500;
color: #666666;
}
}
.right-icon {
width: 50rpx;
min-height: 110rpx;
display: flex;
align-items: center;
margin-left: 50rpx;
margin-right: 50rpx;
.edit-icon {
width: 40rpx;
height: 40rpx;
background-color: #eee;
}
}
}
@keyframes show-edit-animation {
0% {
height: 0;
}
100% {
height: 80rpx;
}
}
.footer-active {
animation: show-edit-animation 0.5s;
}
.footer {
width: 100%;
height: 80rpx;
display: flex;
overflow: hidden;
background-color: #f3b43f;
}
}
.card {
margin: 0 auto;
width: 702rpx;
height: 100rpx;
background: #ffffff;
border-radius: 16rpx 16rpx 16rpx 16rpx;
opacity: 1;
z-index: 1;
padding: 20rpx 0;
margin-top: 20rpx;
padding-bottom: 30rpx;
display: flex;
position: relative;
align-items: center;
button {
flex: 1;
height: 60rpx;
}
}
}
</style>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。