feat: 一些技巧记录

src/utils/tools.ts

@@ -21,7 +21,14 @@ export const url = {
      * @returns {Record<string, any>} { x: 1, y: 2, z: 3 }
      */
     getUrlToParams: (url: string = window.location.href): Record<string, any> => {
-        const urlParams = new URLSearchParams(url.split('?')[1]);
+        /**
+         * 匹配?与#之间的字符串，即url后面的参数
+         * 例1: http://127.0.0.1:8080/?x=1&y=2#/index
+         * 例2: http://127.0.0.1:8080/#/index?x=1&y=2
+         * 匹配上面两种格式的url参数（主要是#号位置不同导致的判断不同）
+         */
+        const match = url.match(/\?(.+?)(?:#|$)/);
+        const urlParams = new URLSearchParams(match ? match[1] : '');
         const params = {};
         for (const [key, value] of urlParams.entries()) {
             params[key] = value;

src/views/demo/cssDemo.vue

@@ -11,6 +11,12 @@
                 <div class="child1">子元素3</div>
             </div>
         </el-card>
+
+        <el-card header="border渐变实现">
+            <div class="input-box">
+                <div class="input" />
+            </div>
+        </el-card>
     </base-container>
 </template>
 
@@ -32,4 +38,25 @@
         background: yellow;
     }
 }
+
+.input-box {
+    box-sizing: border-box;
+    position: relative;
+    width: 100%;
+    height: 70px;
+    padding: 15px;
+}
+.input {
+    box-sizing: border-box;
+    border-radius: 8px;
+    overflow: hidden;
+    display: block;
+    width: 100%;
+    height: 100%;
+    border: 2px solid transparent;
+    background:
+        linear-gradient(white, white) padding-box,
+        linear-gradient(45deg, #f6855c, #e29cf9, #5cacfe) border-box;
+    padding-left: 5px;
+}
 </style>