vue3-sfc-loader 加载长途.vue文件(sfc)案例

注意事项

   

• style标签假如增加了lang比如：lang=“scss”，需要提供scss-loader的处置惩罚器，这个暂时没研究，我的处置惩罚方式是将动态模版的css放在了全局
  
• 打包暂时还没有测试，后面测试了会同步更新
  

  安装vue3-sfc-loader

1. npm install vue3-sfc-loader

复制代码

后端vue模版 (sfc案例)

   后端我用的是java加Velocity模版引擎(.vm模版)
  vm模版引擎位置：

vm模版

1. <template>
2.   <view class="cus-tab theme theme-page">
3.     <uniForms ref="formRef" :modelValue="formData" validate-trigger="bind">
4.       <table class="tableCla">
5.         <colgroup>
6.           <col style="width: 20px;">
7.           <col style="width: 70px;">
8.           <col style="width: 130px;">
9.           <!-- <col style="width: 70px;"> -->
10.         </colgroup>
11.         <thead>
12.         <tr>
13.           <th class="slash-wrap" colspan="2">
14.             <div class="oline">
15.               <span class="span1">年级</span>
16.               <span class="span2">姓名</span>
17.             </div>
18.           </th>
19.           <th>高三二班</th>
20.           <th>异议数据</th>
21.         </tr>
22.         </thead>
23.         <tbody>
24.         <tr>
25.           <td colspan="2">身高</td>
26.           <td>身高</td>
27.           <td>
28.             <uniFormsItem name="sga">
29.               <view class="input-cla theme-flex">
30.                 <uniEasyinput :clearable="false" v-model="formData.sga"
31.                                placeholder=""></uniEasyinput>
32.                 <text>cm</text>
33.               </view>
34.             </uniFormsItem>
35.           </td>
36.         </tr>
37.         <tr>
38.           <td colspan="2">体重</td>
39.           <td>88888888</td>
40.           <td>
41.             <uniFormsItem name="tz">
42.               <view class="input-cla theme-flex">
43.                 <uniEasyinput :clearable="false" v-model="formData.tz"
44.                                placeholder=""></uniEasyinput>
45.                 <text>kg</text>
46.               </view>
47.             </uniFormsItem>
48.           </td>
49.         </tr>
50.         <tr>
51.           <td colspan="1" rowspan="3">眼科检查</td>
52.           <td>裸眼视力</td>
53.           <td>das</td>
54.           <td>
55.             <view class="theme-flex">
56.               <view class="input-cla theme-flex">
57.                 <uniFormsItem name="lyz">
58.                   <view class="input-cla theme-flex">
59.                     <text>左</text>
60.                     <uniEasyinput :clearable="false" v-model="formData.lyz"
61.                                    placeholder=""></uniEasyinput>
62.                   </view>
63.                 </uniFormsItem>
64.                 <text>/</text>
65.                 <uniFormsItem name="lyy">
66.                   <view class="input-cla theme-flex">
67.                     <text>右</text>
68.                     <uniEasyinput :clearable="false" v-model="formData.lyy"
69.                                    placeholder=""></uniEasyinput>
70.                   </view>
71.                 </uniFormsItem>
72.               </view>
73.             </view>
75.           </td>
76.         </tr>
77.         <tr>
78.           <td>矫正视力</td>
79.           <td>John</td>
80.           <td>
81.             <view class="theme-flex">
82.               <view class="input-cla theme-flex">
83.                 <uniFormsItem name="jzz">
84.                   <view class="input-cla theme-flex">
85.                     <text>左</text>
86.                     <uniEasyinput :clearable="false" v-model="formData.jzz"
87.                                    placeholder=""></uniEasyinput>
88.                   </view>
89.                 </uniFormsItem>
90.                 <text>/</text>
91.                 <uniFormsItem name="jzy">
92.                   <view class="input-cla theme-flex">
93.                     <text>右</text>
94.                     <uniEasyinput :clearable="false" v-model="formData.jzy"
95.                                    placeholder=""></uniEasyinput>
96.                   </view>
97.                 </uniFormsItem>
98.               </view>
99.             </view>
100.           </td>
101.         </tr>
102.         <tr>
103.           <td>角膜炎</td>
104.           <td>John</td>
105.           <td>
106.             <view class="input-cla theme-flex">
107.               <wdCheckbox v-model="formData.jmy" shape="square">有异议</wdCheckbox>
108.             </view>
109.           </td>
110.         </tr>
111.         <tr>
112.           <td colspan="1" rowspan="4">内科检查</td>
113.           <td>心脏</td>
114.           <td>John</td>
115.           <td>
116.             <view class="input-cla theme-flex">
117.               <wdCheckbox v-model="formData.xz" shape="square">有异议</wdCheckbox>
118.             </view>
119.           </td>
120.         </tr>
121.         <tr>
122.           <td>肺</td>
123.           <td>John</td>
124.           <td>
125.             <view class="input-cla theme-flex">
126.               <wdCheckbox v-model="formData.fei" shape="square">有异议</wdCheckbox>
127.             </view>
128.           </td>
129.         </tr>
130.         <tr>
131.           <td>肝</td>
132.           <td>John</td>
133.           <td>
134.             <view class="input-cla theme-flex">
135.               <wdCheckbox v-model="formData.gan" shape="square">有异议</wdCheckbox>
136.             </view>
137.           </td>
138.         </tr>
139.         <tr>
140.           <td>脾</td>
141.           <td>John</td>
142.           <td>
143.             <view class="input-cla theme-flex">
144.               <wdCheckbox v-model="formData.pi" shape="square">有异议</wdCheckbox>
145.             </view>
146.           </td>
147.         </tr>
148.         <tr>
149.           <td colspan="1" rowspan="8">外科检查</td>
150.           <td>头部</td>
151.           <td>John</td>
152.           <td>
153.             <view class="input-cla theme-flex">
154.               <wdCheckbox v-model="formData.tb" shape="square">有异议</wdCheckbox>
155.             </view>
156.           </td>
157.         </tr>
158.         <tr>
159.           <td>颈部</td>
160.           <td>John</td>
161.           <td>
162.             <view class="input-cla theme-flex">
163.               <uniEasyinput :clearable="false" v-model="formData.sg" placeholder=""></uniEasyinput>
164.             </view>
165.           </td>
166.         </tr>
167.         <tr>
168.           <td>甲状腺</td>
169.           <td>John</td>
170.           <td>
171.             <view class="input-cla theme-flex">
172.               <uniEasyinput :clearable="false" v-model="formData.sg" placeholder=""></uniEasyinput>
173.             </view>
174.           </td>
175.         </tr>
176.         <tr>
177.           <td>胸部</td>
178.           <td>John</td>
179.           <td>
180.             <view class="input-cla theme-flex">
181.               <uniEasyinput :clearable="false" v-model="formData.sg" placeholder=""></uniEasyinput>
182.             </view>
183.           </td>
184.         </tr>
185.         <tr>
186.           <td>脊椎</td>
187.           <td>John</td>
188.           <td>
189.             <view class="input-cla theme-flex">
190.               <uniEasyinput :clearable="false" v-model="formData.sg" placeholder=""></uniEasyinput>
191.             </view>
192.           </td>
193.         </tr>
194.         <tr>
195.           <td>四肢</td>
196.           <td>John</td>
197.           <td>
198.             <view class="input-cla theme-flex">
199.               <uniEasyinput :clearable="false" v-model="formData.sg" placeholder=""></uniEasyinput>
200.             </view>
201.           </td>
202.         </tr>
203.         <tr>
204.           <td>皮肤</td>
205.           <td>John</td>
206.           <td>
207.             <view class="input-cla theme-flex">
208.               <uniEasyinput :clearable="false" v-model="formData.sg" placeholder=""></uniEasyinput>
209.             </view>
210.           </td>
211.         </tr>
212.         <tr>
213.           <td>淋巴结</td>
214.           <td>John</td>
215.           <td>
216.             <view class="input-cla theme-flex">
217.               <uniEasyinput :clearable="false" v-model="formData.sg" placeholder=""></uniEasyinput>
218.             </view>
219.           </td>
220.         </tr>
221.         <tr>
222.           <td colspan="1" rowspan="3">耳鼻喉科</td>
223.           <td>耳</td>
224.           <td>John</td>
225.           <td>
226.             <view class="input-cla theme-flex">
227.               <uniEasyinput :clearable="false" v-model="formData.sg" placeholder=""></uniEasyinput>
228.             </view>
229.           </td>
230.         </tr>
231.         <tr>
232.           <td>鼻</td>
233.           <td>John</td>
234.           <td>
235.             <view class="input-cla theme-flex">
236.               <uniEasyinput :clearable="false" v-model="formData.sg" placeholder=""></uniEasyinput>
237.             </view>
238.           </td>
239.         </tr>
240.         <tr>
241.           <td>扁桃体</td>
242.           <td>John</td>
243.           <td>
244.             <view class="input-cla theme-flex">
245.               <uniEasyinput :clearable="false" v-model="formData.sg" placeholder=""></uniEasyinput>
246.             </view>
247.           </td>
248.         </tr>
249.         <tr>
250.           <td colspan="4">
251.             <view class="input-text-cla">
252.               <uniFormsItem required name="fkyj" :rules="[{required: true,errorMessage: '请填写反馈意见',}]">
253.                 <view class="theme-flex">
254.                   <uniEasyinput type="textarea" autoHeight :clearable="false" v-model="formData.fkyj"
255.                                  placeholder="请输入反馈意见"></uniEasyinput>
256.                 </view>
257.               </uniFormsItem>
258.             </view>
259.           </td>
260.         </tr>
261.         </tbody>
262.       </table>
263.       <view>
264.         <view class="tips-clas theme-flex">
265.           <text>1. 请如实填写，填写完成后保存</text>
266.           <text>2. 异议数据需机构审核，请耐心等待</text>
267.         </view>
268.         <view class="bot-box">
269.           <wdButton @click="submit">提交审核</wdButton>
270.         </view>
271.       </view>
272.     </uniForms>
273.   </view>
274. </template>
276. <script setup name="Abnormal">
277.   import { ref, reactive } from 'vue'
278.   import uniForms from 'uniForms'
279.   import uniFormsItem from 'uniFormsItem'
280.   import uniEasyinput from 'uniEasyinput'
281.   import wdCheckbox from 'wdCheckbox'
282.   import wdButton from 'wdButton'
283.   const formRef = ref();
284.   const formData = reactive({
285.     sga: '',
286.     sg: '',
287.     tz: '',
288.     lyz: '',
289.     lyy: '',
290.     jzz: '',
291.     jzy: '',
292.     fkyj: '',
293.     jmy: false,
294.     xz: false,
295.     fei: false,
296.     gan: false,
297.     pi: false,
298.     tb: false,
299.   });
300.   const submit = () => {
301.     formRef.value.validate().then((res) => {
302.       console.log('表单数据信息：', res);
303.     }).catch((err) => {
304.       console.log('表单错误信息：', err);
305.     })
306.   };
307. </script>
309. <style lang="scss">
310.   .oline {
311.     border-top: 50px #c5c5c5 solid;
312.     width: 0px;
313.     height: 0px;
314.     border-left: 90px #ffffff solid;
315.     position: relative;
317.   }
319.   .oline::before {
320.     position: absolute;
321.     top: -40px;
322.     left: -80px;
323.     width: 80px;
324.     height: 40px;
325.     /* background: #fff url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxsaW5lIHgxPSIwIiB5MT0iMCIgeDI9IjEwMCUiIHkyPSIxMDAlIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEiLz48L3N2Zz4=) no-repeat 100% center; */
326.     content: '';
327.   }
329.   .span1 {
330.     font-style: normal;
331.     display: block;
332.     position: absolute;
333.     top: -40px;
334.     left: -40px;
335.     width: 35px;
336.   }
338.   .span2 {
339.     font-style: normal;
340.     display: block;
341.     position: absolute;
342.     top: -25px;
343.     left: -70px;
344.     width: 55px;
345.   }
347.   .top {
348.     padding: 10px;
349.     border-bottom: 1px solid #e8e8e8;
350.   }
352.   .aColor>a {
353.     color: rgba(0, 0, 0, 0.65);
354.   }
356.   .tableCla {
357.     width: 100%;
358.     border: 1px solid #e8e8e8;
359.     border-collapse: collapse;
360.   }
362.   .theadCla>tr>th {
363.     padding: 10px;
364.     color: rgba(0, 0, 0, 0.85);
365.     border: 1px solid #e8e8e8;
366.     background: #fafafa;
367.     font-weight: normal;
368.   }
370.   tbody>tr>td,
371.   th {
372.     text-align: center;
373.     font-weight: normal;
374.     color: rgba(0, 0, 0, 0.65);
375.     /* padding: 15px 10px; */
376.     border: 1px solid #e8e8e8;
377.     font-size: 12px;
378.   }
382.   tr:nth-child(even) {
383.     /* background: #effefd; */
384.   }
386.   td {
387.     font-size: 15px;
388.   }
390.   .input-cla {
391.     width: 100%;
392.     // border: 1px solid #888888;
393.     height: 30px;
394.     padding: 10px;
395.     box-sizing: border-box;
396.     align-items: center;
397.     text-align: center;
398.     justify-content: center;
400.     :deep(.uni-easyinput__content-input) {
401.       height: 20px;
402.       font-size: 14px;
403.       width: 40px;
404.     }
406.     :deep(.uni-easyinput__content) {
407.       height: 20px;
408.       font-size: 14px;
409.       width: 100%;
410.     }
412.     :deep(.uni-easyinput) {
413.       height: 20px;
414.       font-size: 14px;
415.       flex: 0;
416.       width: 40px !important;
417.     }
419.     :deep(.uni-input-input) {
420.       font-size: 11px !important;
421.     }
423.     :deep(.uni-easyinput__content-input) {
424.       height: 20px !important;
425.     }
428.   }
430.   .cus-tab {
431.     :deep(.uni-forms-item) {
432.       margin-bottom: 0px !important;
433.     }
434.   }
436.   .input-text-cla {
437.     padding: 10px 5px;
438.     padding-bottom: 20px;
439.     box-sizing: border-box;
440.   }
442.   .tips-clas {
443.     flex-direction: column;
444.     color: red;
445.     align-items: flex-start;
446.     gap: 5px;
447.     font-size: 14px;
448.     padding: 10px;
449.     box-sizing: border-box;
450.   }
452.   .bot-box {
453.     width: 100%;
454.     padding: 10px;
455.     padding-top: 5px;
456.     box-sizing: border-box;
457.     :deep(.wd-button) {
458.       width: 90%;
459.       display: block;
460.       margin: 0 auto;
461.     }
463.   }
464. </style>

