Question

我有这个自定义排序方法，该方法在div上将它们排列为升序或降序。我的问题是，默认情况下我如何才能使图标的颜色变为灰色，并且仅当您单击该图标时，该图标才会变为黑色，而其他图标仍然变为灰色，例如vuetify数据表提供的https://v15.vuetifyjs.com/en/components/data-tables。

这是指向我的pen的链接。

new Vue({
  el: '#app',
  data() {
    return {
      headers: [{
          text: "Name",
          value: "name"
        }, // changed this to name
        {
          text: "Grades",
          value: "grades"
        }
      ],
      labels: ["Andy", "Max", "John", "Travis", "Rick"],
      Grades: [99, 72, 66, 84, 91],
      sortKey: "", // added a sortKey,
      direction: 1
    }
  },
  computed: {
    tableItems() {
      let retVal = this.labels.map((label, i) => {
        return {
          name: label,
          grades: this.Grades[i]
        };
      });
      // if there is a sortKey use that
      if (this.sortKey) {
        retVal.sort((a, b) =>
          this.direction * // here multiply by the direction
          (a[this.sortKey] < b[this.sortKey] ? -1 : 1)
        );
      }
      return retVal;
    }
  },
  methods: {
    sortBy(prop) {
      if (this.sortKey === prop) {
        this.direction *= -1 // change direction to -ve or positive
      }
      this.sortKey = prop;
      console.log(prop);
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.css" rel="stylesheet" />
<div id="app">
  <v-app id="inspire">
    <v-container>
      <v-layout>
        <v-flex v-for="header in headers" :key="header.text" xs4 py-1>
          <span>
                {{ header.text }}
                <v-icon small @click="sortBy(header.value)">arrow_upward</v-icon>
            </span>
      </v-layout>
      <v-layout v-for="item in tableItems" :key="item.name">
        <v-flex xs4 py-1>
          <span>{{ item.name }}</span>
        </v-flex>
        <v-flex xs4 py-1>
          <span>{{item.grades}}</span>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</div>

我正在尝试复制vuetify数据表提供的内容，但是我无法弄清楚如何将颜色绑定到图标。我只是想设置图标的颜色，然后根据标题值单击它时将其更改为黑色或灰色。

Answer 1

这是一项技术含量较低的技术，但您可以使用（动态的，绑定的）类名来控制颜色，该类名可以禁用测试sortKey的方法（在图标本身或在父元素上）。 / p>

Forked Pen

:class="{ current: sortKey == header.value }"

Answer 2

您可以创建一个方法...

sortIconClass(val) {
  return (this.direction===1 && val===this.sortKey)?'black--text':'grey--text'
}

并像...一样使用它

<v-icon small @click="sortBy(header.value)" :class="sortIconClass(header.value)">arrow_upward</v-icon>

Codeply demo

对于图标，您可以执行类似的操作...

<v-icon small @click="sortBy(header.value)" :class="sortIconClass(header.value)">{{sortIcon(header.value)}}</v-icon>

sortIcon(val) {
    return (this.direction===1 && val===this.sortKey)?'arrow_upward':'arrow_downward'
}

Updated Codeply

Answer 3

图标本身是具有其自身状态的组件，您可以执行相同的操作，创建单个文件组件Icon.vue，然后将其导入到您正在使用的vue实例中

<template>
  <i @click="setActive" v-bind:class="{ active: isActive }"></i>
</template>

<script>
  data() {
    return {
      active: false
    }
  },
  methods: {
    setActive() {
      active = true
    }
  },
  computed: {
    isActive() {
    return active
  }
}
</script>

<style scoped>
  .active {
    /* do whatever */
  }
</style>

导入：

import Icon from 'wherever/icon/is.vue'
/* ... */
components: {
  'icon': Icon,
}

VueJs中的动态类和颜色绑定？

3 个答案: