JS--鼠标事件（状态）

1.鼠标的左键，右键，滚轮事件

<template>
  <div id="test">
    <button id="test" @mousedown="test(222, $event)">Test</button>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    test(lable, event) {
      if (event.button == 0) {
        console.log("你点了左键" + lable);     // 你点了左键222
      } else if (event.button == 1) {
        console.log("你点了滚轮" + lable);    // 你点了滚轮222
      }else if (event.button == 2) {
        console.log("你点了右键" + lable);    // 你点了右键222
      }
    }
  }
};
</script>

<style></style>

2.css样式（鼠标操作）

 <style lang="scss" scoped>
        .btn {
          background-image: url("../../assets/img/img-textSecurity/Start按钮.png");
        }
        //鼠标悬停时的状态
        .btn:hover{
          background-image: url("../../assets/img/img-textSecurity/Start按钮hover.png");
        }
        //鼠标点击前的状态
        .btn:link{
          background-image: url("../../assets/img/img-textSecurity/Start按钮hover.png");
        }
        //鼠标点击时状态
        .btn:active{
          background-image: url("../../assets/img/img-textSecurity/Start按钮active.png");
        }
        //鼠标点击后状态
        .btn:visited{
          background-image: url("../../assets/img/img-textSecurity/Start按钮active.png");
        }
        //鼠标聚焦时的状态（一般用在输入框）
        .btn:focus{
          background-image: url("../../assets/img/img-textSecurity/Start按钮active.png");
        }
</style>

3.悬停改变图片

<template>
	<img
      @click="selectAllCollections"
      class="editImgSty"
      src="../../assets/actionIcon/not-collected.png"
      alt=""
    />
</template>
<style>
	.editImgSty:hover {
        content: url("../../assets/actionIcon/collection.png");
      }
</style>