js如何引用以及使用
-
方式一引入文件中指定的export方法，以,分割
使用方式腳本塊：方法名()
使用方式模板塊：方法名() [須在method進(jìn)行注冊(cè)]
// 引用
import { isEmpty, isNotEmpty } from "@/common/TextUtils.js"
// 使用
isEmpty('文字')
模板快使用須在method進(jìn)行注冊(cè)
// 腳本引用
import { isEmpty, isNotEmpty } from "@/common/TextUtils.js"
// 注冊(cè)
methods: {
isNotEmpty
}
// 模板快使用
isNotEmpty('文字')
-
方式二引入全部方法 , 其中Toast.js中有多個(gè)export方法,把Toast里所有export的方法導(dǎo)入
使用方式：xxx.方法名()
// 引用
import * as Toast from "@/common/Toast.js"
// 使用
Toast.showLong('toast')
-
方式三全局引用疹尾，和方式一一樣以,分割洛史，然后給全局變量賦值 [ main.js文件]
使用方式腳本塊：this.全局變量名()
使用方式模板塊：全局變量名()
// 引入[ 寫(xiě)入到main.js文件中 ]
import { isEmpty } from "@/common/TextUtils.js"
// 賦值[ 寫(xiě)入到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')
},
// 注冊(cè)一下供模板快使用
isNotEmpty
}
}
</script>
- 全局引用
main.js
import { isEmpty } from "@/common/TextUtils.js"
Vue.prototype.isEmpty = isEmpty
- 模板塊
template使用
<text class="title" @click="TextUtilJsText">{{isNotEmpty('引用的js在method進(jìn)行注冊(cè)')}}</text>
<text class="title" @click="TextUtilJsText">{{isEmpty('全局方法')}}</text>
