generated from thzxcx/vue3
113 lines
2.7 KiB
Vue
113 lines
2.7 KiB
Vue
<!--
|
|
* @Author: zhaojinfeng 121016171@qq.com
|
|
* @Date: 2023-06-25 15:55:08
|
|
* @LastEditors: peerless_hero peerless_hero@outlook.com
|
|
* @LastEditTime: 2023-07-11 02:37:57
|
|
* @FilePath: \uni\packages\confirm\index.vue
|
|
* @Description:
|
|
*
|
|
-->
|
|
<template>
|
|
<view v-show="modelValue" h-100vh w-full w-750rpx relative bg="#818181" overflow-hidden z-1000>
|
|
<view class="th-prompt" w-400rpx text-center rounded-16rpx absolute top="1/3" left="1/2" ml="-200rpx" right-0 bg-white z-1001>
|
|
<view py-32rpx>
|
|
<view color="#3a3a3a" fs-17 font-500>
|
|
{{ title }}
|
|
</view>
|
|
<view v-if="title && content" h-16rpx />
|
|
<view color="#6a6a6a" fs-13 font-400>
|
|
{{ content }}
|
|
</view>
|
|
</view>
|
|
<view flex fs-15 border-t-1rpx border-t-solid border-t="#DCDCDC">
|
|
<view
|
|
v-show="showConfirm"
|
|
class="rounded-lb-16rpx"
|
|
active="bg-#f2f7ff"
|
|
:class="{
|
|
'rounded-rb-16rpx': !showCancel,
|
|
}"
|
|
flex-grow
|
|
color="#3b82f6"
|
|
py-16rpx
|
|
cursor-pointer
|
|
select-none
|
|
@click="confirm"
|
|
>
|
|
{{ confirmText }}
|
|
</view>
|
|
<view v-show="showConfirm && showCancel" w-1rpx bg="#dcdcdc" />
|
|
<view
|
|
v-show="showCancel"
|
|
class="rounded-rb-16rpx"
|
|
active="bg-#f2f7ff"
|
|
color="#6a6a6a"
|
|
flex-grow
|
|
:class="{
|
|
'rounded-lb-16rpx': !showConfirm,
|
|
}"
|
|
py-16rpx
|
|
cursor-pointer
|
|
select-none
|
|
@click="cancel"
|
|
>
|
|
{{ cancelText }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script lang="ts" setup name="Confirm">
|
|
withDefaults(
|
|
defineProps<{
|
|
/** 是否显示 */
|
|
modelValue?: boolean
|
|
/** 标题 */
|
|
title?: string
|
|
/** 内容 */
|
|
content?: string
|
|
/** 确认按钮的默认值 */
|
|
confirmText?: string
|
|
/** 取消按钮的默认值 */
|
|
cancelText?: string
|
|
/** 是否显示确认按钮 */
|
|
showConfirm?: boolean
|
|
/** 是否显示取消按钮 */
|
|
showCancel?: boolean
|
|
}>(),
|
|
{
|
|
modelValue: false,
|
|
confirmText: '确定',
|
|
cancelText: '取消',
|
|
showConfirm: true,
|
|
showCancel: true,
|
|
},
|
|
)
|
|
|
|
const emit = defineEmits<{
|
|
/** 更新modelValue */
|
|
(event: 'update:modelValue', modelValue: boolean): void
|
|
/** 确认事件 */
|
|
(event: 'confirm'): void
|
|
/** 取消事件 */
|
|
(event: 'cancel'): void
|
|
}>()
|
|
|
|
function confirm() {
|
|
emit('update:modelValue', false)
|
|
emit('confirm')
|
|
}
|
|
|
|
function cancel() {
|
|
emit('update:modelValue', false)
|
|
emit('cancel')
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.th-modal {
|
|
box-shadow: 0px 1px 6px 0px rgba(216, 216, 216, 0.5)
|
|
}
|
|
</style>
|