我的Vue之小功能統計
摘要：
摘要： 專案中經常會要用到大大小小的功能，所以我在這裡進行一個彙總，後面會持續新增至這篇部落格，希望當你遇到這個功能時，我的部落格能夠對你有幫助，(上一篇部落格說要在收假後寫一篇部落格做一個年終總結，想了半天不知道寫什麼，文筆不好，就算了，不寫了，今天是情人節，祝沒有脫單的程式設計師趕快脫單...
摘要： 專案中經常會要用到大大小小的功能，所以我在這裡進行一個彙總，後面會持續新增至這篇部落格，希望當你遇到這個功能時，我的部落格能夠對你有幫助，(上一篇部落格說要在收假後寫一篇部落格做一個年終總結，想了半天不知道寫什麼，文筆不好，就算了，不寫了，今天是情人節，祝沒有脫單的程式設計師趕快脫單，脫單了的永不脫髮，脫髮了的就當我沒說......)
一.安裝（npm）
圖片如下:可使用 npm 進行安裝也可以使用 VSCode 的終端進行安裝
1.安裝路由vue-router
npm 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)
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>',
})
二.路由配置（index.js）
圖片如下（進行路由跳轉）
1.模組歸納
export default new Router({
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 new Router({
routes: [
......
],
scrollBehavior (to, from, savedPosition) {
// console.log(to) // to：要進入的目標路由物件，到哪裡去
// console.log(from) // from：離開的路由物件，哪裡來
// console.log(savedPosition) // savePosition：會記錄滾動條的座標
if(savedPosition) {
return savedPosition;
}else{
return {x:0,y:0}
}
}
})
三.Cookie儲存
1.建立一個cookieUtil.js的檔案
//設定cookie
export function setCookie(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 function getCookie(param) {
var c_param = '';
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) {
c_param = arr2[1];
//儲存到儲存資料的地方
}
}
return c_param;
}
};
function padLeftZero (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.退出登入
<button @click="Signout">退出</button>
mounted () {
this.sellerId = getCookie("sellerId");
if (this.sellerId==undefined||this.sellerId=="") {
this.$router.push('/')
} else {
}
},
methods: {
//退出
Signout(){
setCookie("sellerId", "", -1);
this.$router.push('/')
},
}
四.傳送驗證碼
圖片如下
1.html部分
<el-button :disabled="disabled" @click="sendcode" class="sendcode">{{btntxt}}</el-button>
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程式碼：
<div v-bind:style="{width: myWidth,height: myHeight}"></div>
js程式碼：
export default {
data() {
return {
myWidth: (window.innerWidth - 240) + 'px',
myHeight: (window.innerHeight - 100) + 'px',
};
},
}
六.實時顯示當前時間
圖片如下（想後臺系統一般都會新增一個當前時間，方便使用者瞭解或記錄時間）
html程式碼
<span class="time">{{nowTime}}</span>
js程式碼
export default {
data() {
return {
nowTime:"",
nowWeek:"",
};
},
// 建立完成時
created() {
this.nowTimes();
},
methods: {
//當前時間
timeFormate(timeStamp) {
let year = new Date(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(): new Date(timeStamp).getDate();
var week = timeStamp ? new Date(timeStamp) : new Date();
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(): new Date(timeStamp).getHours();
let mm =new Date(timeStamp).getMinutes() < 10? "0" + new Date(timeStamp).getMinutes(): new Date(timeStamp).getMinutes();
this.nowTime = year + "/" + month + "/" + date +""+ this.nowWeek +""+ hh +":"+ mm ;
// console.log(this.nowTime)
clearInterval(this.Times);
},
// 定時器函式
nowTimes(){
this.timeFormate(new Date());
this.Times=setInterval(this.nowTimes,1000);
},
},
}
切記一定要清除定時器，當時作者忘記清除定時器頁面一直崩潰，後來列印才發現是忘記清除定時器了，
七.自定義滾動列表
圖片如下
html程式碼
<div class="right-select"> <ul> <li>張三1</li> <li>張三2</li> <li>張三3</li> <li>張三4</li> <li>張三5</li> <li>張三6</li> <li>張三7</li> </ul> </div>
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
<ul>
<liv-for="(item,index) in list" :key="item.id" >
<p class="p1">{{ index+1>9?index+1:"0"+(index+1) }}</p>
<p class="p2">{{ item.name }}{{ item.id }}{{ item.source }}</p>
</li>
</ul>
js程式碼
list: [{
name: '張一',
id: '1241',
source: '經銷商',
},{
name: '張二',
id: '1242',
source: '業務員',
},{
name: '張三',
id: '1243',
source: '普通使用者',
},{
name: '張四',
id: '1244',
source: '商城',
}],
九.Form表單提交
html程式碼
<form :model="reportForm"> <input type="text" v-model="reportForm.name" placeholder="姓名"/> <input type="text" v-model="reportForm.sex" placeholder="性別"/> <input type="text" v-model="reportForm.age" placeholder="年齡"/> </form> <button @click="sub"></button>
js程式碼
export default {
data() {
return {
reportForm: {
name: '',
sex:'',
age: '',
}
}
},
methods: {
sub() {
let reportdata = this.reportForm;
console.log(reportdata)
}
}
}
十.實現分頁效果
效果圖如下
該處是結合element-ui來寫的，請記得安裝element-ui，不知道安裝的請參考第一條
html程式碼：
<template>
<table>
<thead>
<tr>
<th class="sequence left-radius">序號</th>
<th>姓名</th>
<th>手機號</th>
<th>性別</th>
<th>使用者等級</th>
<th>上級使用者</th>
<th>建立日期</th>
<th class="right-radius">操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" :key="item.id">
<td class="sequence">{{ index+1>9?index+1:"0"+(index+1) }}</td>
<td>{{ item.name }}</td>
<td>{{ item.phone }}</td>
<td>{{ item.sex==1?"男":"女" }}</td>
<td>{{ item.user }}</td>
<td>{{ item.username }}</td>
<td>{{ item.date }}</td>
<td><a @click="See">檢視</a><a @click="Edit">修改</a><a @click="Edit">刪除</a></td>
</tr>
</tbody>
</table>
<div class="page">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5, 10, 20, 40]"
:page-size="pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="tableData.length">
</el-pagination>
</div>
</template>
js程式碼：
<script>
export default {
data() {
return {
currentPage:1, //初始頁
pagesize:10,//每頁的資料
tableData: [{
name: '張一',
phone: '13111111111',
sex: '1',
user: '普通使用者',
username: '李四',
date: '2018/11/30'
},{
name: '張二',
phone: '13122222222',
sex: '0',
user: '特殊使用者',
username: '李四',
date: '2018/12/30'
},{
name: '張三',
phone: '13133333333',
sex: '1',
user: '普通使用者',
username: '李四',
date: '2018/11/30'
},{
name: '張四',
phone: '13144444444',
sex: '0',
user: '普通使用者',
username: '李四',
date: '2018/11/30'
},{
name: '張五',
phone: '13155555555',
sex: '0',
user: '特殊使用者',
username: '李四',
date: '2018/05/14'
},{
name: '張六',
phone: '13166666666',
sex: '1',
user: '普通使用者',
username: '李四',
date: '2018/10/30'
},{
name: '張七',
phone: '13177777777',
sex: '1',
user: '普通使用者',
username: '李四',
date: '2019/01/06'
},{
name: '張八',
phone: '13188888888',
sex: '1',
user: '特殊使用者',
username: '李四',
date: '2018/06/17'
},{
name: '張九',
phone: '13199999999',
sex: '0',
user: '普通使用者',
username: '李四',
date: '2018/09/25'
},{
name: '張十',
phone: '13110101010',
sex: '1',
user: '特殊使用者',
username: '李四',
date: '2019/02/10'
},{
name: '張十一',
phone: '13124683579',
sex: '1',
user: '特殊使用者',
username: '李四',
date: '2019/02/10'
}]
}
},
methods: {
// 初始頁currentPage、初始每頁資料數pagesize和資料data
handleSizeChange: function (size) {
this.pagesize = size;
console.log(this.pagesize)//每頁下拉顯示資料
},
handleCurrentChange: function(currentPage){
this.currentPage = currentPage;
document.documentElement.scrollTop = 0;//點選翻頁的時候回到頂部
console.log(this.currentPage)//點選第幾頁
},
},
}
</script>
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-input__inner{
height: 100%;
font-size: 20px;
color: #333333;
}
.el-pagination__editor.el-input .el-input__inner{
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-pagination__total{
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程式碼：
<div class="UserChoice-listtop"> <div class="listonebtn" @mouseenter="enter1" @mouseleave="leave1"> <img :src="img1" /> <p>所有使用者</p> </div> </div>
js程式碼：
export default {
data() {
return {
img1: require('../../images/alluser.png'),
}
},
methods: {
//懸浮切換圖片
enter1: function(){
this.img1 = require('../../images/alluser2.png');
},
leave1: function(){
this.img1 = require('../../images/alluser.png');
},
},
}
至於文字樣式改變的話，直接用css的 :hover 解決就好。
十二.單選按鈕控制模組顯示隱藏
html如下：
<div class="attribute-radio" @change="btn"> <el-radio v-model="radio" label="0">無</el-radio> <el-radio" v-model="radio" label="1">有</el-radio> </div> <div v-show="show"> <p>我出來了<p> </div>
js如下：
export default {
data () {
return {
radio:'0',
show:false,
}
}
methods: {
//選擇代理商屬性
btn(){
if(this.radio==="1"){
this.show=true;
}else{
this.show=false;
}
},
}
}