48 lines
1.0 KiB
Vue
48 lines
1.0 KiB
Vue
<template>
|
|
<div >
|
|
<button class="show-btn" @click="show = !show">
|
|
{{ show ? '隐藏关键字' : '显示关键字' }}
|
|
</button>
|
|
<div v-if="show" class="show-content">{{ text }}</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
const props = defineProps({
|
|
text: {
|
|
type: String,
|
|
required: true
|
|
}
|
|
})
|
|
const show = ref(false)
|
|
</script>
|
|
|
|
<style scoped>
|
|
.show-btn {
|
|
padding: 8px 20px;
|
|
margin-top: 10px;
|
|
margin-bottom: -10px;
|
|
background: linear-gradient(90deg, #4f8cff 0%, #38c8ff 100%);
|
|
color: #fff;
|
|
border: none;
|
|
border-radius: 6px;
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
box-shadow: 0 2px 8px rgba(79,140,255,0.15);
|
|
transition: background 0.3s, box-shadow 0.3s;
|
|
}
|
|
.show-btn:hover {
|
|
background: linear-gradient(90deg, #38c8ff 0%, #4f8cff 100%);
|
|
box-shadow: 0 4px 16px rgba(56,200,255,0.18);
|
|
}
|
|
.show-content {
|
|
margin-top: 16px;
|
|
padding: 12px 18px;
|
|
background: #f6faff;
|
|
border-radius: 6px;
|
|
color: #333;
|
|
font-size: 15px;
|
|
box-shadow: 0 1px 4px rgba(79,140,255,0.08);
|
|
}
|
|
</style> |