如何在Vue3.0+TypeScript中引入JQuery等第三方静态JS文件

如何在Vue3.0+TypeScript中引入JQuery等第三方静态JS文件把Js放入Public目录, 并在Index.html中添加引用<!DOCTYPE html><html lang="zh"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content=

包达叔

6876人浏览 · 2021-07-05 10:00:21

包达叔 · 2021-07-05 10:00:21 发布

如何在Vue3.0+TypeScript中引入JQuery等第三方静态JS文件

把Js放入Public目录, 并在Index.html中添加引用

<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="favicon.ico">
  <title> 如何在Vue3.0+TypeScript项目中引入外部Js文件</title>
  <script type="text/javascript" src="config.js"></script>
  <script type="text/javascript" src="jquery.min-1.10.2.js"></script>
  <script type="text/javascript" src="http://localhost:9100/web/qj_upload.js"></script>
</head>

<body>
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
        Please enable it to continue.</strong>
  </noscript>
  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>

</html>

在ts中声明一下就可以用了

<template>
  <div class="about">
    <h1>QJFileCenter2.2教程Lotus2.2云盘教程DEMO</h1>
    <button id="fileupload">上传</button>
  </div>
</template>
<script lang="ts">
import { ref, onMounted } from 'vue'
import { clog } from '@/utils'

declare const config: any
declare const $: any
declare const QJUpload: any

export default {
  setup() {
    let filedata: any
    let fileCenterUrl = config.fileCenterUrl
    onMounted(() => {
      console.log('确认JQuery成功引入:' + $)

      let obj = {
        uploadButtton: 'fileupload', //上传按钮的ID
        fileapiurl: fileCenterUrl, //服务器地址
        usercode: 'qycode', //文件中心中空间里对应的QYCODE
        secret: 'qycode', //文件中心中空间里里对应的企业secret
        width: '50%', //弹出窗口宽度
        left: '25%', //弹出窗口左侧边距
        upinfo: '测试消息', //上传附带信息
        webupconfig: {
          //WebUpload配置项(可以配置文件上传类型，大小等属性)
          fileNumLimit: 5
        },

        //文件上传成功,返回上传的数据: 需要把此html部署到IIS里面,才能正常返回上传后的文件信息
        filecomplete: function (fileData) {
          console.log('单个文件上传完毕！')
          console.log('每上传一个文件调用一次本方法(filecomplete),但是入参fileData是全部文件的信息')
          console.log('每删除一个文件也会调用一次本方法(filecomplete),入参fileData是剩余全部文件的信息')
          console.log(JSON.stringify(fileData))
        },

        //关闭按钮,返回上传的数据(一个数组): 需要把此demo部署到IIS里面,才能正常返回上传后的文件信息
        closeupwin: function (fileData) {
          console.log('closeupwin:关闭了上传窗口')
          console.log(JSON.stringify(fileData))
          let dataJson = fileData.replace(/NaN/g, null)
          let data = JSON.parse(dataJson)
          for (let i = 0; i < data.length; i++) {
            //服务器地址
            let tempurl = fileCenterUrl + 'qycode/document/' + data[i].zyid
            console.log('文件名:' + data[i].filename)
            console.log('文件下载地址:' + tempurl)
          }
          fileData = data
        }
      }

      console.log(obj) //QjFileCenter配置
      //初始化上传按钮,注入点击事件:打开上传控件
      new QJUpload(obj)
    })

    return {
      filedata
    }
  }
}
</script>

QJFileCenter 又名 Lotus云盘, 是一款非常简单,方便,好用的文件存储服务器软件,支持PDF,WORD,PPT格式的文件预览
此软件由企捷公司出品,当前版本2.2
详细教程和DEMO参见
https://blog.csdn.net/zheyiw/article/details/118354072

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^