将元素与vuetify中的v-card-title对齐
在vuetify中，v-card-title是一个用于显示卡片标题的组件。要将元素与v-card-title对齐，可以使用v-card-title的slot属性。
首先，确保你已经引入了vuetify库，并在你的Vue组件中使用了v-card和v-card-title组件。
然后，在v-card-title组件内部，可以使用slot插槽来添加其他元素，并通过CSS样式来对齐它们。以下是一个示例：
<template>
<v-card>
<v-card-title>
<div class="align-right">
<h2>标题</h2>
<p>副标题</p>
</div>
</v-card-title>
<v-card-text>
卡片内容
</v-card-text>
</v-card>
</template>
<style>
.align-right {
text-align: right;
}
</style>在上面的示例中，我们在v-card-title组件内部创建了一个div元素，并为其添加了一个类名"align-right"。然后，在样式部分，我们使用CSS的text-align属性将该div内部的内容右对齐。
这样，标题和副标题就会与v-card-title组件对齐了。
关于vuetify的更多信息和使用方法，你可以参考腾讯云的Vuetify产品介绍页面：Vuetify产品介绍
相关·内容
2回答
我正在尝试对齐文本，使其一部分在卡片的左侧，另一部分在右侧(基本上在两者之间有空格) 但是，使用class="text-right"将文本向下移动。 有没有人知道如何把它移到右边而又保持在同一条线上？ new Vue({
el: '#app',
vuetify: new Vuetify(),
}) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"&
浏览 59提问于2020-01-28得票数 4
回答已采纳
对于登录组件，我尝试将图像和文本完美地居中放置在v-card-title中的文本上方。 下面是它看起来的样子： ? 正如你所看到的，它们彼此之间并不是完美的中心对齐。我尝试了许多不同的方法来实现这一点，但都没有奏效。 代码如下： <v-card-title class="aca-login-title">
<div class="text-xs-center">
<v-flex xs12 md12 lg12>
<v-img mx-auto max-width="2.5em"
浏览 76提问于2021-10-23得票数 1
我无法在v卡字幕的同一行上对vuetify元素v-开关和v-btn。
我试图在<v-card-subtitle/> (同一行)中包含以下元素：
<v-switch v-model="switch" label="Finished" color="info" hide-details></v-switch>
和
Reload <v-btn icon color="primary"><v-icon>mdi-reload></v-icon></v-btn
浏览 1提问于2022-11-09得票数 0
回答已采纳
我有一个Vuetify滑块，在前面插槽中有一个负图标，在附加插槽中有一个加图标。
如果我在附加槽中再添加一个文本字段，则加号图标和文本字段将与滑块不对齐。我怎样才能使它们对齐？
<v-app id="app">
<v-card>
<v-card-title>Vuetify Slider append slot is not aligned if more than one element</v-card-title>
<v-subheader>Append slot contains only o
浏览 1提问于2021-02-15得票数 0
回答已采纳
你好！
我最近开始使用Vuetify 2.0，我发现自己被困在了我能够在Vuetify 1.5上很容易实现的东西上。我觉得我错过了一些很明显的东西。
请帮助我实现这一结果从这个Vuetify 1.5模板：
<div id="app">
<v-app>
<v-content>
<v-container fluid fill-height class="grey darken-4">
<v-layout fill-height column wrap>
浏览 1提问于2019-12-10得票数 2
回答已采纳
我正在使用vuetify v-card，我需要应用省略css，以便它保持单行和...当它超过时就会出现。
我使用了以下css属性：
.headerClass {
white-space: nowrap !important;
width: 95px;
word-break: normal!important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
这是我的v-card-title
<v-card-title class="body-2 pl-2 heade
浏览 18提问于2020-05-07得票数 2
回答已采纳
2回答
Vuetify列的断点
、、、、
我有一个简单的基于vue.js/vuatefy.js的SPA。主页包含排列在列布局中的多张卡片。现在，卡的宽度增长到列的宽度。我希望使用断点(如xs10或sm8 )来响应设置大小。然而，这些断点似乎既不作为属性xs10工作，也不作为CSS类class="xs10"工作。奇怪的是，如果我用排排来代替.但我只想一张卡每行中心和而不是增长到全宽度.
main.js
import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css
浏览 0提问于2019-07-15得票数 0
回答已采纳
我试图使用Vuetify网格系统中的flex属性将文本对齐到图像的右下角，但只有对齐对我有用， align 对我没有任何帮助，我试图在v-flex和v-layout<>E29</code>中使用align，但两者都不起作用。最重要的是，如果我添加了一个v-flex，那么用于v-布局的合理性就会停止工作。这是我使用Vuetify的第一天，所以我有点不知所措，因为它拥有大量的属性和组件，所以我想在这里提供一些帮助：
<v-card>
<v-img src="https://images.pexels.com/phot
浏览 5提问于2020-03-26得票数 0
回答已采纳
我在v-card-actions中有一个有三个按钮的v-card (v-btn)，每个按钮上都有一个很长的文本。这基本上没问题，但当在小屏幕上查看时，这些按钮没有响应，它们仍然是从左到右对齐，而不是从上到下，因此最右侧的按钮被剪切： ? HTML： <div id="app">
<v-app>
<v-card>
<v-card-title>
Foo!
</v-card-title>
<v-card-text>
Bar!
浏览 23提问于2019-12-20得票数 0
回答已采纳
我只在生产版本中得到这个错误。 ? 我已经阅读了这个doc和相关的issue，但是我仍然不能让它工作。v-dialog包了<v-app>，为什么它还在抱怨呢？ 以下是我的代码 // App.vue
<template>
<v-app id="inspire">
<v-dialog max-width="500px">
<v-card>
<v-card-title>
Create
</v-card-titl
浏览 66提问于2019-06-26得票数 5
是否可以将元素与vuetify的card组件中的v-card-title对齐？Currentl当使用class="float-right"时，元素位于右侧，但它位于标题下方。我希望它处于相同的水平。这是
new Vue({
el: '#app',
vuetify: new Vuetify(),
})
<div id="app">
<v-app id="inspire">
<v-card
class="mx-auto"
width="
浏览 17提问于2020-02-20得票数 0
回答已采纳
1回答
我目前正在Vuetify中创建一个网格布局，但是我被困住了。我在做一个包含图像的卡片布局。下面是一个例子：
我用下面的代码试过了，但是右边的小卡片由于空白处不对齐。
<v-container>
<v-row class="justify-center">
<v-col cols="6">
<v-hover v-slot:default="{ hover }">
<v-card
浏览 5提问于2020-02-18得票数 6
回答已采纳
1回答
当前对话框显示如下。
预期如下所示
html标记
<v-dialog v-model="dialog" width="500">
<template v-slot:activator="{ on }">
<v-btn v-on="on">Click</v-btn>
</template>
<v-card>
<v-card-title primary-title>Details&
浏览 4提问于2019-07-29得票数 2
我使用Vuetify创建了一个简单的v-dialog。它使用v-slot:activator和非结构化数据，即{on, attrs }。虽然我能够理解on部分，但我无法理解attrs的目的是什么？如果我删除它，那么对话框仍然可以正常工作。它是如何工作的，它是干什么用的？
下面是Vuetify docs的一些基本示例：
<template>
<div class="text-center">
<v-dialog
v-model="dialog"
width="500"
>
浏览 1提问于2022-04-12得票数 3
回答已采纳
通过使用VueJS并尝试基于Vuetify的视点断点设置一些文本的样式，我通过将样式绑定到如下条件实现了这一点： :style="$vuetify.breakpoint.name === 'xs' ? { 'font-size': '1.5rem !important' }: { 'font-size': '2.5rem !important' }" 然而，我想使用计算属性来代替，只是为了使它更简洁，根据Vuetify's docs，这可以使用断点对象来实现，但是由于某些原因，我不能让它
浏览 13提问于2019-05-20得票数 0
回答已采纳
我正在尝试使用vuetify v-flex制作卡片列表，以下是代码
<div id="app">
<v-app>
<v-content>
<v-container fill-height fluid>
<v-layout>
<v-flex xs12>
<v-card dark color="grey">
<v-ca
浏览 3提问于2018-06-15得票数 6
回答已采纳
1回答
我想在vuetify的v-card-title组件中添加自定义道具。但是，我仍然想用我的自定义道具来调用vuetify组件，我该怎么做呢？我正在尝试，但没有成功。
codesandbox中的示例：
<template>
<!-- How to add computed at VCardTitle? -->
</template>
<script>
import VCardTitle from "./somepath/VCardTitle";
export default {
name: "App",
浏览 2提问于2018-10-14得票数 0
TL；博士
从Vuetify 复制的组件的单元测试正在通过，但我用pug编写的组件的实际单元测试没有通过。
详细信息：
我正在从事一个以Vue、NUXT、Vuetify和pug为模板语言构建的项目。我正在配置该项目，以便用JEST测试运行程序编写测试用例。单元测试目前正在失败，我需要一些步骤来识别问题。
我阅读了以下文章：
现使用下列版本：
nuxt: ^2.0.0
nuxtjs/vuetify: ^1.10.2
pug: ^2.0.4
pug-plain-loader: ^1.0.0
jest: ^24.1.0
vue-jest: ^4.0.0-0
浏览 0提问于2020-03-13得票数 1
为了处理嵌套对象，我必须将v数据迭代器中的作用域槽解构为hb。
<v-data-iterator :items="persons" content-tag="v-layout" row="row" wrap="wrap">
<v-flex slot="item" slot-scope="{item:{hobbies:hb}}" xs12="xs12" sm6="sm6" md4="md4" lg3="lg3"&
浏览 0提问于2019-02-27得票数 0
我制作了一个包装，包装了Vuetify的‘v-对话框’组件，名为'Modal'，并想通过它传递道具：
<template>
<v-dialog
class="modal"
max-width="600"
v-on="vDialogListeners"
>
<v-card>
<v-card-title class="headline">
<slot></slot>
&
浏览 3提问于2020-05-10得票数 1
回答已采纳
1回答
我有一个卡片组件，我试图把我的标题，副标题放在我的icon.It的右边一些如何继续下去到下一行。我是新来的。
<template>
<v-container fluid class="my-5">
<v-row>
<v-flex col-xs-12>
<v-card elevation="2" class="pa-5">
<v-flex xs3>
浏览 8提问于2021-12-16得票数 1
2回答
我在我的RTL项目中使用VueJS 2和Vuetify。我有以下代码：
<v-card-title>
<div class="row">
<div class="col-sm-12 col-md-9" style="text-align: right; ">
<div class="ml-1 inline">
הצג
</div>
<v-select
v-model="table
浏览 56提问于2022-02-22得票数 -1
1回答
V卡适用于v-col的所有高度。
、、、、
我正在建立一个登录/注册页面与vue和vuetify。我把代码放在下面(文本是意大利语，bc，我是意大利语，但你可以理解)：
<v-row
align="center"
justify="center"
class="prova"
>
<v-col
cols="10"
lg="3"
md="4"
sm="5"
>
浏览 6提问于2022-01-24得票数 0
回答已采纳
1回答
模态上的工具提示
、、
谁能帮我解决我的问题，我有一个模态谁需要一个工具提示‘打开对话框’按钮，
这里是vuetify：的一个例子。
当我使用vuetify工具提示悬停按钮时，我希望显示一个文本。
非常感谢
<div id="app">
<v-app id="inspire">
<v-row justify="center">
<v-dialog v-model="dialog" persistent max-width="290">
<temp
浏览 0提问于2019-12-03得票数 1
回答已采纳
我从问题中添加了解决方案，但它不起作用。
当我试图在我的单元测试规范中运行shallowMount时，我遇到了问题：
Vue警告:未知的自定义元素：-正确注册组件吗？对于递归组件，请确保提供"name“选项。
这是我的规格：
import { shallowMount, createLocalVue, RouterLinkStub } from '@vue/test-utils';
import VueRouter from 'vue-router';
import Vuetify from 'vuetify';
import e
浏览 1提问于2020-01-30得票数 4
回答已采纳
我在我的Vue项目中包含了Vuetify 2(最新版本)。我正在尝试用容器内的卡片做一些网格，它确实应用了容器的流体行为，而不包括流体。
这是我的App.vue
<template>
<v-app>
<v-app-bar app>
<v-toolbar-title class="headline text-uppercase">
<span>Vuetify</span>
<span class="font-weight-light&
浏览 14提问于2019-07-26得票数 0
我知道vuetify的网格属性是围绕12列flex-box构建的，但我希望创建一个默认为7或8列的网格，而不是通常的12列，如本例所示：
<v-row>
<v-col
v-for="(n, index) in 15"
:key="index"
cols="7"
sm="7"
md="3"
lg="1"
>
<v-card>
<v-card-title>{{ inde
浏览 9提问于2020-01-01得票数 2
回答已采纳
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import {Vuetify} from 'vuetify';
import { store } from './store/store';
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue';
import 'bootstrap/dist/css/bootstr
浏览 6提问于2020-11-17得票数 0
1回答
我正在使用vuetify框架中的时间线组件。
嗨，我有一个类似于虚拟时间线样本()的样本。
我的问题是，当有许多项目，多姆需要很长的时间来呈现时间线-项目时滚动下来。
我怎样才能使用v-虚拟卷轴来解决它或其他一些作为延迟加载的问题？
代码
<div id="app">
<v-app id="inspire">
<v-timeline
align-top
:dense="$vuetify.breakpoint.smAndDown"
浏览 3提问于2022-01-08得票数 2
1回答
根据屏幕大小更改图像的位置
、、、、
我正在使用Vuetify，我正在尝试让图像更改图像位置，以适应较小的屏幕。 我当前的代码：https://codepen.io/yash-dhume/pen/pozMQBg?&editable=true&editors=101 <section>
<v-container fluid justify-space-between>
<v-layout column>
<v-card transition="slide-x-transition">
<v-layout r
浏览 16提问于2019-10-03得票数 0
回答已采纳
4回答
我用vuetify设计了一个“卡片”组件。
我有个带子按钮的家长。现在，当我单击按钮时，就会触发div上的连锁反应。
我怎么才能解决这个问题？
<template>
<div>
<v-card v-ripple="true">
<h3>
<v-card-title>{{ title }}</v-card-title>
</h3>
<v-layout row>
<v-flex grow>
浏览 2提问于2019-02-05得票数 6
回答已采纳
我试图根据鼠标悬停是否存在，将类更改为在Vuetify.js组件上应用：
<v-card
class="mx-auto"
width="344"
>
<v-hover>
<v-card-title
slot-scope="hover"
:class="`${hover? class1: class2}`">
<div>
<span class="headline">Ho
浏览 0提问于2018-11-09得票数 5
回答已采纳
2回答
注释：使用Vue.js和Vuetify.js进行功能和样式设计
我有用v-for动态生成的卡片组件，我希望根据屏幕大小(sm/md/lg)，在一行1/3/4卡中显示它们。当我使用v-flex和v-layout元素将它们放置在Vuetify的网格系统中时，卡片就会最小化，而不是移到第二行。
还有别的办法吗？
<v-content>
<v-card class="d-inline-flex" v-for="company of companies" :key="company.name">
<v-layout
浏览 1提问于2017-10-19得票数 8
回答已采纳
1回答
我正在尝试创建一个虚拟页脚，我遇到了一些问题。我在这里做了一个。
我是新手，所以我试着看看怎样才能把标题放在中间，把复选框和按钮一起往右推，用太多的间隔。
我正在跟踪官方认证文档
<v-footer
height="auto"
color="primary lighten-1"
>
<v-card class="flex flat tile">
<v-card-title class="primary lighten-1">
<v-layout justi
浏览 0提问于2019-06-01得票数 2
回答已采纳
1回答
居中饼图
、、
我正在使用来自Apex的饼图来可视化数据。现在我想把这个饼图放在一个vuetify card元素的中心，但不幸的是我不能让它工作。目前，它看起来是这样的： <v-card elevation="2" class="ma-3 mx-auto">
<v-card-title>
Odds
</v-card-title>
<v-divider></v-divider>
<v-card-text>
<div id="cha
浏览 7提问于2021-06-21得票数 1
回答已采纳
1回答
我正在尝试使用vuetify 2.x的v卡。即使其最大宽度设置为90%，卡也会在IE11上溢出。
为了与浏览器兼容，我在main.js中导入了以下内容。
import Es6Promise from 'es6-promise';
import 'babel-polyfill';
Es6Promise.polyfill();
我的卡片在模板中定义如下：
<template>
<v-layout column>
<v-card class="mx-auto pa-4" max-width="90%&
浏览 4提问于2020-01-30得票数 0
1回答
Vue cli版本@ 5.0.6 \x{##**$}##**##**$2.6.7
我现在已经使用了vuejs+vuetify一段时间了，而且我的想法已经不太好了，我确信所有的vuejs/vuetify内容在默认情况下都不会设置为“居中”。我已经创建了一个新的项目，我没有触及任何格式化或主题配置。
下面是我的简单登录页面代码：
<template>
<div>
<v-icon
x-large
style="font-size: 125px"
> mdi-account </v-icon>
浏览 10提问于2022-07-04得票数 0
回答已采纳
我想打印一些来自vue组件的内容。例如，在下面的代码片段中，我想打印id也是#print的v-card-text元素
new Vue({
el: '#app',
data() {
return {
dialog: false
}
},
methods: {
print() {
var prtContent = document.getElementById("print");
var WinPrint = window.open('', '',
浏览 2提问于2018-09-15得票数 13
回答已采纳
2回答
有了vue ui，用Babel和Lint创建了一个基本的新项目，我安装了deps vuetify、vuetify loader和vue-bootstrap。所有我想要的是一个简单的‘打开对话框’按钮，它打开一个单独的组件(文件)中定义的对话框。该对话框显示，没有出现问题/警告，但当我关闭它时(通过单击其他地方或单击其中一个按钮，我得到了一个警告：“避免直接更改属性，因为只要父组件重新呈现，该值就会被覆盖。”再次单击该按钮将不再起作用。尽管控制台中显示了"JAAA“。代码：
HelloWorld.vue
<template>
<div class="hell
浏览 3提问于2019-10-23得票数 2
我正在尝试使用vuetify (首次用户)，并且我想使用vuetify添加一个数据表。但是，当我从文档中添加一个示例时，我得到了这两个错误：
[Vue warn]: Error in render: "TypeError: Cannot read property 'width' of undefined"
found in
---> <VData>
<VDataTable>
<VCard>
<VueDataTable> at Content/js/v
浏览 0提问于2019-09-19得票数 1
我有一个Vuetify数据表，它将头作为组件中返回的对象数组，并将数据(:items)绑定到组件中也返回的数组。这个数组中填充了Firestore数据，因为我可以console.log它。
问题是数据表是空的，并且在正文中根本不包含任何数据。
这可能是因为我的items数组包含了更多的数据点，而我的表中有标头吗？
香精组件
<template>
<v-card>
<v-card-title>
<v-text-field
v-model="search"
append-icon="
浏览 1提问于2021-01-21得票数 1
回答已采纳
如何在axios中仅从vuetify表中获得要发布的字段，如下面的代码所示，我有一个表
<div id="app">
<v-app id="inspire">
<v-card>
<v-card-title>
<v-text-field
v-model="search"
append-icon="mdi-magnify"
l
浏览 0提问于2021-12-02得票数 0
1回答
随着我的单个文件组件越来越大，我尝试重构它一点。结果，我有几个对话框，使.vue文件变得巨大(800 lines+)。因此，为了保持组件的整洁，我尝试将对话框转换为专用子组件(mydialog)。我正在使用vuetify (不需要熟悉vuetify )。
我在父组件中有一个按钮，它启用了对话框。我将dialog道具发送到子组件，然后将子组件附加到对话框的v-model。问题是，--它只在第一次使用时才能工作。这是因为当我单击close按钮时，它会将dialog的值更改为false，并且它将永远保持为false，因为子组件已经失去了与父组件的通信。在这种情况下，我如何解决这个问题？
下面是片段：
浏览 0提问于2018-08-31得票数 1
回答已采纳
1回答
如何添加对表编号的列？
、、、、
我使用data和vuetify，您可以在下面的图像中看到我想要的最终结果。只需在左侧添加一列即可。我使用data和vuetify，您可以在下面的图像中看到我想要的最终结果。只需在左侧添加一列即可。
<template>
<v-card>
<v-card-title>
<v-text-field
v-model="search"
append-icon="mdi-magnify"
label="Search"
singl
浏览 6提问于2022-11-20得票数 0
回答已采纳
这是它看起来的样子 ? 根据vuetify数据表示例，它应该是这样的 ? 我不确定发生了什么，我用与示例相同的方式做了，这是数据表所在的代码 <v-card>
<v-card-title>
<v-text-field
v-model="search"
label="Buscar"
single-line
dense
hide-details
><
浏览 23提问于2019-12-13得票数 1
在Vue 2 SPA中，我使用Vuetify。在主页上，我有一个旋转木马，可以自动循环通过3v- carousel项目。对于v形旋转木马的第一个循环，视口在循环时跳转到旋转木马。所需的行为是让旋转木马继续循环，而不是拉出视口。奇怪的是，这种情况发生在Chrome中，而不是Firefox中。我在中发现了一个类似的问题。
<v-carousel
progress
:progress-color="secondColorComputed"
interval=7000
cycle
height="750
浏览 3提问于2020-11-05得票数 1
当DataTable以纵向方向显示在智能手机屏幕上时，原始行被分开，外观也不理想。同样，当智能手机在景观模式下显示时，也是非常理想的。
我需要帮助在以下两种解决方案之一。保持默认的外观和感觉在纵向模式。·修复景观屏幕。
该环境使用的是vue.js，没有单独的页面组件或vuerouter。
<v-main id="main" class="blue-grey lighten-4">
<v-container fluid fill-height>
浏览 12提问于2022-08-27得票数 1
回答已采纳
1回答
我有一个容器显示: flex，它的孩子的高度，是高于它的内容。我在使用Vuetify (vuejs)
例如：
我有一个2跨的v-头。
<v-col style="display:flex;flex-direction:column">
<span style="background-color:green;font-size:0.4rem">134 POSTS</span>
<span style="background-color:green;font-size:0.4rem">120 P
浏览 8提问于2022-05-05得票数 2
回答已采纳
1回答
这是我的jsbin链接，
这是我正在使用的Vuetify的v卡组件，
<v-card @click="myClick()">
<v-card-title>hello</v-card-title>
<v-card-text>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis officiis similique non quod quaerat est vitae expedita, iusto id sunt sint, of
浏览 4提问于2022-03-18得票数 1
回答已采纳
1回答
? 我正在努力实现上述结果。我已经在我的vue项目中使用了这个表。 这段代码是Vuetify的datatable的模板。 <v-card>
<v-card-title>
<v-spacer></v-spacer>
<v-text-field
v-model="search"
append-icon="mdi-magnify"
label="Search"
浏览 10提问于2021-01-15得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议活动推荐
腾讯云开发者
