VUE公共样式与公共方法
- 一、问题描述
- 二、公共样式
- 1、index.css
- 2、static和assets
- 三、公共方法
- 1、全局方法
- a、防止按钮重复提交
- b、防止a标签重复点击?
- 2、局部方法
- a、封装axios
- b、系统时间格式化
- c、单据单号生成
一、问题描述
在项目中,一些公共的样式和方法提取出来,可以节省代码量,方便各页面使用。
二、公共样式
1、index.css
在src/assets目录下,新建index.css文件,在main.js中引入css文件
import Vue from 'vue'
import router from './router'
import './assets/index.css'
2、static和assets
static:static/ 目录下的文件并不会被 Webpack 处理:它们会直接被复制到最终目录(默认是dist/static)下。必须使用绝对路径引用这些文件。
assets:目录下的文件会被 Webpack 处理。
三、公共方法
1、全局方法
a、防止按钮重复提交
参考:https://blog.csdn.net/qq_45516629/article/details/106422417?spm=1001.2014.3001.5506
(1)新建src/api/index.js文件
import Vue from 'vue'
// 防止按钮重复点击
const preventReClick = Vue.directive('preventReClick', {
inserted: function (el, binding) {
el.addEventListener('click', () => {
if (!el.disabled) {
el.disabled = true
setTimeout(() => {
el.disabled = false
}, binding.value || 5000)
}
})
}
});
export { preventReClick }
(2)main.js引入
import {preventReClick } from "../src/api/index"; // 引入方法
(3)在vue文件中使用
<el-button type="primary" @click="submitForm('ruleForm')" size=medium v-preventReClick>点击添加</el-button>
可以在每个页面中使用v-preventReClick,不需要每个页面重新引入
b、防止a标签重复点击?
2、局部方法
一些方法只在某几个页面引用
a、封装axios
在src/api文件夹下,新建request.js
import axios from "axios";
/* axios get */
export function get(url) {
return function(params) {
return axios.get(url + "?" + params).then(res => {
// console.log(res);
return res.data; //根据实际情况获取返回数据
})
.catch(e => {});
};
}
/* axios post */
export function post(url) {
return function(params) {
return axios.post(url + "?" + params).then(res => {
return res.data;根据实际情况获取返回数据
})
.catch(e => {});
};
}
在api/index.js中调用并导出
import {get,post} from './request'
import Vue from 'vue'
// 用户模块
const postLogin=post('/cgi/sys/login') //登录
const getLogout=get('/cgi/sys/logout') //退出
const getUsershow=get('/cgi/main/system/user/show') //获取用户列表
const postUseradd=post('/cgi/main/system/user/add') //增加用户
const postUserupdate=post('/cgi/main/system/user/update') //修改用户
const postUserdelete=post('/cgi/main/system/user/delete') //删除用户
export {
postLogin,
getLogout,
getUsershow,
postUseradd,
postUserupdate,
postUserdelete,
}
在页面中使用
import { postLogin } from "../../api/index.js"; // 引入方法
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
// 登录提交
postLogin(querystring.stringify(this.ruleForm)).then(res=>{
if (res.code==2) {
localStorage.setItem('username',this.ruleForm.username)
if (this.checked) {
localStorage.setItem('password',this.ruleForm.password)
}else if(!this.checked){
localStorage.removeItem('password')
}
this.$message({
message: res.message,
type: 'success'
});
var that = this;
// 跳转到首页
setTimeout(function(){
that.$router.push({name:'index'})
},1000)
// 将登录名使用vuex传递到Home页面
sessionStorage.setItem('loginTime',new Date())
this.$store.commit('handleUserLogin',res.data.user);
}else{
this.$message({
message: '登录失败,'+res.message,
type: 'error'
});
}
})
} else {
return false;
}
});
},
b、系统时间格式化
export function settime() {
return function(value) {
var date = new Date(value);
var year = date.getFullYear();
var month = date.getMonth() + 1;
month = month < 10 ? "0" + month : month;
var day = date.getDate();
day = day < 10 ? "0" + day : day;
var hour = date.getHours();
hour = hour < 10 ? "0" + hour : hour;
var minute = date.getMinutes();
minute = minute < 10 ? "0" + minute : minute;
var second = date.getSeconds();
second = second < 10 ? "0" + second : second;
return year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;
}
}
const systime=settime()
mounted() {
var _this = this;
_this.ruleForm.createTime = systime(new Date());
_this.ruleForm.poId = setOidTime(new Date());
},
c、单据单号生成
// 单据年月日
export function oidTime() {
return function(value) {
var date = new Date(value);
var year = date.getFullYear();
var month = date.getMonth() + 1;
month = month < 10 ? "0" + month : month;
var day = date.getDate();
day = day < 10 ? "0" + day : day;
return year + month + day +(Math.floor(Math.random()*(9999-1000))+1000);
}
}
const setOidTime=oidTime()