<!--
 * @Description: 封装第三方组件
 * @Author: zhengfei.tan
 * @Date: 2024-09-14 22:03:37
 * @FilePath: \VitePress\docs\05.Vue\实践.md
-->
<template>
  <div>Hello World</div>
  <n-input ref="inputRef" v-bind="$attrs">
    <template v-for="(_, slot) in $slots" #[slot]="slotProps">
      <slot :name="slot" v-bind="slotProps" />
    </template>
  </n-input>
</template>

<script setup>
  import { ref } from 'vue'
  const inputRef = ref(null)
  // 暴漏组件方法
  defineExpose(
    new Proxy(
      {},
      {
        get: (target, prop) => {
          return inputRef.value?.[prop]
        },
        has: (target, prop) => {
          return prop in inputRef.value
        },
      }
    )
  )
</script>

<style lang="scss" scoped></style>