在vue项目中全局工具类、全局样式的使用

全局工具类

注：一下都是在vue项目建好的前提下进行的

1、定义工具类

文件地址： public/tool/tool.js

实例是一个非常简单的函数，返回字符串

export default class{
    Spr(msg){
      return msg
    }
}

所用工具类的入口文件： public/enroll.js

import Tool from './tool.js';

export default Vue =>{
    Vue.prototype.$myTools={
        //创建工具类的实例对象
        tool:new Tool()
    }
}

2、使用

注册到vue全局项目中（在main.js中操作）

//导入工具类
import Tool from '../public/tool/enroll.js'

Vue.use(Tool)

使用

//html中
{{$myTools.tool.Spr('1111')}}
//js中
this.$myTools.tool.Spr('111')

3、说明

1、$myTools是所用工具类封装集合的名字，也可以是其它名字
2、关于使用：

$myTools是工具类集合的名字，tool是具体的工具类文件，Spr是工具类内部的一个方法
例如有个工具类文件是time，·getYear·是里面的一个方法。该方法就可以这样调用 $myTools.time.getYear

实例

实例1

<el-button type="primary" @click="removeItem(confirmRemove)">删除</el-button>

removeItem(callback) {
    this.$confirm("此操作将永久删除, 是否继续?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(async () => {
        await callback();
      })
      .catch(() => {
        this.$message("已取消删除");
        return false;
      });
  },
  confirmRemove() {
    let that = this;
    setTimeout(() => {
      that.$message.success("删除成功");
    }, 1000);
  },

非全局公共方法

有时候不需要将方法写到全局，只是想写到一个js文件中，然后加载这个外部的js文件。实现如下：
外部js文件

export function getInfo(){
}

使用

<script>
import {getInfo} from '';
export default {
 mounted(){
    getInfo()
 }
}
</script>

全局样式

有些样式会经常使用，但是在每一个页面都要重新去写，这样会很麻烦。因此可以定义全局样式

这里我使用的是less，使用其它也同样合适。

1、先建立一个样式文件，例如mystyle.less。
2、将这个样式文件，通过import加载到main.js中，这样整个项目都可以使用这些样式

最后

以上就是多情金针菇为你收集整理的在vue项目中全局工具类、全局样式的使用的全部内容，希望文章能够帮你解决在vue项目中全局工具类、全局样式的使用所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。