n20-common-lib 1.3.4 → 1.3.7

package/src/components/Empty/img/search.svg

@@ -1,73 +1,73 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="351px" height="350px" viewBox="0 0 351 350" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>-mockplus-</title>
-    <defs>
-        <linearGradient x1="50%" y1="100%" x2="50%" y2="0%" id="linearGradient-1">
-            <stop stop-color="#B4B8BF" stop-opacity="0" offset="0%"></stop>
-            <stop stop-color="#B4B8BF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50%" y1="100%" x2="50%" y2="0%" id="linearGradient-2">
-            <stop stop-color="#B4B8BF" stop-opacity="0" offset="0%"></stop>
-            <stop stop-color="#B4B8BF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50%" y1="100%" x2="50%" y2="0%" id="linearGradient-3">
-            <stop stop-color="#B4B8BF" stop-opacity="0" offset="0%"></stop>
-            <stop stop-color="#B4B8BF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50%" y1="100%" x2="50%" y2="0%" id="linearGradient-4">
-            <stop stop-color="#B4B8BF" stop-opacity="0" offset="0%"></stop>
-            <stop stop-color="#B4B8BF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="100%" y1="49.8792597%" x2="0%" y2="49.8911111%" id="linearGradient-5">
-            <stop stop-color="#B4B8BF" stop-opacity="0" offset="0%"></stop>
-            <stop stop-color="#B4B8BF" stop-opacity="0.911806468" offset="91.1806468%"></stop>
-            <stop stop-color="#B4B8BF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="100%" y1="49.8218849%" x2="0%" y2="49.839368%" id="linearGradient-6">
-            <stop stop-color="#B4B8BF" stop-opacity="0" offset="0%"></stop>
-            <stop stop-color="#B4B8BF" stop-opacity="0.911806468" offset="91.1806468%"></stop>
-            <stop stop-color="#B4B8BF" offset="100%"></stop>
-        </linearGradient>
-    </defs>
-    <g id="反馈" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="反馈:6" transform="translate(-480.000000, -7137.000000)">
-            <g id="查找失败" transform="translate(480.062500, 7137.000000)">
-                <rect id="矩形备份-4" x="0" y="0" width="350" height="350"></rect>
-                <g id="编组-17" transform="translate(0.000000, 48.854669)">
-                    <path d="M0,229.032236 C43.3705512,211.365569 101.703885,202.532236 175,202.532236 C248.296115,202.532236 306.629449,211.365569 350,229.032236" id="路径-19" fill="url(#linearGradient-1)" opacity="0.16"></path>
-                    <path d="M242,154.532236 L276.428932,120.103303 C280.334175,116.198061 286.665825,116.198061 290.571068,120.103303 L325,154.532236 L325,154.532236" id="路径-22备份-2" fill="url(#linearGradient-2)" opacity="0.26"></path>
-                    <path d="M49,103.032236 L75.9289322,76.1033035 C79.8341751,72.1980606 86.1658249,72.1980606 90.0710678,76.1033035 L117,103.032236 L117,103.032236" id="路径-22" fill="url(#linearGradient-3)" opacity="0.26"></path>
-                    <path d="M24,133.532236 L41.9289322,115.603303 C45.8341751,111.698061 52.1658249,111.698061 56.0710678,115.603303 L74,133.532236 L74,133.532236" id="路径-22备份" fill="url(#linearGradient-4)" opacity="0.26"></path>
-                    <path d="M211.644511,82.808351 L234.479246,212.31057 C235.342376,217.205619 232.073859,221.873545 227.17881,222.736674 L182.965519,230.53168 L112.286519,230.53168 L90.0207536,104.253901 C89.1576244,99.3588522 92.426141,94.6909267 97.3211897,93.8277975 L201.218408,75.5079148 C206.113456,74.6447856 210.781382,77.9133022 211.644511,82.808351 Z" id="形状结合" fill="#D7DAE0"></path>
-                    <path d="M114,86.0322357 L208.837242,86.0322357 L208.837242,86.0322357 L228.5,106.753023 L228.5,221.532236 C228.5,226.502798 224.470563,230.532236 219.5,230.532236 L114,230.532236 C109.029437,230.532236 105,226.502798 105,221.532236 L105,95.0322357 C105,90.0616729 109.029437,86.0322357 114,86.0322357 Z" id="矩形" fill="#E6E8ED"></path>
-                    <path d="M176.25,172.532236 C178.59721,172.532236 180.5,174.435025 180.5,176.782236 C180.5,179.129446 178.59721,181.032236 176.25,181.032236 L123.25,181.032236 C120.90279,181.032236 119,179.129446 119,176.782236 C119,174.435025 120.90279,172.532236 123.25,172.532236 L176.25,172.532236 Z M204.75,149.032236 C207.09721,149.032236 209,150.935025 209,153.282236 C209,155.629446 207.09721,157.532236 204.75,157.532236 L123.25,157.532236 C120.90279,157.532236 119,155.629446 119,153.282236 C119,150.935025 120.90279,149.032236 123.25,149.032236 L204.75,149.032236 Z M204.75,125.532236 C207.09721,125.532236 209,127.435025 209,129.782236 C209,132.129446 207.09721,134.032236 204.75,134.032236 L123.25,134.032236 C120.90279,134.032236 119,132.129446 119,129.782236 C119,127.435025 120.90279,125.532236 123.25,125.532236 L204.75,125.532236 Z M176.25,102.032236 C178.59721,102.032236 180.5,103.935025 180.5,106.282236 C180.5,108.629446 178.59721,110.532236 176.25,110.532236 L123.25,110.532236 C120.90279,110.532236 119,108.629446 119,106.282236 C119,103.935025 120.90279,102.032236 123.25,102.032236 L176.25,102.032236 Z" id="形状结合" fill="#F0F2F5"></path>
-                    <path d="M208.837242,86.0322357 L228.5,106.753023 L214.837242,106.753023 C211.523534,106.753023 208.837242,104.066731 208.837242,100.753023 L208.837242,86.0322357 L208.837242,86.0322357 Z" id="路径-23" fill="#F0F2F5"></path>
-                    <ellipse id="椭圆形备份-8" fill="url(#linearGradient-5)" opacity="0.16" cx="174.5" cy="232.532236" rx="75" ry="3.5"></ellipse>
-                    <ellipse id="椭圆形备份-7" fill="url(#linearGradient-6)" opacity="0.16" cx="274.25" cy="248.532236" rx="61.75" ry="3.5"></ellipse>
-                    <g id="编组-2" transform="translate(209.980711, 0.000000)">
-                        <g id="编组" transform="translate(28.391326, 30.018205) rotate(-39.000000) translate(-28.391326, -30.018205) translate(13.129386, 3.750868)">
-                            <path d="M16.9513495,29.2667748 C17.0380857,35.1526238 18.733652,39.678259 22.0380485,42.8436804 C25.342445,46.0091019 28.1710555,47.9348376 30.5238802,48.6208874 C21.982891,53.5533565 15.5048339,53.8236059 11.0897089,49.4316357 C6.6745838,45.0396655 8.62846401,38.3180452 16.9513495,29.2667748 Z" id="路径-7" fill="#DFE2E8"></path>
-                            <path d="M18.0671562,0 C17.2512856,5.49741605 17.5730291,10.0475784 19.0323867,13.650487 C20.4917442,17.2533956 23.1458298,22.0334322 26.9946432,27.990597 C20.8899091,30.1880418 16.3758687,33.3461648 13.452522,37.4649662 C10.5291753,41.5837676 9.74157094,45.5726575 11.0897089,49.4316357 C0.947468484,35.4896014 -2.23798152,24.5749446 1.53335886,16.6876651 C5.30469925,8.80038563 10.815965,3.2378306 18.0671562,0 Z" id="路径-6" fill="#E6E8ED"></path>
-                        </g>
-                    </g>
-                    <g id="编组-3" transform="translate(40.269295, 142.861705)">
-                        <g id="编组-2" transform="translate(26.225755, 25.638209) rotate(42.000000) translate(-26.225755, -25.638209) translate(3.894772, 11.245503)">
-                            <path d="M0,8.95632788 C2.83859648,16.6673225 6.70126665,22.0521098 11.5880105,25.1106898 C18.9181263,29.6985598 27.7953656,29.686447 34.1565173,25.8830633 C38.3972852,23.3474742 41.8991012,19.9371172 44.6619654,15.6519923 C40.0210361,16.3106281 35.1389734,14.5723171 30.0157771,10.4370595 C24.8925808,6.30180178 21.7370578,2.82278196 20.549208,0 C14.1546164,3.76437538 9.7556126,6.02084246 7.35219646,6.76940123 C4.94878033,7.51796 2.49804817,8.24693555 0,8.95632788 Z" id="路径-8" fill="#E6E8ED"></path>
-                            <path d="M24.5787352,17.9494053 C27.5405541,20.223599 30.8721807,21.1464947 34.573615,20.7180921 C38.2750492,20.2896896 41.6378327,18.6009897 44.6619654,15.6519923 C39.3144689,22.7037572 34.4296987,26.7975894 30.0076546,27.9334887 C25.5856106,29.0693881 21.6534943,29.0693881 18.2113057,27.9334887 C21.4706154,27.7471206 23.5930919,26.5017934 24.5787352,24.1975069 C25.5643784,21.8932205 25.5643784,19.8105199 24.5787352,17.9494053 Z" id="路径-9" fill="#DFE2E8"></path>
-                        </g>
-                    </g>
-                    <g id="objects/element/-readingglass" transform="translate(166.220000, 165.099736)">
-                        <path d="M33.21,0 C51.5513765,0 66.42,14.8686235 66.42,33.21 C66.42,51.5513765 51.5513765,66.42 33.21,66.42 C14.8686235,66.42 0,51.5513765 0,33.21 C0,14.8686235 14.8686235,0 33.21,0 Z M33.21,7.38 C18.9444849,7.38 7.38,18.9444849 7.38,33.21 C7.38,47.4755151 18.9444849,59.04 33.21,59.04 C47.4755151,59.04 59.04,47.4755151 59.04,33.21 C59.04,18.9444849 47.4755151,7.38 33.21,7.38 Z" id="形状结合" fill="#C9CDD4"></path>
-                        <g id="镜片透明度30%" opacity="0.299079" transform="translate(7.380000, 7.380000)" fill="#F2F7FF">
-                            <circle id="椭圆形" cx="25.83" cy="25.83" r="25.83"></circle>
-                        </g>
-                        <rect id="矩形" fill="#C9CDD4" transform="translate(64.226994, 67.609494) rotate(-45.000000) translate(-64.226994, -67.609494) " x="60.5369936" y="49.9282436" width="7.38" height="35.3625" rx="3.53625"></rect>
-                        <rect id="矩形" fill="#B4B8BF" transform="translate(70.110000, 73.492500) rotate(-45.000000) translate(-70.110000, -73.492500) " x="64.575" y="59.655" width="11.07" height="27.675" rx="3.53625"></rect>
-                        <rect id="矩形" fill="#FFFFFF" transform="translate(47.886336, 33.741336) rotate(-315.000000) translate(-47.886336, -33.741336) " x="46.963836" y="29.128836" width="1.845" height="9.225" rx="0.9225"></rect>
-                        <rect id="矩形" fill="#FFFFFF" transform="translate(50.066541, 36.879472) rotate(-315.000000) translate(-50.066541, -36.879472) " x="48.990291" y="28.7307223" width="2.1525" height="16.2975" rx="0.9225"></rect>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="351px" height="350px" viewBox="0 0 351 350" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>-mockplus-</title>
+    <defs>
+        <linearGradient x1="50%" y1="100%" x2="50%" y2="0%" id="linearGradient-1">
+            <stop stop-color="#B4B8BF" stop-opacity="0" offset="0%"></stop>
+            <stop stop-color="#B4B8BF" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="100%" x2="50%" y2="0%" id="linearGradient-2">
+            <stop stop-color="#B4B8BF" stop-opacity="0" offset="0%"></stop>
+            <stop stop-color="#B4B8BF" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="100%" x2="50%" y2="0%" id="linearGradient-3">
+            <stop stop-color="#B4B8BF" stop-opacity="0" offset="0%"></stop>
+            <stop stop-color="#B4B8BF" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="100%" x2="50%" y2="0%" id="linearGradient-4">
+            <stop stop-color="#B4B8BF" stop-opacity="0" offset="0%"></stop>
+            <stop stop-color="#B4B8BF" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="100%" y1="49.8792597%" x2="0%" y2="49.8911111%" id="linearGradient-5">
+            <stop stop-color="#B4B8BF" stop-opacity="0" offset="0%"></stop>
+            <stop stop-color="#B4B8BF" stop-opacity="0.911806468" offset="91.1806468%"></stop>
+            <stop stop-color="#B4B8BF" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="100%" y1="49.8218849%" x2="0%" y2="49.839368%" id="linearGradient-6">
+            <stop stop-color="#B4B8BF" stop-opacity="0" offset="0%"></stop>
+            <stop stop-color="#B4B8BF" stop-opacity="0.911806468" offset="91.1806468%"></stop>
+            <stop stop-color="#B4B8BF" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="反馈" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="反馈:6" transform="translate(-480.000000, -7137.000000)">
+            <g id="查找失败" transform="translate(480.062500, 7137.000000)">
+                <rect id="矩形备份-4" x="0" y="0" width="350" height="350"></rect>
+                <g id="编组-17" transform="translate(0.000000, 48.854669)">
+                    <path d="M0,229.032236 C43.3705512,211.365569 101.703885,202.532236 175,202.532236 C248.296115,202.532236 306.629449,211.365569 350,229.032236" id="路径-19" fill="url(#linearGradient-1)" opacity="0.16"></path>
+                    <path d="M242,154.532236 L276.428932,120.103303 C280.334175,116.198061 286.665825,116.198061 290.571068,120.103303 L325,154.532236 L325,154.532236" id="路径-22备份-2" fill="url(#linearGradient-2)" opacity="0.26"></path>
+                    <path d="M49,103.032236 L75.9289322,76.1033035 C79.8341751,72.1980606 86.1658249,72.1980606 90.0710678,76.1033035 L117,103.032236 L117,103.032236" id="路径-22" fill="url(#linearGradient-3)" opacity="0.26"></path>
+                    <path d="M24,133.532236 L41.9289322,115.603303 C45.8341751,111.698061 52.1658249,111.698061 56.0710678,115.603303 L74,133.532236 L74,133.532236" id="路径-22备份" fill="url(#linearGradient-4)" opacity="0.26"></path>
+                    <path d="M211.644511,82.808351 L234.479246,212.31057 C235.342376,217.205619 232.073859,221.873545 227.17881,222.736674 L182.965519,230.53168 L112.286519,230.53168 L90.0207536,104.253901 C89.1576244,99.3588522 92.426141,94.6909267 97.3211897,93.8277975 L201.218408,75.5079148 C206.113456,74.6447856 210.781382,77.9133022 211.644511,82.808351 Z" id="形状结合" fill="#D7DAE0"></path>
+                    <path d="M114,86.0322357 L208.837242,86.0322357 L208.837242,86.0322357 L228.5,106.753023 L228.5,221.532236 C228.5,226.502798 224.470563,230.532236 219.5,230.532236 L114,230.532236 C109.029437,230.532236 105,226.502798 105,221.532236 L105,95.0322357 C105,90.0616729 109.029437,86.0322357 114,86.0322357 Z" id="矩形" fill="#E6E8ED"></path>
+                    <path d="M176.25,172.532236 C178.59721,172.532236 180.5,174.435025 180.5,176.782236 C180.5,179.129446 178.59721,181.032236 176.25,181.032236 L123.25,181.032236 C120.90279,181.032236 119,179.129446 119,176.782236 C119,174.435025 120.90279,172.532236 123.25,172.532236 L176.25,172.532236 Z M204.75,149.032236 C207.09721,149.032236 209,150.935025 209,153.282236 C209,155.629446 207.09721,157.532236 204.75,157.532236 L123.25,157.532236 C120.90279,157.532236 119,155.629446 119,153.282236 C119,150.935025 120.90279,149.032236 123.25,149.032236 L204.75,149.032236 Z M204.75,125.532236 C207.09721,125.532236 209,127.435025 209,129.782236 C209,132.129446 207.09721,134.032236 204.75,134.032236 L123.25,134.032236 C120.90279,134.032236 119,132.129446 119,129.782236 C119,127.435025 120.90279,125.532236 123.25,125.532236 L204.75,125.532236 Z M176.25,102.032236 C178.59721,102.032236 180.5,103.935025 180.5,106.282236 C180.5,108.629446 178.59721,110.532236 176.25,110.532236 L123.25,110.532236 C120.90279,110.532236 119,108.629446 119,106.282236 C119,103.935025 120.90279,102.032236 123.25,102.032236 L176.25,102.032236 Z" id="形状结合" fill="#F0F2F5"></path>
+                    <path d="M208.837242,86.0322357 L228.5,106.753023 L214.837242,106.753023 C211.523534,106.753023 208.837242,104.066731 208.837242,100.753023 L208.837242,86.0322357 L208.837242,86.0322357 Z" id="路径-23" fill="#F0F2F5"></path>
+                    <ellipse id="椭圆形备份-8" fill="url(#linearGradient-5)" opacity="0.16" cx="174.5" cy="232.532236" rx="75" ry="3.5"></ellipse>
+                    <ellipse id="椭圆形备份-7" fill="url(#linearGradient-6)" opacity="0.16" cx="274.25" cy="248.532236" rx="61.75" ry="3.5"></ellipse>
+                    <g id="编组-2" transform="translate(209.980711, 0.000000)">
+                        <g id="编组" transform="translate(28.391326, 30.018205) rotate(-39.000000) translate(-28.391326, -30.018205) translate(13.129386, 3.750868)">
+                            <path d="M16.9513495,29.2667748 C17.0380857,35.1526238 18.733652,39.678259 22.0380485,42.8436804 C25.342445,46.0091019 28.1710555,47.9348376 30.5238802,48.6208874 C21.982891,53.5533565 15.5048339,53.8236059 11.0897089,49.4316357 C6.6745838,45.0396655 8.62846401,38.3180452 16.9513495,29.2667748 Z" id="路径-7" fill="#DFE2E8"></path>
+                            <path d="M18.0671562,0 C17.2512856,5.49741605 17.5730291,10.0475784 19.0323867,13.650487 C20.4917442,17.2533956 23.1458298,22.0334322 26.9946432,27.990597 C20.8899091,30.1880418 16.3758687,33.3461648 13.452522,37.4649662 C10.5291753,41.5837676 9.74157094,45.5726575 11.0897089,49.4316357 C0.947468484,35.4896014 -2.23798152,24.5749446 1.53335886,16.6876651 C5.30469925,8.80038563 10.815965,3.2378306 18.0671562,0 Z" id="路径-6" fill="#E6E8ED"></path>
+                        </g>
+                    </g>
+                    <g id="编组-3" transform="translate(40.269295, 142.861705)">
+                        <g id="编组-2" transform="translate(26.225755, 25.638209) rotate(42.000000) translate(-26.225755, -25.638209) translate(3.894772, 11.245503)">
+                            <path d="M0,8.95632788 C2.83859648,16.6673225 6.70126665,22.0521098 11.5880105,25.1106898 C18.9181263,29.6985598 27.7953656,29.686447 34.1565173,25.8830633 C38.3972852,23.3474742 41.8991012,19.9371172 44.6619654,15.6519923 C40.0210361,16.3106281 35.1389734,14.5723171 30.0157771,10.4370595 C24.8925808,6.30180178 21.7370578,2.82278196 20.549208,0 C14.1546164,3.76437538 9.7556126,6.02084246 7.35219646,6.76940123 C4.94878033,7.51796 2.49804817,8.24693555 0,8.95632788 Z" id="路径-8" fill="#E6E8ED"></path>
+                            <path d="M24.5787352,17.9494053 C27.5405541,20.223599 30.8721807,21.1464947 34.573615,20.7180921 C38.2750492,20.2896896 41.6378327,18.6009897 44.6619654,15.6519923 C39.3144689,22.7037572 34.4296987,26.7975894 30.0076546,27.9334887 C25.5856106,29.0693881 21.6534943,29.0693881 18.2113057,27.9334887 C21.4706154,27.7471206 23.5930919,26.5017934 24.5787352,24.1975069 C25.5643784,21.8932205 25.5643784,19.8105199 24.5787352,17.9494053 Z" id="路径-9" fill="#DFE2E8"></path>
+                        </g>
+                    </g>
+                    <g id="objects/element/-readingglass" transform="translate(166.220000, 165.099736)">
+                        <path d="M33.21,0 C51.5513765,0 66.42,14.8686235 66.42,33.21 C66.42,51.5513765 51.5513765,66.42 33.21,66.42 C14.8686235,66.42 0,51.5513765 0,33.21 C0,14.8686235 14.8686235,0 33.21,0 Z M33.21,7.38 C18.9444849,7.38 7.38,18.9444849 7.38,33.21 C7.38,47.4755151 18.9444849,59.04 33.21,59.04 C47.4755151,59.04 59.04,47.4755151 59.04,33.21 C59.04,18.9444849 47.4755151,7.38 33.21,7.38 Z" id="形状结合" fill="#C9CDD4"></path>
+                        <g id="镜片透明度30%" opacity="0.299079" transform="translate(7.380000, 7.380000)" fill="#F2F7FF">
+                            <circle id="椭圆形" cx="25.83" cy="25.83" r="25.83"></circle>
+                        </g>
+                        <rect id="矩形" fill="#C9CDD4" transform="translate(64.226994, 67.609494) rotate(-45.000000) translate(-64.226994, -67.609494) " x="60.5369936" y="49.9282436" width="7.38" height="35.3625" rx="3.53625"></rect>
+                        <rect id="矩形" fill="#B4B8BF" transform="translate(70.110000, 73.492500) rotate(-45.000000) translate(-70.110000, -73.492500) " x="64.575" y="59.655" width="11.07" height="27.675" rx="3.53625"></rect>
+                        <rect id="矩形" fill="#FFFFFF" transform="translate(47.886336, 33.741336) rotate(-315.000000) translate(-47.886336, -33.741336) " x="46.963836" y="29.128836" width="1.845" height="9.225" rx="0.9225"></rect>
+                        <rect id="矩形" fill="#FFFFFF" transform="translate(50.066541, 36.879472) rotate(-315.000000) translate(-50.066541, -36.879472) " x="48.990291" y="28.7307223" width="2.1525" height="16.2975" rx="0.9225"></rect>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
 </svg>

