問題
在vue3中使用openlayers，添加一個全局控件巡社。全局控件的按鈕比較小椿访，無法展示自定義的按鈕名稱。需要調(diào)整下按鈕的尺寸。但是配置的className中修改的樣式一直不生效戒祠。
原因
沒有將className寫在全局樣式中骇两。
例如在如下代碼中，.custom-full-screen不能放在<style scoped>標(biāo)簽中姜盈，必須放在<style>標(biāo)簽內(nèi)低千。
<template>
<div>
<div ref="sourceRef" class="map-out">
<div ref="screenRef" class="custom-btn-ref"></div>
<div ref="mapRef" class="map-x"></div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import useInitMap from './hooks/useInitMap'
import { FullScreen } from 'ol/control.js'
let mapRef = ref()
let screenRef = ref()
let sourceRef = ref()
const { initMap } = useInitMap()
onMounted(() => {
let map = initMap(mapRef)
let fullScreenCon = new FullScreen({
labelActive: '已開啟全屏',
label: '設(shè)置全屏',
className: 'custom-full-screen',
target: screenRef.value,
source: sourceRef.value
})
map.addControl(fullScreenCon)
})
</script>
<style scoped>
.map-out {
width: 100%;
height: 600px;
background-color: green;
}
.map-x {
width: 80%;
height: 500px;
margin: auto;
}
</style>
<style>
.custom-full-screen button {
width: 6em;
height: 3em;
}
</style>
