Question

我正在VueJS中创建一个下拉菜单，我想显示一个图标，然后单击该图标，将打开一个带有3个其他图标的下拉菜单。通过单击这些图标之一，我希望下拉菜单图标更改。我已经实现了所有这一切，唯一似乎不起作用的是我无法动态更改图标的颜色（一个图标是绿色，一个图标是灰色，一个图标是红色）。我认为那是因为Vue不允许我将颜色设置为变量。

这是我的菜单代码：

    <v-card outlined>
        <v-card-title>Selection</v-card-title>

        <v-toolbar height="80" elevation="0">
            <v-menu
                    transition="slide-y-transition"
                    nudge-left="9"
                    nudge-bottom="10"
                    offset-y>

                <template v-slot:activator="{ on: menu }">
                    <v-tooltip right>
                        <template v-slot:activator="{ on:tooltip }">
                            <v-btn class="mb-6" v-on="{...tooltip, ...menu}" fab>
                                <v-icon x-large>{{ myIcon }}</v-icon>
                            </v-btn>
                        </template>
                        <span>Steady</span>
                    </v-tooltip>
                </template>


                <v-list>
                    <v-list-item>
                        <v-icon color="green" x-large @click="changeSupplierStatusToUp()">mdi-chevron-up</v-icon>
                    </v-list-item>

                    <v-divider></v-divider>


                    <v-list-item>
                        <v-icon color="grey" x-large @click="changeSupplierStatusToMid()">mdi-unfold-less-vertical
                        </v-icon>
                    </v-list-item>
                    <v-divider></v-divider>
                    <v-list-item>
                        <v-icon color="red" x-large @click="changeSupplierStatusToDown()">mdi-chevron-down</v-icon>
                    </v-list-item>
                </v-list>
            </v-menu>

        </v-toolbar>

    </v-card>
</template>

这是我的Javascript代码：

<script>

    export default {
        name: "Selection",
        data() {
            return {
                myIcon: 'mdi-unfold-less-vertical',

        },
        props: {},
        computed: {

        },
        methods: {

            changeSupplierStatusToUp() {
                this.myIcon = 'mdi-chevron-up'

            },
            changeSupplierStatusToDown() {
                this.myIcon = 'mdi-chevron-down'

            },
            changeSupplierStatusToMid() {
                this.myIcon = 'mdi-unfold-less-vertical'

            }
    };
</script>

<style scoped></style>

感谢您的帮助。：-）

Answer 1

将图标颜色设置为变量，然后在每个函数中将该变量更改为期望的颜色。

我这样做的方法是将function f(M, i, j, w){ if (i == 0 && j == 0 && w != 'right_after') return M[i][j] if (i < 0 || i > M.length-1 || j < 0 || j > M[0].length-1) return -Infinity if (w == 'before'){ return M[i][j] + Math.max( f(M, i-1, j, 'before'), f(M, i, j-1, 'before')) } if (w == 'after'){ return M[i][j] + Math.max( f(M, i-1, j, 'after'), f(M, i, j-1, 'after'), f(M, i-1, j, 'right_after'), f(M, i, j-1, 'right_after')) } if (w == 'right_after'){ return M[i][j] + Math.max( f(M, i+1, j, 'before'), f(M, i, j+1, 'before')) } } var M = [ [12, -16, 10, -12], [-16, 13, -14, 7], [7, -4, 16, -15], [-7, 16, -9, 8] ] var m = M.length var n = M[0].length console.log(Math.max( f(M, m-1, n-1, 'before'), f(M, m-1, n-1, 'after') ))转换为具有myIcon属性的对象。

我将颜色存储为对象以便于选择。

然后，我附加每个name, color的颜色以使用适当的v-icon Object属性。

在每个图标的click事件中，我更改了colors和myIcon.name。

即

myIcon.color

确保您在changeSupplierStatusToUp() { this.myIcon.name = 'mdi-chevron-up'; this.myIcon.color = this.colors.green; }道具前加一个冒号（color）以使其具有反应性，并使用变量而不是文本-:。

然后在激活器图标<v-icon :color="colors.green" ...>中。

<v-icon x-large :color="myIcon.color">{{ myIcon.name }}</v-icon>

const app = new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  name: "Selection",
  data() {
    return {      
      myIcon: {
        name: 'mdi-unfold-less-vertical',
        color: 'default'
      },
      colors: {
        green: 'green',
        grey: 'grey',
        red: 'red'
      }
    }
  },
  props: {},
  computed: {
    
  },
  methods: {
    changeSupplierStatusToUp() {
      this.myIcon.name = 'mdi-chevron-up';
      this.myIcon.color = this.colors.green;
    },
    changeSupplierStatusToDown() {
      this.myIcon.name = 'mdi-chevron-down';
      this.myIcon.color = this.colors.red;
    },
    changeSupplierStatusToMid() {
      this.myIcon.name = 'mdi-unfold-less-vertical';
      this.myIcon.color = this.colors.grey;
    }
  }
});

是否可以通过单击vuejs中的列表项来更改图标的颜色？

1 个答案: