vue+element 封装公共js代码

一、多个 js 方法，不想用 vue.prototype
二、使用Vue.prototype 封装公共 js
三、封装的方法较多，又想通过this.直接调用

---

一、多个 js 方法，不想用 vue.prototype

封装一个弹框为例：

1. 在 components 文件夹下新增一个 js 文件夹，并在 js 文件夹下新增 index.js 文件。

import { MessageBox } from 'element-ui'
const handleconfirm = (text ='此操作将永久删除该文件, 是否继续?', type='warning') => {
  // 这里 export后面不加 default，引用时：import {方法名} from js文件地址。因为每个文件常有多个方法，所以常用此方案
  // export后加 default，引用时：import 方法名 from js文件地址
  // 通过export方式导出，在导入时要加{ }，export default则不需要
  return MessageBox.confirm(text, '提示',{
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: type
  })
}

export { handleconfirm } 

• export {} 和 export default {} 的区别：
  export {}：引用时 import {方法名} from js文件地址；
  export default {}：引用时 import 方法名 from js文件地址

2. 全局和局部使用的区别：笼统一点，全局注册在 main.js ，局部注册在需要调用的页面中。

import { handleConfirm } from '@/components/js'

3. 使用：

<el-button type="danger" size="mini" icon="el-icon-delete" @click="deleteData(scope.row.id)" >删除</el-button>

//删除
deleteData(id) {
  handleConfirm().then( ()=> {
    //调用删除接口
  }).catch( ()=> {
    this.$message.info("已取消删除！");
  })
}

二、使用Vue.prototype 封装公共 js

参考了 weixin_38673922 的博客。

1. 封装表格自定义序号为例：

//在 main.js 中写
Vue.prototype.$setIndex = function(index=0, pageNum=1, pageSize=10) {
    return (pageNum-1)*pageSize +(index+1) ;
}

2. 使用方法：

<el-table-column type="index" 
  :index="index=>this.$setIndex(index,this.searchForm.pageNum, this.searchForm.pageSize )" 
  width="50" label="序号" align="center" 
></el-table-column>
//index是element内部封装好的参数，this.searchForm.pageNum和this.searchForm.pageSize是页码和一页显示的条数
//vue模板中的 this 可以删除

补充表格分页不使用方法的写法：

<el-table 
	:data="tableData.slice((params.pageNum-1)*params.pageSize,params.pageNum*params.pageSize)" 
	border style="width: 100%" 
    :header-cell-style="{background:'#e0e9ff'}" 
></el-table>

三、封装的方法较多，又想通过 this. 直接调用

结合一、二

1. 在 components 文件夹下新增一个 js 文件夹，并在 js 文件夹下新增 index.js 文件。

import axios from 'axios';
import ElementUI from 'element-ui';

function getProcess(typeCode){
  console.log(1)
  axios.get('/api/temp/getParams?typeCode='+typeCode)
  .then(res => {    
    console.log(res)
    if( res.status == 200){      
      
    }
  })  
  .catch(err =>{
    this.$message.error('服务器响应失败');
    console.log(err);
  })
};

function alert(){
	//...
}

export default {
  getProcess, alert
}

2. 在 main.js 中引入，并在原型的身上挂载。

import commonJS from '@/components/js'
Vue.prototype.$commonJS = commonJS;

3. 使用：

this.$commonJS.getProcess("0001");