修改el-date-picker 弹窗位置 顺带学习popper-class 设置

29 阅读1分钟

需求 web 跟 移动端显示弹窗的宽度不一样

    <el-date-picker
        :popper-class="popperClass"
         v-model="dataRange" type="daterange" range-separator="至" start-placeholder="Startdate"
            end-placeholder="Enddate" />
computed:{
 popperClass() {
      return this.isMobile ? 'el-dat-range-picker-mobile' : 'el-dat-range-picker';
    },
    }
<style scoped>
    .el-dat-range-picker-mobile {
       width: 100%;
   }

   .el-dat-range-picker {
       /* width: 50%; */
   }
</style>

popperClass 的值是String类型 所以通过computed 计算返回不同的样式名称。