component_ryl_v3 1.1.5 → 1.1.7

package/README.md

@@ -4,7 +4,28 @@ This template should help get you started developing with Vue 3 in Vite. The tem
 
 Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).
 
-# 项目功能介绍
+# 组件介绍
+
+# 头部组件
+    # 使用方法
+    <hand-header
+        :userInfo="userInfo"
+        collapse
+        :defaultActive="menuActive"
+        :menuList="menuList"
+        ref="menuRef"
+    >
+
+    * 组件属性定义
+    {Object} userInfo - 用户信息
+    {Object} menuList - 导航列表（包含name系统名称和list菜单列表）
+    {Object} menuColor - 菜单栏颜色配置（color/activeColor/backgroundColor）
+    {string} defaultActive - 默认选中的菜单路径
+    {boolean} collapse - 是否启用折叠功能
+    {number} width - 侧边栏宽度
+    {number} contentWidth - 内容模块宽度
+    {boolean} showDefaltOpen - 是否默认展开所有菜单项
+
 
 # 询问窗口组件
     # 使用方法

package/dist/component_ryl_v3.js

@@ -382,6 +382,10 @@ const _sfc_main$4 = {
       type: Number,
       default: 180
     },
+    contentWidth: {
+      type: Number,
+      default: 1200
+    },
     userInfo: {
       type: Object,
       default: () => ({})
@@ -402,7 +406,7 @@ const _sfc_main$4 = {
     const isIE = ref(false);
     const hideMenu = ref(false);
     const showFooter = ref(false);
-    const minWidth = ref(0);
+    const minWidth = ref(props.contentWidth);
     const localDefaultActive = ref(props.defaultActive);
     const mainRef = ref(null);
     const completeWidth = computed(() => {
@@ -540,7 +544,7 @@ const _sfc_main$4 = {
     };
     onMounted(() => {
       const windowWidth = window.screen.availWidth;
-      minWidth.value = windowWidth > 1800 ? 1800 - props.width : windowWidth - props.width;
+      minWidth.value = windowWidth > minWidth.value ? minWidth.value - props.width : windowWidth - props.width;
       browser();
       nextTick(() => {
         getMenu();
@@ -662,7 +666,9 @@ const _sfc_main$4 = {
               }),
               createElementVNode("div", _hoisted_7, [
                 createElementVNode("div", _hoisted_8, [
-                  renderSlot(_ctx.$slots, "content")
+                  createElementVNode("div", null, [
+                    renderSlot(_ctx.$slots, "content")
+                  ])
                 ]),
                 showFooter.value ? (openBlock(), createElementBlock("div", {
                   key: 0,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "component_ryl_v3",
   "private": false,
-  "version": "1.1.5",
+  "version": "1.1.7",
   "type": "module",
   "description": "Vue3 login form component with Element Plus",
   "main": "./dist/component_ryl_v3.js",

package/src/App.vue

@@ -4,6 +4,7 @@
     collapse
      :defaultActive="menuActive"
     :menuList="menuList"
+    ref="menuRef"
   >
     <template #headElseTitle>
       <div style="color:#fff;text-align:center;font-size:20px;">
@@ -31,6 +32,7 @@
       </ul>
     </template>
     <template #content>
+      <div class="lll">
       <h6>Tab</h6>
       <hand-tab :list="[{ label: '全部', value: 'all' }, { label: '待处理是的', value: 'pending' }, { label: '已处理', value: 'processed' }]" @getStatus="getStatus" />
       <h6>图片预览</h6>
@@ -40,6 +42,7 @@
       <div>
         <hand-paging :currentPage="handPagingRef.page" :total="handPagingRef.total" :pageSize="handPagingRef.pageSize" :size="handPagingRef.size" @page-change="handlePageChange" />
       </div>
+      <!-- <div v-for="(item,index) in 100">{{index}}</div> -->
       <h6>空数据提示</h6>
       <hand-no-data title="暂无数据" />
       <h6>弹窗</h6>
@@ -69,12 +72,13 @@
       <el-input v-model="inputNumber" v-number="{max:100}" placeholder="请输入"></el-input>
       <span>复制</span><br>
       <el-button v-copy="['这是复制的内容',copyBack]">点击复制</el-button>
+      </div>
     </template>
   </hand-header>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
 import HandHeader from './packages/handHeader/handHeader.vue'
 import HandTab from './packages/handTab/handTab.vue'
 import HandSeeImg from './packages/handSeeImg/handSeeImg.vue'
@@ -214,6 +218,11 @@ const copyBack = (err, success) => {
     }
 }
 //#endregion 自定义指令
-
+//#region 菜单组件
+const menuRef = ref(null)
+onMounted(() => {
+  menuRef.value.getMainHeight()
+})
+//#endregion 菜单组件
 const inputNumber = ref('')
 </script>

package/src/packages/handHeader/handHeader.vue

@@ -64,7 +64,9 @@
       <div class="content_mar">
         <div class="content inner_content">
           <!-- 内容展示区域 -->
-          <slot name="content"></slot>
+          <div>
+            <slot name="content"></slot>
+          </div>
         </div>
         <div class="footer flex flex_col inner_footer" v-html="userInfo.copyRight" v-if="showFooter"></div>
       </div>
@@ -92,6 +94,7 @@ import sidebarItem from './sidebarItem.vue'
  * @property {string} defaultActive - 默认选中的菜单路径
  * @property {boolean} collapse - 是否启用折叠功能
  * @property {number} width - 侧边栏宽度
+ * @property {number} contentWidth - 内容模块宽度
  * @property {Object} userInfo - 用户信息
  * @property {boolean} showDefaltOpen - 是否默认展开所有菜单项
  */
@@ -120,6 +123,10 @@ const props = defineProps({
     type: Number,
     default: 180
   },
+  contentWidth: {
+    type: Number,
+    default: 1200
+  },
   userInfo: {
     type: Object,
     default: () => ({})
@@ -145,7 +152,7 @@ const defaultOpen = ref([])           // 默认打开的菜单
 const isIE = ref(false)               // 是否是ie浏览器
 const hideMenu = ref(false)           // 是否隐藏菜单
 const showFooter = ref(false)         // 效果展示优化
-const minWidth = ref(0)               // 内容模块的默认最小宽度
+const minWidth = ref(props.contentWidth)               // 内容模块的默认最小宽度
 const localDefaultActive = ref(props.defaultActive)  // 本地默认选中菜单
 const mainRef = ref(null)             // main容器引用
 
@@ -364,7 +371,7 @@ const closeIETips = () => {
  */
 onMounted(() => {
   const windowWidth = window.screen.availWidth
-  minWidth.value = windowWidth > 1800 ? (1800 - props.width) : (windowWidth - props.width)
+  minWidth.value = windowWidth > minWidth.value ? (minWidth.value - props.width) : (windowWidth - props.width)
   
   browser()