From 656696be4b70513e94f1341db8d1c2d3f43b3e6d Mon Sep 17 00:00:00 2001
From: Your Name <123456>
Date: 星期三, 13 七月 2022 09:18:47 +0800
Subject: [PATCH] 登录跳转首页

---
 src/components/iconSelector/index.vue |  498 +++++++++++++++++++++++++++---------------------------
 1 files changed, 249 insertions(+), 249 deletions(-)

diff --git a/src/components/iconSelector/index.vue b/src/components/iconSelector/index.vue
index 07de786..3010e16 100644
--- a/src/components/iconSelector/index.vue
+++ b/src/components/iconSelector/index.vue
@@ -1,252 +1,252 @@
-<template>
-	<div class="icon-selector w100 h100">
-		<el-popover
-			placement="bottom"
-			:width="fontIconWidth"
-			trigger="click"
-			transition="el-zoom-in-top"
-			popper-class="icon-selector-popper"
-			@show="onPopoverShow"
-		>
-			<template #reference>
-				<el-input
-					v-model="fontIconSearch"
-					:placeholder="fontIconPlaceholder"
-					:clearable="clearable"
-					:disabled="disabled"
-					:size="size"
-					ref="inputWidthRef"
-					@clear="onClearFontIcon"
-					@focus="onIconFocus"
-					@blur="onIconBlur"
-				>
-					<template #prepend>
-						<SvgIcon
-							:name="fontIconPrefix === '' ? prepend : fontIconPrefix"
-							class="font14"
-							v-if="fontIconPrefix === '' ? prepend?.indexOf('ele-') > -1 : fontIconPrefix?.indexOf('ele-') > -1"
-						/>
-						<i v-else :class="fontIconPrefix === '' ? prepend : fontIconPrefix" class="font14"></i>
-					</template>
-				</el-input>
-			</template>
-			<template #default>
-				<div class="icon-selector-warp">
-					<div class="icon-selector-warp-title flex">
-						<div class="flex-auto">{{ title }}</div>
-						<div class="icon-selector-warp-title-tab" v-if="type === 'all'">
-							<span :class="{ 'span-active': fontIconType === 'ali' }" @click="onIconChange('ali')" class="ml10" title="iconfont 图标">ali</span>
-							<span :class="{ 'span-active': fontIconType === 'ele' }" @click="onIconChange('ele')" class="ml10" title="elementPlus 图标">ele</span>
-							<span :class="{ 'span-active': fontIconType === 'awe' }" @click="onIconChange('awe')" class="ml10" title="fontawesome 图标">awe</span>
-						</div>
-					</div>
-					<div class="icon-selector-warp-row">
-						<el-scrollbar ref="selectorScrollbarRef">
-							<el-row :gutter="10" v-if="fontIconSheetsFilterList.length > 0">
-								<el-col :xs="6" :sm="4" :md="4" :lg="4" :xl="4" @click="onColClick(v)" v-for="(v, k) in fontIconSheetsFilterList" :key="k">
-									<div class="icon-selector-warp-item" :class="{ 'icon-selector-active': fontIconPrefix === v }">
-										<div class="flex-margin">
-											<div class="icon-selector-warp-item-value">
-												<SvgIcon :name="v" />
-											</div>
-										</div>
-									</div>
-								</el-col>
-							</el-row>
-							<el-empty :image-size="100" v-if="fontIconSheetsFilterList.length <= 0" :description="emptyDescription"></el-empty>
-						</el-scrollbar>
-					</div>
-				</div>
-			</template>
-		</el-popover>
-	</div>
-</template>
+<!--<template>-->
+<!--	<div class="icon-selector w100 h100">-->
+<!--		<el-popover-->
+<!--			placement="bottom"-->
+<!--			:width="fontIconWidth"-->
+<!--			trigger="click"-->
+<!--			transition="el-zoom-in-top"-->
+<!--			popper-class="icon-selector-popper"-->
+<!--			@show="onPopoverShow"-->
+<!--		>-->
+<!--			<template #reference>-->
+<!--				<el-input-->
+<!--					v-model="fontIconSearch"-->
+<!--					:placeholder="fontIconPlaceholder"-->
+<!--					:clearable="clearable"-->
+<!--					:disabled="disabled"-->
+<!--					:size="size"-->
+<!--					ref="inputWidthRef"-->
+<!--					@clear="onClearFontIcon"-->
+<!--					@focus="onIconFocus"-->
+<!--					@blur="onIconBlur"-->
+<!--				>-->
+<!--					<template #prepend>-->
+<!--						<SvgIcon-->
+<!--							:name="fontIconPrefix === '' ? prepend : fontIconPrefix"-->
+<!--							class="font14"-->
+<!--							v-if="fontIconPrefix === '' ? prepend?.indexOf('ele-') > -1 : fontIconPrefix?.indexOf('ele-') > -1"-->
+<!--						/>-->
+<!--						<i v-else :class="fontIconPrefix === '' ? prepend : fontIconPrefix" class="font14"></i>-->
+<!--					</template>-->
+<!--				</el-input>-->
+<!--			</template>-->
+<!--			<template #default>-->
+<!--				<div class="icon-selector-warp">-->
+<!--					<div class="icon-selector-warp-title flex">-->
+<!--						<div class="flex-auto">{{ title }}</div>-->
+<!--						<div class="icon-selector-warp-title-tab" v-if="type === 'all'">-->
+<!--							<span :class="{ 'span-active': fontIconType === 'ali' }" @click="onIconChange('ali')" class="ml10" title="iconfont 图标">ali</span>-->
+<!--							<span :class="{ 'span-active': fontIconType === 'ele' }" @click="onIconChange('ele')" class="ml10" title="elementPlus 图标">ele</span>-->
+<!--							<span :class="{ 'span-active': fontIconType === 'awe' }" @click="onIconChange('awe')" class="ml10" title="fontawesome 图标">awe</span>-->
+<!--						</div>-->
+<!--					</div>-->
+<!--					<div class="icon-selector-warp-row">-->
+<!--						<el-scrollbar ref="selectorScrollbarRef">-->
+<!--							<el-row :gutter="10" v-if="fontIconSheetsFilterList.length > 0">-->
+<!--								<el-col :xs="6" :sm="4" :md="4" :lg="4" :xl="4" @click="onColClick(v)" v-for="(v, k) in fontIconSheetsFilterList" :key="k">-->
+<!--									<div class="icon-selector-warp-item" :class="{ 'icon-selector-active': fontIconPrefix === v }">-->
+<!--										<div class="flex-margin">-->
+<!--											<div class="icon-selector-warp-item-value">-->
+<!--												<SvgIcon :name="v" />-->
+<!--											</div>-->
+<!--										</div>-->
+<!--									</div>-->
+<!--								</el-col>-->
+<!--							</el-row>-->
+<!--							<el-empty :image-size="100" v-if="fontIconSheetsFilterList.length <= 0" :description="emptyDescription"></el-empty>-->
+<!--						</el-scrollbar>-->
+<!--					</div>-->
+<!--				</div>-->
+<!--			</template>-->
+<!--		</el-popover>-->
+<!--	</div>-->
+<!--</template>-->
 
