Vue3把重复性内容重构成可组合的组件

Vue3把一些重复的相同的地方，封装Vue composable。

前提，可以参阅:
《HTTP Error 404.0 - Not Found》https://www.cnblogs.com/insus/p/22982421
《Vue的v-show实践》https://www.cnblogs.com/insus/p/22985701
《在javascript或vue探测文件是否存在 》https://www.cnblogs.com/insus/p/22989849

有文件真实存在，文件呈现在内嵌框架iframe中。无法探测到文件存在，自定义友好信息呈现，而不是自带信息404错误异常信息。
综合以上3篇，我们可以把呈现文件或呈现自定义信息做成一个组件，让vue调用。

在你项目中存放组件的目录Components，创建一个文件，如view.js。
引入vue,

import { ref,watch, onMounted } from 'vue';

但是，Insus.NET当前环境是ASP.NET web site混合。组件开头引入，得修改一下。

const { ref, watch, onMounted } = Vue;

 

 

  name: 'ViewComponent',
  props: {
      fileName: { type: String, default: '' },
      baseUrl: { type: String, default: '/temp/' }, 
  },
  template: `
  <iframe
      ref="frameRef"
      loading="lazy"
      style="width:100%; height:500px; border:0px none #000;">
  </iframe>
`,

在baseUrl，设置一个默认值，担心调用组件，用户忽略赋予。
template内把上面提及3篇中，iframe拉过来。注意的是，使用反单引。

 

 

 setup(props) {
     const frameRef = ref(null);
     let token = 0;  

     const joinUrl = (base, name) => {
         const b = base.endsWith('/') ? base : base + '/';
         return b + name;
     };

     const render = async () => {
         const iframe = frameRef.value;
         if (!iframe) return;

         const my = ++token;
     
         clearIframe(iframe); 

         if (!props.fileName) {
             showEmptyMessage(iframe);
             return;
         }

         const url = joinUrl(props.baseUrl, props.fileName);
         const exists = await checkFileExist(url);

         if (my !== token) return;   

         if (exists) {
             iframe.removeAttribute('srcdoc');
             iframe.src = url;
         } else {
             showEmptyMessage(iframe);
         }
     };

     onMounted(render); 

     watch(() => [props.fileName, props.baseUrl], render);  

     return { frameRef };  
 }

组件完成。
在父页中调用它，即是把以前iframe的位置换成以下组件。

 <div class="right" v-if="showViewer" style="margin-left:3px; width:888px; border:1px #c0c0c0 solid;">              
     <component
         :is="viewComponent"
         :file-name="fileName"
         :base-url="baseUrl"                    
     />
 </div>

 

setup()内，

const viewComponent = shallowRef(
    Vue.defineAsyncComponent(() => import('/System/Tools/Components/view.js'))
);
const fileName = ref('');
const baseUrl = ref(virtualDirectory.value + 'temp/');

把onView事件，改写，

 

const onView = async (item) => {
    loading.value = true;
    error.value = '';
    try {
        fileName.value = item?.ImageFileName || ''; 
        showViewer.value = true;     
    } catch (err) {
        error.value = '查看图片失败：' + err.message;
    } finally {
        loading.value = false;
    }
};

 

eturn{}中放入，

  viewComponent,
  fileName,
  baseUrl,
  onView,