记一次在vue中引入原生js文件

由于原生js采用的是html、css、js是静态资源，没有模块化，在开发Vue项目的时候，有时需要使用一些非ES6格式的没有export的js库，可以有如下方法实现:1.在index.html页面使用script标签引入当然也可以使用cdn的地址。这样引入后的内容是全局的，可以在所有地方使用。<!DOCTYPE html><html><head><titl

伟笑

5539人浏览 · 2021-07-29 14:31:28

伟笑 · 2021-07-29 14:31:28 发布

由于原生js采用的是html、css、js是静态资源，没有模块化，在开发Vue项目的时候，有时需要使用一些非ES6格式的没有export的js库，可以有如下方法实现:

1.在index.html页面使用script标签引入

当然也可以使用cdn的地址。这样引入后的内容是全局的，可以在所有地方使用。

<!DOCTYPE html>
 <html>
	<head>
      	<title>Map</title>
      	<meta charset="utf-8">
      	<meta name="viewport" content="width=device-width,initial-scale=1.0">
      	<link rel="shortcut icon" type="image/x-icon" href="./static/img/favicon.ico"/>
      	<script src='./static/libs/three/three.min.js'></script>
      	<script src="./static/libs/three/GLTFLoader.js"></script>
   	</head>
   <body>
     	<div id="app"></div>
     	<!-- built files will be auto injected -->
   </body>
</html>

2.在main.js中使用window.moduleName

var THREE = window.THREE var GLTFLoader = THREE.GLTFLoader
Vue.prototype.THREE = THREE

3.手动添加export

为js库中需要使用的方法放入export default { /要导出的方法/}，然后通过import xxx from ‘’
如果js文件中有多个变量和方法，可以把他们放到一个对象或者函数里面导出。最后在vue的mounted生命周期里面调用。
另外：dom就写在template里就行了。

import LabelImage from './webAnnotate'
var op = () =>{
// 设置画布初始属性
const canvasMain = document.querySelector('.canvasMain');
const canvas = document.getElementById('canvas');
const resultGroup = document.querySelector('.resultGroup');

const annotate = new LabelImage({
	canvas: canvas,
	scaleCanvas: document.querySelector('.scaleCanvas'),
	scalePanel: document.querySelector('.scalePanel'),
	annotateState: document.querySelector('.annotateState'),
	canvasMain: canvasMain,
	resultGroup: resultGroup,
	crossLine: document.querySelector('.crossLine'),
	labelShower: document.querySelector('.labelShower'),
	screenShot: document.querySelector('.screenShot'),
	screenFull: document.querySelector('.screenFull'),
	colorHex: document.querySelector('#colorHex'),
	toolTagsManager: document.querySelector('.toolTagsManager'),
	historyGroup: document.querySelector('.historyGroup')
});

// let imgFiles =['/images/example/football.jpg']
let imgIndex = 1;       //标定图片默认下标;
let imgSum = imgFiles.length;        // 选择图片总数;

initImage();
// 初始化图片状态
function initImage() {
	selectImage(0);
	processSum.innerText = imgSum;
}

//切换操作选项卡
let tool = document.getElementById('tools');
tool.addEventListener('click', function(e) {
	for (let i=0; i<tool.children.length; i++) {
		tool.children[i].classList.remove('focus');
	}
	e.target.classList.add('focus');
	switch(true) {
		case e.target.className.indexOf('toolDrag') > -1:  // 拖拽
			annotate.SetFeatures('dragOn', true);
			break;
		case e.target.className.indexOf('toolRect') > -1:  // 矩形
			annotate.SetFeatures('rectOn', true);
			break;
		case e.target.className.indexOf('toolPolygon') > -1:  // 多边形
			annotate.SetFeatures('polygonOn', true);
			break;
		case e.target.className.indexOf('toolTagsManager') > -1:  // 标签管理工具
			annotate.SetFeatures('tagsOn', true);
			break;
		default:
			break;
	}
});

document.querySelector('.openFolder').addEventListener('click', function() {
	document.querySelector('.openFolderInput').click()
});

// 监听 openFolderInput 的 onchange事件，执行changeFolder回调
// 相当于 <input class="openFolderInput" type="file" multiple οnchange="changeFolder(this)">
const openFolderInput = document.querySelector('.openFolderInput');
openFolderInput.addEventListener('change',function(){
	changeFolder(openFolderInput)
})

function changeFolder(e) {
	console.log(e)
	imgFiles = e.files;
	imgSum = imgFiles.length;
	processSum.innerText = imgSum;
	imgIndex = 1;
	selectImage(0);
}

//弹出框
function openBox (e, isOpen) {
	let el = document.querySelector(e);
	let maskBox = document.querySelector('.mask_box');
	if (isOpen) {
		maskBox.style.display = "block";
		el.style.display = "block";
	}
	else {
		maskBox.style.display = "none";
		el.style.display = "none";
	}
}
}
export default op

vue 里面使用：

<script>
import op from '@/utils/js/operator'
export default {
  data() {
    return {}
  },
  methods: {},
  mounted() {
    op()
  }
}
</script>

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}$/, //不连续的两位字母// /^