js如何引用以及使用
-
方式一引入文件中指定的export方法，以,分割
使用方式脚本块：方法名()
使用方式模板块：方法名() [须在method进行注册]
// 引用
import { isEmpty, isNotEmpty } from "@/common/TextUtils.js"
// 使用
isEmpty('文字')
模板快使用须在method进行注册
// 脚本引用
import { isEmpty, isNotEmpty } from "@/common/TextUtils.js"
// 注册
methods: {
isNotEmpty
}
// 模板快使用
isNotEmpty('文字')
-
方式二引入全部方法 , 其中Toast.js中有多个export方法,把Toast里所有export的方法导入
使用方式：xxx.方法名()
// 引用
import * as Toast from "@/common/Toast.js"
// 使用
Toast.showLong('toast')
-
方式三全局引用，和方式一一样以,分割，然后给全局变量赋值 [ main.js文件]
使用方式脚本块：this.全局变量名()
使用方式模板块：全局变量名()
// 引入[ 写入到main.js文件中 ]
import { isEmpty } from "@/common/TextUtils.js"
// 赋值[ 写入到main.js文件中 ]
Vue.prototype.isEmpty = isEmpty
// script 脚本块使用
this.isEmpty('文字')
// template 模板块也可使用
isEmpty() 或 this.isEmpty() 都可
示例
- TextUtils.js
function isEmpty(str) {
return str === undefined || str === null || str === ''
}
function isNotEmpty(str) {
return !isEmpty(str)
}
export {
isEmpty,
isNotEmpty
}
- Toast.js
// js文件引用js文件
import {isEmpty} from '@/common/TextUtils.js'
function show(text, duration) {
if (isEmpty(text))
text = ''
if (isEmpty(duration))
duration = 2000
uni.showToast({
title: text,
icon: 'none',
duration: duration
})
}
function showShort(text) {
show(text, 2000)
}
function showLong(text) {
show(text, 3500)
}
export {
show,
showShort,
showLong
}
- 脚本块
script引用并使用
<script>
import { isEmpty } from "@/common/TextUtils.js"
import * as Toast from "@/common/Toast.js"
export default {
... ,
methods: {
TextUtilJsText() {
console.log(isEmpty())
console.log(isEmpty('文字'))
console.log(isNotEmpty('文字'))
console.log("全局引用" + this.isEmpty("是否为空"))
},
ToastText() {
Toast.showLong('toast')
},
// 注册一下供模板快使用
isNotEmpty
}
}
</script>
- 全局引用
main.js
import { isEmpty } from "@/common/TextUtils.js"
Vue.prototype.isEmpty = isEmpty
- 模板块
template使用
<text class="title" @click="TextUtilJsText">{{isNotEmpty('引用的js在method进行注册')}}</text>
<text class="title" @click="TextUtilJsText">{{isEmpty('全局方法')}}</text>
