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 class="notice">
    <div class="left">
      <img src="../../../assets/layout/notice.png" alt />
      最新公告：
    </div>
    <div class="center" @mouseleave="setTimer" @mouseover="clearTimer">
      <ul :style="{ transform: 'translateX(' + left + 'px)' }" ref="cmdlist">
        <li v-for="(item,index) in items" :key="index">{{item.name}}</li>
      </ul>
    </div>
    <div class="right">2023-10-23 08：49：50</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      timer: null,
      left: 0,
      items: [
        {
          name:
            "111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111",
          active: false
        },
        {
          name: "222222222222222222222222222222222222222222222222222222222",
          active: false
        },
        {
          name: "3333333333333333333333333",
          active: false
        }
      ]
    };
  },
  computed: {
    // ...mapGetters(["ndid", "eid", "ichnoUrl"])
  },
  methods: {
    setTimer() {
      let num = (this.items.length - 1) * 1600;
      this.timer = setInterval(() => {
        this.left--;
        if (-num >= this.left) {
          this.left = 1600;
        }
      }, 10);
    },
    clearTimer() {
      if (this.timer) clearInterval(this.timer);
    }
  },
  mounted() {
    this.setTimer();
  },
  components: {},
  watch: {},
  beforeDestroy() {
    if (this.timer) clearInterval(this.timer);
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.notice {
  display: flex;
  height: 40px;
  line-height: 40px;
  background: rgba(3, 110, 184, 0.41);
  // margin-top: 110px;
  font-size: 14px;
  z-index: 9999;
  background: #090;
  .left {
    width: 130px;
    color: rgb(2, 230, 255);
    img {
      width: 14px;
      margin: 12px 5px 0px 30px;
      float: left;
    }
  }
  .center {
    width: 1600px;
    overflow: hidden;
    cursor: pointer;
    ul {
      width: 4800px;
      padding: 0px;
      margin: 0px;
    }
    li {
      float: left;
      width: 1600px;
      padding: 0px;
      margin: 0px;
      list-style: none;
      // background: #099;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      color: #fff;
    }
  }
  .right {
    width: 190px;
    color: rgb(2, 230, 255);
  }
}
</style>

li的宽度是1600px，图片可以注释掉，设计稿宽度是1920px