引言

一、Vue图片滤镜的基本原理

二、创建自定义指令

  1. 首先，在Vue组件中定义一个自定义指令v-filters。
Vue.directive('filters', {
  bind(el, binding, vnode) {
    // 绑定事件监听器
    el.addEventListener('click', function() {
      // 根据binding.value的值切换滤镜效果
      const filters = binding.value;
      el.style.filter = filters;
    });
  }
});
  1. 在模板中使用该指令。
<img v-filters="filters" src="example.jpg" alt="Example">

三、定义滤镜效果

在Vue组件的data函数中定义一个filters数组，存储各种滤镜效果。

data() {
  return {
    filters: [
      '',
      'grayscale(100%)',
      'blur(5px)',
      'saturate(150%)',
      'contrast(200%)'
    ]
  };
}

四、切换滤镜效果

在Vue组件的方法中添加一个函数来切换滤镜效果。

methods: {
  changeFilter(index) {
    this.filters = this.filters.slice(0, index + 1);
  }
}

五、使用Vue指令切换滤镜

在模板中，使用v-on:click事件绑定changeFilter方法，并传递当前滤镜的索引。

<img v-filters="filters" src="example.jpg" alt="Example" v-on:click="changeFilter(index)">

六、完整示例

以下是完整的Vue组件示例：

<template>
  <div>
    <img v-filters="filters" src="example.jpg" alt="Example" v-on:click="changeFilter(index)">
    <ul>
      <li v-for="(filter, index) in filters" :key="index" @click="changeFilter(index)">
        {{ index === 0 ? '默认' : `滤镜${index}` }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      filters: [
        '',
        'grayscale(100%)',
        'blur(5px)',
        'saturate(150%)',
        'contrast(200%)'
      ],
      index: 0
    };
  },
  methods: {
    changeFilter(index) {
      this.index = index;
      this.filters = this.filters.slice(0, index + 1);
    }
  }
};
</script>

总结