---

摘要：项目中经常会要用到大大小小的功能，所以我在这里进行一个汇总，后面会持续添加至这篇博客，希望当你遇到这个功能时，我的博客能够对你有帮助，(上一篇博客说要在收假后写一篇博客做一个年终总结，想了半天不知道写什么，文笔不好，就算了，不写了，今天是情人节，祝没有脱单的程序员赶快脱单，脱单了的永不脱发，脱发了的就当我没说......)

一.安装（npm）

图片如下:可使用npm进行安装也可以使用VSCode的终端进行安装

1.安装路由vue-routernpm install vue-router

2.安装axios

npm install --save axios

3.安装vuex

npm install vuex --save

4.安装scss

npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --save-dev node-sass

5.安装element-ui

npm i element-ui -S

6.main.js配置

import Vue from 'vue'import App from './App'import router from './router'import axios from 'axios'import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'import VueRouter from 'vue-router'import Vuex from 'vuex'Vue.use(ElementUI) Vue.use(VueRouter) Vue.use(Vuex) newVue({ el: '/#app', router, components: { App }, template: '', })

 

二.路由配置（index.js）

图片如下（进行路由跳转）

 

1.模块归纳export default newRouter({ routes: [ { path: '/', name: 'Login', component: Login, }, { path: '/Forget', name: 'Forget', component: Forget, }, { path: '/', component: Home, name: '用户管理', children: [ { path: '/User', component: User, name: '用户'}, { path: '/SeeEdit', component: SeeEdit, name: '用户详情'}, { path: '/Modify', component: Modify, name: '修改用户资料'}, { path: '/changepsw', component: changepsw, name: '修改密码'}, ] }, ...... ], })

 

