Vue + Element UI 实现睁眼闭眼图标切换

<template>
  <el-icon :class="{'el-icon-circle': !isOpen, 'el-icon-circle-check': isOpen}" @click="toggle"></el-icon>
</template>
<script>
export default {
  data() {
    return {
      isOpen: false
    }
  },
  methods: {
    toggle() {
      this.isOpen = !this.isOpen;
    }
  }
}
</script>
<p>在模板中，我们使用Element UI的Icon组件，并根据isOpen属性的值添加不同的class，实现睁眼睛和闭眼睛的切换。</p>
<p>在脚本中，我们定义了一个isOpen属性，用于判断当前图标的状态。我们还定义了一个toggle方法，用于切换isOpen属性的值。</p>
<p>这个组件可以直接在Vue应用中使用，例如：</p>
<pre><code class="language-vue">&lt;template&gt;
  &lt;div&gt;
    &lt;EyeIcon /&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
import EyeIcon from './EyeIcon.vue';

export default {
  components: {
    EyeIcon
  }
}
&lt;/script&gt;
</code></pre>
<p>在这个例子中，我们把EyeIcon组件导入到父组件中，并在模板中使用它。</p>