vue老项目sass和element-ui开发踩坑

简介: 公司的一个各种依赖比较老的项目,习惯了之前的iview和stylus开发,刚接手还是有很多不习惯的地方

公司的一个各种依赖比较老的项目,习惯了之前的iview和stylus开发,刚接手还是有很多不习惯的地方。

项目部分依赖

  • element-ui:2.2.2
  • sass:1.26.1
  • sass-loader:7.3.1
  • webpack: 3.6.0
  • vue: 2.5.2
  • vue-router: 3.0.1
  • vuex: 3.0.1

sass

sass 之前用的 node-sass,替换成 sass(dart-sass)^1.56.1 版本后,深度选择器 ::v-deep 覆盖 element-ui 组件样式死活无效,降到 1.26.1 版本并且用 >>> 才生效了。

element-ui 2.2.2 版本的 el-input-number 数字输入框的 placeholder 无效,升级到 2.15.11会报错找不到这个文件:element-ui/lib/theme-chalk/index.css,去源码包里查看也确实没有 lib 这个文件夹,直接更新到截止2022年12月9日最新的 2.15.12版本就可以了。

注意用样式 content 去覆盖element-ui的官方组件图标,不同的版本的字体图标的 content 码是不一样的,比如覆盖下拉框右侧的箭头,不同版本要去看 el-icon-arrow-up 的实际content值。

sass(dart-sass)、sass-loader配置自动导入全局变量文件,sass-loader v8以下版本是 data,v8是prependData,最新的v10中是 additionalData。对应这个项目中要用:

{
   
  "sass": {
   
    "data": `@import "@/styles/var.scss";` // 引入全局变量
  }
}

Button

连续多个按钮组件 el-button,除了第一个会自动加上10px的左边距,如果不想要就得自己覆盖掉样式,或者中间加个占位标签阻止连续。

Form

form 表单校验的trigger要写成数组 trigger: ['blur', 'change'],不是之前的老写的 trigger:'blur|change',iview的也是一个数组。除了通过自定义的 validator 去自定义校验,如邮箱可以直接用type属性 type: 'email',还可以直接用pattern定义个正则去校验。

多选框如果用 el-checkbox-group 包起来,v-model 的值如果不是数组类型,组件在页面上会直接不显示。

覆盖选择框 el-select 右侧的箭头图标,升级element-ui 版本,图标的content值可能发生变化,可以放到全局的 var.scss 中定义一个变量去统一维护。

下拉选择框 el-select 多选默认会撑高输入框,可加上 collapse-tags 属性就会只显示一个,其他全部折叠起来,跟 iview 下拉框组件的 max-tag-coun 类似(iview这个更高级点,还可以自己设置最多显示的个数)。

async-validator 自定义校验的 validator 参数位置为 (rule, value, callback)。

数字输入框组件 el-input-number 有个默认值为0,设置为 null 还是会是0,只能设置成 undefined;和 iview 的 input-number 组件正好相反,iview 设置成 undefined 会显示成 1,要设置成 null 才能置空。

select 组件的搜索过滤 filterable,默认是根据 label 来匹配的,不指定 label 时会默认跟 value 一样,所以 el-option 记得要设置 label 属性

el-form 表单中 el-date-picker 日期时间选择器校验规则,不要改成 type: 'date',改成日期类型后如果不是直接选择的,比如直接赋值的日期时间字符串 2023-01-01 12:32:18,触发校验会报错 getTime is not a function

Form 表单校验不通过时,有滚动条自动跳转到错误的元素位置:el-form、el-collapse、el-dialog、el-table

submit () {
   
  this.$refs.form.validate(vali => {
   
    if (vali) {
   
      console.log('ok')
    } else {
   
      this.scrollToError()
    }
  })
}

scrollToError() {
   
  function scrollIntoView() {
   
    const elements = document.getElementsByClassName('is-error')
    if (elements && elements.length) {
   
      elements[0].scrollIntoView({
   
        block: 'center',
        behavior: 'smooth'
      })
    }
  }

  const tableErr = !(this.isCheck && !this.form.supplierId)
  // 如果折叠面板折叠了自动展开
  if (tableErr && this.active && !this.active.includes('2')) {
   
    this.active.push('2')
  }

  this.$nextTick(() => {
   
    // 表格里的表单有错误时表格自动滚动到最右边
    if (tableErr) {
   
      const table = this.$refs['el-table']
      const w = table.bodyWidth
      table.bodyWrapper.scrollLeft = Number(w.replace('px',''))

      // 滚动到表格中时,要先更新表格的滚动条
      this.$nextTick(() => {
   
        scrollIntoView()
      })
    } else {
   
      scrollIntoView()
    }
  })
}

