arco disign vue 日期组件的样式穿透

问题描述:

对日期组件进行样式穿透.
原因分析: 如图,日期组件被展开时它默认将dom元素挂载到body下, 我们的页面在id=root的div 里层, 里层想要穿透外层是万万行不通的.

解决问题:

其实官网提供了参数,但是并没有提供例子, 只能自己摸索着过河.

对于日期组件穿透样式,我们能用到的属性只有trigger-props,它需要一个Trigger的参数,
通过搜索,Trigger是一个触发器, 它的主要作用是 点击某一处会触发一个面板, 可能日期组件底层用的就是这个, :trigger-props 接收的是targert 参数, 所以Trigger组件内的所有参数和方法,我们都可以传入.

进行样式穿透,我们只用到了Trigger组件的content-class参数, 它的作用是,我们可以指定一个class类名,

它会将其绑定到日期的div的class内, 这样我们就可以 通过这个class类名为起点,对日期组件进行样式穿透.

特别注意:

由于日期面板挂载到body下, 我们不能在style 标签内加scoped, 如果存在这个属性,样式不会被生效, 如果没有这个属性,样式会生效.而且它的作用是全局的, 整个项目所有用到日期组件的地方都会被