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");

vue+element 封装公共js代码相关推荐

基于vue element 封装上传组件
基于vue element封装的上传组件使用方法: 1.首先引入该组件 2.注册组件 3.页面使用 4.回调函数(如需其他回调自行封装因为我暂时没用到其他的哈哈哈) <template& ...
面向对象封装放大镜js代码
面向对象封装放大镜js代码 <!DOCTYPE html> <html lang="en"><head><meta charset=&qu ...
前端Vue使用封装Mock.js和api请求模拟数据案例(带源码)
目录一:准备阶段二:使用阶段一:准备阶段 1.安装mockjs axios npm install mockjs --save npm install axios --save 2.main.j ...
vue如何写原生js_纯技巧向：React, Vue, Rxjs 和原生 JS 代码大乱斗
前言这是一篇纯技巧向的文章,跟一年多之前的<揭秘Vue-3.0最具潜力的API>一样[0],更少的背景铺垫,更多的代码,更多的 demo,更快的节奏. 让我们直接进入主题. 背景前一阵 ...
vue项目使用公共js方法@令狐张豪
我们在做项目中会用到很多js方法,然后有些方法是通用的我们需要进行封装使用在src下创建utils目录并创建utils.js文件 utils.js文件 export default {//判断手机机 ...
Vue + Element UI + Moment.js——el-table-column的时间戳格式转换解决方案
基本概念 Moment.js:JavaScript 日期处理类库解决方案 formatter="dateFormat"绑定一个 dateFormat方法 <el-table ...
vue+element封装一个填写和校验ip地址的组件
输入ip地址,输完自己切换到一下输入框,校验IP的准确性. 组件样式如下图使用方法 <template><IpAddress v-model="deviceIPAddre ...
前端学习（2996）：vue+element今日头条管理--代码测试规范
前端学习（2995）：vue+element今日头条管理--代码测试规范

vue+element 封装公共js代码

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

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

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

vue+element 封装公共js代码相关推荐

最新文章

热门文章