时间戳

首页 > 解决方案 > VueJS - 如何通过单击图标在 vuexy 中的深色和浅色主题之间切换

vue.js - VueJS - 如何通过单击图标在 vuexy 中的深色和浅色主题之间切换

问题描述

我正在尝试使用图标在深色和浅色主题之间切换，我尝试使用单选按钮，它工作得非常好，我不知道我的图标哪里出错了。

以下是适用于 vs-radio 按钮的代码：

<vs-radio v-model="changeTheme" vs-value="light" vs-name="theme-mode-light">Light</vs-radio>
<vs-radio v-model="changeTheme" vs-value="dark" vs-name="theme-mode-dark">Dark</vs-radio>
...
<script>
watch: {
  layoutType (val) {
    // Reset unsupported options
    if (val === 'horizontal') {
      if (this.changeTheme === 'semi-dark') this.changeTheme = 'light'
      if (this.navbarType === 'hidden')   this.navbarTypeLocal = 'floating'
      this.$emit('updateNavbarColor', '#fff')
    }
  }
},
computed: {
  changeTheme: {
    get ()    { return this.$store.state.themecolr},
    set (val) { this.$store.dispatch('updateTheme', val) }
  },
}
</script>

这是我目前正在尝试实现的代码：

 <div class="con-img ml-3">
          <feather-icon v-if="this.$store.state.themecolr=== 'light'" icon="Icon" v-model="changeTheme"   vs-name="theme-mode-light"/>
        </div>
        <div class="con-img ml-3">
          <feather-icon v-if="this.$store.state.themecolr=== 'dark'" icon="Icon" v-model="changeTheme" vs-value="dark" vs-name="theme-mode-light"/>
        </div>
...
methods: {
      changeTheme: {
        get ()    { return this.$store.state.themecolr},
        set (val) { this.$store.dispatch('updateTheme', val) }
      },
    }

我尝试将@change 和@click 添加到羽毛图标但没有成功，我还尝试添加这样的功能：

changeTheme (){
    if(this.$store.state.themecolr=== 'light'){
      return this.$store.state.themecolr=== 'dark'
    }else if(this.$store.state.themecolr=== 'dark'){
      this.$store.state.themecolr=== 'light'
    }
  }

请有人帮我实现这一点，我想使用羽毛图标切换主题，但我可以使用单选按钮来完成，但这不是我想要的。

标签： vue.jsiconsthemestoggle

解决方案

我查看了vue-feather-icons 这里的实现， 它缺少事件处理程序。如果是这种情况，则意味着这些组件不会发出任何事件。

我建议您将事件处理程序移动到div图标的周围。看看我在这里做了一个例子：https ://codesandbox.io/s/distracted-noether-gud0p?file=/src/App.vue

推荐阅读