2020年6月

2020-06-23T12:06:46.png

tips: 请注意区分vue3.0和vue cli 3.x/4.x

创建项目

vue create -r https://registry.npm.taobao.org vue-next-test

2020-06-23T12:01:58.png

选择你喜欢的配置即可,创建成功后,从Demo来看,跟vue2.0的typescript写法差别看起来不大的样子。。。

未完待续

typescript

本文环境

  1. @vue/cli 4.3.1
  2. typescript 3.9.5

相关配置文件

  1. vue.config.js
  2. tsconfig.json
  3. shims-vue.d.ts

问题汇总

导入 vue 文件报错

错误信息:Cannot find module './App.vue' or its corresponding type declarations
解决方案:修改shims-vue.d.ts

declare module "*.vue" {
  import Vue from "vue";
  export default Vue;
}

Vscode 报错,编译不报错

解决方案:重启 Vscode

挂载原型$api 报错

解决方案:在src目录下新增vue-property.d.ts

import Vue from 'vue'
declare module "vue/types/vue" {
  interface Vue {
    $api: any;
  }
}

无法使用@components别名 alias 路径

解决方案: 修改tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": ["webpack-env", "vuex"],
    "paths": {
      "@/*": ["src/*"],
      "@/components": ["src/components"] // 添加这一行
    },
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "tests/**/*.ts", "tests/**/*.tsx"],
  "exclude": ["node_modules"]
}

该文章为异教徒解决方案,各位看官看下即可,切勿模仿!!!

问题描述

原生的el-upload只支持上传图片时候的预览和回显,这是因为只针对img标签做了适配,如下图。

2020-06-03T05:42:34.png

而如果我们上传视频,则会出现一个白方框,用户体验不佳。

2020-06-03T05:45:07.png

解决思路

其实正确的解决思路应该是

  1. show-file-list属性设置为false。然后再自己循环显示file-list,以及追加对应的预览,删除按钮及功能。
  2. 设置自定义模板内容(推荐使用)

但是我觉得这样太麻烦了(时间问题)。

于是我突发奇想,如果我将img标签改成video标签呢?如下图

2020-06-03T05:46:56.png

发现居然完美契合,毫无违和感。

预览的实现

在做到把img改为video标签之前,还需要解决的另一个问题就是,如何让视频也支持预览。老规矩,我们先来看看官方Demo怎么实现预览的。

2020-06-03T05:54:03.png

官方的做法是增加一个dialog,然后在点击预览图片时将文件url传给dialog。我们先来实现一下改写一下dialog

<el-dialog :visible.sync="dialogVisible" :modal-append-to-body="true">
      <video width="100%" muted autoplay="autoplay" loop="loop" v-if="dialogImageUrl[dialogImageUrl.length - 1] == 4" :src="dialogImageUrl"></video>
      <img width="100%" v-else :src="dialogImageUrl" alt />
    </el-dialog>
tips: 我这种判断MP4格式的方式实属异端,不建议模仿。

替换img标签

一到标签节点的操作,我第一想到的就是document操作(异端+1),直接上代码。

 changeVideoTag(){
      let videoTag = document.querySelector('.video img')
      console.log('检测到应为video的img标签', videoTag)
      if(videoTag){
        let parentNode = videoTag.parentNode
        let newElement = document.createElement('video')
        newElement.setAttribute('class', videoTag.getAttribute('class'))
        newElement.setAttribute('src', videoTag.getAttribute('src'))
        parentNode.insertBefore(newElement, videoTag)
      }
    },

该函数负责寻找video类下的img标签,然后在img标签之前,添加一个同样的videos元素节点,此处你可以选择是否移除原img标签。

最终实现效果

gif.gif

最后的话

  1. 这种方法非常不推荐使用,强烈建议使用自定义模板缩略图
  2. 这种方法非常不推荐使用,强烈建议使用自定义模板缩略图
  3. 这种方法非常不推荐使用,强烈建议使用自定义模板缩略图

u=3276836620,1954497454&fm=26&gp=0.jpg

remove-files-webpack-plugin

原理就是在项目中添加一个webpack插件,然后配置插件
项目根目录新增vue.config.js

const path = require('path')
const RemovePlugin = require('remove-files-webpack-plugin')

module.exports = {
    configureWebpack: {
        plugins: [
            new RemovePlugin({
                after: {
                    root: path.join(__dirname, './unpackage'),
                    include: [
                        path.join(__dirname, 'unpackage/dist', process.env.NODE_ENV === 'production' ?
                            'build' : 'dev', process.env
                            .UNI_PLATFORM, './mp-weixin/static/APPPIC')
                    ],
                    trash: false
                }
            })
        ]
    }
}

部分webpack类似的webpack插件

  1. copy-webpack-plugin
  2. clean-webpack-plugin