element ui DatePicker 偏移

昆西真的不吃草 2021-03-22 03:49:13

默认弹出来选择器是依据最左边的边界线对其，我现在想弹出的选择器往左边偏移30px，试验过offset，但是没有用，有什么办法可以实现这个偏移吗
使用的是vue 在vue中DatePicker 还是没有加载入dom中

...全文

1888 12 打赏收藏转发到动态举报

写回复

用AI写文章

12 条回复

切换为时间正序

请发表友善的回复…

发表回复

昆西真的不吃草 2021-03-25

打赏
举报

我找到了方法：在对应使用<el-date-picker>的页面新添加


<script>
.el-popper{
    margin-left: -30px;
  
  }
</script>

它的弹出框样式可以使用el-popper来使用，但是不可以在<script scoped></script>中定义，如果定义的话就会无效

昆西真的不吃草 2021-03-25

打赏
举报

等待，我找到了更好的方法：

使用这个属性


.el_margin_left{
  margin-left: -30px;
}

再在<el-date-picker popper-class="gl-popper"></el-date-picker> 就可以实现了

昆西真的不吃草 2021-03-24

打赏
举报

引用 8 楼泡泡鱼_ 的回复:

当然，取巧的方法，就会有一点瑕疵。就是它的偏移，是在组件的选择弹框出现以后才进行修正的，所以，会有个偏移的变化过程和极小的延迟

嗯嗯，谢谢帮助，我再看看，之所以要偏移是因为做了一个组件加在选择器边上，需求要弹出框对齐组件，默认弹出框对齐的是日期选择器的

昆西真的不吃草 2021-03-23

打赏
举报

自己去改的话有什么思路吗

泡泡鱼_ 2021-03-23

打赏
举报

当然，取巧的方法，就会有一点瑕疵。就是它的偏移，是在组件的选择弹框出现以后才进行修正的，所以，会有个偏移的变化过程和极小的延迟

泡泡鱼_ 2021-03-23

打赏
举报

引用 4 楼昆西真的不吃草的回复:

[quote=引用 1 楼泡泡鱼_ 的回复:]对齐方式：align，三个值可选：left, center, right。默认left；你可以指定为center或right看看是不是你想要的效果。如果不是：要么你自己去改，要么就不要自寻烦恼了

自己改的话有什么思路吗[/quote] 左偏移那30px，对你有什么特别的意义吗？为什么要纠结一定要让它向左偏移30px？我上面说过的组件自定的自定义属性中，align="center"时，就已经会有向左偏移了。只是偏移量并不是按你控制罢了。非得纠结着一个指定值的话，你要么自己去对组件进行二次开发，加多一个类似于offset的自定义属性。要是你没有二次开发的能力，可以取巧：


<el-date-picker
    v-model="value1"
    type="date"
    @blur="activeDatePicker=null"
    @focus="setPoperOffset"
    placeholder = "选择日期" >
    </el-date-picker>

@blur="activeDatePicker=null"中的activeDatePicker是在setPoperOffset中定义的，是为了处理两个日期组件先后获取焦点时setPoperOffset定位当前组件弹框错误的，所以在blur事件中清除之前保留的activeDatePicker。如果你的应用场景中不存在2个日期组件,你可以去除，并把setPoperOffset中与其相关的去除 methods中定义setPoperOffset方法


setPoperOffset(){
    const poperSelector = '.el-date-picker[x-placement]';
    if(document.querySelectorAll(poperSelector).length === 1 && this.activeDatePicker != document.querySelector(poperSelector)) {
        this.activeDatePicker = document.querySelector(poperSelector);
        this.activeDatePicker.style.left = (parseInt(this.activeDatePicker.style.left) - 30) + 'px';
    } else {
        setTimeout(this.setPoperOffset, 10)
    }
}