vue實際專案解決辦法
阿新 • • 發佈:2019-01-09
解決vue變數未渲染前程式碼顯示問題
將v-cloak最好寫在根標籤上:
<div v-cloak>
{{demo}}
</div>
繫結動態的樣式
:style="{'stroke-dasharray': item.img}"
注:屬性為 stroke-dasharray使用單引號區分,不然會報錯
v-for多層迴圈
<div v-for="(item,index) in items">
<div v-for="(lists,typesIndex) in item.types">
<div v-for="(list,key) in lists.sites"></div>
</div>
</div>
自定義滾動事件
在mian.js中註冊
Vue.directive('scroll', {
inserted: function (el, binding) {
let f = function (evt) {
if (binding.value(evt, el)) {
window.removeEventListener('scroll', f)
}
}
window.addEventListener('scroll' , f)
}
});
在具有的html
<div v-scroll="handleScroll"></div>
實現上拉重新整理元件
通過npm引入
1. 安裝better-scroll
npm install better-scroll
2. 頁面中引入better-scroll
import BScroll from 'better-scroll'
3. 如果不支援import,可使用
var BScroll = require('better-scroll')
參考連結:https://blog.csdn.net/qq_22557797/article/details/78866328
回到頂部
methods: {
handleScroll () {
this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
if(this.scrollTop>500){
this.goTopShow=true //返回的圖示
}else{
this.goTopShow=false
}
},
goTop(){
let timer=null,_that=this;
cancelAnimationFrame(timer);
timer=requestAnimationFrame(function fn(){
if(_that.scrollTop>0){
_that.scrollTop-=800;//每次返回的距離
document.body.scrollTop = document.documentElement.scrollTop = _that.scrollTop;
timer=requestAnimationFrame(fn)
}else {
cancelAnimationFrame(timer);
_that.goTopShow=false;
}
})
},
},
mounted() {
window.addEventListener('scroll', this.handleScroll)
},
destroyed(){
window.removeEventListener('scroll', this.handleScroll)
},
繫結滑鼠滑過效果
@mouseenter="Show" @mouseleave="Show"
H5實現調系統郵箱
主要還是使用 a標籤中的 mailto屬性
<a
:href=" 'mailto:'+to+'?cc='+cc+'&subject='+subject+'&body='+body"
>
</a>
data() {
return {
to:'郵箱地址',
body:'傳送的內容',
subject:'',
cc:'抄送'
};
},
根據屬性判斷class顯示
:class="feedbackSrc?'defultFacebook':'facebook'"
判斷字元長度輸出。。。
setString(str, len) {
let strlen = 0;
let s = "";
try {
for (let i = 0; i < str.length; i++) {
if (str.charCodeAt(i) > 255) {
strlen += 2;
} else {
strlen++;
}
s += str.charAt(i);
if (strlen >= len) {
return s+"...";
}
}
} catch (error) {
}
return s;
}
json陣列從大到小排序
data.sort((a, b) => (
Number(b.data.age) - Number(a.data.age)
))
//Number是根據data中的屬性來做具體的轉化的,向上取整也是可以的,但是data中的返回的值若為null,這個js是失效的
kmb轉化
BinaryProcess(str){
// 0——999.994 0--999.99
// 999.995——999994 1.00K--999.99K K(千)
// 999995——999994999 1.00M--999.99M M(百萬)
// 999995000——無限大 1.00B--xB B(十億)
str=Number(str)
if(0<=str&&str<=999.994){
// str = str
str = str.toFixed(2)
}else if(999.995<=str&&str<=999994) {
str = (str/1000).toFixed(2)+'K'
}else if(999995<=str&&str<=999994999){
str = (str/1000000).toFixed(2)+'M'
}else if(999995000<=str){
// str = (str/1000000000)+'B'
str = (str/1000000000).toFixed(2)+'B'
}
return str
},
千位分隔符
format_double(value){
var num = parseFloat(value);
num = num.toFixed(2)+"";
var str = num.split(".")[0];
var lis = num.split(".")[1];
var siz = 0;
var result = "";
for (var i=str.length-1;i>=0;i--){
siz++;
if (siz%3==0){
siz=0;
result = ","+str.substr(i,3)+result;
}
}
if (str.length%3 != 0){
result = str.substr(0,str.length%3)+result;
}else{
result = result.substring(1,result.length);
}
return result+"."+lis;
},
獲取 URL引數
gethrefParam(varName) {
var param = {};
var url = window.location.href;
if (url.indexOf("?") != -1) {
url = url.split("?")[1];
var keyvaluemap = url.split("&");
for (var key in keyvaluemap) {
var kvstr= keyvaluemap[key];
var kv = kvstr.split("=");
param[kv[0]] = kv[1];
}
}
return param[varName];
}