[前端][vant] cascader修改了高度，导致 cascader 无法滚动

问题现象

利用vant的popup结合cascader修改了popup高度，导致 cascader 的数据无法滚动

版本信息

• M8

问题原因

cascader 控件的cascader-options-height样式固定高度为 384px,需要修改

排查步骤

查看 vant 源码，popup组件渲染后，会监听一个touchmove组件，如果判断组件内的所有的子节点 dom 的scrollHeight和offsetHeight

在scrollTop=0的情况下，判断是否 2 个高度大小，只有scrollHeight大于offsetHeight，则选择才会进行滚动操作否则preventDefault

简单来说，修改了 popup 的高度，但是并未修改cascader的高度，虽然页面中看不到cascader，但是实际计算时cascader的高度依旧是固定存在的384px，如果你的生产真实 dom 没有超过384px,则不会进行默认滚动

// path： src/mixins/popup/index.js
onTouchMove(event) {
    this.touchMove(event);
    const direction = this.deltaY > 0 ? '10' : '01';
    const el = getScroller(event.target, this.$el);
    const { scrollHeight, offsetHeight, scrollTop } = el;
    let status = '11';
    /* istanbul ignore next */
    if (scrollTop === 0) {
        status = offsetHeight >= scrollHeight ? '00' : '01';
    } else if (scrollTop + offsetHeight >= scrollHeight) {
        status = '10';
    }

    /* istanbul ignore next */
    if (
        status !== '11' &&
        this.direction === 'vertical' &&
        !(parseInt(status, 2) & parseInt(direction, 2))
    ) {
        preventDefault(event, true);
    }
}

解决方案

::v-deep .van-cascader__options {
    /* 修改需要自己的高度 */
    height: 100px;
}