2.路由切换后页面滚动位置不变bug的解决方法export default newRouter({ routes: [ ...... ], scrollBehavior (to, from, savedPosition) { // console.log(to) // to：要进入的目标路由对象，到哪里去 // console.log(from) // from：离开的路由对象，哪里来 // console.log(savedPosition) // savePosition：会记录滚动条的坐标 if(savedPosition) { returnsavedPosition; }else{ return {x:0,y:0} } } })

 

 

三.储存，传值

1.Cookie

1.建立一个cookieUtil.js的文件//设置cookie export functionsetCookie(key,value) { var Days = 0.6; var exdate = new Date(); //获取时间 exdate.setTime(exdate.getTime() + Days/24/60/60/1000); //保存的天数 //字符串拼接cookie window.document.cookie = key + "=" + value + ";path=/;expires=" +exdate.toGMTString(); }; //读取cookie export functiongetCookie(param) { var cparam = ''; if (document.cookie.length > 0) { var arr = document.cookie.split('; '); //这里显示的格式需要切割一下自己可输出看下 for (var i = 0; i < arr.length; i++) { var arr2 = arr[i].split('='); //再次切割 //判断查找相对应的值 if (arr2[0] ==param) { cparam = arr2[1]; //保存到保存数据的地方 } } returnc_param; } }; functionpadLeftZero (str) { return ('00' +str).substr(str.length); };

 

2.在登录界面login.vue引用这个js//cookie import {setCookie,getCookie}from '../router/cookieUtil'

 

3.然后储存，取值//储存用户信息 setCookie('sellerId', this.information.sellerId); //取值用户信息 this.sellerId = getCookie("sellerId");

 

4.退出登录退出

mounted () { this.sellerId = getCookie("sellerId"); if (this.sellerId==undefined||this.sellerId=="") { this.$router.push('/') } else{ } }, methods: { //退出 Signout(){ setCookie("sellerId", "", -1); this.$router.push('/') }, }

 2.Session Storage

A页面缓存aaa的值sessionStorage.setItem('aaa', "111")

B页面去获取到值

alert(sessionStorage.getItem('aaa'))

3.通过路由带参数进行传值

A和B,A通过query把orderId传递给B

this.$router.push({ path: '/B', query: { orderId: 123 } }) //跳转到B

B获取

let aaa=this.$route.query.orderId

 

 

 

四.发送验证码

图片如下

1.html部分{{btntxt}}

2.js部分

export default{ data() { return{ disabled:false, time:0, btntxt:"发送验证码", }; }, methods: { //发送手机验证码倒计时 timer() { if (this.time > 0) { this.time--; this.btntxt=this.time+"s后重新获取"; setTimeout(this.timer, 1000); } else{ this.time=0; this.btntxt="发送验证码"; this.disabled=false; } }, } }

 

五.div自适应屏幕宽高

1.像后台管理系统那种格式，有顶部导航栏和左侧导航栏，而切换的那一块盒子怎么能自适应屏幕的宽高减去顶部和左侧固定的宽高呢？

html代码：

js代码：

export default{ data() { return{ myWidth: (window.innerWidth - 240) + 'px', myHeight: (window.innerHeight - 100) + 'px', }; }, }

 

六.实时显示当前时间

图片如下（想后台系统一般都会添加一个当前时间，方便用户了解或记录时间）

html代码{{nowTime}}

js代码

export default{ data() { return{ nowTime:"", nowWeek:"", }; }, // 创建完成时 created() { this.nowTimes(); }, methods: { //当前时间 timeFormate(timeStamp) { let year = newDate(timeStamp).getFullYear(); let month =new Date(timeStamp).getMonth() + 1 < 10? "0" + (new Date(timeStamp).getMonth() + 1): new Date(timeStamp).getMonth() + 1; let date =new Date(timeStamp).getDate() < 10? "0" + new Date(timeStamp).getDate(): newDate(timeStamp).getDate(); var week = timeStamp ? new Date(timeStamp) : newDate(); if(week.getDay() == 1){ this.nowWeek="周一"} else if(week.getDay() == 2){ this.nowWeek="周二"} else if(week.getDay() == 3){ this.nowWeek="周三"} else if(week.getDay() == 4){ this.nowWeek="周四"} else if(week.getDay() == 5){ this.nowWeek="周五"} else if(week.getDay() == 6){ this.nowWeek="周六"} else{ this.nowWeek="周日"} let hh =new Date(timeStamp).getHours() < 10? "0" + new Date(timeStamp).getHours(): newDate(timeStamp).getHours(); let mm =new Date(timeStamp).getMinutes() < 10? "0" + new Date(timeStamp).getMinutes(): newDate(timeStamp).getMinutes(); this.nowTime = year + "/" + month + "/" + date +" "+ this.nowWeek +" "+ hh +":"+mm ; // console.log(this.nowTime) clearInterval(this.Times); }, // 定时器函数 nowTimes(){ this.timeFormate(newDate()); this.Times=setInterval(this.nowTimes,1000); }, }, }

切记一定要清除定时器，当时作者忘记清除定时器页面一直崩溃，后来打印才发现是忘记清除定时器了， 

 

七.自定义滚动列表

图片如下

html代码

css代码

.right-select{ width: 500px; height: 105px; overflow-y: scroll; border: 1px solid /#bbbbbb; border-radius: 5px; margin-left: 65px; } .right-select::-webkit-scrollbar { width: 12px; background-color: /#fff; } .right-select::-webkit-scrollbar-thumb { height: 26px; background-color: /#666; border-radius: 50px; } .right-select::-moz-scrollbar { width: 12px; background-color: /#fff; } .right-select::-moz-scrollbar-thumb { height: 26px; background-color: /#666; border-radius: 50px; }

 自定义滚动条时，请记住要定义盒子的高度，不然滚动条会显示不出来

 

八.判断数据列表序号

图片如下

html

• {{ index+1>9?index+1:"0"+(index+1) }}

  {{ item.name }}  {{ item.id }}  {{ item.source }}

 

js代码list: [{ name: '张一', id: '1241', source: '经销商', },{ name: '张二', id: '1242', source: '业务员', },{ name: '张三', id: '1243', source: '普通用户', },{ name: '张四', id: '1244', source: '商城', }],

 

九.Form表单提交

html代码

js代码

export default{ data() { return{ reportForm: { name: '', sex:'', age: '', } } }, methods: { sub() { let reportdata = this.reportForm; console.log(reportdata) } }}

 

十.实现分页效果

效果图如下

 

该处是结合element-ui来写的，请记得安装element-ui，不知道安装的请参考第一条

html代码：

 

js代码：

 

css代码：//分页 /deep/.el-pagination{margin-bottom:30px;float:right;font-size:20px;color:/#333333;margin-right:55px;font-weight:normal;.el-select .el-input{ width:126px;height:36px; }.el-select .el-input .el-inputinner{height:100%;font-size:20px;color:/#333333; }.el-paginationeditor.el-input .el-inputinner{height:36px; }.btn-prev,.btn-next{height:36px; }.btn-prev{border-radius:5px 0 0 5px; }.btn-next{border-radius:0 5px 5px 0; }.el-pager li{line-height:36px;height:36px;font-size:20px; }.el-paginationtotal{color:/#333333; }button,span:not([class/*=suffix]){height:36px;line-height:36px;font-size:20px;color:/#333333; }.el-pagination__editor.el-input{font-size:20px; }}

 

十一.悬浮改变图片和文字颜色

图片事例如下：

起始悬浮后

 

html代码：

所有用户