目录
文章目录
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;
超出内容出现滚动条
//竖直方向滚动
overflow: auto;
overflow-x: hidden;//隐藏横轴滚动条
//水平方向滚动
overflow: hidden;
overflow-x: scroll;
css样式style的参数
刚开始不太理解
<div class="father">
<div class="son">
</div>
</div>
.father{
width:100%
height:20px;
.son{
width:200
height:20px;
}
}
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;
}
不过以上只能水平滑动，不能拖拽，功能并没有实现，后来使用了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;
}
渐变色（粗细不一）
渐变色主要一条线或者背景图，一般就是一个均匀变化，如下
实现方式就是
background: linear-gradient(to right, #FF4800, #FF9900);
下面是粗细不一的
这个刚开始都不知奥咋实现，因为粗细不一致，一条白线逐渐变粗；后来就下了一个巧妙的方法就是使用渐变来实现，给人一个视觉效果。
background: linear-gradient(to right, #FF9900, #ffffff);
还有下划线的渐变，使用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>
将一个图片作为背景图，并且随着页面滑动而滑动
background-image: url("image/background.png");
background-repeat: no-repeat;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
background-attachment: scroll;
ios手机文字偏下没有居中
页面有个位置显示消息，因为比较小所以文字也就设置的小了点，但是在ios手机上就有问题了，偏下，不居中。在浏览器和安卓手机上是好的，后来发现是字体大小太小了，改成12px就可以了，之前知道浏览器不支持小于12px的盒子，但是ios好像也不支持小于12px的文字显示，导致样式有问题。
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 "";
}
生命周期和钩子函数
生命周期是我们流程的一个中重要工具，了解生命周期我们才能更好的判断流程的执行顺序，方便我们处理页面的展示。
这篇文章写的比较详细可以参考一下Vue2.0 探索之路——生命周期和钩子函数的一些理解
原生调js
消息列表是native的，客户端可以查看，web也可以查看，看完后消息提示需要刷新一下，这个就需要客户端给我们一个触发，我们在index.html中添加一个js方法，给客户端提供一个方法名，然后我们再请求消息接口刷新页面。我们采用广播的形式，在js方法中发送一个广播，然后在对应的vue页面接受广播，再次请求接口，完美实现。
//index.html
var refreshMessage=function(){
//发送广播
var event = new Event("refreshMessage")
window.dispatchEvent(event)
}
//刷新的.vue页面
window.addEventListener("refreshMessage", function (e) {
that.getNewMsg()//请求消息接口
})
//android调用js
mWebView.loadUrl("javascript:refreshMessage()");
使用vue-cli创建项目如何解决跨域问题
No ‘Access-Control-Allow-Origin’ header is present on the requested resource. 我们本地访问服务端经常出现跨域问题，本地该如何操作呢？
首先，打开config/index.js文件，找到proxyTable，做以下配置
proxyTable: {
'/api':{
target:'http://****com',//想要访问的IP地址
changeOrigin:true,
pathRewrite:{'^/':'http://****.com'}//和target的地址一样
}
},
然后在main.js中封装axios请求
import axios from 'axios'
import Qs from 'qs'
//配置请求信息
var $http = axios.create({
baseURL: "/api",
timeout: 30000,
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
transformRequest: [function (data) {
data = Qs.stringify(data);
return data;
}]
})
在组建中直接这样调用可以了
this.$http.post('/dsds.go', {
action: "",
token: "",
}).then(res => {
console.log('res', JSON.stringify(res))
})
服务端的可以在API上配置以下配置，意思是所有的url都可以访问，缺点是安全性不高。
responce.header(“Access-Control-Allow-Origin”,"*");
三方控件（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)
},
}
3416
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
