generated from thzxcx/vue3
feat: 反馈组件/Alert
This commit is contained in:
53
packages/alert/index.vue
Normal file
53
packages/alert/index.vue
Normal file
@ -0,0 +1,53 @@
|
||||
<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 color="#3a3a3a" fs-32 font-400 my-48rpx>
|
||||
{{ content }}
|
||||
</View>
|
||||
<View fs-32>
|
||||
<View bg="#f2f7ff" h-1rpx mx-32rpx />
|
||||
<View
|
||||
active="bg-#f2f7ff"
|
||||
flex-grow
|
||||
color="#3b82f6"
|
||||
py-16rpx
|
||||
cursor-pointer
|
||||
select-none
|
||||
rounded-b-16rpx
|
||||
@click="confirm"
|
||||
>
|
||||
{{ confirmText }}
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="Alert">
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
/** 是否显示 */
|
||||
modelValue?: boolean
|
||||
/** 内容 */
|
||||
content?: string
|
||||
/** 确认按钮的默认值 */
|
||||
confirmText?: string
|
||||
}>(),
|
||||
{
|
||||
modelValue: false,
|
||||
confirmText: '确定',
|
||||
},
|
||||
)
|
||||
|
||||
const emit = defineEmits<{
|
||||
/** 更新modelValue */
|
||||
(event: 'update:modelValue', modelValue: boolean): void
|
||||
/** 确认事件 */
|
||||
(event: 'confirm'): void
|
||||
}>()
|
||||
|
||||
function confirm() {
|
||||
emit('update:modelValue', false)
|
||||
emit('confirm')
|
||||
}
|
||||
</script>
|
Reference in New Issue
Block a user