Vue - js引用以及使用

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引用并使用

• 全局引用main.js

import { isEmpty } from "@/common/TextUtils.js"
Vue.prototype.isEmpty = isEmpty

• 模板块template使用

{{isNotEmpty('引用的js在method进行注册')}}
{{isEmpty('全局方法')}}