Vue开发问题记录 ​

input 框，blur事件和click事件冲突问题 ​

在做一个下拉框的时候，input 下拉选项绑定了click事件，当点击下拉选项时，由于blur优先级比click高

导致click下拉选项失败

解决办法:

• 使用mousedown事件替换click该事件优先级比blur高
• 设置下拉框消失的settimeout设置300ms

使用自动导入后如何覆盖样式 ​

当使用了unplugin-vue-components自动导入Element-plus后

覆盖样式需要更改设置为如下

Components({
  // 取消自动导入样式
  resolvers: [ElementPlusResolver({ importStyle: false })]
})

然后再在主入口导入覆盖样式即可

控制插槽内只渲染指定组件 ​

Tabs标签页组件内，只能渲染TabsPane组件，其他的不会渲染

比如下面div内的内容不会渲染：

<fr-tabs @tab-click="handleClick">
  <fr-tabs-pane>test1</fr-tabs-pane>
  <div>不会渲染</div>
</fr-tabs>

实现方式：

<script setup lang="ts">
const slotContent = useSlots()
const slots = slotContent.default?.().filter(slot => (slot.type as any)?.name === 'FrTabsPane')
</script>

<Transition v-for="(item, index) in slots" :key="index">
  <component :is="item" />
</Transition>

调试Vue代码 ​

当给一个Dom绑定了Click事件后，通过Chrome加入了一个Event Listener Breakpoints后，通过Click会跳进到Vue源码文件中，通过给Vue源码文件忽略断点的操作，可以直接跳转到触发Click的Vue文件中

keep-alive 的踩坑 ​

生命周期的执行顺序：beforeRouteLeave --> 全局的beforeEach守卫 --> 执行全局的beforeEnter --> 在被激活的组件里调beforeRouteEnter(组件先注册) --> 然后才执行deactivated导致被缓存的组件没有被清除导致错误

解决：

beforeRouteLeave 会在组件注册前调用，先执行这个移除掉dom即可

vue-demi 同时开发vue2/3库 ​

阅读：手把手教你如何以 sfc 组件形式优雅开发 vue2/3 通用组件

vue2 问题 ​

import导入的变量或者函数，template中使用的时候报错未定义 ​

import导入函数或者导入变量不能直接再template中使用，

变量需要再data中重新定义一下。

函数需要再method中重新定义一下。

vue2 组件注册全局类型 ​

借助vetur的globalComponents和unplugin-vue-components实现为组件注册全局类型和按需导入，让vue2也能享受vue3的组件提示

vue-loader 2.6 不支持在template中的标签使用?.语法 ​