v-dialog Vuetify 的自定义位置

2024-02-23

我需要在页面右下角打开一个具有一定宽度和高度的 v 对话框,但是,我不明白该怎么做。 V-dialog总是在页面居中,我搜索了官方文档,尝试使用CSS,但无法 有任何想法吗?


Note:其他提供的解决方案并不令人满意,因为它们搞乱了转换,或者我们不能使用作用域样式,或者他们建议使用!important etc.

Solution

添加任意content-class类到你的对话框:

<v-dialog content-class="my-custom-dialog">

然后我们可以使用作用域样式:

<style scoped>
  >>> .my-custom-dialog {
    align-self: flex-end;
  }
</style>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

v-dialog Vuetify 的自定义位置 的相关文章

  • V-data-table 通过 v-slot:body 控制扩展项

    vuetify 2 0 v data tables 的文档没有指定如何通过 v slot body 控制扩展项 我有一个需要用主体 V 型槽指定的表格 并且想要使用扩展功能 预期的行为是单击表中一列中的按钮 该行将在下面展开 我使用 v s
  • Vuetify 构建为 Web 组件样式未显示

    我正在使用 Vue 和 Vuetify 以及 Web 组件构建一个应用程序 当我将 Vuetify 添加为 Web 组件时 CSS 样式 Vuetify 消失了 我尝试将以下内容添加到 demo html 文件中但这没有帮助 我的仓库是vu
  • 如何将 VueComponent 传递给 $vuetify.goTo() 方法?

    我有 3 个视图组件 分别名为 home about 和 work 在App vue文件中
  • Vuetify 轮播图像加载

    我想使用 vuetify 的轮播来显示一些图像 但在第一次滑动时 过渡时会出现白色闪烁 就像图像在尝试渲染之前尚未加载一样 div div
  • 如何在 VueJS Webpack 项目中使用 Modernizr

    有人有在 VueJs Webpack 项目中捆绑和使用 Modernizr 的简单教程吗 我使用带有单文件组件的 VueJS 默认 Webpack 项目 我想要全部捆绑起来 为了精确起见 我想在大多数表单中使用 inputtypes dat
  • 如何在 JavaScript 中将所有对象属性设置为 null?

    我正在使用 Vue 突然使用一些计算的 cssvuetify https vuetifyjs com不管用 我声明对象的方式是 personal info 在我的模板中 我可以这样做personal info name以及每个文本输入 v
  • 设计 Vuetify 选择器的样式

    选择器的 Vuetify 组件是
  • 如何在 Vuetify 行上将“光标”设置为“指针”?

    如何设置cursor pointer在 Vuetify 上
  • Vuetify 没有 vue-cli sass/scss 冲突

    我需要将 vuetify 集成到一个无法使用 vue cli 且具有以下 css sass webpack 配置的项目中 test s ac ss use MiniCssExtractPlugin loader loader css loa
  • 用于输入/V 模型的 Vue 过滤器

    所以我对 ES6 SPA Javascript 和 Vue JS 非常陌生 我主要使用 JQuery 所以我有一个全局过滤器 Vue filter formatDate function value if value return mome
  • 如何将 vuetify 添加到默认 vuepress 主题

    是否可以将 vuetify 添加到默认 vuepress 主题 我只需要向默认主题添加一些组件 但是使用 vuetify 来处理组件中的表单会很好 我找到了一个使用 vuetify 的自定义 vuepress 主题 但我更喜欢使用默认的 v
  • Vite 构建命令挂在“模块已转换”处。在Vue 3.3.4、Vite 4.3.8环境下

    您好 我目前正在使用 Vue 3 3 4 Vuetify 3 2 5 和 Vite 4 3 8 开发一个项目 当我运行 vite build 命令时 该过程似乎挂起并且未完成 最后的输出我看到的是 679 modules transform
  • 如何解决 chrome 自动完成与 vuetify 中标签重叠的问题?

    当尝试使用以下命令创建登录表单时outlinedVutify 中的文本字段 chrome 自动完成功能与labels
  • 如何设置vuetify卡片的高度

    我正在尝试使用 vue 和 vuetify 添加一张卡 它将占用容器中的空间 使用 v flex 创建一张水平卡 其垂直方向的作用相同 我尝试使用 fill height child flex 等添加 100 的高度样式 但我无法获取卡片的
  • Vuetify 离线文档

    我已经开始使用 Vuetify 添加 ui 组件并使用预定义的布局 问题是我必须时不时地查看在线文档 并且要求我永远连接到互联网 有没有办法获取 Vuetify 的离线文档 就像使用 doxygen javadocs 构建的 html 或
  • Vuetify v-select 组件宽度改变

    My v select组件应该有固定的宽度 60px 它们适合表格单元格 我想防止它们在选择值后更改宽度 它们会更改宽度 并且下拉箭头在选择后会向右移动 因此如果有办法减小图标或其填充 边距的大小 可能会有所帮助 真的不知道如何获取这个箭头
  • vuetify v-text-field 给定值后背景颜色发生变化

    我正在使用 vuetify 创建登录表单 并使用 v text field 作为输入 当有字段建议时就会出现问题 例如 我的浏览器中保存了多封电子邮件 它会在电子邮件字段上为我提供这些电子邮件的建议 到目前为止一切都很好 但是当我选择其中之
  • 如何从 VuetifyJS Vertical Stepper 中删除过渡效果?

    是否可以在点击继续后直接显示下一步Vuetify 步进器 https vuetifyjs com en components steppers example vertical 或者换句话说 如何去除过渡滑出效果 看起来没有提供任何选项来更
  • v-file-input .click() 不是函数

    我试图以编程方式触发 v file input 的 click 事件 因为它在 Vuetify 的文档中 但它显示一个错误this refs imagePicker click is not a function我在这里错过了什么吗 代码重
  • Vuetify:v-ripple 只能用于块级元素

    我今天刚开始收到此错误 它破坏了我的整个网站 因为我像个傻瓜一样在页面加载时加载 Vuetify 有谁知道这意味着什么或如何解决它 谷歌搜索没有发现任何有用的信息 Edit 对于因网站也损坏而发现此问题的任何人 这可能是因为您加载的位置vu

