81 lines
2.0 KiB
Vue
81 lines
2.0 KiB
Vue
<!--
|
|
* @Author: micky
|
|
* @Date: 2024-08-13 11:41:56
|
|
* @LastEditors: micky
|
|
* @LastEditTime: 2024-10-13 16:00:37
|
|
* @FilePath: \chargingpile-uniapp\src\components\widgets\confirm-popup\confirm-popup.vue
|
|
-->
|
|
<template>
|
|
<root-portal>
|
|
<u-popup
|
|
:show="popupShow"
|
|
round="10"
|
|
:closeOnClickOverlay="false"
|
|
:closeable="false"
|
|
:safeAreaInsetBottom="false"
|
|
mode="center"
|
|
>
|
|
<view class="confirm-popup">
|
|
<slot name="content" v-if="slotContent" />
|
|
<view class="text" v-else>{{ contentText }}</view>
|
|
<view class="btn">
|
|
<view @click="cancel">取消</view>
|
|
<view @click="confirm">确定</view>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
</root-portal>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { ref, watch, useSlots } from 'vue'
|
|
const props = defineProps({
|
|
contentText: String,
|
|
modelValue: {
|
|
type: Boolean,
|
|
defalut: false
|
|
}
|
|
})
|
|
const emits = defineEmits(['update:modelValue', 'confirm'])
|
|
const slots = useSlots()
|
|
const slotContent = computed(() => slots.content)
|
|
|
|
const popupShow = ref(false)
|
|
const cancel = () => {
|
|
popupShow.value = false
|
|
emits('update:modelValue', false)
|
|
}
|
|
const confirm = () => {
|
|
popupShow.value = false
|
|
emits('confirm')
|
|
emits('update:modelValue', false)
|
|
}
|
|
watch(
|
|
() => props.modelValue,
|
|
(val: boolean) => {
|
|
if (val) popupShow.value = val
|
|
}
|
|
)
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.confirm-popup {
|
|
@apply w-[600rpx];
|
|
.text {
|
|
@apply w-full text-center px-[20rpx] py-[40rpx];
|
|
}
|
|
.btn {
|
|
@apply h-[36px] my-2 border-t border-[#FAFAFA] flex justify-center items-center;
|
|
view {
|
|
@apply flex-1 text-center;
|
|
}
|
|
view:nth-of-type(1) {
|
|
@apply border-r border-[#D7D7D7];
|
|
}
|
|
view:nth-of-type(2) {
|
|
@apply text-primary;
|
|
}
|
|
}
|
|
}
|
|
</style>
|