likes
comments
collection
share

vue3项目开发问题记录

作者站长头像
站长
· 阅读数 53

input框光标错位问题

el-input 当 type="number" 时，输入字符串，光标会出现上移的情况

blog.csdn.net/monparadis/…

// 解决使用el-input的number类型输入中文光标上移的问题
::v-deep .el-input__inner {
	line-height: 1px!important;
}

零件列表分页勾选问题

在 el-table 中，通过 @selection-change=“selectFn” 和 :row-key=“getRowKey”，

在第一行，也就是多选框的那一列上，加上 :reserve-selection=“true”, 直接上代码

<el-table
    :data="List"
    @selection-change="selectFn"
    :row-key="getRowKey">
    <el-table-column type="selection" fixed="left" align="center" :reserve-selection="true" />
</el-table>
<script lang="ts" setup>
    const getRowKey = (row) => {
        return row.id
    }
</script>

批量编辑表格

用el-table配合el-input直接渲染可编辑行，在数据量大的情况下，会出现输入卡顿的问题。

el-input组件实例数量过多。

el-input的v-model在表单输入时频繁触发更新事件。

input 输入框事件发生顺序：www.jianshu.com/p/a4fbd03d2…

解决思路 用原生input替换el-input，以减少el-input组件实例。并在原生input上应用el-input的样式，使前者后者外观一致。

<input
       class="el-input__inner"
       :class="{ disableInput: scope.row.show === true }"
       v-model.lazy="scope.row.typeno"
       />

虚拟滚动

虚拟滚动：优化背景

2d报价侧边栏数据过多，频繁点击报价，下一个，编辑等按钮会造成页面卡顿问题

基本上只要数据稍微多一点（几千、上万的数据量），并且每一项有些复杂的dom结构，常规的列表就会出现明显的滚动卡顿，这时候就要用到“虚拟列表”，也可以叫“懒加载”，基本的做法就是只渲染可见范围内的列表项，一般也会在可见区域的上下加一些缓冲区，避免正常滚动的时候出现白屏。

参考链接

zhuanlan.zhihu.com/p/346507629

具体实现

限定场景：2d报价侧边栏是竖向滚动，且行高固定

结构上分为三层：

- 第一层是容器层，一般是固定高度，根据父级容器自适应宽高

- 第二层是滚动层，高度根据列表项数量和列表项的高度计算而来

- 第三层是列表层，实际渲染的列表项

<template>
    <UseVirtualList :list="list" :key="key" :itemHeight="itemHeight" :visualCount="visualCount" :currentIndex="currentIndex">
    <!--插槽内容-->
    </UseVirtualList>
</template>
<script lang="ts" setup>
import UseVirtualList from '@/utils/useVirtualList'
</script>

element-plus 升级为 2.0 遇到的问题

// 菜单标签
<el-submenu /> => <el-sub-menu />

// size=mini 这些做了调整 将size="mini" 去掉
<el-form size="mini"></form>

// element-plus icon 顶部设置图标的更换
<el-icon><Setting /></el-icon>

// el-dropdown 下拉菜单
<el-dropdown>
    <!--这里需要再包一层，不然会渲染不出来-->
    <div class="setting">
        <el-icon><Setting /></el-icon>
        <span>{{ userName }}</span>
    </div>
    <template #dropdown>
	<el-dropdown-menu>
    	<el-dropdown-item @click="changeApp">切换应用</el-dropdown-item>
    	<el-dropdown-item @click="logout">退出登录</el-dropdown-item>
    </el-dropdown-menu>
    </template>
</el-dropdown>

<el-dropdown>
    <!--这里需要不包一层，会渲染不出来-->
    <el-icon><Setting /></el-icon>
    <span>{{ userName }}</span>
    <template #dropdown>
	<el-dropdown-menu>
    	<el-dropdown-item @click="changeApp">切换应用</el-dropdown-item>
    	<el-dropdown-item @click="logout">退出登录</el-dropdown-item>
    </el-dropdown-menu>
    </template>
</el-dropdown>

// el-dialog custom-class 需要调整
// [el-dialog] [Attribute] custom-class is about to be deprecated in version 2.3.0, please use class instead.

