字数:643 字
预计:2 分钟
阅读量:
Vue开发问题记录
作者:winches
更新于:3 年前
input 框，blur事件和click事件冲突问题
在做一个下拉框的时候，input 下拉选项绑定了click事件，当点击下拉选项时，由于blur优先级比click高
导致click下拉选项失败
解决办法:
- 使用
mousedown事件替换click该事件优先级比blur高 - 设置下拉框消失的
settimeout设置300ms
使用自动导入后如何覆盖样式
当使用了unplugin-vue-components自动导入Element-plus后
覆盖样式需要更改设置为如下
ts
Components({
// 取消自动导入样式
resolvers: [ElementPlusResolver({ importStyle: false })]
})然后再在主入口导入覆盖样式即可
控制插槽内只渲染指定组件
Tabs标签页组件内，只能渲染TabsPane组件，其他的不会渲染
比如下面div内的内容不会渲染：
vue
<fr-tabs @tab-click="handleClick">
<fr-tabs-pane>test1</fr-tabs-pane>
<div>不会渲染</div>
</fr-tabs>实现方式：
vue
<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的组件提示