关于nut-datapicker组件无法通过teleport改变的解决方案

之前提到过vue中更改挂载点使用Teleport组件可以说是相当的人性
在使用nut-datapicker时发现不生效mmp

  <!-- 日期选择弹窗 -->
    <div id="datepicker"></div>
    <div v-if="state.showDatepicker">
      <teleport to="#datepicker">
        <nut-datepicker ref="datepicker"
                        v-model="state.currentDate"
                        :min-date="state.minDate"
                        cancel-text="1"
                        ok-text="确定预约配送"
                        title="选择配送时间"
                        @confirm="confirm"
                        :is-show-chinese="true"
                        v-model:visible="state.showDatepicker">
          <template v-slot:default>
            <div class="nut-datepicker-footer">
              <img class="the-close-img"
                   :src="close"
                   alt="X"
                   @click="state.showDatepicker = false" />
              <!-- <nut-button type="primary"
                          :loading="state.submitLoading"
                          @click="submit">确定预约配送</nut-button> -->
            </div>
          </template>
        </nut-datepicker>
      </teleport>
    </div>

效果：

其实已经挂载进来了，但是又没完全挂载

阅读源码发现如下属性：isWrapTeleport可以控制是否使用传送门

<template>
  <Teleport :to="teleport" v-if="isWrapTeleport">
    <nut-overlay
      v-if="overlay"
      :visible="visible"
      :close-on-click-overlay="closeOnClickOverlay"
      :class="overlayClass"
      :style="overlayStyle"
      :z-index="zIndex"
      :lock-scroll="lockScroll"
      :duration="duration"
      @click="onClickOverlay"
    />
    <Transition :name="transitionName" @after-enter="onOpened" @after-leave="onClosed">
      <view v-show="visible" :class="classes" :style="popStyle" @click="onClick" ref="popupRef">
        <slot v-if="showSlot"></slot>
        <view
          v-if="closed"
          @click="onClickCloseIcon"
          class="nutui-popup__close-icon"
          :class="'nutui-popup__close-icon--' + closeIconPosition"
        >
          <nut-icon :name="closeIcon" size="12px" />
        </view>
      </view>
    </Transition>
  </Teleport>
  <view v-else>
    <nut-overlay
      v-if="overlay"
      :visible="visible"
      :close-on-click-overlay="closeOnClickOverlay"
      :class="overlayClass"
      :style="overlayStyle"
      :z-index="zIndex"
      :lock-scroll="lockScroll"
      :duration="duration"
      @click="onClickOverlay"
    />
    <Transition :name="transitionName" @after-enter="onOpened" @after-leave="onClosed">
      <view v-show="visible" :class="classes" :style="popStyle" @click="onClick">
        <slot v-if="showSlot"></slot>
        <view
          v-if="closed"
          @click="onClickCloseIcon"
          class="nutui-popup__close-icon"
          :class="'nutui-popup__close-icon--' + closeIconPosition"
        >
          <nut-icon :name="closeIcon" size="12px" />
        </view>
      </view>
    </Transition>
  </view>
</template>

isWrapTeleport 可以来控制是否使用Teleport组件

解决方案：

 <!-- 日期选择弹窗 -->
    <div class="datepicker">
      <nut-datepicker ref="datepicker"
                      v-model="state.currentDate"
                      :min-date="state.minDate"
                      cancel-text="1"
                      ok-text="确定预约配送"
                      title="选择配送时间"
                      @confirm="confirm"
                      :isWrapTeleport="isWrapTeleport" //isWrapTeleport设置为false
                      :is-show-chinese="true"
                      v-model:visible="state.showDatepicker">
        <template v-slot:default>
          <div class="nut-datepicker-footer">
            <img class="the-close-img"
                 :src="close"
                 alt="X"
                 @click="state.showDatepicker = false" />
            <!-- <nut-button type="primary"
                          :loading="state.submitLoading"
                          @click="submit">确定预约配送</nut-button> -->
          </div>
        </template>
      </nut-datepicker>
    </div>

样式需要更改

<style lang="scss" scoped>
.datepicker {
  :deep(.nut-overlay) { 
    z-index: 9999 !important;//因为nut-overlay z-index行内样式
  }
  :deep(.nut-popup) {
    z-index: 9999 !important;
  }
}
<style>

展示效果

这样就可以在scope中进行样式的更改了，非常的人性

GameOver