web vue開發遇到的問題
阿新 • • 發佈：2019-02-20
目錄
vue開發的小知識點
作為剛入行web開發的我來說，終於可以系統的完成一塊功能邏輯了，有挑戰也有進步，下面把最近開發遇到的常見問題總結一下。
css
多行文字和單行文字溢位問題
這個是比較常見的問題，基本上每次開發都會遇到，程式碼是固定格式
//單行文字溢位部分隱藏顯示省略號... overflow: hidden; text-overflow:ellipsis; white-space: nowrap; /** n 行文字溢位部分隱藏顯示省略號.. 使用了WebKit的CSS擴充套件屬性，該方法適用於WebKit瀏覽器及移動端； （WebKit： 是一個開源的瀏覽器引擎） http://blog.csdn.net/cutesource/article/details/8731841/ -webkit-line-clamp:限制在一個塊元素顯示的文字的行數 （box-orient：指定一個box子元素是否應按水平或垂直排列）http://www.runoob.com/cssref/css3-pr-box-orient.html **/ width:100% height:20px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
超出內容出現滾動條
//豎直方向滾動
overflow: auto;
overflow-x: hidden;//隱藏橫軸滾動條
//水平方向滾動
overflow: hidden;
overflow-x: scroll;
- 1
- 2
- 3
- 4
- 5
- 6
css樣式style的引數
剛開始不太理解
<div class="father"> <div class="son"> </div> </div> .father{ width:100% height:20px; .son{ width:200 height:20px; } }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
scoped表示該樣式只能作用在當前頁面，不會影響到其他頁面，包括子頁面
上拉載入更多
下來載入更多自己實現的話就通過touch事件，其中用到了標籤，插槽，相當於Android中的標籤。
這個主要參考的是vue2.0 移動端，下拉重新整理，上拉載入更多外掛，修改版 不過還不太好用，修改了一點東西，下拉重新整理還沒有實現，晚點再更新一下。
詳情頁返回列表頁保留上次進入的位置
這個問題很常見，目前還沒有實現，後期不充。。。。
水平滑動的實現（white-space: nowrap;）
我們有一排廣告欄要求可以水平滑動，樣式一樣，所以我就使用了ul/li標籤然後ul左浮動，但是樣式有問題，超出的li會往下掉，後來就用的display：inline-block。這裡重點說一下white-space: nowrap;這個可以實現內部的元素在一行上排列，但是會影響子元素，如果子元素是一個p標籤有多行，需要單獨改一下white-space: normal;這樣問題就解決了，具體看程式碼。
//html
<div class="section page2-bg">
<h3>產品</h3>
<div class="line">
<div class="yellow"></div>
<div class="circle"></div>
</div>
<ul class="products">
<!--此處先寫一個作為代表-->
<li class="product">
<img class="image" src="../../images/product1.png"/>
<div class="introduction">
<h1 class="littleT">***</h1>
<h2 class="largeT">***</h2>
<p class="info">
*******************</p>
<div class="more">檢視更多</div>
</div>
</li>
</ul>
</div>
//css
.page2-bg {
background-image: url(../../images/page2_bg.png);
background-size: cover;
background-repeat: no-repeat;
}
.page2-bg h3 {
width: 100%;
height: 59px;
font-size: 60px;
font-weight: normal;
font-family: MicrosoftYaHei;
color: rgba(18, 22, 27, 1);
}
.page2-bg .line {
position: relative;
margin-top: 31px;
width: 100%;
height: 18px;
text-align: center;
line-height: 18px;
}
.page2-bg .line .yellow {
position: absolute;
top: 50%;
left: 50%;
margin-top: -1px;
margin-left: -35px;
width: 70px;
height: 2px;
background: rgba(255, 217, 0, 1);
}
.page2-bg .line .circle {
position: absolute;
top: 50%;
left: 50%;
margin-top: -9px;
margin-left: -9px;
width: 18px;
height: 18px;
background: RGBA(255, 255, 255, 1);
border-radius: 50%;
border: 4px solid RGBA(234, 85, 4, 1);
}
.page2-bg .products {
margin-top: 100px;
height: 346px;
width: 100%;
overflow: auto;
overflow-x: scroll;
white-space: nowrap;
}
.page2-bg .products::-webkit-scrollbar {
display: none;//隱藏滾動條
}
.page2-bg .products .product {
display: inline-block;
margin: 0px;
}
.page2-bg .products .product .image {
float: left;
width: 371px;
height: 346px;
}
.page2-bg .products .product .introduction {
float: left;
width: 514px;
height: 346px;
background: #F0F2F5;
padding: 0 85px 0 59px;
font-family: MicrosoftYaHei;
}
.page2-bg .products .product .introduction .littleT {
height: 12px;
font-size: 14px;
color: rgba(112, 122, 135, 1);
line-height: 18px;
padding-top: 3px;
}
.page2-bg .products .product .introduction .largeT {
margin-top: 36px;
height: 40px;
font-size: 40px;
color: rgba(18, 22, 27, 1);
line-height: 47px;
}
.page2-bg .products .product .introduction .info {
width: 370px;
height: 134px;
margin-top: 38px;
font-size: 14px;
color: rgba(102, 102, 102, 1);
line-height: 28px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
overflow: hidden;
white-space: normal;
}
.page2-bg .products .product .introduction .more {
margin-top: 30px;
width: 170px;
height: 55px;
background: rgba(234, 85, 4, 1);
border-radius: 4px;
font-size: 14px;
color: rgba(255, 255, 255, 1);
text-align: center;
line-height: 55px;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
不過以上只能水平滑動，不能拖拽，功能並沒有實現，後來使用了better-scroll完美的解決問題。在最外層套一個div
import BScroll from 'better-scroll';
mounted(){
let wrapper = document.querySelector('.products-wrap')
let scroll = new BScroll('.products-wrap',{
scrollX: true,
click: true
})
}
//css
.page2-bg .products-wrap{
margin:0 auto;
margin-top: 100px;
height: 346px;
width: 90%;
overflow: hidden;
overflow-x: scroll;
}
.page2-bg .products {
height: 346px;
width: 6195px;//所有標籤的總和，這樣寫如果li不是寫死的就有問題了
white-space: nowrap;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
漸變色（粗細不一）
漸變色主要一條線或者背景圖，一般就是一個均勻變化，如下 
實現方式就是
background: linear-gradient(to right, #FF4800, #FF9900);
- 1
- 2
下面是粗細不一的 
這個剛開始都不知奧咋實現，因為粗細不一致，一條白線逐漸變粗；後來就下了一個巧妙的方法就是使用漸變來實現，給人一個視覺效果。
background: linear-gradient(to right, #FF9900, #ffffff);
- 1
- 2
還有下劃線的漸變，使用border-image實現,可以看下面三方控制元件中input的下劃線設定。
動畫（由左向右）
一般動畫是預設有右向左滑，我現在要實現有左向右滑，移動方向加個負號就可以了
.show-enter-active, .show-leave-active {
transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.show-enter, .show-leave-to {
transform: translateX(-375px);//由左向右
opacity: 0;
}
//html
<transition name="show">
//執行動畫的也頁面
</transition>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
將一個圖片作為背景圖，並且隨著頁面滑動而滑動
background-image: url("image/background.png");
background-repeat: no-repeat;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
background-attachment: scroll;
- 1
- 2
- 3
- 4
- 5
JavaScript
登入時長限制，時間到了退出（cookie）
記錄使用者登入時長，既可以使用local storage實現，然後拿到時間做差，看是否超時；也可以用cookie指定過期時長，這樣我們直接判斷cookie值是否存在就可以了。我選擇的後者，程式碼如下：
//設定cookie
var exp = new Date();
exp.getMilliseconds()
exp.setTime(exp.getTime() + 60 * 1000);//過期時間 1分鐘
console.log(exp.toGMTString())
//this.setCookie('isLogin', true, exp.toGMTString())
document.cookie = 'isLogin' + '=' + true + ';expires=' + exp.toGMTString();
//此處賦值的是世界時間，和我國的時間差8小時，不過千萬不要把這8小時加上，直接賦值指定時長就好
//獲取cookie，可以用js-cookie
import Cookies from 'js-cookie';
updated() {
if (!Cookies.get('isLogin')) {
this.$store.dispatch("setSignOut")//清空使用者登入資訊
this.$router.push({
name: 'login'//跳到登入頁
});
}
},
activated() {
if (!Cookies.get('isLogin')) {
this.$store.dispatch("setSignOut")
this.$router.push({
name: 'login'
});
}
},
//因為沒有統一的入口，所以我在首頁的updated和activated中新增的判斷，並沒有在每個頁面都加，感覺沒必要
//還可以用這種方式獲取cookie，不需要導包了
function getCookie(cname){
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i].trim();
if (c.indexOf(name)==0) { return c.substring(name.length,c.length); }
}
return "";
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
生命週期和鉤子函式
生命週期是我們流程的一箇中重要工具，瞭解生命週期我們才能更好的判斷流程的執行順序，方便我們處理頁面的展示。
這篇文章寫的比較詳細可以參考一下Vue2.0 探索之路——生命週期和鉤子函式的一些理解
三方控制元件（Element ui）
用到element UI的datetimePicker控制元件，需要改一下他的樣式和邏輯，看了API但是用起來還會有問題，我們要求改一些樣式，還要處理時間，比如每次進來是上次的時間；如果另外如果開始時間選擇非當前的日期，那麼時間就是選擇日期的00：00；如果結束時間選擇的非當前的日期，那麼時間就預設是23：59。下面看程式碼，我是咋實現的吧！
<div class="select-time">
<div class="timePicker">
<el-date-picker
v-model="start"
type="datetime"
placeholder="yy/MM/dd HH:mm"
format="yy/MM/dd HH:mm"
value-format="yyyy/MM/dd HH:mm"
default-time="00:00"
:clearable="false"
:picker-options="pickerBeginDateBefore"
@change="getStart"
>
</el-date-picker>
<img class="screenRight show" src="../../../images/show_detail.png"/>
</div>
<span class="zhi">至</span>
<div class="timePicker">
<el-date-picker
v-model="end"
type="datetime"
placeholder="yy/MM/dd HH:mm"
format="yy/MM/dd HH:mm"
default-time="23:59"
value-format="yyyy/MM/dd HH:mm"
:clearable="false"
:picker-options="pickerBeginDateAfter"
@change="getEnd"
>
</el-date-picker>
<img class="screenRight show" src="../../../images/show_detail.png"/>
</div>
</div>
//css
.screenRight {
width: 9px;
height: 6px;
}
input {
outline: none;
border: none;
border: 0px;
margin-top: 13px;
height: 29px;
width: 100%;
line-height: 29px;
font-size: 15px;
font-family: MicrosoftJhengHeiUIRegular;
color: rgba(0, 0, 51, 1);
border-bottom: 1px solid rgba(153, 153, 153, 1);
}
input::-webkit-input-placeholder {
color: rgba(153, 153, 153, 1);
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */
color: rgba(153, 153, 153, 1);
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: rgba(153, 153, 153, 1);
}
input:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: rgba(153, 153, 153, 1);
}
input:hover {//響應的時候下劃線改變
outline: none;
border: none;
border: 0px;
border-bottom: 2px solid;
border-image: -webkit-linear-gradient(to right, #FF4800, #FF9900) 30 30;//水平漸變
border-image: -moz-linear-gradient(to right, #FF4800, #FF9900) 30 30;
border-image: linear-gradient(to right, #FF4800, #FF9900) 30 30;
}
input.form-control:focus {
outline: none;
border: none;
border: 0px;
}
//由於控制元件內部的樣式如果新增scoped就修改不了，所以我單獨修改的內部樣式
<style lang="less">
.select-time {
display: flex;
position: relative;
width: 100%;
height: 38px;
line-height: 38px;
margin-top: 11px;
.timePicker {
flex: 1;
position: relative;
top: 0px;
left: 0px;
border-bottom: 1px solid rgba(153, 153, 153, 1);
.el-input__prefix {
outline: none;
border: none;
border: 0px;
-moz-user-select: none;
-webkit-user-select: none;
}
.el-input__inner {
outline: none;
border: none;
border: 0px;
height: auto;
line-height: 0px;
padding-left: 0px;
padding-right: 0px;
-moz-user-select: none;
-webkit-user-select: none;
}
.el-date-editor.el-input, .el-date-editor.el-input__inner {
width: auto;
outline: none;
border: none;
border: 0px;
-moz-user-select: none;
-webkit-user-select: none;
}
.el-input__icon {
display: none;
}
.show {
position: absolute;
bottom: 14px;
right: 0px;
}
}
.zhi {
font-size: 15px;
color: rgba(255, 72, 0, 1);
font-style: italic;
padding: 0px 8px;
}
/*.show-first {*/
/*position: absolute;*/
/*right: 185px;*/
/*top: 20px;*/
/*}*/
/*.show-second {*/
/*position: absolute;*/
/*right: 0px;*/
/*top: 20px;*/
/*}*/
}
</style>
//js
data() {
return {
first: true,
isProduct: false,
current: 0,//當前選中的產品
start: '',//控制元件的開始時間
end: '',//控制元件的結束時間
// oldStart: '',//記錄上次篩選的開始時間
// oldEnd: '',//記錄上次篩選的結束時間
// hackReset: true,
//進入頁面的時候時上次篩選的日期，預設時當前的0點到當前時刻，如果改變日期，開始時間的時刻變成0點0分，終點時刻變成23時59分
//先判斷日期較上一次是否有變化，有變化就置0
//開始時間小於結束時間
pickerBeginDateBefore: {
disabledDate: (time) => {
let beginDateVal = this.end;
if (beginDateVal) {
return time.getTime() > beginDateVal;
}
}
},
pickerBeginDateAfter: {
disabledDate: (time) => {
let beginDateVal = this.start;
if (beginDateVal) {
return time.getTime() < beginDateVal;
}
}
}
}
},
created() {
this.start = new Date(this.screenInfo.payTimeStart)//將上次的
this.end = new Date(this.screenInfo.payTimeEnd)
},
methods: {
getStart() {//時間變化是給物件賦值
console.log('this.start:' + this.start)
this.screenInfo.payTimeStart = new Date(this.start).getTime()
// this.screenInfo.payTimeStart = new Date(this.start).getTime()
this.screenInfo.startTime = util.formatTime2(this.start)
console.log('---------------')
},
getEnd() {
console.log('結束時間' + this.end);
this.screenInfo.payTimeEnd = new Date(this.end).getTime()
this.screenInfo.endTime = util.formatTime2(this.end)
console.log('---------------')
},
},
watch: {//之前想在computed，但是沒有實現，value一直在變，所以判不出來，使用watch恰到好處
"start"(n, o) {
// this.$nextTick(() => {
// this.hackReset = true
console.log('開始時間' + n);
console.log('oldStart:' + o)
var startString = n.toString()
n = new Date(startString.replace(/-/g, "/"))
console.log(util.formatDate(n), '---', util.formatDate(o))
if (util.formatDate(n) !== util.formatDate(o)) {
console.log('改變日期了' + this.start)
//日期改變了
let temp = n
temp.setHours('00')
temp.setMinutes('00')
this.start = temp
}
// })
},
"end"(n, o) {
console.log('oldEnd:' + o)
var endString = n.toString()
n = new Date(endString.replace(/-/g, "/"))
console.log(util.formatDate(n), '---', util.formatDate(o))
if (util.formatDate(n) !== util.formatDate(o)) {
console.log('改變日期了')
//日期改變了
let temp = n
temp.setHours('23')
temp.setMinutes('59')
this.end = temp
}
console.log('this.end:' + this.end)
},
}