笔记

2023-06-21

字数统计: 239字 | 阅读时长≈ 1分

vue3 使用异步加载动态组件component

<template>
  <div @click="change">自由浏览</div>
    <component :is="currentComponent[current]"></component>
</template>

import { defineAsyncComponent, reactive, ref } from 'vue';

const currentComponent = reactive({
  Table: defineAsyncComponent(() => import('components/TablePage/index.vue')),
  Detal: defineAsyncComponent(() => import('components/DetailPage/index.vue'))
})
const current = ref('Table')

const change = ()  => {
  current.value === 'Table' ? 'Detal' : 'Table'
}

Blob转File

export function blobToFile(blob, fileName) {
  const file = new File([blob], fileName, { type: blob.type });
  return file;
}

File转Blob

export function fileToBlob(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => {
      resolve(new Blob([reader.result], { type: file.type }));
    };
    reader.onerror = reject;
    reader.readAsArrayBuffer(file);
  });
}

px 转 rem

export function sizeRem(size) {
  const clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  if (!clientWidth) return;
  const fontSize = clientWidth / 1920;
  return size * fontSize;
}

Vite项目动态填充图片路径适用于图片路径在 assets/img 文件下的图片

1
2
3

export function getAssetsFile(url) {
  return new URL(`../assets/img/${url}`, import.meta.url).href;
}

本文作者： 新伢
本文链接： http://example.com/categories/index.html
版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！