element-plus按需引入报错IconsResolver is not a function

 官网文档:element-plus-best-practices/vite.config.ts at db2dfc983ccda5570033a0ac608a1bd9d9a7f658 · sxzz/element-plus-best-practices · GitHubElement Plus Best Practices 最佳实践. Contribute to sxzz/element-plus-best-practices development by creating an account on GitHub.icon-default.png?t=O83Ahttps://github.com/sxzz/element-plus-best-practices/blob/db2dfc983ccda5570033a0ac608a1bd9d9a7f658/vite.config.ts#L21-L58

webpack配置

// webpack.config.js
const IconsResolver = require("unplugin-icons/resolver");

module.exports = {
  // ...
  configureWebpack: (config) => {
    // ...
    config.plugins.push(
      AutoImport({
        resolvers: [
          // 自动导入图标组件
          IconsResolver({
            prefix: "Icon",
          }),
          // ...
        ],
      })
    );
    config.plugins.push(
      Components({
        resolvers: [
          // 自动注册图标组件
          IconsResolver({
            enabledCollections: ["ep"],
          }),
          // ...
        ],
      })
    );
  }
}

 运行结果:TypeError: IconsResolver is not a function

解决方式:安装低版本unplugin-icons

yarn add unplugin-icons@0.14.1 -D

### Vue3 中 Element Plus 控件报错 'is not a function' 的解决方案 #### 一、分析常见原因及对应措施 当遇到 `mask.replace is not a function` 错误时,通常是因为全局方法名与框架内部的方法产生了冲突。如果在项目的 main.js 文件中定义了名为 timeFormat() 的函数,则可能会覆盖 Element Plus 库中的同名功能[^1]。 对于 `value.getTime is not a function` 这类错误而言,往往发生在尝试操作非 Date 类型的数据上执行 .getTime 方法的情况之下。这可能是由于数据绑定过程中传入了不符合预期类型的值给日期选择组件所引起的[^3]。 #### 二、具体解决办法 ##### 更改自定义函数名称避免命名冲突 为了避免因全局变量或函数重名而导致的问题,建议修改项目内可能引起冲突的名字: ```javascript // 原来的写法可能导致冲突 function timeFormat(date) { // ... } // 修改后的版本可以加上前缀或其他方式来区分 function customTimeFormatter(date) { // 实现相同逻辑... } ``` ##### 数据验证与转换 确保传递给 el-date-picker 组件的 v-model 或者其他属性确实是 JavaScript Date 对象而不是字符串或者其他类型。可以在设置初始值之前先进行必要的类型检查并完成相应的转换工作: ```javascript let rawValue = "2023-09-18"; // 可能来自 API 返回的结果 if (typeof(rawValue) === 'string') { this.form.dateField = new Date(rawValue); } else if (rawValue instanceof Date && !isNaN(rawValue)) { this.form.dateField = rawValue; } else { console.error('Invalid date format'); } ``` ##### 使用 computed 属性处理双向绑定 为了更好地管理状态以及防止意外更改原始对象,推荐利用计算属性(computed property) 来创建 getter 和 setter 函数来进行更安全的操作: ```javascript computed: { formattedDate: { get() { return this.rawDate ? moment(this.rawDate).format('YYYY-MM-DD') : ''; }, set(newValue) { const parsedDate = newValue ? moment(newValue, 'YYYY-MM-DD').toDate() : null; this.$emit('update:rawDate', parsedDate); } } }, template: `<el-date-picker v-model="formattedDate"></el-date-picker>` ``` 以上方法能够有效减少由上述两种典型场景引发的 “xxx is not a function” 类型错误的发生概率。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值