如何调整 vuetify 组件中的分隔线宽度？答案

【问题标题】：How to adjust divider witdh in vuetify component?如何调整 vuetify 组件中的分隔线宽度？
【发布时间】：2020-12-25 10:47:09
【问题描述】：

我在我的项目中使用了 Nuxt.js 和 Vuetify.js。我需要调整 v-divider 宽度，所以我尝试在我的代码中编写 css。但它没有用。有人教我如何更改 Vuetify 组件中的 v-divider 宽度吗？

<template>
   <divider class="test"/>
</template>
<style lang="scss" scoped>
   .test{ width:100px}
</style>

【问题讨论】：

这是我的错字。非常感谢！
对不起，我不小心删除了我的评论。但是，是的，只是<divider/> 的错字而不是<v-divider/>。编码快乐！

标签： css vue.js vuetify.js nuxt.js

【解决方案1】：

只是<divider/> 的错字而不是<v-divider/>。

或者（并不推荐），您可以通过指定<v-divider/> 的宽度属性来设置宽度，因为它使用<hr/> element。但是，这种方法似乎已被弃用，最好的方法是使用 css 对其进行样式设置。

<v-divider width="100"/>

【讨论】：

【解决方案2】：

vuetify <v-divider> 使用边框属性。因此，您应该指定边框而不是宽度。

const opts = {}
Vue.use(Vuetify)

new Vue ({
  el: '#app',
  vuetify: new Vuetify(opts),
})

.test {
       border-width: 4px !important;
       border-color: black !important;
       height: 100%;
}

body, .container, html {
        width:100%;
        height: 100%;
}

<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">

<div id="app" class="container">
  <v-app>
    <v-divider class="test" vertical></v-divider>
  </v-app>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>

【讨论】：

感谢您的回答！我真的很感激。