小鱼开发
53 lines
1.7 KiB
Vue
53 lines
1.7 KiB
Vue
<template>
|
||
<div style="--van-popup-background:transparent;--van-cell-background:transparent;">
|
||
<van-popup :show="showPop" :position="'center'" :style="{ padding: '0' }">
|
||
<div class="pt60 relative">
|
||
<div class="bg-fff ulib-r20 inner30" style="width:90vw;">
|
||
<h3 class="text-center font-34" v-if="title">{{title}}</h3>
|
||
<div class="mt30 scroll-y" style="min-height: 40vh; max-height: 80vh;" v-if="content">
|
||
<div class="font-26" style="line-height: 1.5;" v-html="content"></div>
|
||
</div>
|
||
<div class="mt30" v-if="img">
|
||
<van-image style="display: block;" :src="img"></van-image>
|
||
</div>
|
||
</div>
|
||
<div class="absolute right-0 top-0 mr20" :style="{'margin-top': 0/7.5+'vw'}">
|
||
<van-icon @click="handleClose" name="close" color="#fff" size="24"/>
|
||
</div>
|
||
</div>
|
||
</van-popup>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { defineProps, defineEmits } from 'vue'
|
||
|
||
// 声明组件名称（可选，用于devtools）
|
||
defineOptions({ name: 'PopCode' })
|
||
|
||
// 声明props（Vue 3推荐使用defineProps宏）
|
||
const props = defineProps({
|
||
title: { type: String, default: '' },
|
||
showPop: { type: Boolean, default: false },
|
||
content: { type: String, default: '' },
|
||
img: { type: String, default: '' }
|
||
})
|
||
|
||
// 声明emits事件（与子组件通信）
|
||
const emit = defineEmits(['update:showPop'])
|
||
|
||
// 定义方法（直接在script setup中声明）
|
||
function handleClose() {
|
||
emit('update:showPop', false)
|
||
}
|
||
|
||
function onCountFinish() {
|
||
emit('update:showPop', false)
|
||
}
|
||
|
||
function showCount() {
|
||
// 方法逻辑（根据实际需求补充）
|
||
}
|
||
</script>
|
||
|
||
<style></style> |