2017-11-13
下载安装git 进入 git bash
git config --global user.name "Your Name"
git config --global user.email "email@example.com"
ssh-keygen -t rsa -C 'gyz418@126.com' 一直回车
cat ~/.ssh/
cat ~/.ssh/id_rsa.pub
复制内容到码云，解决SSH公钥
3. webstorm git
vcs-git-clone 拉代码
FQ工具： 蓝灯 https://github.com/getlantern/lantern
css3文档 http://www.css88.com/book/css/
cdn bootcdn.cn
占位图 http://placekitten.com/200/160
1.删除eslint 在webpack.base.conf.js删除 eslint-loader
{ test: /\.(js|vue)$/, loader: 'eslint-loader', enforce: 'pre', include: [resolve('src'), resolve('test')], options: { formatter: require('eslint-friendly-formatter') } },
2.去字符串全部空格 val.replace(/\s+/g, '') 去掉一个空格 val.replace(' ' ,'')
3. 字符串转数组 Array.of(a, b, c)
4. vux 省市区组件
// 传入省市区 "220000" "220300" "220301" 转换成中文去空格 getName (a, b, c) { let val = value2name(Array.of(a, b, c), ChinaAddressV2Data) // 转成中文 return val.replace(/\s+/g, '') },
5. vux 省市区组件：名字转成 440000
// getName('广东省') // 440000 getName (val) { let res = name2value(Array.of(val), ChinaAddressV2Data) // 转成id return res },
6. box-shadow: 0 .02rem .1rem rgba(0,0,0,.25)
7. <i class="fa fa-user fa-2x fa-rotate-180"></i>
基本图标 放大 旋转
8. 手机正则
isPhone (e) { return !!/^1[3|4|5|7|8][0-9]{9}$/.test(e) }
9. swiper 常用参数
pagination: ".swiper-pagination", // 分页导航 slidesPerView: 3, // 一行3个 slidesPerColumn: 2, // 两行 slidesPerGroup: 3, // 批量滚动，滚动了6个 spaceBetween: 10 // 间隙 initialSlide: 1, // 活动块为第2个 centeredSlides: true, // 活动块居中 freeMode: true // 无限滚动 onTransitionEnd(swiper){ // 手动滑动事件 }
10 。vux 省市区组件备注
省市区数组可以为字符串 this.mainAddr = ['440000','440000','440000'] 也可以为中文 this.mainAddr = ['广东省','广州市','天河区']
11. 路由带参数两种方式
this.$router.push({ path: '/SelectSalesman', query: {shopId: item.ssss_shop_id, exhibitId: item.exhibit_id} }) let query = this.$route.query.shopId 使用 path 、 query 参数会出现在 url上 http://localhost:8081/#/SelectSalesman?shopId=7&exhibitId=46 this.$router.push({name: 'UserAddAddress', params: {mes: val}}) this.routeMes = this.$route.params.mes 使用 name params 隐藏了参数 http://localhost:8081/#/UserAddAddress
12. 样式单选 、多选
<template> <div> 都选 <ul> <li v-for="(val,key) in items" @click="change(val,key)" :key="key" :class="{add:arr.includes(key)}">{{val}} </li> </ul> 单选 <div> <p v-for="(val,key) in arr2" @click="change2(val,key)" :key="key" :class="{add2:addClass===key}">{{val}}</p> </div> </div> </template> <style scoped> li,p { list-style: none; line-height: 30px; height: 30px; border-bottom: 1px solid #ccc; } .add { background: red; color: #0f0; } .add2{ background: #0f0; color: red; } </style> <script> export default { name: 'test4', data () { return { items: [1, 2, 3, 4, 5, 6], arr: [], arr2: ['中','国','人','民','解','放','军'], addClass: '' } }, methods: { change (val, key) { if (this.arr.includes(key)) return this.arr.push(key) // 储存选中的项，要添加样式 'add' console.log(this.arr) }, change2(val,key){ this.addClass = key } } } </script>
13. Vue.$set() 实现样式多选、 filter() 函数
<template> <div> {{getRes}} <ul> <li v-for="(val,key) in items" @click="change(val)" :class="{add:val.checked}">{{val.name}} </li> </ul> </div> </template> <style scoped> li { list-style: none; line-height: 30px; height: 30px; border-bottom: 1px solid #ccc; } .add { background: red; color: #0f0; } </style> <script> export default { name: 'test4', data () { return { items: [{name: 'a'}, {name: 'b'}, {name: 'c'}, {name: 'd'}, {name: 'ae'}], arr: [] } }, methods: { change (val) { console.log(1) // val.$set('checked', true) this.$set(val, 'checked', true) console.log(val) } }, computed: { getRes () { return this.items.filter(x => x.name === 'a') } } } </script>
14. 无限滚动
<template>
<div>
<!-- 顶部-->
<div class="search-top">
<div class="search" @click="searchMask"><i class="fa fa-search"></i><span>搜索</span></div>
<ul class="main-list">
<li @click="priceMask">
<span class="ellipsis">{{priceTitle}}</span>
<i class="fa fa-caret-down"></i></li>
<li @click="brandMask">
<span class="ellipsis">{{brandTitle}}</span>
<i class="fa fa-caret-down"></i></li>
<li @click="otherMask">
<span class="ellipsis">{{otherTitle}}</span>
<i class="fa fa-caret-down"></i></li>
</ul>
</div>
<!-- 价格区间-->
<ul v-show="priceShow" class="common-list price-list">
<li v-for="(val,key) in priceList" @click="selectPrice(val,key)" :key="key">{{val}}</li>
</ul>
<!-- 品牌-->
<div v-show="brandShow" class="common-list brand-list">
<section v-for="(list,key) in brandList" :key="key">
<p>{{list.id}}</p>
<ul>
<li v-for="(item,key) in list.arr" @click="selectBrand(item,key)" :key="key">
{{item}}
</li>
</ul>
<div class="clear"></div>
</section>
</div>
<!-- 其他 -->
<ul v-show="otherShow" class="common-list other-list">
<li v-for="(val,key) in otherList" @click="selectOther(val,key)" :key="key">{{val}}</li>
</ul>
<!-- 顶部 end -->
<!-- 无限滚动-->
<div v-infinite-scroll="getAllCar"
infinite-scroll-disabled="fresh"
infinite-scroll-distance="10"
infinite-scroll-immediate-check=false>
<!--车型列表-->
<div class="all-car" @click="hideSelect">
<div class="car" v-for="(item,key) in allCar" :key="key">
<p class="car-title" @click="toStoreIntro">{{item.carType}}</p>
<div class="top">
<div class="left">
<img :src=item.img alt="" width="100" @click="toCarDetails"><br>
<p class="title">{{item.carName}}</p>
</div>
<div class="right">
<div class="flex group">
<p class="name">团购</p>
<div class="flex1">
<x-progress class="progress" :percent="getPercent(item.group[0],item.group[1])"
:show-cancel="false"></x-progress>
<ul class="mes">
<li class="group-mes">{{item.group[0]}}万</li>
<li>{{item.group[1]}}万</li>
</ul>
</div>
</div>
<div class="flex price">
<p class="name">砍价</p>
<div class="flex1">
<x-progress class="progress" :percent="getPercent(item.price[0],item.price[1])"
:show-cancel="false"></x-progress>
<ul class="mes">
<li class="price-mes">{{item.price[0]}}元</li>
<li>已砍{{item.price[1]}}元</li>
</ul>
</div>
</div>
<div class="flex present">
<p class="name">奖品</p>
<div class="flex1">
<x-progress class="progress" :percent="getPercent(item.present[0],item.present[1])"
:show-cancel="false"></x-progress>
<ul class="mes">
<li class="present-mes">{{item.present[0]}}元</li>
<li>已领{{item.present[1]}}份</li>
</ul>
</div>
</div>
</div>
</div>
<x-button class="play-game" @click.native="toPlay">开始游戏</x-button>
</div>
</div>
<!--车型列表 end-->
</div>
<!-- 无限滚动-->
<!-- 搜索遮罩框 -->
<div class="search-fix" v-show="searchShow">
<flexbox>
<flexbox-item :span="4/5">
<x-input placeholder="搜索" v-model="searchVal" @on-change="InputChange"></x-input>
</flexbox-item>
<flexbox-item :span="1/5">
<x-button @click.native="toSearch">{{searchBtn}}</x-button>
</flexbox-item>
</flexbox>
</div>
<!-- 搜索遮罩框 end -->
<!-- loading 动画 -->
<loading :show="isLoading"></loading>
<!-- 没有更多数据 -->
<div v-show="pageOver" class="page-over">没有更多数据了</div>
<!-- 后台按钮-->
<div class="user" @click.stop="toUser">
<i class="fa fa-user fa-2x"></i>
</div>
</div>
</template>
<style lang="less" rel="stylesheet/less" scoped>
.search-top {
display: flex;
z-index: 1;
background: #FBDB58;
height: .35rem;
line-height: .35rem;
.search {
background: #fff;
width: 1rem;
height: .25rem;
margin: .05rem .1rem 0 .2rem;
line-height: .25rem;
i {
margin: 0 .05rem 0 .1rem;
}
}
.main-list {
display: flex;
flex: 1;
li {
flex: 1;
text-align: right;
padding-right: .09rem;
span {
width: .6rem;
display: inline-block;
}
i {
vertical-align: top;
margin-top: .1rem;
}
}
}
}
.search-fix {
z-index: 20;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: #fff;
}
.common-list {
z-index: 10;
position: absolute;
top: .35rem;
background: #fff;
width: 100%;
}
.price-list {
li {
float: left;
padding: .05rem .1rem;
}
}
.brand-list {
box-sizing: border-box;
padding: .15rem;
max-height: 4rem;
overflow-y: auto;
p {
color: #FBDB58;
border-bottom: .005rem solid #eee;
}
ul {
li {
float: left;
padding: .1rem .2rem .15rem 0;
}
}
}
.other-list {
box-sizing: border-box;
padding: 0 .15rem .15rem;
li {
border-bottom: .005rem solid #ccc;
padding: .05rem 0;
}
}
.all-car {
padding: .15rem;
.car {
background: #fff;
margin-bottom: .15rem;
padding-bottom: .15rem;
.car-title {
padding: .05rem 0 0 .05rem;
}
.top {
display: flex;
box-sizing: border-box;
padding-right: .15rem;
margin-top: .1rem;
.left {
width: 1.5rem;
padding: 0 .15rem;
box-sizing: border-box;
.title {
text-align: center;
}
}
.right {
flex: 1;
.name {
width: .35rem;
}
.progress {
margin-top: .05rem;
}
.mes {
justify-content: space-between;
display: flex;
margin-bottom: .02rem;
.group-mes {
color: #0bb20c;
}
.price-mes {
color: #ff0000;
}
.present-mes {
color: #ffcd00;
}
}
}
}
.play-game {
width: 50%;
background: #ffcd00;
height: .35rem;
font-size: .15rem;
margin-top: .15rem;
}
}
}
.page-over {
text-align: center;
}
.user {
position: fixed;
top: 50%;
text-align: center;
vertical-align: middle;
padding-top: .05rem;
right: .3rem;
background: yellow;
border-radius: 50%;
width: .4rem;
height: .4rem;
box-sizing: border-box;
z-index: 100;
}
.vux-flexbox-item {
margin-left: 0 !important;
}
</style>
<script>
import api from "../../api/resource"
import {Loading, XInput, XButton, Flexbox, FlexboxItem, XProgress} from 'vux'
export default {
name: 'AllCarList',
components: {
XInput,
XButton,
Flexbox, FlexboxItem, XProgress, Loading
},
data () {
return {
searchShow: false,
searchBtn: '取消',
searchVal: '',
priceTitle: '价格区间',
priceShow: false,
priceList: ['5-8万', '8-15万', '15-20万', '20-30万', '30-40万',
'40-50万', '50-60万', '60-70万', '70-80万', '80-90万',
'90-100万', '100-200万', '200万以上'],
brandShow: false,
brandList: [], // 车辆品牌
brandTitle: '品牌',
otherShow: false,
otherList: [
'团购优惠最多', '砍价力最大', '奖品最多'
],
otherTitle: '其他',
allCar: [
{
"carType": "大众4s",
"img": "http://placekitten.com/200/160",
"carName": "大众朗逸230TSIDSG豪华版",
"group": [
"3",
"5"
],
"price": [
"1000",
"1600"
],
"present": [
"2000",
"3600"
]
},
{
"carType": "大众4s222",
"img": "http://placekitten.com/200/160",
"carName": "大众朗逸230TSIDSG豪华版222",
"group": [
"14.99",
"16.99"
],
"price": [
"1200",
"2800"
],
"present": [
"2200",
"4040"
]
},
{
"carType": "大众4s333",
"img": "http://placekitten.com/200/160",
"carName": "大众朗逸230TSIDSG豪华版333",
"group": [
"13.99",
"21.99"
],
"price": [
"1800",
"3100"
],
"present": [
"3000",
"5080"
]
},
{
"carType": "大众4s333444",
"img": "http://placekitten.com/200/160",
"carName": "大众朗逸230TSIDSG豪华版333",
"group": [
"13.99",
"21.99"
],
"price": [
"1800",
"3100"
],
"present": [
"3000",
"5080"
]
},
{
"carType": "大众4s333555",
"img": "http://placekitten.com/200/160",
"carName": "大众朗逸230TSIDSG豪华版333",
"group": [
"13.99",
"21.99"
],
"price": [
"1800",
"3100"
],
"present": [
"3000",
"5080"
]
},{
"carType": "大众4s333666",
"img": "http://placekitten.com/200/160",
"carName": "大众朗逸230TSIDSG豪华版333",
"group": [
"13.99",
"21.99"
],
"price": [
"1800",
"3100"
],
"present": [
"3000",
"5080"
]
},{
"carType": "大众4s333777",
"img": "http://placekitten.com/200/160",
"carName": "大众朗逸230TSIDSG豪华版333",
"group": [
"13.99",
"21.99"
],
"price": [
"1800",
"3100"
],
"present": [
"3000",
"5080"
]
}
], // 所有车辆
priceId: '', // 价格区间
brandId: '', // 品牌
otherId: '', // 其他
pageNum: 1, // 当前页
fresh: false,
isLoading: false, // 数据锁
pageOver: false // 没数据了
}
},
mounted () {
document.title = '选择车型'
this.getCarBrand()
this.getAllCar(true) // 第一次加载
},
methods: {
// 搜索框
searchMask () {
this.searchShow = true
this.hideSelect()
},
// 输入内容按钮状态
InputChange () {
this.searchBtn = this.searchVal.trim() ? '搜索' : '取消'
},
// 输入搜索、取消
toSearch () {
this.searchShow = false
// 点击搜索
if (this.searchVal.trim()) {
console.log(this.searchVal);
this.allCar = []; // 清空车型
this.getAllCar()
}
},
// 显示价格区间
priceMask () {
this.priceShow = !this.priceShow
this.brandShow = false // 关闭其它
this.otherShow = false
},
selectPrice (val, key) {
this.priceId = key;
this.priceTitle = val
this.priceShow = false;
this.allCar = []; // 清空车型
this.getAllCar()
},
// 品牌
brandMask () {
this.brandShow = !this.brandShow
this.priceShow = false // 关闭其它
this.otherShow = false
},
selectBrand (val, key){
this.brandId = key;
this.brandTitle = val;
this.brandShow = false;
this.allCar = []; // 清空车型
this.getAllCar()
},
// 其他
otherMask () {
this.otherShow = !this.otherShow
this.priceShow = false
this.brandShow = false
},
selectOther (val, key){
this.otherId = key;
this.otherTitle = val;
this.otherShow = false;
this.allCar = []; // 清空车型
this.getAllCar()
},
// 车型列表
getAllCar (val) {
let _this = this;
if (_this.isLoading) return
_this.isLoading = true // 数据锁
setTimeout(function () {
api.allCarList({
data: {//参数
searchVal: _this.searchVal, // 搜索值
pageSize: 3, // 页码
priceId: _this.priceId,
brandId: _this.brandId,
otherId: _this.otherId,
pageNum: _this.pageNum // 当前页
}
}).then(response => {
if (response.data.status === 1) { // 接口数据返回成功
_this.isLoading = false
let data = response.data.lists
console.log(data);
if (data.length === 7) { // 还有数据
_this.fresh = false
_this.pageOver = false
_this.pageNum++;
if (val) {
console.log('第一次加载数据');
_this.allCar = data
} else {
console.log('第二次加载数据');
_this.allCar = _this.allCar.concat(data)
}
} else {
console.log('没有更多数据了')
_this.fresh = true
_this.pageOver = true
_this.allCar = _this.allCar.concat(data)
}
} else {
console.log('接口数据返回失败');
_this.isLoading = false
}
}, function () {
console.log('接口err');
_this.isLoading = false
})
}, 300)
},
// 车型品牌
getCarBrand () {
let _this = this;
api.carBrand({
'name': 'kang'
}).then(response => {
if (response.data.status === 1) {
_this.brandList = response.data.lists
} else {
console.log('数据返回失败');
}
})
},
// 计算进度条百分比
getPercent (a, b) {
return parseInt(a) / parseInt(b) * 100
},
// 隐藏选择框
hideSelect () {
this.priceShow = false
this.brandShow = false
this.otherShow = false
},
// 开始游戏
toPlay () {
// window.location.href = 'http://www.baidu.com'
this.$router.push({path: '/SelectSalesman'})
},
// 我的后台
toUser () {
this.$router.push('/UserIndex')
},
// 4s店介绍
toStoreIntro () {
this.$router.push('/StoreIntro')
},
// 车辆详情
toCarDetails () {
alert('跳转到车辆详情')
}
}
}
</script>
15. vuex 刷新后数据丢失
Vuex 的状态存储是响应式的，从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态，页面刷新后数据被清除，可把数据存到localstorage 利用localStorage ,注意不能直接在localStoreage中存储对象，需要借助JSON.stringify()和JSON.parse()来存储和读取对象 localStorage.setItem('userinfo', JSON.stringify(state.userinfo)) var userinfo = JSON.parse(localStorage.getItem('userinfo'))
16. 组件
组件： btn.vue <div> <div class="btn" :class="{active:page=='home'}">12345</div> <div class="btn" >123456666</div> </div> props:['page'] .active{ background: red; } 调用： <btn page="home"></btn> import Btn from './public/Btn.vue' export default { components: { Btn }, }
17. vue 引入 font-awesome
npm install font-awesome main.js import 'font-awesome/css/font-awesome.min.css' webpack.base.conf.js { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', options: { limit: 80000, // 改成大值，打包后会把字体打包进 css，正常显示出来，默认为10000 name: utils.assetsPath('fonts/[name].[hash:7].[ext]') } } <i class='fa fa-user'></i>
18. 获取url中的参数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> http://localhost:63342/vue1031/test1130/0.html?val=1&name=2 <script> console.log(getRequestParameters().val); // 1 console.log(getRequestParameters().name); // 2 function getRequestParameters () { //返回当前 URL 的查询部分（问号 ? 之后的部分）。 var urlParameters = location.search; //声明并初始化接收请求参数的对象 var requestParameters = new Object(); //如果该求青中有请求的参数，则获取请求的参数，否则打印提示此请求没有请求的参数 if (urlParameters.indexOf('?') != -1) { //获取请求参数的字符串 var parameters = decodeURI(urlParameters.substr(1)); //将请求的参数以&分割中字符串数组 parameterArray = parameters.split('&'); //循环遍历，将请求的参数封装到请求参数的对象之中 for (var i = 0; i < parameterArray.length; i++) { requestParameters[parameterArray[i].split('=')[0]] = (parameterArray[i].split('=')[1]); } } return requestParameters; } </script> </body> </html>
19. package-lock.json
npm最新的版本就开始提供自动生成package-lock.json功能，为的是让开发者知道只要你保存了源文件，到一个新的机器上、或者新的下载源，只要按照这个package-lock.json所标示的具体版本下载依赖库包，就能确保所有库包与你上次安装的完全一样。直接改 package.json 文件相应模块的版本号，再执行npm install不会更新了（好可怕），你只能手动用npm install xxx@yy指定版本号来安装，然后它会自动更新 package-lock.json 文件。直接执行npm install时，如果不存在 package-lock.json 文件，它会根据安装模块后的 node_modules 目录结构来创建；如果已经存在 package-lock.json 文件，则它只会根据 package-lock.json 文件指定的结构来下载模块，并不会理会 package.json 文件。
20 vux 全局 toast
main.js 查文档 import { ToastPlugin} from 'vux' Vue.use(ToastPlugin) Vue.prototype.Toast=function (val) { // 全局 Vue.prototype this.$vux.toast.show({ text: val, type: 'text' }) } // 调用 Toast('妹的')
21. mask 样式 使用背景色 rgba,不用Opacity
.mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; background: rgba(0,0,0,.1); }
22. forEach 没有返回值 有三个参数：数组元素，元素的索引，数组本身
let arr =[] resp.PendencyItem.forEach(val=>{ arr.push(val.To_Account); }) console.log('arr',arr);
23. vue 操作DOM 使用 ref
<form id="uploadForm" ref="uploadForm">
<input type="file" @change="changeFile" ref="uploadFileId">
</form>
this.$refs.uploadFileId.click() // 通过 js来调用文件上传选择框
this.$refs.uploadForm.reset()
24. es6常用
console.log(`123${this.test}`); // 模板字符串
setTimeout(()=>console.log('sss',this.test),1000) // setTimeout 箭头函数
/* ========== rest 函数参数 */
function add(...values) { // 函数参数 ...arr
let sum = 0;
// 把 values 当成数组 arr
for (var val of values) {
sum += val;
}
return sum;
}
console.log(add(2, 5, 3,8)); // 18
// 复制(克隆)数组
const a3=[1,2];
const a5=[...a3]; // es6写法
// 数组合并
let x1=[1,2]
let x2=[3,4]
console.log('res new',[...x1, ...x2]);
// 放一堆数据进数组 Array.of()
let str ='abc'
console.log(Array.of(str));
详情：
console.log('123'+this.test);
console.log(`123${this.test}`);
setTimeout(()=>console.log('sss',this.test),1000)
// 箭头函数没有this,引用的是外层的this setTimeout中不用先保存this
/* ========== rest 函数参数 */
function add(...values) { // 函数参数 ...arr
let sum = 0;
// 把 values 当成数组 arr
for (var val of values) {
sum += val;
}
return sum;
}
console.log(add(2, 5, 3,8)); // 18
// 复制数组
const a1 = [1, 2];
const a2 = a1; // 这种是a2指向同一份数据的另一个指针,修改a2,a1也会变
// 复制(克隆)数组
const a3=[1,2];
const a4=a3.concat(); // es5写法
const a5=[...a3]; // es6写法
a4[0]=100;
a5[0]=1000;
console.log('a3',a3);
console.log('a4',a4); // a3,a4不一样
console.log('a5',a5); // a3,a5不一样
// 数组合并
// old
let x1=[1,2]
let x2=[3,4]
console.log('res', x1.concat(x2));
// new
console.log('res new',[...x1, ...x2]);
// 放一堆数据进数组 Array.of()
let str ='abc'
console.log(Array.of(str));
let str2='dd';
let str3='ee';
console.log(Array.of(str2, str3));
25. nth-last-child 外层必须有父元素
<body>
<style>
li{
border-bottom: 1px solid red;
}
li:nth-last-child(1) span{ /* nth-last-child 外层必须有父元素*/
color: red;
}
</style>
<ul>
<li><span>dfdfdf</span></li>
<li><span>dfdfdf</span></li>
<li><span>dfdfdf</span></li>
<li><span>dfdfdf</span></li>
</ul>
</body>
26 set 用法
// set 用法 //1 数组去重 set 是值不重复的数组 let arr=[2, 3, 5, 4, 5, 2, 2,9] console.log([...new Set(arr)]); // 2 数组合并 let x1=[1,2] let x2=[3,4] console.log('res new',[...x1, ...x2]); // 3 并集 交集 差集 let a = new Set([1, 2, 3]); let b = new Set([4, 3, 2]); // 并集 let union = new Set([...a, ...b]); console.log(union); // Set {1, 2, 3, 4} // 交集 let intersect = new Set([...a].filter(x => b.has(x))); console.log(intersect); // set {2, 3} // 差集 let difference = new Set([...a].filter(x => !b.has(x))); console.log(difference); // Set {1}
27 函数结果存到回调中
// 奇怪的回调 function test(result) { var a = 123; result(a); } var res='' test(function (a) { res=a }) console.log(res);
28.异步轮播 promise
<template>
<div>
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(val,key) in list" :key="key">{{val.name}}</div>
</div>
</div>
</div>
</template>
<style rel="stylesheet/less" scoped>
.swiper-container {
width: 3rem;
height: 3rem;
margin: .2rem auto;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: red;
}
</style>
<script>
import Swiper from '../../static/swiper.min'
export default {
data () {
return {
list: [],
}
},
mounted(){
let s=this;
let promise = new Promise(function(resolve, reject) {
s.getData()
resolve();
});
promise.then(function() {
var swiper = new Swiper('.swiper-container');
});
// 平时用 setTimeout()
/*setTimeout(() => {
var swiper = new Swiper('.swiper-container');
}, 1000)*/
},
methods:{
getData(){
this.list = [
{name: 'kang1'},
{name: 'kang2'},
{name: 'kang3'},
{name: 'kang4'},
{name: 'kang5'},
{name: 'kang6'}
]
}
}
}
</script>
29. vue 滚动条底部
this.$nextTick(() => { // dom 更新后再滚动 document.body.scrollTop = document.body.scrollHeight; })
30.tools
versions: function() { var e = navigator.userAgent; return { ios: !!e.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), android: e.indexOf("Android") > -1 || e.indexOf("Linux") > -1, iPhone: e.indexOf("iPhone") > -1, iPad: e.indexOf("iPad") > -1 } }, getScrollTop: function() { return document.body.scrollTop }, getScrollLeft: function() { return document.body.scrollLeft }, getScrollWidth: function() { return document.body.scrollWidth }, getScrollHeight: function() { return document.body.scrollHeight }, getClientWidth: function() { return document.documentElement.clientWidth }, getClientHeight: function() { return document.documentElement.clientHeight } } , b = { isPwd: function(e) { return !!/^([a-zA-Z]|\d){6,18}$/.test(e) }, isSysPwd: function(e) { return !(!/^[a-zA-Z]\d{6}$/.test(e) && !/^\d{6}[a-zA-Z]$/.test(e)) }, isPassword: function(e) { return !(/^\d+$/.test(e) && !/^[A-Za-z]+$/.test(e)) && !!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,14}$/.test(e) }, isUrl: function(e) { return /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/.test(e) }, isPhone: function(e) { return !!/^1[3|4|5|7|8][0-9]{9}$/.test(e) }, isSms: function(e) { return !!/^\d{6}$/.test(e) }, isName: function(e) { return !!/^[\u4e00-\u9fa5]{0,20}$/.test(e) }, isCardNo: function(e) { return !!/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(e) }, checkIdentifyCard: function(e) { var a = { 11: "北京", 12: "天津", 13: "河北", 14: "山西", 15: "内蒙古", 21: "辽宁", 22: "吉林", 23: "黑龙江", 31: "上海", 32: "江苏", 33: "浙江", 34: "安徽", 35: "福建", 36: "江西", 37: "山东", 41: "河南", 42: "湖北 ", 43: "湖南", 44: "广东", 45: "广西", 46: "海南", 50: "重庆", 51: "四川", 52: "贵州", 53: "云南", 54: "西藏 ", 61: "陕西", 62: "甘肃", 63: "青海", 64: "宁夏", 65: "新疆", 71: "台湾", 81: "香港", 82: "澳门", 91: "国外" } , t = e.substr(6, 4) + "/" + Number(e.substr(10, 2)) + "/" + Number(e.substr(12, 2)) , n = new Date(t) , o = n.getFullYear() + "/" + Number(n.getMonth() + 1) + "/" + Number(n.getDate()) , r = (new Date).getTime() , i = n.getTime() , s = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2] , u = ["1", "0", "X", "9", "8", "7", "6", "5", "4", "3", "2"] , l = 0 , c = void 0; if (!/^\d{17}(\d|x)$/i.test(e)) return !1; if (void 0 === a[e.substr(0, 2)]) return !1; if (i >= r || t !== o) return !1; for (c = 0; c < 17; c++) l += e.substr(c, 1) * s[c]; return u[l % 11] === e.substr(17, 1) }, isBankCardNo: function(e) { return !!/(^\d{16,19}$)/.test(e) }
31. vue 滚动条顶部
router.afterEach((to,from,next) => { window.scrollTo(0,0); });
32. Object.assign() 合并配置项
test({ title:'newTitle' }) function test(newObj){ let oldObj={ title:'oldtitle' } if(typeof newObj === 'object'){ // console.log('ok'); oldObj=Object.assign(oldObj,newObj) } console.log(oldObj); }
33. 滚动到底部 底部输入框布局 display:block 过渡效果 长字母截断
transition 过渡效果不支持 display:block ，要改成 visibility: visible 外层 初始化高度 let clientHeight2 = document.documentElement.clientHeight this.$refs.commentbg.style.height = clientHeight2 + 'px' 弹性布局 内容区flex:1; 底下输入框 height= .5rem // 滚动到底部 this.$nextTick(()=>{ let boxOut = document.querySelector(".m-message"), // 固定高 boxContent = document.querySelector("#talk"); // 内容 boxOut.scrollTop = boxContent.offsetHeight - boxOut.offsetHeight; }) // 滚动到顶部 let boxOut = document.querySelector(".m-message").scrollTop=0; // 固定高 非弹性布局底部无输入框的情况，滚动条底部 document.body.scrollTop = document.body.scrollHeight; 长字母换行 word-wrap:break-word
34. vue 路由动画
<template>
<div id="app">
<transition :name="transitionName">
<router-view class="child-view"></router-view>
</transition>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
transitionName: 'slide-left'
}
},
watch: {
'$route' (to, from) {
let isBack = this.$router.isBack // 监听路由变化时的状态为前进还是后退
if(isBack) {
this.transitionName = 'slide-right'
} else {
this.transitionName = 'slide-left'
}
this.$router.isBack = false
}
}
}
</script>
<style>
.child-view {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
transition: all .5s cubic-bezier(.55,0,.1,1);
}
.slide-left-enter, .slide-right-leave-active {
opacity: 0;
-webkit-transform: translate(30px, 0);
transform: translate(30px, 0);
}
.slide-left-leave-active, .slide-right-enter {
opacity: 0;
-webkit-transform: translate(-30px, 0);
transform: translate(-30px, 0);
}
</style>
// 返回 back(){ history.back() this.$router.isBack=true // 添加参数 }
35. setInterval
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>0</p> <button>btn</button> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script> $("button").click(function () { play(); }) function play() { var n = 0; let res = setInterval(function () { $("p").html(n) n += 1; if (n > 5) { clearInterval(res) $("button").html('over') } }, 1000) } </script> </body> </html>
浙公网安备 33010602011771号