在vue項(xiàng)目中設(shè)置一些全局的公共樣式

更新時(shí)間：2022年05月27日 11:12:42 作者：李少0

這篇文章主要介紹了在vue項(xiàng)目中設(shè)置一些全局的公共樣式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue設(shè)置全局的公共樣式

本公司開(kāi)發(fā)的產(chǎn)品，在運(yùn)維去客戶哪里上線的時(shí)候，客戶可能會(huì)對(duì)產(chǎn)品主頁(yè)面的一些色調(diào)，字體大小等不滿意。所以需求就是在我們的開(kāi)發(fā)包在往客戶服務(wù)器上發(fā)布的時(shí)候，有一個(gè)scss文件可以隨時(shí)調(diào)整這些字體和顏色。

思路

1.首先在public公共文件的css文件夾下面新建一個(gè)allstyle.scss的樣式文件夾，在這個(gè)里面定義一些樣式，和字體的大小。這樣做的好處就是，在webpack打包的時(shí)候，不會(huì)把這個(gè)文件給重新打包，我們可以在打包好的dist文件的css中輕松的找到我們這個(gè)scss文件，便于后面的修改。

2.在我們需要的頁(yè)面引入這個(gè)公共的scss文件，然后在這個(gè)頁(yè)面就可以使用我們定義的公共樣式。

代碼：allstyle.scss中的代碼

a.vue頁(yè)面的引入和使用

總結(jié)：這樣做還有一個(gè)好處就是便于維護(hù)。缺點(diǎn)就是不夠靈活

vue公共樣式與公共方法

問(wèn)題描述

在項(xiàng)目中，一些公共的樣式和方法提取出來(lái)，可以節(jié)省代碼量，方便各頁(yè)面使用。

公共樣式

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/ 目錄下的文件并不會(huì)被 Webpack 處理：它們會(huì)直接被復(fù)制到最終目錄（默認(rèn)是dist/static）下。必須使用絕對(duì)路徑引用這些文件。
assets:目錄下的文件會(huì)被 Webpack 處理。

公共方法

1、全局方法

a、防止按鈕重復(fù)提交

（1）新建src/api/index.js文件

import Vue from 'vue'
// 防止按鈕重復(fù)點(diǎn)擊
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>點(diǎn)擊添加</el-button>

可以在每個(gè)頁(yè)面中使用v-preventReClick，不需要每個(gè)頁(yè)面重新引入

b、防止a標(biāo)簽重復(fù)點(diǎn)擊？

2、局部方法

一些方法只在某幾個(gè)頁(yè)面引用

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; //根據(jù)實(shí)際情況獲取返回?cái)?shù)據(jù)
? ? ? })
? ? ? .catch(e => {});
? };
}
/* axios post */
export function post(url) {
? return function(params) {
? ? return axios.post(url + "?" + params).then(res => {
? ? ? ? ? return res.data;根據(jù)實(shí)際情況獲取返回?cái)?shù)據(jù)
? ? ? })
? ? ? .catch(e => {});
? };
}

在api/index.js中調(diào)用并導(dǎo)出

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,
}

在頁(yè)面中使用

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;
? ? ? ? ? ? ? ? // 跳轉(zhuǎn)到首頁(yè)
? ? ? ? ? ? ? ? setTimeout(function(){
? ? ? ? ? ? ? ? ? ? that.$router.push({name:'index'})
? ? ? ? ? ? ? ? },1000)
? ? ? ? ? ? ? ? // 將登錄名使用vuex傳遞到Home頁(yè)面
? ? ? ? ? ? ? ? sessionStorage.setItem('loginTime',new Date())
? ? ? ? ? ? ? ? this.$store.commit('handleUserLogin',res.data.user);
? ? ? ? ? ? ?}else{
? ? ? ? ? ? ? ? this.$message({
? ? ? ? ? ? ? ? ? ? message: '登錄失敗,'+res.message,
? ? ? ? ? ? ? ? ? ? type: 'error'
? ? ? ? ? ? ? ? });
? ? ? ? ? ? ?}
? ? ? ? ? ?})
? ? ? ? } else {
? ? ? ? ? return false;
? ? ? ? }
? ? ? });
? ? },

b、系統(tǒng)時(shí)間格式化

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、單據(jù)單號(hào)生成

// 單據(jù)年月日
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()

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: