从 vuejs-datepicker 隐藏输入字段

Question

我在我的一个 vue 项目中使用 vuejs-datepicker。我想隐藏默认输入并在用户按下按钮时显示日历。我正在尝试让 div 中的 <datepicker/> 为 div 应用 css 以便我可以隐藏它。

<div class="datePickerDiv">
   <datepicker class="date" ref="datepick"></datepicker>
</div>

<style scoped>
.datePickerDiv {
  position: relative;
  float: left;
  margin-top: -40px;
}
.datePickerDiv input {
  border: none;
  background: transparent;
}
</style>

但是它没有像我预期的那样工作。示例 https://codesandbox.io/s/relaxed-sea-qfuix?file=/src/components/HelloWorld.vue:742-910

Answer 1

您需要使用 the >>> combinator 才能深入 select input 标签：

.datePickerDiv >>> input {
  border: none;
  background: transparent;
}

这是因为您在样式标签上使用了 scoped 属性。 scoped 仅适用于将样式应用于当前 Vue 组件中直接引用的子组件。在这种情况下，日期选择器正在创建自己的子项 input，它不会受到样式的影响，除非您使用深度 select 或如上所示。

Answer 2

添加道具 input-class 和 class hide-input。这会将 hide-input class 应用于输入元素。阅读更多关于 props here.

<datepicker input-class="hide-input"></datepicker>

.hide-input{
  display: none !important;
}

Answer 3

要在日期选择器标签中应用样式，请使用 input-class 而不是仅 class。样式 在默认范围样式标签上不起作用 ，因此请在您的范围样式标签下方添加另一个样式标签，如下所示：

<style scoped>
---your scoped Styles ----
</style>

<style >
-- Apply your unscoped style over vue date picker here ---
</style>

例子

<datepicker input-class="date" ref="datepick"></datepicker>
<style>
.date {
  display: none !important;
}
</style>

从 vuejs-datepicker 隐藏输入字段

Hide input field from vuejs-datepicker

css

datepicker

vue.js