Vue3 setup 封装公共组件（利用插槽、useSlots）

实现目标：

        对下面的模块用一个组件实现，并且图1，还需要暴露出去一个事件（鼠标长按后，左右移动实现对右边input值的改变）供其使用.

 

<!--HTML部分-->
<template>
  <div
    :style="width ? `width: ${width}px` : 'width: 100%'"
    class="input-module-container"
  >
    <v-row no-gutters align="center" class="input-module-editor">
      <v-col
        v-if="slots['prepend'] !== undefined"
        class="input-prepend-inner"
        @[prependDraggable&&!disabled?`mousedown`:null]="onPrependMouseDown"
      >
        <div v-if="prependPrompt" class="prepend-prompt">
          {{ prependPrompt }}
        </div>
        <slot name="prepend"></slot>
      </v-col>

      <v-col class="input-content" @click="onContentClick">
        <input
          type="number"
          min="0"
          :value="inputValue"
        />
      </v-col>

      <v-col v-if="slots['append'] !== undefined" class="input-append-inner">
        <slot name="append" />
      </v-col>
    </v-row>
  </div>
</template>

知识点：

        1.使用了useSlots来判断插槽的一个传入情况，根据你传入的插槽来判断前面和后面的v-col是否显示

props部分（我们通过props传递的属性来控制，最前面和后面V-COL的显示与隐藏）

const props = defineProps({
  value: {
    type: [Number, String],
  },
  width: {
    type: String,
  },
  prependPrompt: {
    type: String,
    default: null,
  },
  // 这个props就是决定是否要绑定事件的props
  prependDraggable: {
    type: Boolean,
    default: false,
  },
});