package/src/components/Empty/index.vue

@@ -1,147 +1,147 @@
-<template>
-  <div class="n20-empty">
-    <img
-      :src="src || imgSrc"
-      :style="{ height: `${height}px`, width: `${width}px` }"
-    />
-    <slot name="content"></slot>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'Empty',
-  props: {
-    type: {
-      type: String,
-      default: 'empty'
-    },
-    src: {
-      type: String,
-      default: ''
-    },
-    height: {
-      type: Number,
-      default: 351
-    },
-    width: {
-      type: Number,
-      default: 351
-    }
-  },
-  data() {
-    return {
-      imgSrc: undefined
-    }
-  },
-  watch: {
-    type: {
-      handler(vn) {
-        switch (vn) {
-          case 'empty':
-            import('./img/empty.svg').then((res) => {
-              this.imgSrc = res.default
-            })
-            break
-          case 'abnormal':
-            import('./img/abnormal.svg').then((res) => {
-              this.imgSrc = res.default
-            })
-            break
-          case 'relevant':
-            import('./img/relevant.svg').then((res) => {
-              this.imgSrc = res.default
-            })
-            break
-          case 'dispose':
-            import('./img/dispose.svg').then((res) => {
-              this.imgSrc = res.default
-            })
-            break
-          case 'general':
-            import('./img/general.svg').then((res) => {
-              this.imgSrc = res.default
-            })
-            break
-          case 'network':
-            import('./img/network.svg').then((res) => {
-              this.imgSrc = res.default
-            })
-            break
-          case 'search':
-            import('./img/search.svg').then((res) => {
-              this.imgSrc = res.default
-            })
-            break
-          case 'lock':
-            import('./img/lock.svg').then((res) => {
-              this.imgSrc = res.default
-            })
-            break
-          case '404':
-            import('./img/404.png').then((res) => {
-              this.imgSrc = res.default
-            })
-            break
-          case '400':
-            import('./img/400.svg').then((res) => {
-              this.imgSrc = res.default
-            })
-            break
-          case '401':
-            import('./img/401.svg').then((res) => {
-              this.imgSrc = res.default
-            })
-            break
-          case '403':
-            import('./img/403.svg').then((res) => {
-              this.imgSrc = res.default
-            })
-            break
-          case '405':
-            import('./img/405.svg').then((res) => {
-              this.imgSrc = res.default
-            })
-            break
-          case '901':
-            import('./img/901.svg').then((res) => {
-              this.imgSrc = res.default
-            })
-            break
-          case '902':
-            import('./img/902.svg').then((res) => {
-              this.imgSrc = res.default
-            })
-            break
-          case '903':
-            import('./img/903.svg').then((res) => {
-              this.imgSrc = res.default
-            })
-            break
-          case '904':
-            import('./img/904.svg').then((res) => {
-              this.imgSrc = res.default
-            })
-            break
-          case '905':
-            import('./img/905.svg').then((res) => {
-              this.imgSrc = res.default
-            })
-            break
-          case '906':
-            import('./img/906.svg').then((res) => {
-              this.imgSrc = res.default
-            })
-            break
-          case '907':
-            import('./img/907.svg').then((res) => {
-              this.imgSrc = res.default
-            })
-            break
-        }
-      },
-      immediate: true
-    }
-  }
-}
-</script>
+<template>
+  <div class="n20-empty">
+    <img
+      :src="src || imgSrc"
+      :style="{ height: `${height}px`, width: `${width}px` }"
+    />
+    <slot name="content"></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Empty',
+  props: {
+    type: {
+      type: String,
+      default: 'empty'
+    },
+    src: {
+      type: String,
+      default: ''
+    },
+    height: {
+      type: Number,
+      default: 351
+    },
+    width: {
+      type: Number,
+      default: 351
+    }
+  },
+  data() {
+    return {
+      imgSrc: undefined
+    }
+  },
+  watch: {
+    type: {
+      handler(vn) {
+        switch (vn) {
+          case 'empty':
+            import('./img/empty.svg').then((res) => {
+              this.imgSrc = res.default
+            })
+            break
+          case 'abnormal':
+            import('./img/abnormal.svg').then((res) => {
+              this.imgSrc = res.default
+            })
+            break
+          case 'relevant':
+            import('./img/relevant.svg').then((res) => {
+              this.imgSrc = res.default
+            })
+            break
+          case 'dispose':
+            import('./img/dispose.svg').then((res) => {
+              this.imgSrc = res.default
+            })
+            break
+          case 'general':
+            import('./img/general.svg').then((res) => {
+              this.imgSrc = res.default
+            })
+            break
+          case 'network':
+            import('./img/network.svg').then((res) => {
+              this.imgSrc = res.default
+            })
+            break
+          case 'search':
+            import('./img/search.svg').then((res) => {
+              this.imgSrc = res.default
+            })
+            break
+          case 'lock':
+            import('./img/lock.svg').then((res) => {
+              this.imgSrc = res.default
+            })
+            break
+          case '404':
+            import('./img/404.png').then((res) => {
+              this.imgSrc = res.default
+            })
+            break
+          case '400':
+            import('./img/400.svg').then((res) => {
+              this.imgSrc = res.default
+            })
+            break
+          case '401':
+            import('./img/401.svg').then((res) => {
+              this.imgSrc = res.default
+            })
+            break
+          case '403':
+            import('./img/403.svg').then((res) => {
+              this.imgSrc = res.default
+            })
+            break
+          case '405':
+            import('./img/405.svg').then((res) => {
+              this.imgSrc = res.default
+            })
+            break
+          case '901':
+            import('./img/901.svg').then((res) => {
+              this.imgSrc = res.default
+            })
+            break
+          case '902':
+            import('./img/902.svg').then((res) => {
+              this.imgSrc = res.default
+            })
+            break
+          case '903':
+            import('./img/903.svg').then((res) => {
+              this.imgSrc = res.default
+            })
+            break
+          case '904':
+            import('./img/904.svg').then((res) => {
+              this.imgSrc = res.default
+            })
+            break
+          case '905':
+            import('./img/905.svg').then((res) => {
+              this.imgSrc = res.default
+            })
+            break
+          case '906':
+            import('./img/906.svg').then((res) => {
+              this.imgSrc = res.default
+            })
+            break
+          case '907':
+            import('./img/907.svg').then((res) => {
+              this.imgSrc = res.default
+            })
+            break
+        }
+      },
+      immediate: true
+    }
+  }
+}
+</script>

