Merge pull request '优化划过按钮可以自定义宽高等样式' (#58) from zq-dropInput into master

Reviewed-on: #58

src/components/HoverButton.vue

@@ -1,7 +1,14 @@
 <template>
   <button
     class="hover-button"
-    :class="{ 'hover-effect': hoverEffect }"
+    :class="{ 'hover-effect': hoverEffect, [type]: type }"
+    :style="{
+      width: width,
+      height: height,
+      minWidth: minWidth,
+      minHeight: minHeight,
+      ...customStyle
+    }"
     @mouseenter="isHovered = true"
     @mouseleave="isHovered = false"
     @click="handleClick"
@@ -10,11 +17,12 @@
     <!-- 图片/图标部分 -->
     <div class="button-icon">
       <slot name="icon">
-        <img
+        <!-- <img
           v-if="defaultIcon || hoverIcon"
           :src="isHovered && hoverIcon ? hoverIcon : defaultIcon"
           :alt="iconAlt"
-        />
+        /> -->
+        <SvgIcon1  v-if="defaultIcon || hoverIcon" :iconPath="defaultIcon" activeColor="#006AFF" :isActive="isHovered"/>
         <span v-else class="default-icon-placeholder"></span>
       </slot>
     </div>
@@ -32,6 +40,8 @@
 </template>
 
 <script>