随机推荐

  • 线性排序算法

    我是研究算法的新手 我也不是计算机科学毕业生 然而 在阅读线性排序非比较算法时 我可以理解基数排序是计数排序的扩展 我不清楚的是计数排序的局限性 当计数排序似乎可以满足我需要避免 O n logn 比较的目的时 为什么我要选择基数排序 这确
  • AWS CDK 突然失败,Construct 无法转换为 InterfaceVpcEndpoint 类

    截至昨天我的cdk代码开始返回错误 java lang ClassCastException 类 software constructs Construct 无法转换为类 software amazon awscdk services ec
  • 当尝试运行以生成报告并在 Maven 项目中发送电子邮件时,缺少必需的类:org/codehaus/gmaven/mojo/GroovyMojo

    我有 Maven JUnit 项目 它可以成功编译 构建和测试 另外 当我做mvn site所有测试均成功运行并生成surefire report target site 目录 现在 我需要将此报告通过电子邮件发送给指定的收件人 这是我的
  • Sinatra 不会在 Chrome 上通过重定向保持会话

    Sinatra 不会通过 Chrome 上的重定向来保留我的会话 它正在创建一个全新的会话 而我正在丢失以前的所有会话数据 举个例子 类似于西纳特拉文档 http www sinatrarb com intro Browser 20Redi
  • Javascript - 需要在 setInterval 函数之外使用clearInterval

    基本上 我拥有的是函数内的 setInterval 我想做的是 从外部控制它的行为 这就是我所拥有的 function wheee var i 1 slideee setInterval function sliderContent sty
  • 如何将字节数组转换为 NSString

    我正在从 TCP IP 流读取数据 并成功从预先存在的服务器接收字节数组 我现在正在尝试找到一种方法将该数组转换为NSString 我找到了几个例子 但很难得到我想要的结果 NSData data NSMutableData alloc i
  • npm本地安装

    过去 当我使用 npm gt 1 0 安装软件包时 它们会在本地安装 但现在不再了 我的设置 首先我使用nvm https github com creationix nvm安装node js 我的操作系统 alfred alfred la
  • 检测存在哪些 Unicode 字形?

    JavaScript CSS web 中有没有办法检测系统是否具有某个 Unicode 字符的有效字形 例如 我想检测某种语言中的某个字符是否显示为方框 因为用户没有显示这些 Unicode 点的字体 或者他们是否确实会看到这些字符 这里描
  • 属性与实例变量[重复]

    这个问题在这里已经有答案了 可能的重复 Objective c cocoa cocoa touch 中的 实例变量 和 属性 之间有区别吗 https stackoverflow com questions 843632 is there
  • 如何为 asp.net 身份创建安全标记值 (IUserSecurityStampStore)

    在我的 MVC 5 应用程序中 我必须手动创建安全标记值 身份团队当前的实现似乎使用了指南 Guid NewGuid ToString D 我自己创建一个新的 Guid 来用作新的安全标记值是否安全 或者这是否会在将来的 ASP NET 身
  • Mongo PHP 驱动程序 1.2.10 与 MAMP

    我正在尝试让最新的 Mongo 驱动程序与 OS X 10 5 8 上的 MAMP 1 9 6 一起使用 我从源代码成功构建了它 因为似乎没有预编译版本 将其包含到正确的目录中并重新启动了 apache 但 PHP 无法识别该扩展名 我之前
  • CSS:发光文本,发光非常宽和高

    几天以来我一直在研究 box shadow 和 text shadow 我正在努力获得以下效果 我想要从文字中散发出光芒 a 一度盘旋 很简单 这应该很容易 因为我探索了使用文本阴影 好的 但它适用于小发光 我的意思是 一旦发光较大 由于其
  • Eclipse 在接口方法签名中生成无用的“公共抽象”修饰符

    在使用 Eclipse 重构工具提取方法时 有没有办法阻止生成无用的内容public abstract接口方法签名中的修饰符 谢谢阿列克谢 这听起来像是一个 Eclipse 错误 但它有一个解决方法 该错误自 2004 年 8 月 9 日起
  • CFHTTPMessageAddAuthentication 无法向请求添加身份验证数据

    我正在尝试扩展功能SocketRocket https github com square SocketRocket图书馆 我想添加身份验证功能 由于该库正在使用CFNetwork CFHTTPMessage API https devel
  • 如何在离线服务器上安装 npm -g

    我需要在离线服务器上安装 全局 npm 应用程序 安装普通应用程序很容易 npm install 然后打包生成的文件 手动或使用npm pack 但是 如何安装全局应用程序 具有某种安装脚本 例如forever没有互联网 npm insta
  • 在同一个 R markdown 页面中应用多列划分

    我想如图所示分割我的 Rmarkdown 文档 第一部分为一列 其他部分为两列 used onecolumn and twocolumn但每个部分都是在单个页面中创建的 有解决办法吗 This article https journals
  • 如何在jquery中获取tinymce内容?

    我正在尝试获取tinymce数据 但收到tinyMCE未定义错误 这是我的代码 function savePost console log jQuery wp tinymce editor tinyMCE getContent 请检查 Ti
  • 使用 knockout js 和 jquery ui 滑块

    我试图弄清楚knockout js是否可以很好地解决以下问题 我有多个滑块想要链接到文本框 当文本框更改时 相应的滑块必须更新为新值 反之亦然 更改滑块值或文本框时 需要调用一个函数 该函数使用所有文本框的输入来计算结果 我有我的快速但肮脏
  • 从 Google App Engine (Java) 将文件上传到 Google 云存储

    如何将文件从谷歌应用程序引擎中的servlet上传到谷歌云存储 当我这样做时 Google 云存储不知道文件的类型 即我从 HTML 表单发送的文件 编写 HTML JavaScript 和 servlet 将文件上传到云存储的正确方法是什
  • v-dialog Vuetify 的自定义位置

    我需要在页面右下角打开一个具有一定宽度和高度的 v 对话框 但是 我不明白该怎么做 V dialog总是在页面居中 我搜索了官方文档 尝试使用CSS 但无法 有任何想法吗 Note 其他提供的解决方案并不令人满意 因为它们搞乱了转换 或者我