el-input 直接加 v-model.trim 会导致输入框无法输入空格,这样字符串中间的空格也不能输入了,人家隔壁 iview 都是可以的

Menu

el-menu 菜单组件刷新或者跳转到其他菜单,不能自动展开和选中当前菜单项,加一个属性 :default-active="$route.path" 就可以解决了,iview 里要自己手动去调一下更新菜单的方法 this.$refs.menu.updateOpened()

Table

el-table 表格组件的 slot-scope 插槽中序号是 $index,iview 中才是 index

Dialog

弹窗组件 el-dialog 如果存在嵌套,子弹窗一定要加上 append-to-body,否则会造成层级不对被遮挡

日期时间选择组件 el-date-picker 禁选当前时间之前的时间

设置 picker-options 属性,disabledDate 禁选日期,selectableRange 设置可选时分秒

<template>
  <div>
    <el-date-picker
      v-model="form.date"
      type="datetime"
      :picker-options="pickerOptions"
      placeholder="请选择时间"
    >
   </el-date-picker>
</div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        date: ''
      },
      pickerOptions: {
        disabledDate(date) {
          return date.getTime() < Date.now() - 8.64e7
        },
        // Mon Dec 19 2022 12:32:04 GMT+0800 (中国标准时间)
        selectableRange: `${Date().split(' ')[4]} - 23:59:59`
      },
    }
  },
}
</script>
目录
相关文章
|
1月前
|
搜索推荐 Android开发 开发者
探索安卓开发中的自定义视图:打造个性化UI组件
【10月更文挑战第39天】在安卓开发的世界中,自定义视图是实现独特界面设计的关键。本文将引导你理解自定义视图的概念、创建流程,以及如何通过它们增强应用的用户体验。我们将从基础出发,逐步深入,最终让你能够自信地设计和实现专属的UI组件。
|
2月前
|
JavaScript 容器
乾坤qiankun框架搭建 主应用为vue3的项目。
乾坤qiankun框架搭建 主应用为vue3的项目。
195 2
|
1月前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
28天前
|
UED
「Mac畅玩鸿蒙与硬件24」UI互动应用篇1 - 灯光控制小项目
本篇将带领你实现一个互动性十足的灯光控制小项目,用户可以通过点击按钮来控制灯光的开关。该项目将涉及状态管理、动态图片加载以及按钮交互,是学习鸿蒙应用开发的重要基础。
38 5
「Mac畅玩鸿蒙与硬件24」UI互动应用篇1 - 灯光控制小项目
|
19天前
|
XML 搜索推荐 前端开发
安卓开发中的自定义视图:打造个性化UI组件
在安卓应用开发中,自定义视图是一种强大的工具,它允许开发者创造独一无二的用户界面元素,从而提升应用的外观和用户体验。本文将通过一个简单的自定义视图示例,引导你了解如何在安卓项目中实现自定义组件,并探讨其背后的技术原理。我们将从基础的View类讲起,逐步深入到绘图、事件处理以及性能优化等方面。无论你是初学者还是有经验的开发者,这篇文章都将为你提供有价值的见解和技巧。
|
1月前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
1月前
|
JavaScript
Vue基础知识总结 4:vue组件化开发
Vue基础知识总结 4:vue组件化开发
|
1月前
|
开发框架 JavaScript 前端开发
HarmonyOS UI开发:掌握ArkUI(包括Java UI和JS UI)进行界面开发
【10月更文挑战第22天】随着科技发展,操作系统呈现多元化趋势。华为推出的HarmonyOS以其全场景、多设备特性备受关注。本文介绍HarmonyOS的UI开发框架ArkUI,探讨Java UI和JS UI两种开发方式。Java UI适合复杂界面开发,性能较高;JS UI适合快速开发简单界面,跨平台性好。掌握ArkUI可高效打造符合用户需求的界面。
114 8
|
2月前
|
JavaScript
如何在 Vue 项目中选择合适的模块格式
【10月更文挑战第20天】选择合适的模块格式需要综合考虑多个因素,没有一种绝对正确的选择。需要根据项目的具体情况进行权衡和分析。在实际选择过程中,要保持灵活性,根据项目的发展和变化适时调整模块格式。
22 7
|
1月前
Vue3 项目的 setup 函数
【10月更文挑战第23天】setup` 函数是 Vue3 中非常重要的一个概念,掌握它的使用方法对于开发高效、灵活的 Vue3 组件至关重要。通过不断的实践和探索,你将能够更好地利用 `setup` 函数来构建优秀的 Vue3 项目。