br-dionysus 1.1.0 → 1.1.2

package/README.md

@@ -52,8 +52,18 @@
       title="这是标题"
       resize
       @resized="test"
+      @opened="opened"
     >
-      <span>这是一条消息</span>
+      <div class="u-box j-box">
+        <p
+          class="u-table j-table"
+          :style="'height: ' + height + 'px'"
+        >
+          这是一条消息{{ height }}
+        </p>
+        <div>这是干扰元素</div>
+        <div class="u-pa">这是绝对<br/>定位元素</div>
+      </div>
       <template #footer>
         <div class="dialog-footer">
           <el-button @click="dialogVisible = false">取消</el-button>
@@ -69,16 +79,40 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { MDialog } from 'packages/MDialog'
+import { useRemainingSpace } from 'packages/index'
 
 const dialogVisible = ref<boolean>(false)
 
 const test = (size: { width: number, height: number }) => {
-  console.log('size', size)
+  // console.log('size', size)
+}
+
+const { height, init } = useRemainingSpace('j-box', 'j-table')
+const opened = () => {
+  init()
 }
 </script>
 
 <style scoped lang="scss">
+.u-box {
+  //position: relative;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  border: 1px solid #000;
+  flex-direction: column;
+
+  .u-table {
+    border: 1px solid red;
+    box-sizing: border-box;
+  }
 
+  .u-pa {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+  }
+}
 </style>
 
 
@@ -892,11 +926,11 @@ const options: Option[] = [{
 <template>
   <div>
     <MTable :data="tableData" @pasteData="pasteData" sole="date">
-      <el-table-column label="Date" prop="date" />
-      <el-table-column prop="address" label="Address"> </el-table-column>
+      <el-table-column label="Date" prop="date"/>
+      <el-table-column prop="address" label="Address"></el-table-column>
       <el-table-column prop="name" label="name">
         <template #default="scope">
-          <el-input v-model="scope.row.name"> </el-input>
+          <el-input v-model="scope.row.name"></el-input>
         </template>
       </el-table-column>
     </MTable>
@@ -904,43 +938,44 @@ const options: Option[] = [{
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref } from 'vue'
+
 interface User {
   date: string;
   name: string;
   address: string;
   tag: string;
 }
+
 const tableData = ref(<User[]>[
   {
-    date: "2016-05-03",
-    name: "Tom",
-    address: "No. 189, Grove St, Los Angeles",
-    tag: "Home",
+    date: '2016-05-03',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+    tag: 'Home'
   },
   {
-    date: "2016-05-02",
-    name: "Tom",
-    address: "No. 189, Grove St, Los Angeles",
-    tag: "Office",
+    date: '2016-05-02',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+    tag: 'Office'
   },
   {
-    date: "2016-05-04",
-    name: "Tom",
-    address: "No. 189, Grove St, Los Angeles",
-    tag: "Home",
+    date: '2016-05-04',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+    tag: 'Home'
   },
   {
-    date: "2016-05-01",
-    name: "Tom",
-    address: "No. 189, Grove St, Los Angeles",
-    tag: "Office",
-  },
+    date: '2016-05-01',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+    tag: 'Office'
+  }
 ])
 
 const pasteData = (obj: any, data: any) => {
   tableData.value = data
-
 }
 </script>
 
@@ -1947,6 +1982,7 @@ const list = ref<{ name: string, className: string }[]>([
 |--------------|--------------------------------|-------------|
 | height       | 计算之后的高度                        | ref<number> |
 | tableCovered | 重新进行计算高度 (如弹窗表 抽屉表 等默认无DOM时使用) | function    |
+| init         | 重新初始化 (如弹窗表 抽屉表 等默认无DOM时使用)    | function    |