- a链接的herf属性
<a herf="#id">点我发生锚点跳转</a>
<div id="id">跳转到这里</div>
- scrollIntoView()方法
<div id="id" onClick="handelClick">点我发生锚点跳转</div>
在methods中
handelClick () {
document.querySelector('#id').scrollIntoView(true)
}
***项目中优化css过大的问题
- 使用公共的样式文件
- 在引入公共的样式文件时前加 reference
##@import 属性的作用
- reference：使用该less文件但是不输出它
- inline：包括在源文件中输出，但是不做处理
- less：讲改文件试问less文件，无论扩展名是什么
- css：讲文件视为css文件
- once：改文件仅可导入一次
- multiple：该文件可以多次导入
- optional： 当没有发现文件是仍然编译
@import (reference) "src/less/comm";
***Git无法检测到文件名大小写的更改
git默认配置为忽略大小写
解决办法：
在当前项目中，运行git config core.ignorecase false, 关闭git忽略大小写配置，即可检测到大小写名称更改
***VUE 路由参数变化，页面数据不刷新问题
watch监听路由是否变化
watch: {
// 方法1
'$route' (to, from) { //监听路由是否变化
if(this.$route.params.articleId){// 判断条件1 判断传递值的变化
//获取文章数据
}
}
//方法2
'$route'(to, from) {
if (to.path == "/page") { /// 判断条件2 监听路由名 监听你从什么路由跳转过来的
this.message = this.$route.query.msg
}
}
}
// to跳转之后的路由对象 from跳转之前的路由对象
方案三（最实用）
beforeRouteUpdate (to, from, next) {
if (to.params) {
// 写要发起的请求 业务实现代码
const { id1, id2 } = to.params
this.getClassGoodsList({ id1, id2 })
}
next()
},
***Vue实现淡入淡出效果
vue实现淡入淡出效果
html里面
<transition name="Fade">
中间需要包住有v-if或v-show的div
</transition>
style里面
.Fade-enter,
.Fade-leave-to {
opacity: 0;
}
.Fade-enter-to,
.Fade-leave {
opacity: 1;
}
.Fade-enter-active,
.Fade-leave-active {
transition: all .2s;
}
***在遮罩层下 页面禁止滚动
在父盒子上监听触摸移动和鼠标滚轮事件
@touchmove.prevent @mousewheel.prevent
// @touchmove 是触摸移动事件
// @mousewheel 是鼠标滚轮事件
// prevent 阻止默认事件
<!--购物车遮罩层-->
<van-overlay :show="isShow" @mousewheel.prevent > 1. 先阻止默认行为
<div class="cart-overlay" @mousewheel.stop > 2. 在阻止事件冒泡
<div class="cart-div p-24">
<div class="flex">
<div class="font-size-22 pl-16 pt-16 font-weight-550">{{ Lang['购物车'] }}</div>
<div class="pr-16 pt-16">
<Icon name="cross" color="#9c9c9c" @click="back" />
</div>
</div>
<!--购物车信息组件-->
<Cart />
<Divider />
<!--合计价格组件-->
<TotalPricePanel />
<!-- 立即购买按钮-->
<div class="flex flex-end pr-16 pb-16">
<Button class="theme" size="normal" @click="orders">
<Icon name="shopping-cart-o" />
{{ Lang['立即购买'] }}
</Button>
</div>
</div>
</div>
</van-overlay>
***移动端响应式
媒体查询比较方便 书写格式如下
@media screen and (max-width: 768px) {
// 里面写屏幕样式变化即可
}
max-width 即最大宽度表示移动端
min-width 即最小宽度表示pc端
***vue自定义组件监听不到事件解决办法
自定义组件中注册的事件是组件自定义的事件，不是原生dom中的事件，所以不会被监听到
在某个组件的根元素上绑定事件 就用事件修饰符 .native
<a-my-test @click .native ="childClick" ></a-my-test>
***页面元素隐藏方式
- vue中的v-if
- css中的 display: none // 二者都可以让元素隐藏且不占位
***保存两位小数的方法
// 保存两位小数的函数
towNumber (val) {
if (val) {
return val.toFixed(2)
}
},
vue中使用方法
<div>{{ towNuumber('想要保存两位数的数据') }}
***文本首行缩进
text-indent: 2em;
***路由重复报错
// 在router里index.js文件中加
const routerPush = Router.prototype.push
Router.prototype.push = function push (location) {
return routerPush.call(this, location).catch(error => error)
}
***商品规格案例
- 类似淘宝购买商品时的规格选择
<body> <div id='app'> <!-- 界面 --> <h2>颜色</h2> <div class="row"> <div v-for="(item, i) in Color" :class="{ active: selectColor === item }" class="box" @click="option1Click(item)">{{ item }}</div> </div> <h2>尺码</h2> <div class="row"> <div v-for="(item, i) in Size" :class="{ active: selectSize === item, box1: SizeData.indexOf(item) === -1 }" class="box" @click="option2Click(item)">{{ item }}</div> </div> <h2>套餐</h2> <div class="row"> <div v-if="item" v-for="(item, i) in Gift" :class="{ active: selectGift === item, box1: GiftData.indexOf(item) === -1 }" class="box" @click="option3Click(item)">{{ item }}</div> </div> <div v-if="GiftColor.length"> <h2>赠品</h2> <div style="width: 800px;"> <h3>规格1</h3> <div class="row"> <div v-if="GiftColor" class="box" @click="option4Click(item)" :class="{ active: selectGiftColor === item }" v-for="(item) in GiftColor">{{ item }}</div> </div> <h3 v-if="GiftSize.length">规格2</h3> <div class="row"> <div class="box" @click="option5Click(item)" :class="{ active: selectGiftSize === item, box1: GiftColorData.indexOf(item) === -1 }" v-for="(item) in GiftSize">{{ item }}</div> </div> </div> </div> <!-- 合计 --> <div>合计：{{ allPrice }}</div> <div>折扣：{{ discount }}</div> <div>实付：{{ allPrice - discount }}</div> </div> <script> let vm = new Vue({ el: '#app', data: { // goods, giftList, promotionList 是接口返回的原始数据，(不能改动，只能用）其他随意发挥 // 实现商品规格的选择，同时根据显示赠品供用户选择，同时根据促销策略进行优惠 goods: { /*商品信息*/ name: '牛仔裤', specList: [{ option1: '蓝色', option2: 'S', option3: '送皮带', price: 100, giftId: 2, /* 关联的 赠品id */ giftNumber: 1, /* 送赠品的数量 */ }, { option1: '蓝色', option2: 'M', option3: '送皮带', price: 100, giftId: 2, giftNumber: 1, }, { option1: '红色', option2: 'M', option3: '送皮带', price: 100, giftId: 2, giftNumber: 1, }, { option1: '红色', option2: 'L', option3: '送袜子', price: 200, giftId: 1, giftNumber: 1, }, { option1: '黄色', option2: 'L', option3: '送皮带', price: 100, giftId: 2, giftNumber: 1, }, { option1: '绿色', option2: '均码', option3: '', price: 80 }, { option1: '黑色', option2: '不分大小', option3: '送袜子', price: 200, giftId: 1, giftNumber: 1, }] }, giftList: [ /* 赠品 */ { id: 1, /* 赠品id */ name: '袜子', /* 赠品名 */ specList: [ /* 赠品规格 */ { option1: '黑色', option2: '均码', option3: '' }, { option1: '白色', option2: '均码', option3: '' }] }, { id: 2, name: '皮带', specList: [{ option1: '均码', option2: '', option3: '' }] }], promotionList: [ /* 促销策略，根据用户选择的价格进行满减 */ { type: 1, /* 1代表 合计优惠 */ price: 100, /* 满100 */ offPrice: 10 /* 减10 */ }, { type: 1, price: 200, /* 满200 */ offPrice: 30 /* 减30 */ }], Color: [], // 所有颜色 Size: [], // 所有尺寸 Gift: [], // 所有套餐 selectColor: '', // 选中的颜色 selectSize: '', // 选中的尺寸 selectGift: '', // 选中的套餐 SizeData: [], // 选中颜色下的尺寸 GiftData: [], // 选中尺寸下的套餐 GiftColor: [], // 赠品所有的颜色 selectGiftColor: '',// 选中赠品的颜色 giftId: '', // 赠品的id GiftSize: [], // 赠品的所有规格 GiftColorData: [], // 选中赠品颜色的规格 selectGiftSize: '', // 选中赠品的规格2数据 allPrice: 0, // 合计 discount: 0 // 折扣 }, created() { this.goods.specList.forEach(item => { this.Color.push(item.option1) this.Size.push(item.option2) this.Gift.push(item.option3) this.Color = [...new Set(this.Color)] this.Size = [...new Set(this.Size)] this.Gift = [...new Set(this.Gift)] }) }, watch: {}, methods: { option1Click(item) { this.selectColor = item this.SizeData = [] this.selectSize = [] this.selectGift = [] this.GiftColor = [] this.selectGiftSize = [] this.GiftSize = [] this.allPrice = 0 this.discount = 0 this.selectGiftColor = '' this.SizeData.push(this.goods.specList.filter(item => item.option1 === this.selectColor).map(item => item.option2)) this.SizeData = this.SizeData[0] }, option2Click(item) { // 禁止选择是虚线边框的规格 if (this.SizeData.indexOf(item) === -1) return false this.selectSize = item this.GiftData = [] this.selectGift = [] this.GiftColor = [] this.selectGiftSize = [] this.GiftSize = [] this.GiftData.push(this.goods.specList.filter(item => item.option2 === this.selectSize).filter(item => item.option1 === this.selectColor).map(item => item.option3)) this.GiftData = this.GiftData[0].filter(Boolean) // 过滤数组中的虚假值 arr.filter(Boolean) if(this.GiftData.length === 0) this.total() }, option3Click(item) { // 禁止选择是虚线边框的规格 if (this.GiftData.indexOf(item) === -1) return false this.selectGift = item this.GiftColor = [] this.selectGiftSize = [] this.GiftSize = [] this.total() }, option4Click(item) { this.selectGiftColor = item this.GiftColorData = [] this.selectGiftSize = [] this.GiftColorData.push(this.giftList.find(item => this.giftId === item.id).specList.filter(item => item.option1 === this.selectGiftColor).map(item => item.option2)) this.GiftColorData = this.GiftColorData[0] }, option5Click(item) { this.selectGiftSize = item }, total () { // 合计函数 this.goods.specList.forEach(item => { if (this.selectColor === item.option1 && this.selectSize === item.option2) { this.giftId = item.giftId this.allPrice = item.price // 合计价钱 this.giftList.find(item => this.giftId === item.id) ? this.giftList.find(item => this.giftId === item.id).specList.forEach(item => { this.GiftColor.push(item.option1) this.GiftSize.push(item.option2) this.GiftSize = [...new Set(this.GiftSize)].filter(Boolean) // 过滤数组中的虚假值 arr.filter(Boolean) }) : '' } }) // 折扣 this.promotionList.forEach(item => { if (this.allPrice >= item.price) { let finallyDiscount = item.offPrice if (this.discount < finallyDiscount) this.discount = finallyDiscount } }) } } }) </script> </body> </html>// style部分 <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> <style> /*样式*/ .box { width: 80px; height: 40px; border: 1px solid black; text-align: center; line-height: 40px; border-radius: 5px; margin-right: 15px; background-color: white; outline: none; } .box1 { border: 1px dashed #ccc; color: #ccc; } .active { border: 1px solid red; color: red; } .row { display: flex; } </style> </head>
***axios发起delete请求无法正常传参的问题
axios.delete(’/api’, {data:{userId:1}} )
***table表格合并单元格
<tr v-for="(item, index) in currentList.list" :key="index">
<td>{{ item.number }}</td>
<td></td>
<td>{{ item.currency }} {{ item.price * item.number }}</td>
// 循环生成的tr 删除多余的td用v-if判断一下
<td v-if="index < 1" :rowspan="currentList.list.length">取消</td>
<td v-if="index < 1" :rowspan="currentList.list.length"></td>
</tr>
***根据faterId整理children格式的数组
const map = {}
this.list.forEach(item => {
item.children = []
map[item.id] = item
})
for (const item of this.list) {
if (!item.fatherId) {
目标数组.push({ ...item })
} else {
if (map[item.fatherId]) {
map[item.fatherId].children.push({ ...item })
}
}
}
***数据库更新时间字段
UPDATE `运行报表` SET `采集时间` = DATE_SUB(`采集时间`,INTERVAL 1 DAY);
UPDATE `运行报表` SET `采集时间` = DATE_FORMAT(`采集时间`,'%Y-%m-%d %H:%i:%s');
***vue keep-alive注意
<!--配合动态组件使用时 必须有一个根节点-->
<KeepAlive>
<div>
<component :is="view"></component>
</div>
</KeepAlive>
评论区