1.vue销毁自身组件的方法
xxx(){
// 销毁组件
this.$destroy(true);
this.$el.parentNode.removeChild(this.$el);
}
2.vue及时渲染自身视图的方法
this.$forceUpdate();
3.vue中列表滑动删除
遍历一个list列表,添加touchstart和touchend事件,并添加删除按钮。如果滑动就添加move类样式,向左滑动60px。
① 将列表放在同一个组件里
<ul>
<li
v-for="(item,index) in list"
:class="{move:candelete.id==item.id}"
@touchstart="touchStart(item)"
@touchend="touchEnd(item)"
>
{{item.text}}{{item.id}}
<div class="del" @click="deleteItem(index)">删除</div>
</li>
</ul>
li{
background: #fdfdfd;
border-bottom: 1px solid #e1e1e1;
line-height: 40px;
position: relative;
transform: translateX(0);
transition: all .3s; /*滑动效果更生动*/
padding-left: 10px;
}
ul{
overflow-x: hidden; /*隐藏ul x轴的滚动条*/
}
li.move {
transform: translateX(-60px); /*滑动后x轴位移-60px,使其可见*/
}
.del {
position: absolute;
top: 0;
right: -1px;
z-index: 3;
width: 60px;
height: 100%;
text-align: center;
color: #fff;
background-color: #ff5b45;
transform: translateX(60px); /*默认x轴位移60px,使其隐藏*/
}
data() {
return {
// 数据
list: [{
id: 1,
text: '请左滑动删除我吧'
},{
id: 2,
text: '请左滑动删除我吧'
},{
id: 3,
text: '请左滑动删除我吧'
},{
id: 4,
text: '请左滑动删除我吧'
},{
id: 5,
text: '请左滑动删除我吧'
},{
id: 6,
text: '请左滑动删除我吧'
}],
clientNum: {}, // 记录开始滑动(x1),结束滑动(x2)的鼠标指针的位置
candelete: {}, // 滑动的item
}
}
methods: {
/**
* 删除item
* index是下标
*/
deleteItem(index){
this.list.splice(index, 1)
// splice方法是删除数组某条数据,或者向某个位置添加数据
},
touchStart(item) {
let touchs = event.changedTouches[0];
// 记录开始滑动的鼠标位置
this.clientNum.x1 = touchs.pageX;
this.candelete = {};
},
touchEnd(item) {
let touchs = event.changedTouches[0];
// 记录结束滑动的鼠标位置
this.clientNum.x2 = touchs.pageX;
this.candelete = {};
// 判断滑动距离大于50,判定为滑动成功,否则失败
if (
this.clientNum.x2 < this.clientNum.x1 &&
Math.abs(this.clientNum.x1) - Math.abs(this.clientNum.x2) > 50
) {
event.preventDefault();
this.candelete = item;
} else if (
this.clientNum.x2 > this.clientNum.x1 &&
Math.abs(this.clientNum.x2) - Math.abs(this.clientNum.x1) > 10
) {
event.preventDefault();
this.candelete = {};
}
}
}
原文链接:https://blog.csdn.net/feng2qin/article/details/84649112
② 当把列表作为一个单独的组件时,循环出来的div不断创建新的组件,因此不需要判断滑动的是哪一个div.
<template>
<div class="eat">
<FoodIndex v-for="(item,index) in products" :key="index" :datas="item" :dataindex="index"></FoodIndex>
</div>
</template>
FoodIndex 组件
<template>
<div @touchstart="touchStart" @touchend="touchEnd()" :class="{move:isSdele}" class="list">
<div class="mack">
<span class="syn">
<p class="tit">{{datas.product_name}}</p>
<span class="des">{{datas.product_attr}}</span>
<br/>
<span class="price">$32.00</span>
</span>
<div class="del" @click="deleteItem(dataindex)">
<img src="../assets/images/delete.png" alt="">
</div>
</div>
</div>
</template>
props:{
datas:{
type:Object,
},
dataindex:{
type: Number
}
},
data(){
return{
isSdele:false,
}
},
然后只需要在滑动事件里判断变量isSdele的值去决定move类是否被添加。
4. vue导航点击切换图片(路由变化图片也跟着变化)
首先需要了解 router-link-active 类名。
类型: string 默认值: "router-link-active" 设置 链接(router-link)激活时使用的 CSS 类名。默认值可以通过路由的构造选项 linkActiveClass 来全局配置。
简单的说就是 router-link 标签 在选中的时候 会自动给整个标签添加一个 router-link-active的class 你可以根据这个class 设置他的样式。如果再选中 其他的。这个class 就会消失 。从而样式也就会消失。
<div class="left-nav">
<div class="box box1">
<router-link :to="{path:'/index'}">
<div class="des desed">收银</div>
</router-link>
</div>
<div class="box box2">
<router-link :to="{path: '/login'}">
<div class="des">订单</div>
</router-link>
</div>
</div>
.box{
width: 100%;
text-align: center;
margin-bottom: 36vh/@win;
position: relative;
a{
display: inline-block;
width: 100%;
height: 100%;
}
.des{
font-size:16vh/@win;
font-family:SourceHanSansCN-Normal;
font-weight:400;
color:rgba(255,255,255,1);
line-height:51vh/@win;
text-align: center;
}
}
.box1{
a{
background: url("../assets/images/tex.png") top center no-repeat;
-webkit-background-size: 30vw/@wid ;
background-size: 30vw/@wid;
padding-top: 25vw/@wid;
}
.router-link-active{
display: inline-block;
background: url("../assets/images/pay.png") top center no-repeat;
-webkit-background-size: 30vw/@wid ;
background-size: 30vw/@wid;
padding-top: 25vw/@wid;
}
}
.box2{
a{
background: url("../assets/images/tex.png") top center no-repeat;
-webkit-background-size: 30vw/@wid ;
background-size: 30vw/@wid;
padding-top: 25vw/@wid;
}
.router-link-active{
display: inline-block;
background: url("../assets/images/pay.png") top center no-repeat;
-webkit-background-size: 30vw/@wid ;
background-size: 30vw/@wid;
padding-top: 25vw/@wid;
}
}