fix(数据大屏): 修复三角形组件无法关闭边框问题

This commit is contained in:
wangjiahao 2024-12-02 14:05:08 +08:00
parent 4fac7db590
commit 6df09e3976
2 changed files with 8 additions and 2 deletions

View File

@ -509,6 +509,7 @@ const list = [
borderWidth: 1, borderWidth: 1,
borderStyle: 'solid', borderStyle: 'solid',
borderColor: '#cccccc', borderColor: '#cccccc',
borderActive: true,
backgroundColor: 'rgba(236,231,231,0.1)', backgroundColor: 'rgba(236,231,231,0.1)',
backdropFilter: 'blur(0px)' backdropFilter: 'blur(0px)'
} }
@ -524,6 +525,7 @@ const list = [
height: 200, height: 200,
borderWidth: 1, borderWidth: 1,
borderColor: '#cccccc', borderColor: '#cccccc',
borderActive: true,
backgroundColor: 'rgba(236,231,231,0.1)', backgroundColor: 'rgba(236,231,231,0.1)',
backdropFilter: 'blur(0px)' backdropFilter: 'blur(0px)'
} }

View File

@ -6,14 +6,14 @@
:points="points" :points="points"
:stroke="element.style.borderColor" :stroke="element.style.borderColor"
:fill="element.style.backgroundColor" :fill="element.style.backgroundColor"
:stroke-width="element.style.borderWidth" :stroke-width="borderWidth"
/> />
</svg> </svg>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted, ref, toRefs, watch } from 'vue' import { computed, onMounted, ref, toRefs, watch } from 'vue'
const props = defineProps({ const props = defineProps({
propValue: { propValue: {
@ -51,6 +51,10 @@ onMounted(() => {
draw() draw()
}) })
const borderWidth = computed(() => {
return element.value.style.borderActive ? element.value.style.borderWidth : 0
})
const draw = () => { const draw = () => {
const { width, height } = element.value.style const { width, height } = element.value.style
drawPolygon(width, height) drawPolygon(width, height)