Explorar el Código

test: 优化collapseIcon

lanceJiang hace 10 meses
padre
commit
47bb1da7c0
Se han modificado 1 ficheros con 56 adiciones y 1 borrados
  1. 56 1
      src/layout/components/Header/components/CollapseIcon.vue

+ 56 - 1
src/layout/components/Header/components/CollapseIcon.vue

@@ -1,6 +1,61 @@
 <template>
 	<el-icon class="collapse-icon hover-effect" @click="changeCollapse">
-		<component :is="setting.isCollapse ? 'expand' : 'fold'"></component>
+		<!--		<component :is="setting.isCollapse ? 'expand' : 'fold'"></component>-->
+
+		<!--		<le-icon :icon-class="`icon-${setting.isCollapse ? 'expand-right' : 'fold-left'}`"></le-icon>-->
+		<svg
+			v-if="setting.isCollapse"
+			xmlns="http://www.w3.org/2000/svg"
+			xmlns:xlink="http://www.w3.org/1999/xlink"
+			aria-hidden="true"
+			role="img"
+			class="iconify iconify--line-md"
+			width="1em"
+			height="1em"
+			viewBox="0 0 24 24"
+		>
+			<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+				<path stroke-dasharray="16" stroke-dashoffset="16" d="M5 5h14">
+					<animate fill="freeze" attributeName="stroke-dashoffset" dur="0.2s" values="16;0"></animate>
+				</path>
+				<path stroke-dasharray="12" stroke-dashoffset="12" d="M5 12h9">
+					<animate fill="freeze" attributeName="stroke-dashoffset" begin="0.2s" dur="0.2s" values="12;0"></animate>
+				</path>
+				<path stroke-dasharray="16" stroke-dashoffset="16" d="M5 19h14">
+					<animate fill="freeze" attributeName="stroke-dashoffset" begin="0.4s" dur="0.2s" values="16;0"></animate>
+				</path>
+				<path stroke-dasharray="12" stroke-dashoffset="12" d="M17 9l3 3l-3 3">
+					<animate fill="freeze" attributeName="stroke-dashoffset" begin="0.6s" dur="0.2s" values="12;0"></animate>
+				</path>
+			</g>
+		</svg>
+
+		<svg
+			v-else
+			xmlns="http://www.w3.org/2000/svg"
+			xmlns:xlink="http://www.w3.org/1999/xlink"
+			aria-hidden="true"
+			role="img"
+			class="iconify iconify--line-md"
+			width="1em"
+			height="1em"
+			viewBox="0 0 24 24"
+		>
+			<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+				<path stroke-dasharray="16" stroke-dashoffset="16" d="M19 5h-14">
+					<animate fill="freeze" attributeName="stroke-dashoffset" dur="0.2s" values="16;0"></animate>
+				</path>
+				<path stroke-dasharray="12" stroke-dashoffset="12" d="M19 12h-9">
+					<animate fill="freeze" attributeName="stroke-dashoffset" begin="0.2s" dur="0.2s" values="12;0"></animate>
+				</path>
+				<path stroke-dasharray="16" stroke-dashoffset="16" d="M19 19h-14">
+					<animate fill="freeze" attributeName="stroke-dashoffset" begin="0.4s" dur="0.2s" values="16;0"></animate>
+				</path>
+				<path stroke-dasharray="12" stroke-dashoffset="12" d="M7 9l-3 3l3 3">
+					<animate fill="freeze" attributeName="stroke-dashoffset" begin="0.6s" dur="0.2s" values="12;0"></animate>
+				</path>
+			</g>
+		</svg>
 	</el-icon>
 </template>