vue3+vite+element-plus封装npm插件遇到的问题，求大神搭救

一条有腹肌的咸鱼2025-10-06 10:59

测试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')
        }
    },
})