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')
        }
    },
})
相关推荐
JiaLin_Denny3 小时前
Vue3中ref和reactive用法与双向数据绑定
前端·javascript·vue.js
无人生还3 小时前
从 Vue3 到 React · 快速上手系列第 12 篇:并发特性与性能优化
前端·vue.js·react.js
柒@宝儿姐4 小时前
若依 B 端从浏览器访问升级为 Windows 安装包交付流程
前端·javascript·vue.js·windows
达子66619 小时前
第26章_HarmonyOs开发图解之 设备管理
vue.js
自然 醒19 小时前
v-tooltip自定义指令封装
前端·javascript·vue.js
万敏1 天前
Vue3 全栈实战第四周:watch、nextTick、性能优化与 keep-alive 实战记录
vue.js·node.js·全栈
布兰妮甜1 天前
Vue 大型页面性能优化:四个核心策略
vue.js·性能优化·虚拟滚动·组件缓存·按需加载
di24k24k1 天前
多个 el-form 共用同一 ref 导致表单校验部分失效
前端·javascript·vue.js·elementui
执子念的飞鱼1 天前
Vue 3 文件预览落地:鉴权 Blob、Worker/WASM 与内网子路径部署
vue.js·webassembly
无人生还1 天前
从 Vue3 到 React · 快速上手系列第 11 篇:状态管理
前端·vue.js·react.js