下拉菜单组件｜青训营笔记1. vue3使用的volar无法使用模板补全很难受现阶段还没有解决方法，只能使用自定义代码

这是我参与「第五届青训营」伴学笔记创作活动的第17天

1. vue3使用的volar无法使用模板补全很难受

现阶段还没有解决方法，只能使用自定义代码片段——参考 vue volar插件怎么快速生成模板？

2. vue3中setup与导出模块位置关系

defineComponent内部为setup

export default defineComponent({
    name:'selector',
    setup(){
    }
});

组件自动注册

在 script setup 中，引入的组件可以直接使用，无需再通过components进行注册，并且无法指定当前组件的名字，它会自动以文件名为主，也就是不用再写name属性了。

但是我没搞明白，仍用vue2的组件注册方法

ts引用文件目录标红

使用vite/config设置绝对路径

自定义input标签

label标签作为input中的文字显示

当用户选择label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

指令注册

自定义事件控制获取焦点与失去焦点

由于el.querySelector无法获取vue子组件Icon，获得的是下面代码，即icon的源码

  <svg class="icon" aria-hidden="true">
    <use :xlink:href="iconUse"></use>
  </svg>

且无法获取xlink:href属性， oIcon.getAttributeNS(ns, 'xlink:href')获取不到值，图标动作总是有问题因此，先学习input组件

button查看element源码改进

在设置loading属性后，自动显示icon图标，禁止自定义图标，并禁用按钮

    // loading启用一个固定的图标
    <Icon :iconName="icon" v-if="icon && !loading"  ></Icon>
    <Icon v-if="loading" iconName="jiazai"></Icon>
    
    // 样式中，禁用按钮有两种可能
    'is-disabled': disabled|| loading,

自动实现加载中

将处理函数变成async函数执行前将loading变成true 执行后变成false

问题：如何获取loading值并修改原up主是vue2，this直接获取参数，对button进行了封装，this是vue 我是vue3， setup中没有this， event中是一个proxy对象，推荐使用refs回归原生对象修改，或者转换成json修改

打算使用ref获取元素节点

通过对div元素添加了ref属性，为了获取到这个元素，我们声明了一个与ref属性名称相同的变量sectionRef，然后我们通过 sectionRef.value 的形式即可获取该div元素。

但是我的ref返回null，即使是挂载后也是null

input组件

转换学习思路，学习element源码

添加功能：

对输入内容进行自定义正则，不符合在旁边显示红色字体
远程搜索，实现名称占用问题

下拉菜单组件｜ 青训营笔记