大家都知道Vue2.X项目配置全局方法最简单就是使用“Vue.prototype.$XXX = XXX”这种实现方式。如该文章（https://blog.csdn.net/Cai181191/article/details/123797934）就是用的这种方式来实现。那么Vue3.X项目实现配置全局方法可能就有点不一样了。
示例一：引入 Moment.js 日期处理类库并配置为全局方法
导入依赖：npm i moment
src/utils/momentUtil.js
import moment from 'moment';
const YYYY_MM_DD = (time) => {
if (time) {
return moment(time).format('YYYY-MM-DD')
} else {
return ''
}
}
const YYYY_MM_DD__HH_mm_ss = (time) => {
if (time) {
return moment(time).format('YYYY-MM-DD HH:mm:ss')
} else {
return ''
}
}
export {
YYYY_MM_DD,
YYYY_MM_DD__HH_mm_ss
}main.js
// 引入格式化时间工具并配置为全局方法
import * as momentUtil from '@/utils/momentUtil'
app.config.globalProperties.$momentUtil = momentUtil使用方式
<div>{{ $momentUtil.YYYY_MM_DD(scope.row.createTime) }}</div>示例二：生成字符串对应的颜色值并配置为全局方法
src/utils/colorUtil.js
const stringToColor = (str) => {
if (str) {
let hash = 0
for (var i = 0; i < str.length; i++) {
hash = hash * 31 + str.charCodeAt(i)
hash = intValue(hash)
}
let r = (hash & 0xFF0000) >> 16
let g = (hash & 0x00FF00) >> 8
let b = (hash & 0x0000FF)
return 'rgba(' + r + ',' + g + ',' + b + ',' + '0.2)'
} else {
return 'transparent' // 透明
}
}
function intValue(num) {
var MAX_VALUE = 0x7fffffff;
var MIN_VALUE = -0x80000000;
if (num > MAX_VALUE || num < MIN_VALUE) {
return num &= 0xFFFFFFFF;
}
return num;
}
export {
stringToColor
}main.js
// 引入颜色工具并配置为全局方法
import * as colorUtil from '@/utils/colorUtil'
app.config.globalProperties.$colorUtil = colorUtil使用方式
<p :style="'color: ' + $colorUtil.stringToColor('HelloWorld')">HelloWorld</p>版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/151135.html
