如何在 vue-tour 中更改箭头的大小？答案

【问题标题】：How to change the size of the arrow in vue-tour?如何在 vue-tour 中更改箭头的大小？
【发布时间】：2021-05-15 05:19:07
【问题描述】：

我无法在 vue-tour 中更改箭头大小。虽然我可以通过在 Chrome 中检查来更改它，但在 CSS 中我无法做到这一点，因为它有一些运行时生成的 ID 与之关联。

.v-step__arrow[data-v-e97491e4], .v-step__arrow[data-v-e97491e4]:before {
    position: absolute;
    width: 10px;
    height: 10px;
    background: inherit;
}

v-step GitHub 可在此处获得：https://github.com/pulsardev/vue-tour/blob/master/src/components/VStep.vue

【问题讨论】：

您是直接在 v-step.vue 中声明 css 还是在子组件中使用 v-step 的组件中声明？
vue-tour 是一个 npm。我在自己的 Vue 应用程序中使用它。我不知道如何改变箭头的大小。

标签： css vue.js user-interface vuetify.js

【解决方案1】：

您可以使用v-deep。它有助于将样式直接应用于子组件。

如果您正在使用sass，那么您可以将样式应用为：

::v-deep .v-step {
    background-color: black;
}

如果您只是使用css，那么您可以使用 v-deep 作为：

>>> .v-step {
    background-color: black;
}

【讨论】：