踩坑记19 element-plus 根据视口尺寸隐藏元素 | vue3 v-model props emit 二次封装el组件 | vite import 路径 Vetur报错

最新推荐文章于 2025-01-23 15:39:54 发布

莫得感情学习机1号

最新推荐文章于 2025-01-23 15:39:54 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue3踩坑记文章标签： vue.js javascript html5 elementui vue

本文链接：https://blog.csdn.net/Alloom/article/details/120086059

本文档详细介绍了在Vue3中如何封装Element Plus的el-form-item组件，包括处理v-model、props和emit的交互，以及在不同类型的表单元素（如el-input、el-checkbox-group、el-radio-group）中的应用。同时，文中还提到了因Element Plus更新导致的路径变更问题和Vetur在导入路径识别上的错误，以及相应的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2021.9.3

坑61（element-plus、根据视口尺寸隐藏元素）：文档要求引入文件 import 'element-plus/lib/theme-chalk/display.css'，其中地址错误，查看包文件结构后，确认地址应该为：

import 'element-plus/theme-chalk/display.css';

地址改变的原因是element-plus更新到1.1.0-beta.1版本的时候的变化。详细见： Breaking changes made in 1.1.0-beta.1 · Discussion #3020 · element-plus/element-plus · GitHub ，可以看到element-plus的文件组织形式/项目结构发生了较大变化。

坑62（vue3、v-model、props、emit、二次封装、父组件和子组件双向传递数据、el-form-item、el-input、el-checkbox-group、el-radio-group）：目标是封装el-form-item，而el-form-item中又包含了el-input、el-checkbox-group、el-radio-group（当然更深入还有el-checkbox、el-radio）。

首先看一下封装前父组件中el-form-item的使用，代码量较多，数据存放在dataForm中，如下：

<el-form-item prop='inputData'>

    <el-input class='isInput'

    v-model="dataForm.inputData"

    placeholder="输入"

    type="text"

    clearable autocomplete>

    </el-input>

</el-form-item>



<el-form-item prop='checkboxData'>

    <el-checkbox-group class='isSelectbox' 

    v-model='dataForm.checkboxData' >

        <el-checkbox label='复选1'></el-checkbox>

        <el-checkbox label='复选2' ></el-checkbox>

        <el-checkbox label='复选3'></el-checkbox>

    </el-checkbox-group>

</el-form-item>



<el-form-item prop='radioData'>

    <el-radio-group class='isSelectbox' 

    v-model='dataForm.radioData'>

        <el-radio label='单选1'></el-radio>

        <el-radio label='单选2'></el-radio>

    </el-radio-group>

</el-form-item>

之后开始封装，期间踩坑无数，记录一些要点：

1、el-input、el-checkbox-group、el-radio-group这些组件都使用了v-model进行数值的双向绑定，而不是使用html中原生input的value。

2、父组件传值到子