feat: 增加vue2版本的边框组件，添加vueuse依赖 样式微调

刘嘉威

2023-07-10 58f406ecca89ca7027392d97e28a906c476515f3

 src/components/item-wrap/item-wrap.vue

@@ -1,4 +1,5 @@
<script setup lang="ts">

import BorderBox13 from "@/components/datav/border-box-13";

const props = withDefaults(

  defineProps<{

    // 标题

@@ -8,29 +9,23 @@
    title: "",

  }

);



</script>



<template>

  <div class="item-wrap">

  <BorderBox13>

    <div class="item_title" v-if="title !== ''">

      <div class="zuo"></div>

      <span class="title-inner"> &nbsp;&nbsp;{{title}}&nbsp;&nbsp; </span>

      <span class="title-inner"> &nbsp;&nbsp;{{ title }}&nbsp;&nbsp; </span>

      <div class="you"></div>

    </div>

    <div

      :class="title !== '' ? 'item_title_content' : 'item_title_content_def'"

    >

      <slot></slot>

    </div>

  </div>

      <slot></slot></div

  ></BorderBox13>

</template>



<style scoped lang="scss">

.item-wrap {

  // border: red dashed 1px;

  box-sizing: border-box;

}

$item-title-height: 38px;

$item_title_content-height: calc(100% - 38px);



@@ -70,6 +65,11 @@
  }

}



:deep(.dv-border-box-content)  {

    box-sizing: border-box;

    padding: 6px 16px 0px;

  }



.item_title_content {

  height: $item_title_content-height;

}