vue Teleport

Teleport 可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。

前段时间，用 elementUi 的 Slider 滑块，其中要改写，在滑块的内部显示 数字内容，但elementUi没有相关的设置；刚好用 vue 的 Teleport 传送 Dom。

页面上不止一个滑块，所以:to=".sliderTab_content${index}" 以及'sliderTab_content' + index`

<div class="sliderTab_content" :class="'sliderTab_content' + index">
    <el-slider
          tooltip-class="99"
          class="sliderBox"
          size="large"
          v-model="model.sliderTabForm.sliderVal"
          :vertical="port != 'phonePort' && pcPhpneScreen"
          height="500px"
          :show-tooltip="false"
          :step="model.sliderTabForm.stepVal"
          :max="model.sliderTabForm.sliderMax"
          :min="model.sliderTabForm.sliderMin"
        />
        <Teleport :to="`.sliderTab_content${index} .el-slider__button`" v-if="isMount">{{ model.sliderTabForm.sliderVal }}{{ model.sliderTabForm.sliderUnit }}</Teleport>
</div>