vue通知（滚动）

1. li宽度不顾定

   <template>
   • {{item.name}}
   </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>
   • {{item.name}}
   </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>