郑州服务设计公司网站,色块的网站,温州品牌网站建设,做网站平台难在哪里看了下市场的代码#xff0c;要么写的不怎么好#xff0c;要么过于复杂。于是把市场的代码下下来了自己改。200行代码撸了个弹出层组件。兼容H5和APP。
功能#xff1a; 1)只支持上下左右4个方向的弹层不支持侧边靠齐 2)不对屏幕边界适配 3)支持弹层外边点击自动隐藏 4)支持…看了下市场的代码要么写的不怎么好要么过于复杂。于是把市场的代码下下来了自己改。200行代码撸了个弹出层组件。兼容H5和APP。
功能 1)只支持上下左右4个方向的弹层不支持侧边靠齐 2)不对屏幕边界适配 3)支持弹层外边点击自动隐藏 4)支持3种内容模式 1. 弹出提示文本 2. slot内容占位 3. 支持菜单模式 BWT弹层外点击自动隐藏基于unibest框架的页面模板技术这里就不放代码了自己想想怎么弄 。提示使用事件总线模式放出的代码也提示了部分用法。 效果H5下 APP下 小程序下 组件代码
!--自定义弹出层/菜单组件1)只支持上下左右4个方向的弹层不支持侧边靠齐2)不对屏幕边界适配3)支持弹层外边点击自动隐藏4)支持3种内容模式1. 文本为内容2. slot内容占位3. 菜单模式Author Jim 24/10/08--
templateviewview classcc_popper click.stophandleClickslot/slotviewclasscc_popper_layer border-2rpx border-solidclick.stop() {}:style[data.layerStyle,{visibility: data.isShow ? visible : hidden,opacity: data.isShow ? 1 : 0,color: props.textColor,backgroundColor: props.bgColor,borderColor: var(--cc-box-border)}]view classpx-20rpx py-10rpx v-ifcontent.length 0 || $slots.content!-- 内容模式 --slot namecontent{{ content }}/slot/viewview v-else classpy-5rpx px-10rpxtemplate v-for(conf, index) in props.menu :keyindexview v-ifindex 0 classbg-box-border opacity-70 h-2rpx w-full /viewclasspx-20rpx py-10rpx menu-item my-5rpxclick() {conf.callback()data.isShow false}{{ conf.title }}/view/template/viewview:class[w-0, h-0, z-9, absolute, popper-arrow-on- props.direction]:style[data.arrowStyle]//view/view/view
/template
script langts setup
import { CSSProperties } from vue
import * as utils from /utils
let instanceconst { screenWidth } uni.getSystemInfoSync()const pixelUnit screenWidth / 750 // rpx-px比例基数export interface MenuConf {icon?: string // 指示图标title: string // 菜单文本callback: () void // 点击事件
}const props withDefaults(defineProps{textColor?: string // 指定内部文本颜色bgColor?: stringborderColor?: stringcontent?: string // 可以指定文本content或者指定 slot content来显示弹窗内容menu?: ArrayMenuConf // 下拉菜单模式direction?: top | bottom | left | right // 弹层位置alwaysShow: boolean}(),{textColor: var(--cc-txt),bgColor: var(--cc-box-fill), // 默认弹框色borderColor: var(--cc-box-border), // 默认弹框边框色content: ,menu: () [],direction: top,alwaysShow: false}
)const data reactive{isShow: booleanlayerStyle: CSSProperties // CSS定义一层够了arrowStyle: CSSProperties
}({isShow: false,layerStyle: {},arrowStyle: {}
})onMounted(() {instance getCurrentInstance()if (props.alwaysShow) {nextTick(() handleClick())}
})onUnmounted(() {if (!props.alwaysShow) {utils.off(utils.Global.CC_GLOBAL_CLICK, hideLayer) // 移除全局点击监听}
})const hideLayer (event: MouseEvent) {data.isShow falseutils.off(utils.Global.CC_GLOBAL_CLICK, hideLayer)
}const handleClick async () {if (data.isShow) {if (props.alwaysShow) {return}utils.off(utils.Global.CC_GLOBAL_CLICK, hideLayer)return (data.isShow false)}const rects: UniApp.NodeInfo[] await utils.getRectAll(.cc_popper,.cc_popper_layer, instance)const srcRect: UniApp.NodeInfo rects[0]const layerRect: UniApp.NodeInfo rects[1]data.arrowStyle[border props.direction.charAt(0).toUpperCase() props.direction.slice(1)] 10rpx solid var(--cc-box-border)switch (props.direction) {case top: {data.layerStyle.left ${(srcRect.width - layerRect.width) / 2}pxdata.layerStyle.bottom ${srcRect.height 16 * pixelUnit}pxdata.arrowStyle.left ${layerRect.width / 2 - 12 * pixelUnit}pxconsole.log(data.arrowStyle.left)break}case bottom: {data.layerStyle.left ${(srcRect.width - layerRect.width) / 2}pxdata.layerStyle.top ${srcRect.height 16 * pixelUnit}pxdata.arrowStyle.left ${layerRect.width / 2 - 12 * pixelUnit}pxbreak}case left: {data.layerStyle.right ${srcRect.width 16 * pixelUnit}pxdata.layerStyle.top ${(srcRect.height - layerRect.height) / 2}pxdata.arrowStyle.top ${layerRect.height / 2 - 12 * pixelUnit}pxbreak}case right: {data.layerStyle.left ${srcRect.width 16 * pixelUnit}pxdata.layerStyle.top ${(srcRect.height - layerRect.height) / 2}pxdata.arrowStyle.top ${layerRect.height / 2 - 12 * pixelUnit}pxbreak}}data.isShow trueif (!props.alwaysShow) {utils.on(utils.Global.CC_GLOBAL_CLICK, hideLayer)}
}
/script
style langscss scoped
$arrow-size: 12rpx;
$arrow-offset: -12rpx;.cc_popper {position: relative;display: inline-block;
}.cc_popper_layer {position: absolute;display: inline-block;white-space: nowrap;border-radius: 10rpx;transition: opacity 0.3s ease-in-out;
}.popper-arrow-on-top {bottom: $arrow-offset;border-right: $arrow-size solid transparent;border-left: $arrow-size solid transparent;
}.popper-arrow-on-right {left: $arrow-offset;border-top: $arrow-size solid transparent;border-bottom: $arrow-size solid transparent;
}.popper-arrow-on-left {right: $arrow-offset;border-top: $arrow-size solid transparent;border-bottom: $arrow-size solid transparent;
}.popper-arrow-on-bottom {top: $arrow-offset;border-right: $arrow-size solid transparent;border-left: $arrow-size solid transparent;
}.menu-item {:active {background-color: #88888840;}
}
/style测试页面
templateview classtext-txt w-full h-fullview消息/viewview classx-items-between px-200rpx pt-100rpxcc-popper directionleft content说啥好呢 alwaysShowview classw-100rpxu-button text左边 //view/cc-popperview classw-100rpxcc-popper directiontop content向上看 alwaysShowview classw-100rpxu-button text上面 //view/cc-poppercc-popper directionbottom content下边也没有 alwaysShowview classw-100rpx mt-20rpxu-button text下面 //view/cc-popper/viewcc-popper directionright content右边找找 alwaysShowview classw-100rpxu-button text右边 //view/cc-popper/viewview classx-items-between px-150rpx pt-400rpxcc-popper alwaysShowview classw-200rpxu-button shapecircle text烎 //viewtemplate #contenttext classtext-100rpx/text/template/cc-poppercc-popper alwaysShow :menudata.menudiv classw-100rpx h-100rpx bg-red/div/cc-popper/view/view
/template
script langts setup
import { MenuConf } from /components/ccframe/cc-popper.vueconst data reactive{menu: ArrayMenuConf
}({menu: [{title: 口袋1,callback: () {console.log(糖果)}},{title: 口袋2,callback: () {console.log(退出系统)}},{title: 口袋3,callback: () {console.log(空的)}}]
})
/script对了菜单的图标支持还没写。等用到的时候再加上去代码放这存档后面再更新:
