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')
        }
    },
})
相关推荐
zhifou12345612 小时前
Vue基础(二)
前端·javascript·vue.js
你脑门上的脚印14 小时前
Vue 项目从零实现语音转文字、文字转语音功能(完整可用 + 踩坑指南)
前端·vue.js
lemon_yyds16 小时前
H5 页面嵌入 APP 的 web-view 时-调用原生能力(uniapp)
vue.js
ITmaster073117 小时前
Vibe Coding 时代:Vue 消失了还是 React 太强?
前端·vue.js·react.js
万敏18 小时前
Vue3 全栈实战第七周:错误处理与请求层封装实战记录
vue.js·node.js·全栈
请你吃div19 小时前
Electron 从零开始的新手开发教程
vue.js·windows·electron
咏方舟【长江支流】21 小时前
【前端1】单据编辑 -EasyUI/Vue/React/Bootstrap 主流框架实现订单单据主子表显示和编辑比较,哪个你最易入门?
前端·vue.js·easyui·咏方舟-长江支流·userbaodatagrid
m0_5791466521 小时前
Element UI 表格合并单元格完全指南:从原理到实战
前端·vue.js·elementui
雪芽蓝域zzs21 小时前
Prettier (代码格式化)配置详解
前端·vue.js
运维全栈笔记1 天前
Vue + Spring Boot 前后端分离项目部署笔记(若依 RuoYi-Vue 3.9.2)
运维·服务器·vue.js·spring boot·笔记·开源·开源软件