Skip to content

Commit 6bfd9d1

Browse files
guohaomengguohaomeng
committed
去掉编译后运行会报错的表单ref属性
1 parent e2e2fd3 commit 6bfd9d1

File tree

9 files changed

+218
-177
lines changed

9 files changed

+218
-177
lines changed

‎components.d.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,15 @@ export {}
77

88
declare module '@vue/runtime-core' {
99
export interface GlobalComponents {
10+
ElButton: typeof import('element-plus/es')['ElButton']
11+
ElCol: typeof import('element-plus/es')['ElCol']
12+
ElForm: typeof import('element-plus/es')['ElForm']
13+
ElFormItem: typeof import('element-plus/es')['ElFormItem']
14+
ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
15+
ElOption: typeof import('element-plus/es')['ElOption']
16+
ElRow: typeof import('element-plus/es')['ElRow']
17+
ElSelect: typeof import('element-plus/es')['ElSelect']
18+
ElSwitch: typeof import('element-plus/es')['ElSwitch']
1019
OSChart: typeof import('./src/components/OSChart.vue')['default']
1120
WaveGen: typeof import('./src/components/WaveGen.vue')['default']
1221
WaveGenChart: typeof import('./src/components/WaveGenChart.vue')['default']

‎package.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,9 @@
66
"scripts": {
77
"dev": "vite",
88
"build": "vite build",
9-
"preview": "vite preview"
9+
"preview": "vite preview",
10+
"typecheck": "vue-tsc --noEmit",
11+
"generate": "vite-ssg build"
1012
},
1113
"dependencies": {
1214
"@vueuse/core": "8.9.4",
@@ -19,6 +21,7 @@
1921
"@vitejs/plugin-vue": "^3.0.1",
2022
"@vue/compiler-sfc": "^3.2.37",
2123
"sass": "^1.53.0",
24+
"terser": "^5.14.2",
2225
"typescript": "^4.7.4",
2326
"unplugin-auto-import": "^0.10.3",
2427
"unplugin-element-plus": "^0.4.1",

‎src/App.vue‎

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -41,16 +41,35 @@
4141
margin-bottom: 0px;
4242
}
4343
</style>
44+
45+
<script lang="ts">
46+
47+
export default {
48+
name: 'App',
49+
components: {
50+
//2.声明或注册组件
51+
WaveGen,
52+
WaveGenChart,
53+
OSChart,
54+
}
55+
}
56+
57+
</script>
58+
4459
<script setup lang="ts">
4560
import { ref } from 'vue'
4661
import { onMounted } from 'vue'
47-
import {
48-
ElNotification,
49-
ElRow,
50-
ElCol,
51-
ElSwitch,
52-
ElFormItem
53-
} from 'element-plus'
62+
import WaveGen from './components/WaveGen.vue'
63+
import WaveGenChart from './components/WaveGenChart.vue'
64+
import OSChart from './components/OSChart.vue'
65+
import socket from './script/websocket'
66+
// import {
67+
// ElNotification,
68+
// ElRow,
69+
// ElCol,
70+
// ElSwitch,
71+
// ElFormItem
72+
// } from 'element-plus'
5473
5574
// 自动切换暗黑模式
5675
import { useDark, useToggle } from '@vueuse/core'
@@ -93,22 +112,3 @@ onMounted(() => {
93112
});
94113
95114
</script>
96-
<script lang="ts">
97-
import WaveGen from './components/WaveGen.vue'
98-
import WaveGenChart from './components/WaveGenChart.vue'
99-
import OSChart from './components/OSChart.vue'
100-
import socket from './script/websocket'
101-
102-
103-
export default {
104-
name: 'App',
105-
components: {
106-
//2.声明或注册组件
107-
WaveGen,
108-
WaveGenChart,
109-
OSChart
110-
}
111-
}
112-
113-
114-
</script>

‎src/components/OSChart.vue‎

Lines changed: 73 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -13,77 +13,8 @@
1313
</div>
1414
</template>
1515

16-
<script lang="ts" setup>
17-
import * as echarts from 'echarts/core';
18-
import {
19-
ToolboxComponent,
20-
ToolboxComponentOption,
21-
TooltipComponent,
22-
TooltipComponentOption,
23-
GridComponent,
24-
GridComponentOption,
25-
DataZoomComponent,
26-
DataZoomComponentOption
27-
} from 'echarts/components';
28-
import { LineChart, LineSeriesOption } from 'echarts/charts';
29-
import { UniversalTransition } from 'echarts/features';
30-
import { CanvasRenderer } from 'echarts/renderers';
31-
import { onMounted } from 'vue';
32-
import { EChartsType } from 'echarts/core';
33-
import socket from '../script/websocket'
34-
35-
import { ref } from "vue";
36-
import {
37-
ElFormItem,
38-
ElInputNumber,
39-
ElButton,
40-
ElMessage
41-
} from 'element-plus'
42-
43-
echarts.use([
44-
ToolboxComponent,
45-
TooltipComponent,
46-
GridComponent,
47-
DataZoomComponent,
48-
LineChart,
49-
CanvasRenderer,
50-
UniversalTransition
51-
]);
52-
53-
54-
// 2.定义传入的参数
55-
const props = defineProps({
56-
width: {
57-
type: String,
58-
default: "550",
59-
},
60-
height: {
61-
type: String,
62-
default: "350",
63-
},
64-
//首次加载
65-
isFirst: {
66-
type: Boolean,
67-
default: false,
68-
},
69-
//组件唯一值
70-
container: {
71-
type: String,
72-
default: "OSCChart",
73-
},
74-
});
75-
76-
77-
78-
onMounted(() => {
79-
chartDom = document.getElementById(props.container) as HTMLElement
80-
myChart = echarts.init(chartDom);
81-
option && myChart.setOption(option);
82-
})
83-
84-
</script>
85-
8616
<script lang="ts">
17+
import { ref } from "vue";
8718
type EChartsOption = echarts.ComposeOption<
8819
| ToolboxComponentOption
8920
| TooltipComponentOption
@@ -259,6 +190,78 @@ export default {
259190
260191
</script>
261192

193+
194+
<script lang="ts" setup>
195+
import * as echarts from 'echarts/core';
196+
import {
197+
ToolboxComponent,
198+
ToolboxComponentOption,
199+
TooltipComponent,
200+
TooltipComponentOption,
201+
GridComponent,
202+
GridComponentOption,
203+
DataZoomComponent,
204+
DataZoomComponentOption
205+
} from 'echarts/components';
206+
import { LineChart, LineSeriesOption } from 'echarts/charts';
207+
import { UniversalTransition } from 'echarts/features';
208+
import { CanvasRenderer } from 'echarts/renderers';
209+
import { onMounted } from 'vue';
210+
import { EChartsType } from 'echarts/core';
211+
import socket from '../script/websocket'
212+
213+
214+
import {
215+
// ElFormItem,
216+
// ElInputNumber,
217+
// ElButton,
218+
ElMessage
219+
} from 'element-plus'
220+
221+
echarts.use([
222+
ToolboxComponent,
223+
TooltipComponent,
224+
GridComponent,
225+
DataZoomComponent,
226+
LineChart,
227+
CanvasRenderer,
228+
UniversalTransition
229+
]);
230+
231+
232+
// 2.定义传入的参数
233+
const props = defineProps({
234+
width: {
235+
type: String,
236+
default: "550",
237+
},
238+
height: {
239+
type: String,
240+
default: "350",
241+
},
242+
//首次加载
243+
isFirst: {
244+
type: Boolean,
245+
default: false,
246+
},
247+
//组件唯一值
248+
container: {
249+
type: String,
250+
default: "OSCChart",
251+
},
252+
});
253+
254+
255+
256+
onMounted(() => {
257+
chartDom = document.getElementById(props.container) as HTMLElement
258+
myChart = echarts.init(chartDom);
259+
option && myChart.setOption(option);
260+
})
261+
262+
</script>
263+
264+
262265
<style>
263266
.OSChart {
264267
margin: 0 auto;

‎src/components/WaveGen.vue‎

Lines changed: 25 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33

44
<div class="waveGen">
55
<!-- 表单1 -->
6-
<el-form ref="form" :model="form" label-width="auto" :size="formSize" :label-position="labelPosition">
6+
<el-form :model="form" label-width="auto" :size="formSize" :label-position="labelPosition">
77
<el-form-item label="波形选择">
88
<el-select v-model="waveType" @change="waveTypeChange(waveType)" placeholder="请选择波形">
99
<el-option label="正弦波" value="1"></el-option>
@@ -35,29 +35,8 @@
3535
</div>
3636

3737
</template>
38-
<script setup lang="ts">
39-
import { ref } from "vue";
40-
import {
41-
ElForm,
42-
ElFormItem,
43-
ElButton,
44-
ElOption,
45-
ElInputNumber,
46-
ElMessage,
47-
ElSelect,
48-
ElSlider,
49-
ElSwitch,
50-
} from 'element-plus'
51-
52-
import { reactive } from 'vue'
53-
import WaveGenChart from './WaveGenChart.vue'
54-
import socket from '../script/websocket'
55-
56-
defineProps<{ msg: string }>();
57-
58-
</script>
59-
6038
<script lang="ts">
39+
import { ref } from "vue";
6140
const formSize = ref('large')
6241
const labelPosition = ref('right')
6342
@@ -97,7 +76,7 @@ const getParam = () => {
9776
sendData("GP");
9877
console.log('获取参数');
9978
}
100-
const changeParam = (param: Object) => {
79+
const changeParam = (param: any) => {
10180
uMaxValue.value = param.U;
10281
biasVoltage.value = param.B;
10382
duty.value = param.D;
@@ -141,6 +120,28 @@ export default {
141120
}
142121
}
143122
</script>
123+
<script setup lang="ts">
124+
import {
125+
// ElForm,
126+
// ElFormItem,
127+
// ElButton,
128+
// ElOption,
129+
// ElInputNumber,
130+
ElMessage,
131+
// ElSelect,
132+
// ElSlider,
133+
// ElSwitch,
134+
} from 'element-plus'
135+
136+
import { reactive } from 'vue'
137+
import WaveGenChart from './WaveGenChart.vue'
138+
import socket from '../script/websocket'
139+
140+
defineProps<{ msg: string }>();
141+
142+
</script>
143+
144+
144145

145146
<style>
146147
.waveGen {

0 commit comments

Comments
 (0)