小编ff9*_*878的帖子

注意：使用Vue.js和Vuetify.js进行功能和样式设置

我有使用来动态生成的卡片组件v-for，并且我想根据屏幕尺寸（sm / md / lg）在1/3/4卡中连续显示它们。当我将它们放置在Vuetify的网格系统中时，使用v-flex和v-layout元素卡片被最小化，而不是移动到第二行。

还有另一种解决方法吗？

<v-content>
  <v-card class="d-inline-flex" v-for="company of companies" :key="company.name">
    <v-layout >
      <v-flex md6 lg6>
        <img class="company-logo" src="../assets/img/example-logo.png" alt="company logo">
      </v-flex>
      <v-flex md6 lg6>
        <v-card-title class="headline pl-0">{{company.name}}</v-card-title>
        <article class="text-md-left text-lg-left">
          <v-btn @click="selectDashboard(href('stats', company.name))" :value="company.name"><v-icon>local_offer</v-icon></v-btn>
          <v-btn @click="selectDashboard(href('process', company.name))" :value="company.name"><v-icon>notifications</v-icon></v-btn>
          <v-btn @click="selectDashboard(href('example', company.name))" :value="company.name"><v-icon>rate_review</v-icon></v-btn>
          <v-btn @click="selectDashboard(href('alerts', company.name))" :value="company.name"><v-icon>explore</v-icon></v-btn>
          <v-btn @click="selectDashboard(href('profile', company.name))" :value="company.name"><v-icon>room</v-icon></v-btn>
        </article>
      </v-flex>
    </v-layout>
  </v-card>
</v-content>

对于一个视觉，这codepen显示图像宽度尺寸减小（但高度尺寸保持不变） - https://codepen.io/johnjleider/pen/aLXBez?editors=1111

我想按照覆盖与自定义颜色vuetify变量此

我创建了一个包含基本文件夹(_colors,_typography)和main.styl文件的手写笔文件夹.该_color文件将导入到main.styl文件中,后者将导入该文件main.js

这是我的文件结构: 在此处输入图像描述

进口包括在main.js:

 import '../node_modules/vuetify/dist/vuetify.min.css'
 import './assets/stylus/main.styl'

在里面_color.styl,我有这个测试代码:

$red = {
  "base":       #FF0000,
  "darken-1":   #e50000,
  "darken-2":   #990000,
  "darken-3":   #7f0000,
  "darken-4":   #000000,
}

自定义颜色没有显示......我在这里遗漏了什么？

注意：使用 Vue.js 和 Vuetify.js 来实现功能和样式。

使用:class和@click属性，我能够将按钮的背景颜色更改为所需的颜色，但它会将更改应用于所有这些，而不仅仅是我单击的那个。

问题：如何在不同时切换所有按钮的情况下切换按钮？

在我的 vue 文件中：

<v-layout>
  <v-flex md6>
    <v-text-field>Welcome.</v-text-field>
  </v-flex md6>
  <v-flex id="icon-filter">
    <span>Filter by:</span>
    <v-btn class="filter-button" :class="{toggled: isToggled}" @click="isToggled = !isToggled"><v-icon>local_offer</v-icon></v-btn>
    <v-btn class="filter-button" :class="{toggled: isToggled}" @click="isToggled = !isToggled"><v-icon>notifications</v-icon></v-btn>
  </v-flex>
</v-layout>

在script同一个 vue 文件的部分：

<script>
  export default {
    data: function() {
      return {
        companies,
        msg: "indiv",
        dashboards: ['profile', 'charts'],
        isToggled: false
      }
    },
    methods: {

    }
  }
</script>

我已经通读了这个问题，但是我收到了一个 Vue 警告，提到我有isToggled方法作为已经定义的数据属性。Vue.js 项目的切换类

我还通读了有关数据绑定的 …

按钮很大，超过了卡片的宽度

这应该很容易，但是自定义卡中的按钮时我遇到了一些困难。我想删除所有填充，以使黑色边框很好地包围图标，而左侧/右侧没有任何多余的空间。我尝试添加自定义CSS并!important直接覆盖div.btn__content，但是这些无效。有什么想法可以做到这一点尽可能简单吗？

复制链接