!27 use Vue ref for dom

Merge pull request !27 from pauli/master

src/components/editor/index.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="editor-container">
-		<div id="editor-toolbar"></div>
-		<div :id="id" :style="{ height }"></div>
+		<div ref="editorToolbar"></div>
+		<div ref="editorContent" :style="{ height }"></div>
 	</div>
 </template>
 
@@ -13,6 +13,8 @@ import { toolbarKeys } from './toolbar';
 
 // 定义接口来定义对象的类型
 interface WangeditorState {
+	editorToolbar: HTMLDivElement | null;
+	editorContent: HTMLDivElement | null;
 	editor: any;
 }
 
@@ -51,7 +53,9 @@ export default defineComponent({
 	},
 	setup(props, { emit }) {
 		const state = reactive<WangeditorState>({
+			editorToolbar: null,
 			editor: null,
+			editorContent: null,
 		});
 		// 富文本配置
 		const wangeditorConfig = () => {
@@ -79,13 +83,13 @@ export default defineComponent({
 		const initWangeditor = () => {
 			state.editor = createEditor({
 				html: props.modelValue,
-				selector: `#${props.id}`,
+				selector: state.editorContent!,
 				config: wangeditorConfig(),
 				mode: props.mode,
 			});
 			createToolbar({
 				editor: state.editor,
-				selector: '#editor-toolbar',
+				selector: state.editorToolbar!,
 				mode: props.mode,
 				config: toolbarConfig(),
 			});

src/layout/routerView/iframes.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="layout-view-bg-white flex mt1" :style="{ height: `calc(100vh - ${setIframeHeight}`, border: 'none' }" v-loading="iframeLoading">
-		<iframe :src="iframeUrl" frameborder="0" height="100%" width="100%" id="iframe" v-show="!iframeLoading"></iframe>
+		<iframe :src="iframeUrl" frameborder="0" height="100%" width="100%" ref="iframeDom" v-show="!iframeLoading"></iframe>
 	</div>
 </template>
 
@@ -20,6 +20,7 @@ export default defineComponent({
 		const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
 		const route = useRoute();
 		const state = reactive({
+			iframeDom: null as HTMLIFrameElement | null,
 			iframeLoading: true,
 			iframeUrl: '',
 		});
@@ -28,7 +29,7 @@ export default defineComponent({
 			state.iframeUrl = <any>route.meta.isLink;
 			nextTick(() => {
 				state.iframeLoading = true;
-				const iframe = document.getElementById('iframe');
+				const iframe = state.iframeDom;
 				if (!iframe) return false;
 				iframe.onload = () => {
 					state.iframeLoading = false;

src/views/fun/clipboard/index.vue

@@ -1,5 +1,4 @@
 <template>
-	<div id="printRref">
 	<el-card shadow="hover" header="复制剪切演示">
 		<el-alert
 			title="感谢优秀的 `vue-clipboard3`，项目地址：https://github.com/JamieCurnow/vue-clipboard3`"
@@ -14,7 +13,6 @@
 		</el-input>
 		<el-input placeholder="先点击上方 `复制链接` 按钮，然后 `Ctrl + V` 进行粘贴！ " v-model="shearVal" class="mt15"> </el-input>
 	</el-card>
-	</div>
 </template>
 
 <script lang="ts">

src/views/fun/countup/index.vue

@@ -10,11 +10,11 @@
 			<el-row :gutter="20">
 				<el-col :sm="6" class="mb15" v-for="(v, k) in topCardItemList" :key="k">
 					<div class="countup-card-item countup-card-item-box" :style="{ background: `var(${v.color})` }">
-						<div class="countup-card-item-flex">
+						<div class="countup-card-item-flex" ref="topCardItemRefs">
 							<div class="countup-card-item-title pb3">{{ v.title }}</div>
-							<div class="countup-card-item-title-num pb6" :id="`titleNum${k + 1}`"></div>
+							<div class="countup-card-item-title-num pb6"></div>
 							<div class="countup-card-item-tip pb3">{{ v.tip }}</div>
-							<div class="countup-card-item-tip-num" :id="`tipNum${k + 1}`"></div>
+							<div class="countup-card-item-tip-num"></div>
 						</div>
 						<i :class="v.icon" :style="{ color: v.iconColor }"></i>
 					</div>
@@ -44,6 +44,7 @@ export default defineComponent({
 	name: 'funCountup',
 	setup() {
 		const state = reactive({
+			topCardItemRefs: null as any,
 			topCardItemList: [
 				{
 					title: '今日访问人数',
@@ -86,14 +87,10 @@ export default defineComponent({
 		// 初始化数字滚动
 		const initNumCountUp = () => {
 			nextTick(() => {
-				new CountUp('titleNum1', Math.random() * 10000).start();
-				new CountUp('titleNum2', Math.random() * 10000).start();
-				new CountUp('titleNum3', Math.random() * 10000).start();
-				new CountUp('titleNum4', Math.random() * 10000).start();
-				new CountUp('tipNum1', Math.random() * 1000).start();
-				new CountUp('tipNum2', Math.random() * 1000).start();
-				new CountUp('tipNum3', Math.random() * 1000).start();
-				new CountUp('tipNum4', Math.random() * 1000).start();
+				state.topCardItemRefs.forEach((v: HTMLDivElement) => {
+					new CountUp(v.querySelector('.countup-card-item-title-num') as HTMLDivElement, Math.random() * 10000).start();
+					new CountUp(v.querySelector('.countup-card-item-tip-num') as HTMLDivElement, Math.random() * 1000).start();
+				});
 			});
 		};
 		// 重置/刷新数值

src/views/fun/echartsMap/index.vue

@@ -1,7 +1,7 @@
 <template>
 	<div :style="{ height: `calc(100vh - ${initTagViewHeight}` }">
 		<div class="layout-view-bg-white">
-			<div id="echartsMap" style="height: 100%"></div>
+			<div ref="echartsMap" style="height: 100%"></div>
 		</div>
 	</div>
 </template>
@@ -23,6 +23,7 @@ export default defineComponent({
 		const { themeConfig } = storeToRefs(storesThemeConfig);
 		const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
 		const state: any = reactive({
+			echartsMap: null,
 			echartsMapList,
 			echartsMapData,
 		});
@@ -52,7 +53,7 @@ export default defineComponent({
 		};
 		// 初始化 echartsMap
 		const initEchartsMap = () => {
-			const myChart = echarts.init(<HTMLElement>document.getElementById('echartsMap'));
+			const myChart = echarts.init(<HTMLElement>state.echartsMap);
 			const option = {
 				tooltip: {
 					trigger: 'item',

src/views/fun/printJs/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<div id="printRef">
+	<div ref="printRef">
 		<el-card shadow="hover" header="打印演示">
 			<el-alert
 				title="感谢优秀的 `print-js`，项目地址：https://github.com/crabbly/Print.js。请在打印弹窗 `更多设置` 中开启 `背景图形。`"
@@ -22,11 +22,13 @@ import printJs from 'print-js';
 export default defineComponent({
 	name: 'funPrintJs',
 	setup() {
-		const state = reactive({});
+		const state = reactive({
+			printRef: null as null | HTMLDivElement,
+		});
 		// 打印点击
 		const onPrintJs = () => {
 			printJs({
-				printable: 'printRef',
+				printable: state.printRef,
 				type: 'html',
 				css: ['//at.alicdn.com/t/font_2298093_o73r8wjdhlg.css', '//unpkg.com/element-plus/dist/index.css'],
 				scanStyles: false,

src/views/pages/drag/index.vue

@@ -23,7 +23,7 @@
 		</el-card>
 
 		<el-dialog v-model="dialogVisible" width="769px">
-			<template #title>
+			<template #header>
 				<div v-drag="['.drag-container .el-dialog', '.drag-container .el-dialog__header']">拖动指令效果（v-drag）</div>
 			</template>
 			<p>鼠标放标题头进行 Dialog 对话框拖动</p>

src/views/pages/workflow/component/tool/help.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="workflow-tool-help">
 		<el-dialog v-model="isShow" width="769px">
-			<template #title>
+			<template #header>
 				<div v-drag="['.workflow-tool-help .el-dialog', '.workflow-tool-help .el-dialog__header']">使用帮助</div>
 			</template>
 			<div>1、拖入：鼠标移入左侧导航中，鼠标形状改变时拖动到右侧网格状的视图中。</div>

src/views/pages/workflow/index.vue

@@ -8,10 +8,10 @@
 
 				<!-- 左侧导航区 -->
 				<div class="workflow-content">
-					<div id="workflow-left">
+					<div class="workflow-left">
 						<el-scrollbar>
 							<div
-								:id="`left${key}`"
+								ref="leftNavRefs"
 								v-for="(val, key) in leftNavList"
 								:key="val.id"
 								:style="{ height: val.isOpen ? 'auto' : '50px', overflow: 'hidden' }"
@@ -32,11 +32,12 @@
 					</div>
 
 					<!-- 右侧绘画区 -->
-					<div id="workflow-right">
+					<div class="workflow-right" ref="workflowRightRef">
 						<div
 							v-for="(v, k) in jsplumbData.nodeList"
 							:key="v.nodeId"
 							:id="v.nodeId"
+							:data-node-id="v.nodeId"
 							:class="v.class"
 							:style="{ left: v.left, top: v.top }"
 							@click="onItemCloneClick(k)"
@@ -102,6 +103,8 @@ interface XyState {
 	y: string | number;
 }
 interface WorkflowState {
+	workflowRightRef: HTMLDivElement | null;
+	leftNavRefs: any[];
 	leftNavList: any[];
 	dropdownNode: XyState;
 	dropdownLine: XyState;
@@ -132,6 +135,8 @@ export default defineComponent({
 		const { isTagsViewCurrenFull } = storeToRefs(stores);
 		const { copyText } = commonFunction();
 		const state = reactive<WorkflowState>({
+			workflowRightRef: null as HTMLDivElement | null,
+			leftNavRefs: [],
 			leftNavList: [],
 			dropdownNode: { x: '', y: '' },
 			dropdownLine: { x: '', y: '' },
@@ -195,8 +200,8 @@ export default defineComponent({
 		};
 		// 左侧导航-初始化拖动
 		const initSortable = () => {
-			state.leftNavList.forEach((v, k) => {
-				Sortable.create(document.getElementById(`left${k}`) as HTMLElement, {
+			state.leftNavRefs.forEach(v => {
+				Sortable.create(v as HTMLDivElement, {
 					group: {
 						name: 'vue-next-admin-1',
 						pull: 'clone',
@@ -209,7 +214,7 @@ export default defineComponent({
 					onEnd: function (evt: any) {
 						const { name, icon, id } = evt.clone.dataset;
 						const { layerX, layerY, clientX, clientY } = evt.originalEvent;
-						const el = document.querySelector('#workflow-right') as HTMLElement;
+						const el = state.workflowRightRef!;
 						const { x, y, width, height } = el.getBoundingClientRect();
 						if (clientX < x || clientX > width + x || clientY < y || y > y + height) {
 							ElMessage.warning('请把节点拖入到画布中');
@@ -546,7 +551,7 @@ export default defineComponent({
 		.workflow-content {
 			display: flex;
 			height: calc(100% - 35px);
-			#workflow-left {
+			.workflow-left {
 				width: 220px;
 				height: 100%;
 				border-right: 1px solid var(--el-border-color-light, #ebeef5);
@@ -607,7 +612,7 @@ export default defineComponent({
 					}
 				}
 			}
-			#workflow-right {
+			.workflow-right {
 				flex: 1;
 				position: relative;
 				overflow: hidden;

src/views/visualizing/demo1.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="visualizing-demo1">
 		<!-- 地图 -->
-		<div id="visualizingDemo1" style="height: 100%"></div>
+		<div ref="visualizingDemo1" style="height: 100%"></div>
 		<div class="visualizing-container">
 			<!-- 头部 -->
 			<div class="visualizing-container-head">
@@ -98,6 +98,7 @@ import { echartsMapList, echartsMapData, echartsMapImgs } from './mock/demo1';
 
 // 定义接口来定义对象的类型
 interface Demo1State {
+	visualizingDemo1: any;
 	echartsMapList: any;
 	echartsMapData: any;
 	echartsMapImgs: any;
@@ -110,6 +111,7 @@ export default defineComponent({
 	setup() {
 		const { proxy } = <any>getCurrentInstance();
 		const state = reactive<Demo1State>({
+			visualizingDemo1: null,
 			echartsMapList,
 			echartsMapData,
 			echartsMapImgs,
@@ -142,7 +144,7 @@ export default defineComponent({
 		};
 		// 初始化 echartsMap（地图上的点）
 		const initEchartsMap = () => {
-			const myChart = echarts.init(<HTMLElement>document.getElementById('visualizingDemo1'));
+			const myChart = echarts.init(<HTMLElement>state.visualizingDemo1);
 			const option = {
 				tooltip: {
 					trigger: 'item',

src/views/visualizing/demo2.vue

@@ -127,7 +127,7 @@
 			<div class="big-data-down-center">
 				<div class="big-data-down-center-one">
 					<div class="big-data-down-center-one-content" ref="rightChartData5">
-						<div id="3DEarth"></div>
+						<div ref="the3DEarth"></div>
 						<div :class="v.topLevelClass" v-for="(v, k) in earth3DBtnList" :key="k">
 							<div class="circle" v-for="i in 4" :key="i"></div>
 							<div class="text-box">
@@ -256,6 +256,7 @@ export default defineComponent({
 			earth3DBtnList,
 			chartData4List,
 			myCharts: [],
+			the3DEarth: null as HTMLDivElement | null,
 		});
 		// 初始化时间
 		const initTime = () => {
@@ -685,7 +686,7 @@ export default defineComponent({
 		};
 		// 3DEarth 地图
 		const init3DEarth = (globeRadius) => {
-			let el = document.getElementById('3DEarth');
+			let el = state.the3DEarth!;
 			el.style.height = `${proxy.$refs.rightChartData5.offsetHeight}px`;
 			const myChart = echarts.init(el);
 			const option = {