美文网首页
Vue - js引用以及使用

Vue - js引用以及使用

作者: Wang_Mr | 来源:发表于2022-07-26 17:17 被阅读0次

    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>
    

    相关文章

      网友评论

          本文标题:Vue - js引用以及使用

          本文链接:https://www.haomeiwen.com/subject/xhvoirtx.html