迁移Vuetify 2到3:替换已移除的样式 .v-application / rounded / flat
P粉258083432
P粉258083432 2023-09-01 22:27:02
[Vue.js讨论组]
<p>我正在尝试从Vuetify/Vue 2升级到3。我不是前端开发人员,只是负责升级一些旧代码以保持功能正常。不幸的是,迁移指南似乎假设了一定的基本CSS知识,并没有提供如何修复所有被删除内容的示例。</p> <p>我正在努力弄清楚如何迁移以下代码片段中的<code>rounded</code>和<code>flat</code>:</p> <pre class="brush:php;toolbar:false;">&lt;v-select class=&quot;mr-2 filter-custom-input&quot; slot=&quot;prepend-inner&quot; v-model=&quot;field&quot; :items=&quot;fields&quot; menu-props=&quot;auto&quot; label=&quot;Field&quot; hide-details single-line density=&quot;compact&quot; rounded flat theme=&quot;dark&quot; /&gt;</pre> <p>以及这个代码片段中的<code>.v-application</code>(如果需要的话):</p> <pre class="brush:php;toolbar:false;">&lt;style lang=&quot;scss&quot; scoped&gt; .v-application--is-ltr .v-list-item__icon:first-child, .v-application--is-ltr .mr { margin-right: 10px; } &lt;/style&gt;</pre> <p>不幸的是,迁移指南上对这些的唯一建议是:</p> <ul> <li><code>rounded</code>属性已被移除。请将圆角的CSS类应用于菜单内容元素。例如:<code>.rounded-te</code></li> <li>以前包含为<code>.v-application p</code>或<code>.v-application ul</code>的全局样式不再包含在内。如果您需要为<code>p</code>添加边距,或为<code>ul</code>和<code>ol</code>添加左侧内边距,请在根组件的<code>&lt;style&gt;</code>标签中手动设置。</li> </ul> <p>上述关于<code>rounded</code>的指导仅仅替换<code>rounded</code>为<code>.rounded-te</code>是不起作用的(更不用说它是在另一种类型的控件中提到的)。</p> <p>它说flat已从其他一些控件中删除,并被“单个变体属性”替换,但是尝试用<code>variant=&quot;flat&quot;</code>替换<code>flat</code>给我一个语法错误。</p> <p>谢谢!</p> <p>(我最初在这里提问,有人建议我将其拆分为多个问题)</p>
P粉258083432
P粉258083432

全部回复(1)
P粉561323975

你仍然可以使用 roundedflat,它们只是移动到了底层的 VField 组件。

我认为你的 v2 select 最终会没有任何框架,这种情况下 rounded 不会有任何可见效果。在 v3 中添加 variant="solo"flat 以获得相同的效果(参见 playground


至于 v-application--is-ltr 类,它在 V3 中被称为 v-locale--is-ltr

如果你仍然需要它取决于你的应用程序,这些都是自定义规则。检查是否使用了自定义的 mr 类,以及列表中第一个图标的边距是什么样的(我认为现在通过 prepend slot 设置列表图标,所以类应该是 .v-list-item__prepend .v-icon

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号