在vue項(xiàng)目中設(shè)置一些全局的公共樣式
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è)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue proxyTable配置多個(gè)接口地址,解決跨域的問(wèn)題
這篇文章主要介紹了Vue proxyTable配置多個(gè)接口地址,解決跨域的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09vue把輸入框的內(nèi)容添加到頁(yè)面的實(shí)例講解
在本篇文章里小編給大家整理的是關(guān)于vue把輸入框的內(nèi)容添加到頁(yè)面的實(shí)例以及相關(guān)知識(shí)點(diǎn),需要的朋友們學(xué)習(xí)下。2019-11-11vuex刷新頁(yè)面后如何解決丟失store的數(shù)據(jù)問(wèn)題
這篇文章主要介紹了vuex刷新頁(yè)面后如何解決丟失store的數(shù)據(jù)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-12-12