实现目标:
对下面的模块用一个组件实现,并且图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,
},
});