从 vuejs-datepicker 隐藏输入字段答案

【问题标题】：Hide input field from vuejs-datepicker从 vuejs-datepicker 隐藏输入字段
【发布时间】：2020-07-06 18:17:59
【问题描述】：

我在我的一个 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

【问题讨论】：

标签： css vue.js datepicker

【解决方案1】：

您需要使用the >>> combinator 才能深度选择input 标签：

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

这是因为您在样式标签上使用了scoped 属性。 scoped 只能将样式应用于当前 Vue 组件中直接引用的子组件。在这种情况下，datepicker 会创建自己的子 input，它不会受到样式的影响，除非您使用上面显示的深度选择器。

【讨论】：

【解决方案2】：

使用类 hide-input 添加 prop input-class。这会将 hide-input 类应用于输入元素。阅读更多关于道具的信息here。

&lt;datepicker input-class="hide-input"&gt;&lt;/datepicker&gt;

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

【讨论】：