vue通知（滚动）

1. li宽度不顾定

<template><div id="app"><div id="box" @mouseover="clearLeft" @mouseleave="setLeft"><ul :style="{ transform: 'translateX(' + left + 'px)' }" ref="cmdlist"><li v-for="(item,index) in items" :key="index">{{item.name}}</li></ul></div></div>
</template><script>
export default {name: "HelloWorld",data() {return {timer: null,pwidth: 0,left: 0,items: [{name: "1马dfgdfgs云1马dfgdfgs云1马dfgdfgs云1马dfgdfgs云",active: false},{name: "2雷dfgd军",active: false},{name: "3dsfgd张珊",active: false}]};},mounted() {this.setLeft();},watch: {},methods: {setLeft() {let element = this.$refs.cmdlist;this.pwidth = document.defaultView.getComputedStyle(element, "").width.split("px");this.timer = setInterval(() => {this.left--;let num = parseInt(this.pwidth[0]);if (-num >= this.left) {console.log("this.left", this.left);console.log("-num", -num);this.left = 0;}}, 30);},clearLeft() {if (this.timer) clearInterval(this.timer);}},beforeDestroy() {if (this.timer) clearInterval(this.timer);}
};
</script>
<style scoped>
* {margin: 0;padding: 0;
}
#app {margin-top: 60px;margin-left: 200px;text-align: center;
}
#box {width: 600px;height: 50px;overflow: hidden;border: 1px solid #090;
}
ul {padding: 0px;margin: 0px;display: flex;/* width: 320px; */height: 50px;border: 1px solid #f00;
}
li {list-style: none;padding: 0px;margin: 0px;/* padding-right: 30px; */background: #099;white-space: nowrap;
}
</style>

box宽度100%会有问题

2. li宽度固定

<template><div id="app"><div id="box" @mouseover="clearLeft" @mouseleave="setLeft"><ul :style="{ transform: 'translateX(' + left + 'px)' }" ref="cmdlist"><li v-for="(item,index) in items" :key="index">{{item.name}}</li></ul></div></div>
</template><script>
export default {name: "HelloWorld",data() {return {timer: null,pwidth: 0,left: 0,items: [{name: "1马dfgdfgs云1马dfgdfgs云1马dfgdfgs云1马dfgdfgs云",active: false},{name: "2雷dfgd军",active: false},{name: "3dsfgd张珊",active: false}]};},mounted() {this.setLeft();},watch: {},methods: {setLeft() {let num = this.items.length * 230;this.timer = setInterval(() => {this.left--;if (-num >= this.left) {console.log("this.left", this.left);console.log("-num", -num);this.left = 0;}}, 30);},clearLeft() {if (this.timer) clearInterval(this.timer);}},beforeDestroy() {if (this.timer) clearInterval(this.timer);}
};
</script>
<style scoped>
* {margin: 0;padding: 0;
}
#app {margin-top: 60px;margin-left: 200px;text-align: center;
}
#box {/* width: 600px; */height: 50px;overflow: hidden;border: 1px solid #090;
}
ul {display: inline-block;padding: 0px;margin: 0px;display: flex;/* width: 320px; */height: 50px;border: 1px solid #f00;
}
li {width: 200px;padding: 0px;margin: 0px 30px 0px 0px;list-style: none;background: #099;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;
}
</style>