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

测试npm插件时,抛出以下警告:

组件可以正常显示,但功能异常:

  1. hover 触发事件,class is-hover没有如期显示;
  2. focus 触发事件,class is-focus没有如期显示;
  3. 当在输入框输入内容时,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')
        }
    },
})
相关推荐
JamesGosling6662 小时前
详解 Vue 3.6 Vapor Mode:从原理到问题,看透 VDOM 逐步退场的底层逻辑
前端·vue.js
一个很帅的帅哥3 小时前
Vue中的hash模式和history模式
前端·vue.js·history模式·hash模式
华仔啊4 小时前
加班到凌晨,我用 Vue3 + ElementUI 写了个可编辑的表格组件
vue.js·element
小咕聊编程5 小时前
【含文档+PPT+源码】基于SpringBoot+Vue的停车场管理系统
vue.js·spring boot·后端·毕业设计·停车场
做运维的阿瑞10 小时前
Windows 环境下安装 Node.js 和 Vue.js 框架完全指南
前端·javascript·vue.js·windows·node.js
武昌库里写JAVA10 小时前
Java设计模式之工厂模式
java·vue.js·spring boot·后端·sql
一只游鱼14 小时前
vue+springboot项目部署到服务器
服务器·vue.js·spring boot·部署
叫兽~~18 小时前
vite vue 打包后运行,路由首页加载不出来
vue.js·vue
Demoncode_y21 小时前
Vue3 + Three.js 实现 3D 汽车个性化定制及展示
前端·javascript·vue.js·3d·汽车·three.js