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

<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>