vue3实现对textarea组件光标聚焦

在写个人小demo时需要使用到一种效果就是一开始为 input 框，当用户点击时变化为 textarea 并光标能够进行聚焦。

通过 ref 来获取 textarea 组件，并使用 focus() 事件来对文本框进行光标的聚焦。

<template>
  <NInput v-model:value="desc" v-if="!isFocusDesc" @focus="handleFocusDesc"/>
  <NInput v-model:value="desc" type="textarea" v-else ref="textarea" @blur="isFocusDesc = false"/>
</template>
<script setup>
import {ref, nextTick} from 'vue'
import {NInput} from 'naive-ui'

let desc = ref('')
let isFocusDesc = ref(false)
// 获取textarea组件
let textarea = ref()

function handleFocusDesc(){
  isFocusDesc.value = true
  nextTick(() => {
    // 对 textarea 组件进行光标聚焦
    textarea.value.focus()
  })
}
</script>