在vue項目中設置一些全局的公共樣式
更新時間：2022年05月27日 11:12:42 作者：李少0
這篇文章主要介紹了在vue項目中設置一些全局的公共樣式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue設置全局的公共樣式
本公司開發(fā)的產(chǎn)品，在運維去客戶哪里上線的時候，客戶可能會對產(chǎn)品主頁面的一些色調(diào)，字體大小等不滿意。所以需求就是在我們的開發(fā)包在往客戶服務器上發(fā)布的時候，有一個scss文件可以隨時調(diào)整這些字體和顏色。
思路
1.首先在public公共文件的css文件夾下面新建一個allstyle.scss的樣式文件夾，在這個里面定義一些樣式，和字體的大小。這樣做的好處就是，在webpack打包的時候，不會把這個文件給重新打包，我們可以在打包好的dist文件的css中輕松的找到我們這個scss文件，便于后面的修改。
2.在我們需要的頁面引入這個公共的scss文件，然后在這個頁面就可以使用我們定義的公共樣式。
代碼：allstyle.scss中的代碼
a.vue頁面的引入和使用
總結(jié)：這樣做還有一個好處就是便于維護。缺點就是不夠靈活
vue公共樣式與公共方法
問題描述
在項目中，一些公共的樣式和方法提取出來，可以節(jié)省代碼量，方便各頁面使用。
公共樣式
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、防止按鈕重復提交
（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; //根據(jù)實際情況獲取返回數(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ù)據(jù)
? ? ? })
? ? ? .catch(e => {});
? };
}
在api/index.js中調(dià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,
}在頁面中使用
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)到首頁
? ? ? ? ? ? ? ? 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、系統(tǒng)時間格式化
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ù)單號生成
// 單據(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()以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
本篇文章給大家分享了Vue取消eslint語法限制的相關知識點內(nèi)容，有興趣的朋友們可以參考學習下。2018-08-08
本篇文章主要介紹了詳解axios中文文檔，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
Vue proxyTable配置多個接口地址,解決跨域的問題
這篇文章主要介紹了Vue proxyTable配置多個接口地址,解決跨域的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
在本篇文章里小編給大家整理的是關于vue把輸入框的內(nèi)容添加到頁面的實例以及相關知識點，需要的朋友們學習下。2019-11-11
vuex刷新頁面后如何解決丟失store的數(shù)據(jù)問題
這篇文章主要介紹了vuex刷新頁面后如何解決丟失store的數(shù)據(jù)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
在最近一個項目的后臺管理系統(tǒng)中，寫前端界面時用到了ElementUI，但是發(fā)現(xiàn)導入數(shù)據(jù)表格之后表頭的高度一直很高，那么如何解決，本文就來詳細的介紹一下2021-09-09
這篇文章主要介紹了詳解Vuex管理登錄狀態(tài),小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要為大家詳細介紹了vue懸浮表單復合組件開發(fā)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要為大家詳細介紹了Vue3+Ts如何實現(xiàn)緩存,用戶搜索詞本地排名,延遲消費或者消息隊列,用戶簽到和鎖,以及接口限流,還有全局ID等功能,需要的可以參考下2024-03-03
這篇文章主要給大家介紹了關于Vue3更高效的構建工具Vite使用的相關資料,Vite是一種面向現(xiàn)代瀏覽器的一個更輕、更快的前端構建工具,能夠顯著提升前端的開發(fā)體驗,需要的朋友可以參考下2023-10-10