JS Vue input type=“color“ change事件 改为 input事件 更改颜色立即生效 - 附示例

input：type="color"  input事件

效果

一、需求

        项目需求是更改颜色后立即生效，但是之前使用的是change事件不能立即生效，需要再次点击input才生效，因此后面改为了input事件来解决这一问题。

二、示例

<template>
  <div>
    <input type="color" v-model="color" @input="refreshColor($event)" />
    <span :style="{color: color}">{{ color }}</span>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        color: '#ff0000',
      },
    },
    methods: {
      refreshColor(event) {
        console.log(event.target.value);
      },
    }
  };
</script>

 欢迎扫描下方二维码关注VX公众号