时间戳

首页 > 解决方案 > 从 vuejs-datepicker 隐藏输入字段

css - 从 vuejs-datepicker 隐藏输入字段

问题描述

我在我的一个 vue 项目中使用 vuejs-datepicker。我想隐藏默认输入并在用户按下按钮时显示日历。我试图让<datepicker/>div 内部为 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

标签： cssvue.jsdatepicker

解决方案

您需要使用组合>>>器来深度选择input标签：

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

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

推荐阅读