template
先創建一個通用的頁面結構
<template><div class="v-bubble-bg"></div>
</template>
js
在JS中先對需要用的數據進行定義：
可以是參數，也可以是data
<script setup>const props = defineProps({bgColor: {type: String,default: '#000000'},bgWidth: {type: [Number, String],default: '100%'},bgHeight: {type: [Number, String],default: '100%'},color: {type: String,default: 'rgba(255,255,255,.6)'}})const pdata = reactive({size: '12px'})
</script>
css
<style lang="scss" scoped>.v-bubble-bg {background-color: v-bind(bgColor);width: v-bind(bgWidth);height: v-bind(bgHeight);overflow: hidden;position: absolute;left: 0;top: 0;font-size:v-bind('pdata.size')}
</style>
運行結果
運行結果
)