package/src/components/Expandable/index.vue

@@ -1,49 +1,49 @@
-<template>
-  <div class="n20-form-expandable">
-    <div class="n20-title flex-box flex-lr flex-v">
-      <slot name="title">
-        <span>{{ title }}</span>
-      </slot>
-      <div>
-        <slot name="tips"></slot>
-        <span v-if="showExpand" class="n20-tips" @click="expand = !expand">
-          <span>{{ expand ? '收起' : '展开' }}</span
-          ><i
-            class="el-icon-arrow-right m-l-ss"
-            :class="{ expand: expand }"
-          ></i>
-        </span>
-      </div>
-    </div>
-    <el-collapse-transition v-if="showExpand">
-      <div v-show="expand">
-        <slot></slot>
-      </div>
-    </el-collapse-transition>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'Expandable',
-  props: {
-    defaultExpand: {
-      type: Boolean,
-      default: true
-    },
-    title: {
-      type: String,
-      default: undefined
-    },
-    showExpand: {
-      type: Boolean,
-      default: true
-    }
-  },
-  data() {
-    return {
-      expand: this.defaultExpand
-    }
-  }
-}
-</script>
+<template>
+  <div class="n20-form-expandable">
+    <div class="n20-title flex-box flex-lr flex-v">
+      <slot name="title">
+        <span>{{ title }}</span>
+      </slot>
+      <div>
+        <slot name="tips"></slot>
+        <span v-if="showExpand" class="n20-tips" @click="expand = !expand">
+          <span>{{ expand ? '收起' : '展开' }}</span
+          ><i
+            class="el-icon-arrow-right m-l-ss"
+            :class="{ expand: expand }"
+          ></i>
+        </span>
+      </div>
+    </div>
+    <el-collapse-transition v-if="showExpand">
+      <div v-show="expand">
+        <slot></slot>
+      </div>
+    </el-collapse-transition>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Expandable',
+  props: {
+    defaultExpand: {
+      type: Boolean,
+      default: true
+    },
+    title: {
+      type: String,
+      default: undefined
+    },
+    showExpand: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      expand: this.defaultExpand
+    }
+  }
+}
+</script>