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')
        }
    },
})
相关推荐
岁月宁静1 小时前
Vue 3.5 + WangEditor 打造智能笔记编辑器:语音识别功能深度实现
前端·javascript·vue.js
古夕3 小时前
基于 Vue 3 + Monorepo + 微前端的中后台前端项目框架全景解析
前端·javascript·vue.js
一 乐3 小时前
宠物管理|宠物店管理|基于SSM+vue的宠物店管理系统(源码+数据库+文档)
java·前端·数据库·vue.js·论文·毕设·宠物
咖啡の猫3 小时前
Vue插件
前端·javascript·vue.js
咖啡の猫4 小时前
Vue中的自定义事件
前端·javascript·vue.js
xiaohe06014 小时前
🚀 拥抱 create-uni,一行命令轻松集成 Uni ECharts!
vue.js·uni-app·echarts
2301_801252224 小时前
Vue中的指令
前端·javascript·vue.js
咖啡の猫6 小时前
Vue全局事件总线
前端·javascript·vue.js
白水清风7 小时前
Vue3之渲染器
前端·vue.js·面试
白水清风7 小时前
Vue3之组件化
前端·vue.js·面试