+import SvgIcon1 from './SvgIcon1.vue';
+
 export default {
   name: 'HoverButton',
   props: {
@@ -75,14 +85,42 @@ export default {
       type: String,
       default: 'default',
       validator: value => ['default', 'primary', 'danger', 'success', 'warning'].includes(value)
+    },
+    // 自定义宽度
+    width: {
+      type: String,
+      default: null
+    },
+    // 自定义高度
+    height: {
+      type: String,
+      default: null
+    },
+    // 最小宽度
+    minWidth: {
+      type: String,
+      default: null
+    },
+    // 最小高度
+    minHeight: {
+      type: String,
+      default: null
+    },
+    // 自定义样式对象
+    customStyle: {
+      type: Object,
+      default: () => ({})
     }
   },
+  components:{
+    SvgIcon1
+  },
   data() {
     return {
       isHovered: false
     }
   },
-  methods:{
+  methods: {
     handleClick(e) {
       e.preventDefault();
       e.stopPropagation();
@@ -108,11 +146,12 @@ export default {
   outline: none;
   background: #F2F3F5;
   border: 1px solid #BABDC2;
+  box-sizing: border-box; /* 确保宽高包含padding和border */
 }
 
 .hover-button.hover-effect:hover {
-  background: #F2F7FF;
+  background: #F2F7FF !important;
-  border-color: #006AFF;
+  border-color: #006AFF !important;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 

src/components/SliderMenu.vue

@@ -105,7 +105,6 @@ export default {
     updateCurrentMenu() {
       const result = this.findMenuItemByPath(this.menuData, this.$route.path);
       this.currentMenuItem = result?.item;
-      console.log(this.currentMenuItem,'currentMenuItem==');
     },
     findMenuItemByPath(menuItems, targetPath, parent = null) {
       for (const item of menuItems) {

src/views/elementGroups.vue

@@ -208,9 +208,15 @@
                 </div>
                 <div class="ele-item">
                     <label for="">独特按钮：可以自定义划过时 图标图片、文字颜色</label>
-                    <hover-button button-text="上传文件" :default-icon="require('../assets/upLoad_grey.svg')"
+                    <hover-button button-text="默认样式" :default-icon="require('../assets/upLoad_grey.svg')"
                         :hover-icon="require('../assets/upLoad_active.svg')" default-text-color="#23242B"
                         hover-text-color="#006AFF" @click="btnClick" />
+                    <!-- 宽高单独传递 、其余统一放置在 customStyle 中-->
+                    <hover-button button-text="自定义" :default-icon="require('@/assets/site/addIcon.svg')"
+                        :hover-icon="require('@/assets/upLoad_active.svg')" default-text-color="#626573"
+                        hover-text-color="#006AFF"  width="110px" height="32px"
+                        :customStyle="{ fontSize: '12px', background: '#fff', borderRadius: '2px', borderColor: '#DFE2E6' }" />
+
                 </div>
                 <div class="ele-item">
                     <label for="">独特按钮单独写样式：</label>
@@ -289,7 +295,13 @@
 
                 <div class="ele-item">
                     <label for="">开关L</label>
-                    <GuipSwitch :modelValue="switchValue" activeText="开启" inactiveText="关闭" @change="onSwitchChange">
+                    <!-- active-value 开启状态的值 -->
+                    <!-- inactive-value 关闭状态的值 -->
+                    <GuipSwitch :modelValue="switchValue" activeText="默认类型" inactiveText="关闭" @change="onSwitchChange">
+                    </GuipSwitch>
+                    <GuipSwitch :modelValue="switchValue1" :active-value="1" :inactive-value="0" activeText="number" @change="onSwitchChange">
+                    </GuipSwitch>
+                    <GuipSwitch :modelValue="switchValue2" active-value="0" inactive-value="1" activeText="string" @change="onSwitchChange">
                     </GuipSwitch>
                 </div>
                 <div class="flex ele-item">
@@ -305,8 +317,7 @@
                         <!--触发 真实下拉操作 -->
                         <!-- valueKey="id" displayKey="name" 不添加时，默认取值 value、label-->
                         <CustomDropdown slot="formDom" ref="dropDomain" width="100%" v-model="form.domainSuffix1"
-                            :options="domainOptions" @change="changeSelectIp" 
+                            :options="domainOptions" @change="changeSelectIp" placeholder="请选择">
-                            placeholder="请选择">
                             <template #normal>
                                 <div class="flex flex-between noraml-jump">
                                     <div class="left">
@@ -384,7 +395,7 @@
                         </template>
                         <template #item="{ item }">
                             <div class="flex-between">
-                                    <p>测试一下自定义内容{{ item. id}} + {{ item.label }}</p>
+                                <p>测试一下自定义内容{{ item.id }} + {{ item.label }}</p>
                                 <p>易烊千玺/田栩宁</p>
                             </div>
                         </template>
@@ -422,7 +433,8 @@
             </div>
             <div class="flex ele-item">
                 <label for="">一些功能集合</label>
-                <GuipButton type="primary" @click="openDialog">打开弹框</GuipButton>
+                <GuipButton type="primary" :btnstyle="{ width: '300px' }" @click="openDialog">打开弹框（标题巨左、按钮居右）</GuipButton>
+                <GuipButton type="primary" :btnstyle="{ width: '300px' }" @click="openDialog1">打开弹框（标题巨中、按钮居中）</GuipButton>
                 <GuipButton type="primary" @click="openLoading" size="page">展示加载动画 2s</GuipButton>
             </div>
 
@@ -456,6 +468,14 @@
                     <p>这是一个自定义内容的弹框。</p>
                 </div>
             </GuipDialog>
+            <GuipDialog type="center" :dialogVisible="dialogVisible1" title="自定义标题" :show-close-button="false"
+                :show-cancel-button="showCancelButton" @confirm="handleConfirm" @cancel="handleCancel"
+                @close="handleClose" @dialogVisibleChange="dialogVisibleChange">
+                <!-- 自定义内容 -->
+                <div>
+                    <p>这是一个自定义内容的弹框。</p>
+                </div>
+            </GuipDialog>
         </div>
     </div>
 </template>
@@ -477,7 +497,6 @@ import HoverButton from '@/components/HoverButton.vue'
 import GuipFormItem from '@/components/GuipFormItem.vue'
 import SvgIcon from '@/components/SvgIcon.vue';
 
-// import { mapState } from 'vuex'
 
 export default {
     name: 'HomeView',
@@ -557,6 +576,9 @@ export default {
             timer: null,
             date1: '',
             switchValue: true,
+            switchValue1: 1,
+            switchValue2: '0',
+            dialogVisible1: false,
             dialogVisible: false,//是否展示弹框
             showCancelButton: true, // 控制是否显示取消按钮
             showCloseButton: true, // 控制是否显示关闭按钮
@@ -851,7 +873,7 @@ export default {
         changeSelectIp(item) {
             // 选中项
             // this.selectedItem1 = { ...item };
-            console.log(item, this.form.domainSuffix,this.form.domainSuffix1, '选中的项-值-');
+            console.log(item, this.form.domainSuffix, this.form.domainSuffix1, '选中的项-值-');
         },
         arraySpanMethod({ row, column, rowIndex, columnIndex }) {
             console.log(row, column);
@@ -969,6 +991,9 @@ export default {
         openDialog() {
             this.dialogVisible = true;
         },
+        openDialog1() {
+            this.dialogVisible1 = true;
+        },
         // 确认按钮事件
         handleConfirm() {
             this.$message.success('点击了确认按钮');
@@ -978,6 +1003,7 @@ export default {
         handleCancel() {
             this.$message.warning('点击了取消按钮');
             this.dialogVisible = false;
+            this.dialogVisible1 = false;
         },
         // 关闭弹框事件
         handleClose() {
@@ -1054,7 +1080,6 @@ export default {
             console.log(value, 'value===qinghcu');
         },
         getList() {
-            console.log('zhixingle--');
             const dataList = rules();
             dataList.forEach((item) => {
                 if (item.field === "id") {
@@ -1117,6 +1142,7 @@ export default {
         }
     }
 }
+
 // 组合框样式 start
 // input drop组合使用
 .combo-formItem {
@@ -1138,11 +1164,13 @@ export default {
             border-radius: 2px 0 0 2px;
         }
     }
+
     .self-drop-wrap {
         position: absolute;
         z-index: 1;
         width: 100%;
     }
+
     .appendDrop {
         height: 38px;
         align-items: center;
@@ -1155,6 +1183,7 @@ export default {
         text-overflow: ellipsis;
         white-space: nowrap;
         overflow: hidden;
+
         &:hover {
             border: 1px solid #006AFF;
         }