170 lines
3.1 KiB
Vue
170 lines
3.1 KiB
Vue
|
<!--
|
|||
|
|
@name: index
|
|||
|
|
@author: kahu4
|
|||
|
|
@date: 2023-10-31 15:06
|
|||
|
|
@description：index
|
|||
|
|
@update: 2023-10-31 15:06
|
|||
|
|
-->
|
|||
|
|
<script setup>
|
|||
|
|
import { nextTick, ref, toRefs } from "vue";
|
|||
|
|
import UniPopup from "@/components/uniComponents/UPopup/uni-popup/uni-popup.vue";
|
|||
|
|
|
|||
|
|
/** some javascript code in here */
|
|||
|
|
const emit = defineEmits(['open', 'close'])
|
|||
|
|
/**
|
|||
|
|
* @property {String} title 标题
|
|||
|
|
* @property {String} mode 模式
|
|||
|
|
* @value top 顶部弹出
|
|||
|
|
* @value center 中间弹出
|
|||
|
|
* @value bottom 底部弹出
|
|||
|
|
* @value left 左侧弹出
|
|||
|
|
* @value right 右侧弹出
|
|||
|
|
* @value message 消息提示
|
|||
|
|
* @value dialog 对话框
|
|||
|
|
* @value share 底部分享示例
|
|||
|
|
* @property {Boolean} showCloseable 是否展示关闭按钮
|
|||
|
|
* @property {Boolean} isMaskClick 是否点击masker关闭弹窗
|
|||
|
|
* @event {Function} open 打开弹窗
|
|||
|
|
* @event {Function} close 关闭回调
|
|||
|
|
*/
|
|||
|
|
const props = defineProps({
|
|||
|
|
title: {
|
|||
|
|
type: String,
|
|||
|
|
default: () => ''
|
|||
|
|
},
|
|||
|
|
mode: {
|
|||
|
|
type: String,
|
|||
|
|
default: () => 'bottom'
|
|||
|
|
},
|
|||
|
|
showCloseable: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: () => true
|
|||
|
|
},
|
|||
|
|
isMaskClick: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: () => true
|
|||
|
|
},
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const {title, mode, showCloseable, isMaskClick} = toRefs(props)
|
|||
|
|
|
|||
|
|
const popup = ref()
|
|||
|
|
const isShow = ref(false)
|
|||
|
|
/**
|
|||
|
|
* 打开
|
|||
|
|
*/
|
|||
|
|
const show = () => {
|
|||
|
|
nextTick(() => {
|
|||
|
|
isShow.value = true
|
|||
|
|
popup.value.open()
|
|||
|
|
emit('open')
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 关闭回调
|
|||
|
|
*/
|
|||
|
|
const close = () => {
|
|||
|
|
isShow.value = false
|
|||
|
|
popup.value.close()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handlePopupChange = (e) => {
|
|||
|
|
if (!e.show) emit('close')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
defineExpose({
|
|||
|
|
show,
|
|||
|
|
close
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<UniPopup
|
|||
|
|
ref="popup"
|
|||
|
|
:type="mode"
|
|||
|
|
:is-mask-click="isMaskClick"
|
|||
|
|
background-color="#fff"
|
|||
|
|
@change="handlePopupChange"
|
|||
|
|
class="y-popup"
|
|||
|
|
>
|
|||
|
|
<view class="popup_inner">
|
|||
|
|
<view
|
|||
|
|
class="head"
|
|||
|
|
v-if="title||showCloseable"
|
|||
|
|
>
|
|||
|
|
<view></view>
|
|||
|
|
<view>{{ title }}</view>
|
|||
|
|
<slot name="rightOption">
|
|||
|
|
<view
|
|||
|
|
@click="close"
|
|||
|
|
v-if="showCloseable"
|
|||
|
|
>
|
|||
|
|
<uv-icon
|
|||
|
|
name="close"
|
|||
|
|
color="#000"
|
|||
|
|
size="16"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
</slot>
|
|||
|
|
</view>
|
|||
|
|
<slot></slot>
|
|||
|
|
</view>
|
|||
|
|
<!-- 如果是h5 增加tabbar高度 -->
|
|||
|
|
<!-- <view class="h5-tabbar-height"></view>-->
|
|||
|
|
</UniPopup>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<style
|
|||
|
|
scoped
|
|||
|
|
lang="scss"
|
|||
|
|
>
|
|||
|
|
.popup_inner {
|
|||
|
|
padding: 20rpx 20rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
.head {
|
|||
|
|
padding: 20rpx 0;
|
|||
|
|
font-weight: bolder;
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content {
|
|||
|
|
.tips {
|
|||
|
|
width: 100%;
|
|||
|
|
text-align: center;
|
|||
|
|
font-size: 22rpx;
|
|||
|
|
color: #000;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.option_list_box {
|
|||
|
|
.option_item {
|
|||
|
|
margin: 15rpx 0;
|
|||
|
|
|
|||
|
|
.icon {
|
|||
|
|
margin-right: 30rpx !important;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.button_content {
|
|||
|
|
margin-top: 50rpx;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 80rpx;
|
|||
|
|
background: #ee6d46;
|
|||
|
|
font-size: 40rpx;
|
|||
|
|
color: #fff;
|
|||
|
|
text-align: center;
|
|||
|
|
line-height: 80rpx;
|
|||
|
|
border-radius: 80rpx;
|
|||
|
|
font-weight: bolder;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
</style>
|