VueJS Dynami c Стиль Binding? - PullRequest
Новая
       5

VueJS Dynami c Стиль Binding?

0 голосов
/ 01 мая 2020

У меня установлено свойство данных на Vueity Card, которое называется editMode. Когда я нажимаю на кнопку, editMode устанавливается в значение true, и на v-img появляется значок. Теперь, как я могу сделать так, чтобы когда editMode было истинным, opacity изображения было установлено на 0.3, но значок остался неизменным?

Вот рабочая codepen

Пожалуйста, проверьте код ниже: - 

new Vue({
  el: "#app",
  data() {
    return {
      editMode: false
    };
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.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" dark>
    <v-container>
      <v-layout>
        <v-flex xs6>
          <v-card>
            <v-img :style="editMode ? 'opacity: 0.3' : ''" src="https://cdn.vuetifyjs.com/images/cards/desert.jpg" aspect-ratio="2.75">
              <v-container v-if="editMode">
                <v-layout align-center justify-center row fill-height>
                  <v-icon class="mt-5" color="white" large>create</v-icon>
                </v-layout>
              </v-container>
            </v-img>
          </v-card>
          <v-btn large @click="editMode = !editMode"> Edit Mode </v-btn>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</div>

Прямо сейчас непрозрачность иконки также достигает 0,3. Любая помощь будет оценена. Спасибо.

1 Ответ

1 голос
/ 01 мая 2020

Вот мое решение: используйте класс вместо стиля: 

<v-img :class="{'editMode': editMode}" src="https://cdn.vuetifyjs.com/images/cards/desert.jpg" aspect-ratio="2.75">

и в стилях: 

<style lang="scss" scoped>
.editMode {
  ::v-deep .v-image__image {
      opacity: .3
  }
}
</style>
...