测试npm插件时,抛出以下警告:
组件可以正常显示,但功能异常:
- hover 触发事件,class is-hover没有如期显示;
- focus 触发事件,class is-focus没有如期显示;
- 当在输入框输入内容时,class is-focus才显示;
组件代码:
js
<template>
<div class="b-textarea"
:class="[{ 'is-focus': isfocus }, { 'is-hover': ishover }]"
@mousemove="ishover=true"
@mouseleave="ishover=false">
<el-input
v-bind="$attrs"
type="textarea"
@input="handleInput"
@focus="isfocus=true"
@blur="isfocus=false" />
</div>
</template>
<script setup>
import { ElInput } from 'element-plus'
import { ref, defineOptions} from 'vue'
defineOptions({
name: 'BTextarea',
inheritAttrs: false
})
const handleInput = (val) => {
console.log('input', val)
}
const isfocus = ref(false)
const ishover = ref(false)
</script>
<style lang="scss">
.b-textarea{
background-color: red;
padding: 10px;
}
</style>
构建配置:
js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
// https://vite.dev/config/
export default defineConfig({
build: {
lib: {
entry: 'src/index.js',
name: 'vv-app',
fileName: (format) => `vv-app.${format}.js`
}
},
rollupOptions: {
// 确保外部化处理那些你不想打包进库的依赖
external: ['vue', 'element-plus'],
output: {
globals: {
vue: 'Vue',
},
},
output: {
// 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
globals: {
vue: 'Vue',
'element-plus': 'ElementPlus'
}
}
},
plugins: [
vue()
],
resolve: {
alias: {
'@': path.resolve(__dirname, 'src')
}
},
})