鼠标按住onclick变色uniapp

在UniApp中，要实现鼠标悬停（onclick）时元素变色的效果，你可以使用`v-on:mouseover`和`v-on:mouseout`事件监听器，结合CSS样式来控制。以下是一个简单的示例：

<template>
  <view class="hover-color" @mouseover="onMouseOver" @mouseout="onMouseOut">
    <button @click.native="onClick">点击我</button>
  </view>
</template>

<style scoped>
.hover-color {
  transition: background-color 0.3s; /* 添加渐变过渡效果 */
}

.hover-color:hover {
  background-color: #ff0; /* 鼠标悬停时的颜色 */
}
</style>

<script>
export default {
  methods: {
    onMouseOver() {
      this.$refs.button.style.backgroundColor = '#ff0'; // 设置背景颜色为变色后的状态
    },
    onMouseOut() {
      this.$refs.button.style.backgroundColor = ''; // 鼠标移开时重置背景颜色
    },
    onClick() {
      console.log('按钮被点击');
    }
  },
  mounted() {
    this.$refs.button = this.$el.querySelector('button'); // 获取button元素引用
  }
};
</script>

在这个例子中，当鼠标悬停在按钮上时，按钮背景色会变为红色 (#ff0)，鼠标移开后恢复默认颜色。`onClick`方法会在点击事件触发时执行相应的逻辑。