2023-05-12 08:41:33 +00:00
|
|
|
<template>
|
2023-06-02 10:06:09 +00:00
|
|
|
<dv-border-box-13 ref="boder" :color="color">
|
2023-05-22 03:45:23 +00:00
|
|
|
<div class="slot">
|
|
|
|
<slot></slot>
|
|
|
|
</div>
|
|
|
|
</dv-border-box-13>
|
|
|
|
</template>
|
2023-05-12 08:41:33 +00:00
|
|
|
|
2023-05-22 03:45:23 +00:00
|
|
|
<script setup lang="ts">
|
|
|
|
import { ref, watch } from "vue";
|
2023-06-02 10:06:09 +00:00
|
|
|
const prop = defineProps({
|
|
|
|
color: {
|
|
|
|
type: Array,
|
|
|
|
default: () => [],
|
|
|
|
},
|
|
|
|
});
|
2023-05-22 03:45:23 +00:00
|
|
|
let boder = ref();
|
|
|
|
const resetWH = () => {
|
|
|
|
boder ? boder.value.initWH() : "";
|
|
|
|
};
|
2023-05-12 08:41:33 +00:00
|
|
|
//暴露子组件方法
|
2023-05-22 03:45:23 +00:00
|
|
|
defineExpose({ resetWH });
|
|
|
|
</script>
|
2023-05-12 08:41:33 +00:00
|
|
|
|
2023-05-22 03:45:23 +00:00
|
|
|
<style module>
|
|
|
|
.container {
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
<style scoped>
|
|
|
|
.slot {
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
box-sizing: border-box;
|
|
|
|
display: flex;
|
|
|
|
justify-content: center;
|
|
|
|
align-items: center;
|
|
|
|
padding: 10px 10px 10px 10px;
|
|
|
|
}
|
|
|
|
.border-box-content {
|
|
|
|
}
|
|
|
|
</style>
|