-<script lang="ts">
-import { ref, toRefs, reactive, onMounted, nextTick, computed, watch, defineComponent } from 'vue';
-import initIconfont from '/@/utils/getStyleSheets';
+<!--<script lang="ts">-->
+<!--import { ref, toRefs, reactive, onMounted, nextTick, computed, watch, defineComponent } from 'vue';-->
+<!--import initIconfont from '/@/utils/getStyleSheets';-->
 
-export default defineComponent({
-	name: 'iconSelector',
-	emits: ['update:modelValue', 'get', 'clear'],
-	props: {
-		// 输入框前置内容
-		prepend: {
-			type: String,
-			default: () => 'ele-Pointer',
-		},
-		// 输入框占位文本
-		placeholder: {
-			type: String,
-			default: () => '请输入内容搜索图标或者选择图标',
-		},
-		// 输入框占位文本
-		size: {
-			type: String,
-			default: () => 'default',
-		},
-		// 弹窗标题
-		title: {
-			type: String,
-			default: () => '请选择图标',
-		},
-		// icon 图标类型
-		type: {
-			type: String,
-			default: () => 'ele',
-		},
-		// 禁用
-		disabled: {
-			type: Boolean,
-			default: () => false,
-		},
-		// 是否可清空
-		clearable: {
-			type: Boolean,
-			default: () => true,
-		},
-		// 自定义空状态描述文字
-		emptyDescription: {
-			type: String,
-			default: () => '无相关图标',
-		},
-		// 双向绑定值，默认为 modelValue，
-		// 参考：https://v3.cn.vuejs.org/guide/migration/v-model.html#%E8%BF%81%E7%A7%BB%E7%AD%96%E7%95%A5
-		// 参考：https://v3.cn.vuejs.org/guide/component-custom-events.html#%E5%A4%9A%E4%B8%AA-v-model-%E7%BB%91%E5%AE%9A
-		modelValue: String,
-	},
-	setup(props, { emit }) {
-		const inputWidthRef = ref();
-		const selectorScrollbarRef = ref();
-		const state = reactive({
-			fontIconPrefix: '',
-			fontIconWidth: 0,
-			fontIconSearch: '',
-			fontIconTabsIndex: 0,
-			fontIconSheetsList: [],
-			fontIconPlaceholder: '',
-			fontIconType: 'ali',
-			fontIconShow: true,
-		});
-		// 处理 input 获取焦点时，modelValue 有值时，改变 input 的 placeholder 值
-		const onIconFocus = () => {
-			if (!props.modelValue) return false;
-			state.fontIconSearch = '';
-			state.fontIconPlaceholder = props.modelValue;
-		};
-		// 处理 input 失去焦点时，为空将清空 input 值，为点击选中图标时，将取原先值
-		const onIconBlur = () => {
-			setTimeout(() => {
-				const icon = state.fontIconSheetsList.filter((icon: string) => icon === state.fontIconSearch);
-				if (icon.length <= 0) state.fontIconSearch = '';
-			}, 300);
-		};
-		// 处理 icon 双向绑定数值回显
-		const initModeValueEcho = () => {
-			if (props.modelValue === '') return ((<string | undefined>state.fontIconPlaceholder) = props.placeholder);
-			(<string | undefined>state.fontIconPlaceholder) = props.modelValue;
-			(<string | undefined>state.fontIconPrefix) = props.modelValue;
-		};
-		// 处理 icon type 类型为 all 时，类型 ali、ele、awe 回显问题
-		const initFontIconTypeEcho = () => {
-			if ((<any>props.modelValue)?.indexOf('iconfont') > -1) onIconChange('ali');
-			else if ((<any>props.modelValue)?.indexOf('ele-') > -1) onIconChange('ele');
-			else if ((<any>props.modelValue)?.indexOf('fa') > -1) onIconChange('awe');
-			else onIconChange('ali');
-		};
-		// 图标搜索及图标数据显示
-		const fontIconSheetsFilterList = computed(() => {
-			if (!state.fontIconSearch) return state.fontIconSheetsList;
-			let search = state.fontIconSearch.trim().toLowerCase();
-			return state.fontIconSheetsList.filter((item: any) => {
-				if (item.toLowerCase().indexOf(search) !== -1) return item;
-			});
-		});
-		// 获取 input 的宽度
-		const getInputWidth = () => {
-			nextTick(() => {
-				state.fontIconWidth = inputWidthRef.value.$el.offsetWidth;
-			});
-		};
-		// 监听页面宽度改变
-		const initResize = () => {
-			window.addEventListener('resize', () => {
-				getInputWidth();
-			});
-		};
-		// 初始化数据
-		const initFontIconData = async (type: string) => {
-			state.fontIconSheetsList = [];
-			if (type === 'ali') {
-				await initIconfont.ali().then((res: any) => {
-					// 阿里字体图标使用 `iconfont xxx`
-					state.fontIconSheetsList = res.map((i: string) => `iconfont ${i}`);
-				});
-			} else if (type === 'ele') {
-				await initIconfont.ele().then((res: any) => {
-					state.fontIconSheetsList = res;
-				});
-			} else if (type === 'awe') {
-				await initIconfont.awe().then((res: any) => {
-					// fontawesome字体图标使用 `fa xxx`
-					state.fontIconSheetsList = res.map((i: string) => `fa ${i}`);
-				});
-			}
-			// 初始化 input 的 placeholder
-			// 参考（单项数据流）：https://cn.vuejs.org/v2/guide/components-props.html?#%E5%8D%95%E5%90%91%E6%95%B0%E6%8D%AE%E6%B5%81
-			state.fontIconPlaceholder = props.placeholder;
-			// 初始化双向绑定回显
-			initModeValueEcho();
-		};
-		// 图标点击切换
-		const onIconChange = (type: string) => {
-			state.fontIconType = type;
-			initFontIconData(type);
-		};
-		// 获取当前点击的 icon 图标
-		const onColClick = (v: any) => {
-			state.fontIconPlaceholder = v;
-			state.fontIconPrefix = v;
-			emit('get', state.fontIconPrefix);
-			emit('update:modelValue', state.fontIconPrefix);
-		};
-		// 清空当前点击的 icon 图标
-		const onClearFontIcon = () => {
-			state.fontIconPrefix = '';
-			emit('clear', state.fontIconPrefix);
-			emit('update:modelValue', state.fontIconPrefix);
-		};
-		// 监听 Popover 打开，用于双向绑定值回显
-		const onPopoverShow = () => {
-			initModeValueEcho();
-			initFontIconTypeEcho();
-		};
-		// 页面加载时
-		onMounted(() => {
-			initModeValueEcho();
-			initResize();
-			getInputWidth();
-		});
+<!--export default defineComponent({-->
+<!--	name: 'iconSelector',-->
+<!--	emits: ['update:modelValue', 'get', 'clear'],-->
+<!--	props: {-->
+<!--		// 输入框前置内容-->
+<!--		prepend: {-->
+<!--			type: String,-->
+<!--			default: () => 'ele-Pointer',-->
+<!--		},-->
+<!--		// 输入框占位文本-->
+<!--		placeholder: {-->
+<!--			type: String,-->
+<!--			default: () => '请输入内容搜索图标或者选择图标',-->
+<!--		},-->
+<!--		// 输入框占位文本-->
+<!--		size: {-->
+<!--			type: String,-->
+<!--			default: () => 'default',-->
+<!--		},-->
+<!--		// 弹窗标题-->
+<!--		title: {-->
+<!--			type: String,-->
+<!--			default: () => '请选择图标',-->
+<!--		},-->
+<!--		// icon 图标类型-->
+<!--		type: {-->
+<!--			type: String,-->
+<!--			default: () => 'ele',-->
+<!--		},-->
+<!--		// 禁用-->
+<!--		disabled: {-->
+<!--			type: Boolean,-->
+<!--			default: () => false,-->
+<!--		},-->
+<!--		// 是否可清空-->
+<!--		clearable: {-->
+<!--			type: Boolean,-->
+<!--			default: () => true,-->
+<!--		},-->
+<!--		// 自定义空状态描述文字-->
+<!--		emptyDescription: {-->
+<!--			type: String,-->
+<!--			default: () => '无相关图标',-->
+<!--		},-->
+<!--		// 双向绑定值，默认为 modelValue，-->
+<!--		// 参考：https://v3.cn.vuejs.org/guide/migration/v-model.html#%E8%BF%81%E7%A7%BB%E7%AD%96%E7%95%A5-->
+<!--		// 参考：https://v3.cn.vuejs.org/guide/component-custom-events.html#%E5%A4%9A%E4%B8%AA-v-model-%E7%BB%91%E5%AE%9A-->
+<!--		modelValue: String,-->
+<!--	},-->
+<!--	setup(props, { emit }) {-->
+<!--		const inputWidthRef = ref();-->
+<!--		const selectorScrollbarRef = ref();-->
+<!--		const state = reactive({-->
+<!--			fontIconPrefix: '',-->
+<!--			fontIconWidth: 0,-->
+<!--			fontIconSearch: '',-->
+<!--			fontIconTabsIndex: 0,-->
+<!--			fontIconSheetsList: [],-->
+<!--			fontIconPlaceholder: '',-->
+<!--			fontIconType: 'ali',-->
+<!--			fontIconShow: true,-->
+<!--		});-->
+<!--		// 处理 input 获取焦点时，modelValue 有值时，改变 input 的 placeholder 值-->
+<!--		const onIconFocus = () => {-->
+<!--			if (!props.modelValue) return false;-->
+<!--			state.fontIconSearch = '';-->
+<!--			state.fontIconPlaceholder = props.modelValue;-->
+<!--		};-->
+<!--		// 处理 input 失去焦点时，为空将清空 input 值，为点击选中图标时，将取原先值-->
+<!--		const onIconBlur = () => {-->
+<!--			setTimeout(() => {-->
+<!--				const icon = state.fontIconSheetsList.filter((icon: string) => icon === state.fontIconSearch);-->
+<!--				if (icon.length <= 0) state.fontIconSearch = '';-->
+<!--			}, 300);-->
+<!--		};-->
+<!--		// 处理 icon 双向绑定数值回显-->
+<!--		const initModeValueEcho = () => {-->
+<!--			if (props.modelValue === '') return ((<string | undefined>state.fontIconPlaceholder) = props.placeholder);-->
+<!--			(<string | undefined>state.fontIconPlaceholder) = props.modelValue;-->
+<!--			(<string | undefined>state.fontIconPrefix) = props.modelValue;-->
+<!--		};-->
+<!--		// 处理 icon type 类型为 all 时，类型 ali、ele、awe 回显问题-->
+<!--		const initFontIconTypeEcho = () => {-->
+<!--			if ((<any>props.modelValue)?.indexOf('iconfont') > -1) onIconChange('ali');-->
+<!--			else if ((<any>props.modelValue)?.indexOf('ele-') > -1) onIconChange('ele');-->
+<!--			else if ((<any>props.modelValue)?.indexOf('fa') > -1) onIconChange('awe');-->
+<!--			else onIconChange('ali');-->
+<!--		};-->
+<!--		// 图标搜索及图标数据显示-->
+<!--		const fontIconSheetsFilterList = computed(() => {-->
+<!--			if (!state.fontIconSearch) return state.fontIconSheetsList;-->
+<!--			let search = state.fontIconSearch.trim().toLowerCase();-->
+<!--			return state.fontIconSheetsList.filter((item: any) => {-->
+<!--				if (item.toLowerCase().indexOf(search) !== -1) return item;-->
+<!--			});-->
+<!--		});-->
+<!--		// 获取 input 的宽度-->
+<!--		const getInputWidth = () => {-->
+<!--			nextTick(() => {-->
+<!--				state.fontIconWidth = inputWidthRef.value.$el.offsetWidth;-->
+<!--			});-->
+<!--		};-->
+<!--		// 监听页面宽度改变-->
+<!--		const initResize = () => {-->
+<!--			window.addEventListener('resize', () => {-->
+<!--				getInputWidth();-->
+<!--			});-->
+<!--		};-->
+<!--		// 初始化数据-->
+<!--		const initFontIconData = async (type: string) => {-->
+<!--			state.fontIconSheetsList = [];-->
+<!--			if (type === 'ali') {-->
+<!--				await initIconfont.ali().then((res: any) => {-->
+<!--					// 阿里字体图标使用 `iconfont xxx`-->
+<!--					state.fontIconSheetsList = res.map((i: string) => `iconfont ${i}`);-->
+<!--				});-->
+<!--			} else if (type === 'ele') {-->
+<!--				await initIconfont.ele().then((res: any) => {-->
+<!--					state.fontIconSheetsList = res;-->
+<!--				});-->
+<!--			} else if (type === 'awe') {-->
+<!--				await initIconfont.awe().then((res: any) => {-->
+<!--					// fontawesome字体图标使用 `fa xxx`-->
+<!--					state.fontIconSheetsList = res.map((i: string) => `fa ${i}`);-->
+<!--				});-->
+<!--			}-->
+<!--			// 初始化 input 的 placeholder-->
+<!--			// 参考（单项数据流）：https://cn.vuejs.org/v2/guide/components-props.html?#%E5%8D%95%E5%90%91%E6%95%B0%E6%8D%AE%E6%B5%81-->
+<!--			state.fontIconPlaceholder = props.placeholder;-->
+<!--			// 初始化双向绑定回显-->
+<!--			initModeValueEcho();-->
+<!--		};-->
+<!--		// 图标点击切换-->
+<!--		const onIconChange = (type: string) => {-->
+<!--			state.fontIconType = type;-->
+<!--			initFontIconData(type);-->
+<!--		};-->
+<!--		// 获取当前点击的 icon 图标-->
+<!--		const onColClick = (v: any) => {-->
+<!--			state.fontIconPlaceholder = v;-->
+<!--			state.fontIconPrefix = v;-->
+<!--			emit('get', state.fontIconPrefix);-->
+<!--			emit('update:modelValue', state.fontIconPrefix);-->
+<!--		};-->
+<!--		// 清空当前点击的 icon 图标-->
+<!--		const onClearFontIcon = () => {-->
+<!--			state.fontIconPrefix = '';-->
+<!--			emit('clear', state.fontIconPrefix);-->
+<!--			emit('update:modelValue', state.fontIconPrefix);-->
+<!--		};-->
+<!--		// 监听 Popover 打开，用于双向绑定值回显-->
+<!--		const onPopoverShow = () => {-->
+<!--			initModeValueEcho();-->
+<!--			initFontIconTypeEcho();-->
+<!--		};-->
+<!--		// 页面加载时-->
+<!--		onMounted(() => {-->
+<!--			initModeValueEcho();-->
+<!--			initResize();-->
+<!--			getInputWidth();-->
+<!--		});-->
 
-		// 监听双向绑定 modelValue 的变化
-		watch(
-			() => props.modelValue,
-			() => {
-				initModeValueEcho();
-			}
-		);
-		return {
-			inputWidthRef,
-			selectorScrollbarRef,
-			fontIconSheetsFilterList,
-			onColClick,
-			onIconChange,
-			onClearFontIcon,
-			onIconFocus,
-			onIconBlur,
-			onPopoverShow,
-			...toRefs(state),
-		};
-	},
-});
-</script>
+<!--		// 监听双向绑定 modelValue 的变化-->
+<!--		watch(-->
+<!--			() => props.modelValue,-->
+<!--			() => {-->
+<!--				initModeValueEcho();-->
+<!--			}-->
+<!--		);-->
+<!--		return {-->
+<!--			inputWidthRef,-->
+<!--			selectorScrollbarRef,-->
+<!--			fontIconSheetsFilterList,-->
+<!--			onColClick,-->
+<!--			onIconChange,-->
+<!--			onClearFontIcon,-->
+<!--			onIconFocus,-->
+<!--			onIconBlur,-->
+<!--			onPopoverShow,-->
+<!--			...toRefs(state),-->
+<!--		};-->
+<!--	},-->
+<!--});-->
+<!--</script>-->

--
Gitblit v1.9.2