demo.vue
<template>
<el-button type="primary" @click="focus">聚焦{{ msg }}</el-button>
<MyInput v-model="msg" ref="myInputRef">
<template #prepend>
<el-button>prefix</el-button>
</template>
<template #append>
<el-button>append</el-button>
</template>
</MyInput>
</template>
<script setup lang="ts">
import MyInput from "./MyInput.vue"
import { ref } from "vue"
const msg = ref('111')
const myInputRef = ref()
const focus = () => {
myInputRef.value.focus()
}
</script>
MyInput.vue
<template>
<div>nihao</div>
<el-input ref="inputRef" v-bind="$attrs">
<template v-for="(, slot) in $slots" :key="slot" #[slot]="slotProps">
<slot :name="slot" v-bind="slotProps" />
</template>
<!-- 或者 -->
<!-- <template v-for="(slotContent, slotName) in $slots" :key="slotName" #[slotName]="slotProps">
<slot :name="slotName" v-bind="slotProps">{{ slotContent }}</slot>
</template> -->
</el-input>
</template>
<script setup lang="ts">
import { ref } from "vue"
const inputRef = ref()
defineExpose(
new Proxy(
{},
{
get(target, key) {
return inputRef.value?.[key]
},
has(target, key) {
return key in inputRef.value
}
})
)
</script>