复制代码

后端处置惩罚模版数据

之前写过类似的，就直接拿来用了，传送门
前端案例

   前端利用的uniapp+vue3+ts+vite
moduleCache中需要存放你的vm模版中的组件及api差不类似运行时的东西，不然标签是不会被剖析的，类似下面中的uni-ui的组件，假如不引入就不会被剖析，注意：引入的模版key要与vm模板中的名称同等

1. <template>
2.         <!-- <div style=" margin: 0; padding: 0;overflow-y: scroll;"> -->
3.                 <component :is="dynamicComponent" v-if="templateStr"></component>
4.                 <wd-status-tip image="comment" tip="暂无报告数据～" v-else/>
5.                 <Fab ref="fabRef" @selectAr="selectAr" />
6.         <!-- </div> -->
7. </template>
8. <script setup lang="ts" name="CalendarYear">
9.         import { onLoad } from '@dcloudio/uni-app'
10.         import uniForms from '@dcloudio/uni-ui/lib/uni-forms/uni-forms.vue'
11.         import uniFormsItem from '@dcloudio/uni-ui/lib/uni-forms-item/uni-forms-item.vue'
12.         import uniDataCheckbox from '@dcloudio/uni-ui/lib/uni-data-checkbox/uni-data-checkbox.vue'
13.         import uniEasyinput from '@dcloudio/uni-ui/lib/uni-easyinput/uni-easyinput.vue'
14.         import { abnormalReport } from '@/api/speExamineResService'
15.         import { loadModule } from "vue3-sfc-loader/dist/vue3-sfc-loader"
16.         import wdCheckbox from 'wot-design-uni/components/wd-checkbox/wd-checkbox.vue'
17.         import wdButton from 'wot-design-uni/components/wd-button/wd-button.vue'
18.         import * as Vue from 'vue'
19.         import Fab from '@/components/Fab/index.vue'
20.         import { compile } from 'sass';
21.         import useUserStore from "@/store/user";
22.         const fabRef = ref()
23.         const proxy = getCurrentInstance()?.proxy
24.         const dynamicComponent = shallowRef();
25.         const templateStr = ref('')
26.         const archiveInfo = computed(() => {
27.                 return useUserStore().getSelectArchive()
28.         })
29.         const reportFun = (val : any) => {
30.                 if (!val.archivesId) {
31.                         proxy.$pop.toast('请选择学生')
32.                         nextTick(() => {
33.                                 fabRef.value.openAr()
34.                         })
35.                         return;
36.                 }
37.                 console.log('uniForms', uniForms)
38.                 abnormalReport(val.archivesId).then(async (res : any) => {
39.                         console.log(res)
40.                         templateStr.value = res.data
41.                         const options = {
42.                                 moduleCache: {
43.                                         vue: Vue,
44.                                         'uniForms': uniForms,
45.                                         'uniFormsItem': uniFormsItem,
46.                                         'uniEasyinput': uniEasyinput,
47.                                         'wdCheckbox': wdCheckbox,
48.                                         'wdButton': wdButton,
49.                                         'scss': (source) => {
50.                                                 console.log('======>source',source)
51.                                                 return Object.assign(compile(source), { deps: () => [] })
52.                                         }
53.                                 },
54.                                 async getFile() {
55.                                         return res.data
56.                                 },
57.                                 addStyle(textContent) {
58.                                         console.log('textContent,', textContent)
59.                                         const style = Object.assign(document.createElement('style'), { textContent })
60.                                         console.log('style,', style)
61.                                         const ref = document.head.getElementsByTagName('style')[0] || null
62.                                         document.head.insertBefore(style, ref)
63.                                 },
64.                                 loader: {
65.                                        
66.                                 }
67.                         };
68.                         dynamicComponent.value = defineAsyncComponent(() => loadModule(res.fileName || "loader.vue", options))
69.                 })
70.         }
71.         const selectAr = async (val : any) => {
72.                 reportFun(val)
73.         }
74.         onLoad(() => {
75.                 reportFun(archiveInfo.value)
76.         })
77. </script>
78. <style lang="scss">
80. </style>

复制代码

页面效果图

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。