element-plus 升级之后产生中文无效

  1. 修改 App.vue
    1. 用 el-config-provider 组件再包一层，使用 locale 属性传输多语言
<el-config-provider :locale="locale">
</el-config-provider>

<script lang="ts">
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import { defineComponent } from 'vue'
export default defineComponent({
    components: {
        ElConfigProvider
    },
    setup() {
        return {
            locale: zhCn
        }
    }
})
</script>

runtime-core.esm-bundler.js?5c40:38 [Vue warn]: Runtime directive used on component with non-element root node. The directives will not function as intended.

是因为组件使用的时候加了 v-if 指令导致的警告

<SelectorMode
   list-key="roundStepsInfoVOList"
   first-input-key="roundStepLength"
   second-input-key="roundStepLargeDiameter"
   third-input-key="roundStepSmallDiameter"
   time-input-key="stepsProcessTotalTime"
   time-input-title="台阶加工总时间"
   time-input-placeholder="请输入台阶加工总时间"
   title="台阶"
   is-placeholder="stepType"
   v-model="quotationArr[classId]"
   v-loading="showLoading"
   v-if="getSelectorMode()"
  />

输入框选中之后，没有背景色，可以使用以下样式解决

参考链接 www.cnblogs.com/summer0319/…

<style lang="scss">
.el-input__inner {
  &::selection {
    background: #3390ff;
    color: #fff;
  }
}
</style>

if else 比较多，可以考虑使用策略模式

不推荐方式

<script lang="ts" setup>
const getPlaceholder = () => {
  if (props.isPlaceholder === 'stepType') {
    return {
      text1: '请输入台阶长度',
      text2: '请输入台阶大径',
      text3: '请输入台阶小径',
    }
  } else if (props.isPlaceholder === 'grooveType') {
    return {
      text1: '请输入槽长',
      text2: '请输入槽宽',
      text3: '请输入槽深',
    }
  } else {
    return {
      text1: '请输入螺纹长度',
      text2: '请输入螺纹直径',
    }
  }

</script>

推荐方式

<script lang="ts" setup>
// 使用策略模式代替 if 判断
const getPlaceholder = {
  stepType: {
    text1: '请输入台阶长度',
    text2: '请输入台阶大径',
    text3: '请输入台阶小径',
  },
  grooveType: {
    text1: '请输入槽长',
    text2: '请输入槽宽',
    text3: '请输入槽深',
  },
  threadType: {
    text1: '请输入螺纹长度',
    text2: '请输入螺纹直径',
    text3: undefined,
  },
}
</script>

if 判断有大量代码模块，一定要加大括号

不推荐方式

const modal: Data = formDialogRef.value
if (typeof modal.open === 'function')
    modal.open({
        /**大量代码**/
    })

推荐方式

const modal: Data = formDialogRef.value
if (typeof modal.open === 'function') {
    modal.open({
        /**大量代码**/
    })
}

vue控制台警告Runtime directive used on component with non-element root node.

警告的原因是：直接在自定义的组件加了 v-loading 这样的指令

vue3项目开发问题记录

<SelectorMode
  list-key="roundStepsInfoVOList"
  first-input-key="roundStepLength"
  second-input-key="roundStepLargeDiameter"
  third-input-key="roundStepSmallDiameter"
  time-input-key="stepsProcessTotalTime"
  time-input-title="台阶加工总时间"
  time-input-placeholder="请输入台阶加工总时间"
  title="台阶"
  is-placeholder="stepType"
  v-model="quotationArr[classId]"
  v-loading="showLoading"
/>

以下这样修改能解决控制台警告问题

<div v-loading="showLoading">
	<SelectorMode
      list-key="roundStepsInfoVOList"
      first-input-key="roundStepLength"
      second-input-key="roundStepLargeDiameter"
      third-input-key="roundStepSmallDiameter"
      time-input-key="stepsProcessTotalTime"
      time-input-title="台阶加工总时间"
      time-input-placeholder="请输入台阶加工总时间"
      title="台阶"
      is-placeholder="stepType"
      v-model="quotationArr[classId]"
    />
</div>
转载自:https://juejin.cn/post/7170961870818377736
评论
请登录