修改input带单位的样式

examples/src/App.vue

@@ -1,7 +1,9 @@
 <template>
   <div id="app" class="demo-container">
     <el-form :model="form" :rules="rules" class="el-row demo-ruleForm" ref="formRef">
-      <Breadcrumb />
+      <!-- 当前示例项目未配置路由相关信息--暂时注释 -->
+      <!-- <Breadcrumb /> -->
+
       <section class="demo-section">
         <h2>页面提示框集合</h2>
         <PromptText text='这是一个提示框' :type="1" />

packages/Breadcrumb/src/index.vue

@@ -40,64 +40,64 @@ export default {
       // if (this.$route.meta.hideBreadcrumb) return [];
 
       const crumbs = [
-        {
+        // {
-          path:{
+        //   path:{
-            path:'/',
+        //     path:'/',
-            query:{uid: "2300"},
+        //     query:{uid: "2300"},
-            params:{}
+        //     params:{}
-          },
+        //   },
-          title:'首页'
+        //   title:'首页'
-        },
+        // },
-        {
+        // {
-          path:{
+        //   path:{
-            path: "/agent/siteList",
+        //     path: "/agent/siteList",
-            query:{uid: "2300"},
+        //     query:{uid: "2300"},
-            params:{}
+        //     params:{}
-          },
+        //   },
-          title:"站点列表"
+        //   title:"站点列表"
-        },
+        // },
       ];
-      // let currentRoute = this.$route;
+      let currentRoute = this.$route;
 
-      // 递归查找所有父级路由
+      //// 递归查找所有父级路由
-      // while (currentRoute) {
+      while (currentRoute) {
-      //   // 获取匹配的路由记录
+        // 获取匹配的路由记录
-      //   // const matchedRoute = this.$router.options.routes.find(
+        // const matchedRoute = this.$router.options.routes.find(
-      //   //   r => r.name === currentRoute.name
+        //   r => r.name === currentRoute.name
-      //   // );
+        // );
 
-      //   // 构建包含完整参数的对象
+        // 构建包含完整参数的对象
-      //   const routeWithParams = {
+        const routeWithParams = {
-      //     path: currentRoute.path,
+          path: currentRoute.path,
-      //     query: currentRoute.query,
+          query: currentRoute.query,
-      //     params: currentRoute.params
+          params: currentRoute.params
-      //   };
+        };
 
-      //   crumbs.unshift({
+        crumbs.unshift({
-      //     path: routeWithParams,
+          path: routeWithParams,
-      //     title: this.getTitle(currentRoute)
+          title: this.getTitle(currentRoute)
-      //   });
+        });
 
-      //   // 通过 meta.breadcrumbParent 查找父级路由
+        // 通过 meta.breadcrumbParent 查找父级路由
-      //   if (currentRoute.meta.breadcrumbParent) {
+        if (currentRoute.meta.breadcrumbParent) {
-      //     currentRoute = this.$router.options.routes.find(
+          currentRoute = this.$router.options.routes.find(
-      //       r => r.name === currentRoute.meta.breadcrumbParent
+            r => r.name === currentRoute.meta.breadcrumbParent
-      //     );
+          );
           
-      //     // 如果找到了父路由，创建一个模拟的$route对象
+          // 如果找到了父路由，创建一个模拟的$route对象
-      //     if (currentRoute) {
+          if (currentRoute) {
-      //       currentRoute = {
+            currentRoute = {
-      //         ...currentRoute,
+              ...currentRoute,
-      //         path: currentRoute.path,
+              path: currentRoute.path,
-      //         query: this.$route.query, // 保留当前查询参数
+              query: this.$route.query, // 保留当前查询参数
-      //         params: this.$route.params, // 保留当前路由参数
+              params: this.$route.params, // 保留当前路由参数
-      //         meta: currentRoute.meta || {}
+              meta: currentRoute.meta || {}
-      //       };
+            };
-      //     }
+          }
-      //   } else {
+        } else {
-      //     currentRoute = null;
+          currentRoute = null;
-      //   }
+        }
-      // }
+      }
 
       return crumbs;
     },

packages/GuipInput/src/index.vue

@@ -28,7 +28,7 @@
       <!-- <el-button slot="append" v-if="hasBtn"  type="primary" @click="$emit('enter',value)">搜索</el-button> -->
     </el-input>
     <!-- 单位 -->
-    <span class="unit" v-if="unit">{{ unit }}</span>
+    <span class="guip-input-unit" v-if="unit">{{ unit }}</span>
   </el-form-item>
 
 </template>
@@ -136,15 +136,4 @@ export default {
     },
   }
 }
-</script>
+</script>
-<style lang="scss" scoped>
-.unit {
-  position: absolute;
-  right: 12px;
-  /* 根据需要调整位置 */
-  top: 50%;
-  transform: translateY(-50%);
-  pointer-events: none;
-  /* 防止单位文本影响输入框的点击事件 */
-}
-</style>

packages/index.js

@@ -79,7 +79,6 @@ const install = function (Vue,options={}) {
     Vue.component(component.name, component)
   })
 }
-console.log(install,'install===');
 
 export  {
   GuipButton,

packages/styles/component.scss

@@ -382,16 +382,14 @@
 // 自定义下拉选择框组件 end
 
 // input 组件 start
-.guip-input {
+.guip-input-unit {
-    .unit {
+    position: absolute;
-        position: absolute;
+    right: 12px;
-        right: 12px;
+    /* 根据需要调整位置 */
-        /* 根据需要调整位置 */
+    top: 50%;
-        top: 50%;
+    transform: translateY(-50%);
-        transform: translateY(-50%);
+    pointer-events: none;
-        pointer-events: none;
+    /* 防止单位文本影响输入框的点击事件 */
-        /* 防止单位文本影响输入框的点击事件 */
-    }
 }
 
 // input 组件 end