vue中封装全局组件方法

vue项目中全局注册js文件 js文件便捷添加样式

vue项目中全局注册js文件

首先是创建一个js文件叫Toast.js

export const Toast = {
  Toast1: () => {
    var p = document.createElement("div")
    p.innerHTML = "11"
    //调用下面的style方法
    style(p, {
      'color': 'red',
      'border': '1px solid red'
    })
    var div = document.getElementsByTagName("div")[0]
    div.appendChild(p)
  },
  Toast2: () => {
    console.log("222")
  },
};

//这里的方法就是快捷添加样式的函数
function style(domname, obj) {
  console.log(domname)
  for (var val in obj) {
    console.log(val, obj[val])
    domname.style[val] = obj[val]
  }
}

接着在main.js中全局注册js文件

import {Toast} from './components/Toast'
//因为封装的js文件抛出了一个对象  所以这里要进行解构赋值操作
Vue.prototype.$Toast = Toast

最后在页面中使用就行

<template>
  <div></div>
</template>

<script>
export default {
  mounted() {
    this.$Toast.Toast1();
  },
};
</script>

<style>
</style>