vue使用xe-utils函数库的具体方法

2023-09-15 18:44:04 297

本文介绍了vue使用xe-utils函数库的具体方法，分享给大家，具体如下：

安装完成后自动挂载在vue实例：this.$utils(函数库)

支持挂载函数列表：this.$browse(浏览器内核判断)this.$locat(用于读写地址栏参数)

在vue实例中通过this.$utils调用的函数this默认指向当前vue实例。

CDN安装

使用script方式安装，VXEUtils会定义为全局变量

生产环境请使用vxe-utils.min.js，更小的压缩版本，可以带来更快的速度体验。

cdnjs获取最新版本

点击浏览已发布的所有npm包的源代码。

unpkg获取最新版本

点击浏览已发布的所有npm包的源代码

AMD安装

require.js安装示例

//require配置
require.config({
paths:{
//...,
'xe-utils':'./dist/xe-utils.min',
'vxe-utils':'./dist/vxe-utils.min'
}
})

//./main.js安装
define(['Vue','xe-utils','vxe-utils'],function(Vue,XEUtils,VXEUtils){
Vue.use(VXEUtils,XEUtils)
})

ES6Module安装方式

npminstallxe-utilsvxe-utils--save

通过Vue.use()来全局安装

importVuefrom'vue'
importXEUtilsfrom'xe-utils'
importVXEUtilsfrom'vxe-utils'

Vue.use(VXEUtils,XEUtils)

//通过vue实例的调用方式
constdateStr=this.$utils.dateToString(newDate(),'yyyy-MM-dd')
constdate=this.$utils.stringToDate('11/20/201710:10:30','MM/dd/yyyyHH:mm:ss')

vue实例挂载自定义属性

示例

importVuefrom'vue'
importXEUtilsfrom'xe-utils'
importVXEUtilsfrom'vxe-utils'
importcustomsfrom'./customs'

XEUtils.mixin(customs)
Vue.use(VXEUtils,XEUtils,{mounts:['locat','browse','cookie']})

this.$locat//this.$locat.origin
this.$browse//this.$browse['-webkit']true
this.$cookie//this.$cookie('name','value')

混合函数

文件./customs.js

exportfunctioncustom1(){
console.log('自定义函数')
}

示例./main.js

importVuefrom'vue'
importXEUtilsfrom'xe-utils'
importcustomsfrom'./customs'

XEUtils.mixin(customs)
Vue.use(VXEUtils,XEUtils)

//调用自定义扩展函数
XEUtils.custom1()

示例

Home.vue

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

vue使用xe-utils函数库的具体方法

热门推荐

随机推荐