目录
Element UI _ 疑难杂症 , 想必大家伙遇到了很多修改其组件库样式的难题吧 ,
在这里我也将会记录下来我在日常使用过程中遇见的难题及解决方案分享给大家 ,
当然这些仅是我的一些想法 , 仅供参考 , 大家可借鉴 , 一起探讨 :
解决 element-ui 的坑 ：body 外默认有一圈 8px 的边框
Icon 图标
提供了一套常用的图标集合。
如何设置 icon 图标大小 和 颜色
方法一 ：
需要给父盒子设置字体大小和颜色
方法二 ：
直接给当前组件设置字体大小！
如何设置 icon 图标的提示文本 ？（ 类似于 title 效果 ）
直接 加 title 属性 title=“提示文本”
Button 按钮
常用的操作按钮。
面试需求 : 如何设置一个纯文本按钮 ( 无边框 , 无背景颜色 , 只显示文本文字的 )
一开始我是说的查阅官方文档 , 看有没有相关能够实现此方案的属性 , 如果没有的话 , 可以给按钮加上一个 类名 , 去操控它的样式 , 比如 : 使用 border: none; background-color: rgba(255, 255, 255, 0) 将按钮外边框去掉 , 背景颜色消失 等等
结果 , 最后才发现 , elementUI 组件库里的按钮有配置项 , 很容易就可修改了
<el-button type="text">文本按钮</el-button>
button 按钮样式修改 ：
.el-button--text { margin-left: 40px; border: 1px solid #409EFF; padding: 0 15px }
Input 输入框
通过鼠标或键盘输入字符
基础用法
如何设置 el-input 的宽度 ：
直接修改其对应类名的样式就好 ： .el-input { width : 175px }
修改输入框的大小 ： size=“ medium/small/mini ” （ 大 / 中 / 小 ）
阻止在 form 表单下单个的 input 输入款的回车默认提交行为
@submit.native.prevent
需求 ：输入框限制用户只能输入数字
这个问题我使用过很多办法, 每一种都去尝试，但是结果都不太理想
比如以下的几种方法注：我要的效果是，输入框内只可输入数字，除了数字其他什么都不可输入，
包括标点符号，英文在内
第一种、使用 el-input 原生自带的 type=“number”
- 存在的问题
- type="number" 允许输入 e
- maxlength 属性会不生效
- 可以输入1.1.....11...1
第二种、使用 oninput
<el-input v-model='inputValue' oninput="value=value.replace(/[^\d]/g,'')" maxLength='9' />
- 存在的问题
测试的时候偶然发现，有时候会出现输入框的值没有绑定到 v-model 上
暂时不知道原因，也比较难复现，而且输入汉字时数字可能会被删除
绑定的 @input 事件 ， 有时会失效 ， 暂时不知原因。
第三种、使用 onkeypress
<el-input v-model="length" :maxlength="3" placeholder="长 cm" onkeypress='return( /[\d]/.test(String.fromCharCode(event.keyCode)))' />
- 存在的问题
这个代码一开始可以输中文 , 只有输数字时才不可以输入其他
第四种、使用 onafterpaste
<el-input v-model='inputValue' onafterpaste="this.value=this.value.replace(/[\D]/g,'')" maxLength='9' />
- 存在的问题
- @input 绑定的 input 输入事件 ， 会获取到你输入的最后一个非数字内容
第五种、监听 v-model 绑定值
侧面解决方案 ：
利用 form 表单自带的校验功能
ElementUI - Form 表单 - 数字类型验证
缺点 ： 不会限制用户输入非数字内容 ， 只是会给警告提示 ， 达不到预期需求效果
<el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="年龄" prop="age" :rules="[ { required: true, message: '年龄不能为空'}, { type: 'number', message: '年龄必须为数字值'} ]" > <el-input type="age" v-model.number="numberValidateForm.age" autocomplete="off"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('numberValidateForm')">提交</el-button> <el-button @click="resetForm('numberValidateForm')">重置</el-button> </el-form-item> </el-form> <script> export default { data() { return { numberValidateForm: { age: '' } }; }, methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { alert('submit!'); } else { console.log('error submit!!'); return false; } }); }, resetForm(formName) { this.$refs[formName].resetFields(); } } } </script>
解决方案 ：
试验了两天时间 ， 才搞出来了自我感觉良好的效果 ：（查阅各种资料 ， 综合总结）
" ^[0-9]*[1-9][0-9]*$ " //正整数
上代码 ， 自行体会哦
<template> <div class="formBox"> <!-- 阻止回车提交行为 --> <el-form label-position="top" @submit.native.prevent> <el-form-item size="mini"> <!-- 文本类型输入框 --> <el-input v-if="item.quInputType === '1'" v-model="item.modelValue" type="textarea" :style="`width:${item.answerInputWidth}px`" :rows="item.answerInputRow" placeholder="请输入文本内容" ></el-input> <!-- 日期类型输入框 --> <el-date-picker v-if="item.quInputType === '2'" :readonly="true" v-model="item.dateValue" type="date" placeholder="请选择日期" ></el-date-picker> <!-- 数字类型输入框 --> <el-input v-if="item.quInputType === '3'" size="small" :maxlength="item.numDigit" v-model.number="item.numValue" @input="handleNumInput($event, item)" placeholder="请输入正整数" ></el-input> </el-form-item> </el-form> </div> </template> <script> export default { data() { return { // 在 item 中的数据字段 numValue: "", // 数字输入框的绑定值 quInputType: "1", // input 类型 : 1.文本 2.日期 3.数字 modelValue: "", // 默认文本域绑定值 answerInputWidth: "300", // input 宽度 answerInputRow: "1", // input 高度 dateValue: "", // 日期选择器绑定值 numValue: "", // 数字输入框绑定值 numDigit: "1", // 控制数字位数 }; }, methods: { handleNumInput(event, item) { if (!/^[0-9]*[1-9][0-9]*$/.test(event)) { // 如果是非数字内容则 replace 切除掉 item.numValue = event.replace(/\D/g, ""); } }, }, }; </script> <style lang="scss" scoped> </style>
封装一个数字框
开始封装 ：
<!-- 作者 : 小灰狼
功能 : 数字框
时间 : 2022/04 -->
<template>
<div>
<el-input
v-if="inputShow"
:readonly="readonly"
:disabled="disabled"
:size="inputSize"
:style="inputStyle"
:maxlength="maxlength"
:placeholder="placeholder"
v-model="modelValue.val"
@input="handleNumInput($event, modelValue.val)"
>
</el-input>
</div>
</template>
<script>
// 导入数字型输入框封装函数
import { digitalInput } from "../../utils/digitalInput";
export default {
name: "numInput",
props: {
inputShow: {
// 控制是否显示数字框
type: Boolean,
required: true,
default: false,
},
readonly: {
// 控制数字框是否只读
type: Boolean,
required: true,
default: false,
},
disabled: {
// 控制数字框是否禁用
type: Boolean,
default: false,
},
inputSize: {
// 控制数字框大小
type: String,
required: true,
default: "small",
},
inputStyle: {
// 控制数字框样式
type: Object,
required: true,
default: {},
},
maxlength: {
// 控制数字框内容长度
type: String,
required: true,
default: "1",
},
placeholder: {
// 数字框提示文本
type: String,
required: true,
default: "正整数",
},
modelValue: {
// 数字框绑定值
// type: Object,
required: true,
default: {},
},
},
methods: {
handleNumInput(event, val) {
// 限制用户输入非数字内容
this.modelValue.val = digitalInput(event, val);
// this.$emit("handleNumInput", digitalInput(event, val));
},
},
};
</script>
<style lang="scss" scoped>
</style>digitalInput.js 文件
/** 数字型输入框
* @param {} event 事件对象
* @param {} modelValue 输入框绑定值
* @return {} 处理好的内容
*/
// 限制用户只能输入数字
export const digitalInput = (event, modelValue) => {
// 限制用户输入非数字内容
if (!/^[0-9]*[1-9][0-9]*$/.test(event)) {
modelValue = event.replace(/\D/g, "");
}
console.log(modelValue, "封装函数");
return modelValue;
};开始使用 ：
<template>
<div>
<!-- 数字框组件 -->
<num-input
:inputShow="quInputType === '3'"
:readonly="false"
:inputSize="'small'"
:inputStyle="{ width: '300px' }"
:maxlength="numlength"
:placeholder="'请输入正整数'"
:modelValue="modelValue"
></num-input>
</div>
</template>
<script>
// 导入数字框组件
import numInput from "../../../components/common/numInput.vue";
export default {
name: "container",
components: {
numInput, // 数字框组件
},
data() {
return {
quInputType: "3", // 类型
numlength: "1", // 控制数字位数
modelValue: {
val: "1",
},
};
},
methods: {},
};
</script>Select 选择器
当选项过多时，使用下拉菜单展示并选择内容。
问题 ： 使用时下拉的内容样式与原来组件库里看到的效果不太一样了 ， 查阅百度 ， 说是什么下拉那块内容已经不再是被 #App 包裹了 ， 所以
一：如何修改 el-select 下拉框中选项的样式，网上的方法一般有两种：
1.找到下拉框的类名，写一个全局的样式。
2.通过/deep/来修改.el-select-dropdown__item的样式内容
3.通过popper-class设置的类名添加样式以上几种方式中，第二种和第三种是无法生效的，而第一种形式虽然可以，但是会造成样式污染，在打包上传到服务器的时候，其他地方的样式可能会因此发生改变。
二：问题分析
上图中显示的是当选中 el-select 的选项时页面的结构，选项的容器并不在挂载的 div#app中，而是 div#app 的兄弟元素，我们在组件中设置样式的时候，加上了 scoped，作用域都是局限在 div#app 中，所以设置的样式就无法正常作用到选项内容的 div 上。
注：el-select 组件中，只有选项的容器默认是 div#app 之外的，展示的 div.el-input 还是在div#app 之中。
三：问题解决
Popper-append-to-body 属性是 Element-UI 官方文档中提供的一个属性，该属性的用途就是将 el-select 选项的内容移动 div#app 当中，默认值是 true ，下面一张图是将该属性设置为false 时的 DOM 结构展示。
<el-select v-model="value" placeholder="请选择" :popper-append-to-body="false"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select>
四：样式修改
// 修改单个的选项的样式 /deep/ .el-select-dropdown__item{ background-color: transparent; color: #fff; text-aligin: left; padding-left: 10px } // item 选项的 hover 样式 /deep/ .el-select-dropdown__item.hover, /deep/ .el-select-dropdown__item:hover{ color:#409eff; }
element 饿了么下拉框 el-select 选值后，框里不变的问题 （ 有值却无法选中 ）
遇到一个 bug，下拉框怎么点都改变不了
饿了么组件中的下拉框 值 不好使 (点不了)
由于值是循环出来的 层数太多可能 所以不好使 点不了<el-form-item label="坑位："> <el-select v-model="form.pitSeq" placeholder="请选择"> <el-option v-for="(v, i) in $store.state.fixed.pitSeq" :key="i" :label="v.label" :value="v.value"></el-option> </el-select> </el-form-item>但是我把 form.pitSeq 打印出来其实值已经变了
最后用了 vue 的刷新组件的方法解决了 ： $forceUpdate() ，在 el-select 改变的方法执行刷新，代码如下
<el-form-item label="坑位："> <el-select v-model="form.pitSeq" placeholder="请选择" @change="$forceUpdate()"> <el-option v-for="(v, i) in $store.state.fixed.pitSeq" :key="i" :label="v.label" :value="v.value"></el-option> </el-select> </el-form-item>
DatePicker 日期选择器
用于选择或输入日期
DatePicker日期选择器 怎么设置默认值 ？
在这里给 data 下面 组件 v-model 绑定的数据一个初始化的值。
XX: new Date(“2022-04-11”);
就不需要再写函数了。<template> <div> <!-- 日期类型 --> <el-date-picker v-if="item.type === '2'" type="date" placeholder="选择日期" v-model="datePicker" @change="dateAnswer" ></el-date-picker> </div> </template> <script> export default { data() { return { datePicker: "", // 日期选择器绑定值 }; }, created() { this.datePicker = new Date("2022-04-11"); // 日期选择器默认值 this.datePicker = new Date(this.data.dateValue); // 日期选择器默认值 }, }; </script>
Table 表格
用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。
多选
选择多行数据时使用 Checkbox。
需求 : 左上角的全选按钮我不需要 , 我只需要它下面的单选按钮即可 :
实现 :
原代码 :
<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55"> </el-table-column> <el-table-column label="日期" width="120"> <template slot-scope="scope">{{ scope.row.date }}</template> </el-table-column> <el-table-column prop="name" label="姓名" width="120"> </el-table-column> <el-table-column prop="address" label="地址" show-overflow-tooltip> </el-table-column> </el-table> <div style="margin-top: 20px"> <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button> <el-button @click="toggleSelection()">取消选择</el-button> </div>原效果 :
更新后代码 :
<div> <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange" > <el-table-column width="50"> <template slot="header"> <div></div> </template> <template slot-scope="scope"> <input type="checkbox" :value="scope.row.date" /> </template> </el-table-column> <!-- <el-table-column type="selection" width="55"> </el-table-column> --> <el-table-column label="日期" width="120"> <template slot-scope="scope">{{ scope.row.date }}</template> </el-table-column> <el-table-column prop="name" label="姓名" width="120"> </el-table-column> <el-table-column prop="address" label="地址" show-overflow-tooltip> </el-table-column> </el-table> <div style="margin-top: 20px"> <el-button @click="toggleSelection([tableData[1], tableData[2]])" >切换第二、第三行的选中状态</el-button > <el-button @click="toggleSelection()">取消选择</el-button> </div> </div>更新后效果 :
以上是稳守法 : 经过几次测试 , 发现以下简单处理也可实现 :
处理完毕 , 已经可以实现我们当初想要的效果了 ,
之所以这么麻烦的去处理 , 是因为一开始我们找了官方文档 , 并没有对此方面的修改配置项 , 随后我们又想通过拿到标签 class 类名去控制修改它的样式 , 结果发现我们在浏览器内可以直接给其设置为 display : none ; 时将其隐藏 , 结果在修改了代码之后却怎么也不行了 , 没有效果改变 , 随后即使我们增加权重值 ( ! important ) , 或者给其 样式穿透 ( ::v-deep ) 也都没有实现我们想要的效果 , 最后折腾了半天 , 才有了以上的这种解决方案 , 因为属实难搞 , 特就将此次解决办法记录下来 , 方便日后自己再遇到此类似问题 , 还能有个印象 , 也希望对大家伙能有点帮助吧 .
自定义列模板
自定义列的显示内容，可组合其他组件使用。
原代码 :
<template> <el-table :data="tableData" style="width: 100%"> <el-table-column label="日期" width="180"> <template slot-scope="scope"> <i class="el-icon-time"></i> <span style="margin-left: 10px">{{ scope.row.date }}</span> </template> </el-table-column> <el-table-column label="姓名" width="180"> <template slot-scope="scope"> <el-popover trigger="hover" placement="top"> <p>姓名: {{ scope.row.name }}</p> <p>住址: {{ scope.row.address }}</p> <div slot="reference" class="name-wrapper"> <el-tag size="medium">{{ scope.row.name }}</el-tag> </div> </el-popover> </template> </el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button> </template> </el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' }] } }, methods: { handleEdit(index, row) { console.log(index, row); }, handleDelete(index, row) { console.log(index, row); } } } </script>需求 : 我只需要上边两个按钮即可 , 不需要那么多的按钮
技术难点 : 因为 ElementUI 的 Table 表格 都是 通过它组件内自带的生成的东西 ,
所以我们只将其修改一个的话 , 必定会影响到其他布局的
解决实现 :
( 1 ) 首先可以简单实现将编辑按钮删除掉
( 2 ) 通过判断条件去实现我们需要的是哪一个按钮
更新后代码 :
<template>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
label="日期"
width="180">
<template slot-scope="scope">
<i class="el-icon-time"></i>
<span style="margin-left: 10px">{{ scope.row.date }}</span>
</template>
</el-table-column>
<el-table-column
label="姓名"
width="180">
<template slot-scope="scope">
<el-popover trigger="hover" placement="top">
<p>姓名: {{ scope.row.name }}</p>
<p>住址: {{ scope.row.address }}</p>
<div slot="reference" class="name-wrapper">
<el-tag size="medium">{{ scope.row.name }}</el-tag>
</div>
</el-popover>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
v-if="scope.row.btn == '需要'"
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
btn: '需要'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄',
btn: '需要'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
},
methods: {
handleEdit(index, row) {
console.log(index, row);
},
handleDelete(index, row) {
console.log(index, row);
}
}
}
</script>表头设置背景色
1、首先使用 elementUI 中的 header-cell-style 属性
<el-table :data="paperList" :header-cell-style="getRowClass" >2、然后在 getRowClass 方法中 改变 css 样式
getRowClass({ rowIndex, columnIndex }) { if (rowIndex == 0) { return "background:#f8f8f9;"; } }
Pagination 分页
当数据量过多时，使用分页分解数据。
修改默认的文字 “前往”
问题描述
饿了么自带的分页组件，提供的跳转到某一页的文案是 “前往”，如下图所示
不过有时候我们想要换一个文案，但是看了一下官方文档，
分页组件没有提供默认的修改文字的插槽
解决方案 ：
可以通过js的方式获取对应的DOM元素，然后修改其对应的值。我们先审查一下元素
找到元素了，类名为 el-pagination__jump
这样的话，我们就可以在页面初始化渲染的时候，去修改其内容。代码如下：// 这里一定要是 mounted 生命周期里 mounted() { document.getElementsByClassName("el-pagination__jump")[0].childNodes[0].nodeValue = "跳转"; },最终效果 ：
当遇到组件解决不了的问题的时候，可以考虑使用原生js去实现对应的效果。
封装一个 分页组件 ：
<!-- 功能 : 分页组件 --> <template> <div class="common-page"> <el-pagination :current-page="currentPage" :total="total" layout="total, sizes, prev, pager, next, jumper" :page-sizes="pageSizes" :page-size="pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange" /> </div> </template> <script> export default { name: "Page", props: { currentPage: { type: Number, }, total: { type: Number, }, pageSize: { type: Number, }, pageSizes: { type:Array, }, }, methods: { handleSizeChange(val) { this.$emit("handleSizeChange", val); }, handleCurrentChange(val) { this.$emit("handleCurrentChange", val); }, }, }; </script> <style lang="scss" scoped> .common-page { text-align: center; margin: 50px 0; } </style>
Descriptions 描述列表
列表形式展示多个字段。
前端 Vue 报错 ： Unknown custom element :
＜el-descriptions＞ - did you register the component correctly?
上问题截图 ：
原因 ：版本问题 。
<el-descriptions> 是到了 element-ui 2.15.6 才开始更新的 ，
很多可能是开始做项目时用的是 2.13.2 版本 ，
所以加载 <el-descriptions> 会出错 。
解决办法 ：把 element-ui 更新到最新版本即可 。
npm uninstall element-ui 卸载 npm i element-ui -S 安装
Loading 加载
加载数据时显示动效。
需求及背景 ： 一个页面或组件内多次使用 Loading 加载效果 ， 想要区分其样式
因此需要通过改变其 自定义的类名 来实现 ， 因此要知道如何去使用 customClass
<div class="tool-container" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" element-loading-custom-class="loading-icon" ></div>项目使用案例：
<template> <div> <div class="item-list" v-loading="exportLoading" element-loading-text="加载中..." element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.6)" element-loading-custom-class="exportIconLoading" @click="exportFiles" > <img src="" alt="" /> <span>导出</span> </div> </div> </template> <script> import { debounce } from '@/utils/tools'; import { getToken } from '@/utils/auth'; export default { data() { return { exportLoading: false, // 导出 loading userId: '', type: 'all', }; }, methods: { exportFiles: debounce( function () { this.exportLoading = true; // 开始加载 axios .get( `/api/Export/userInfo?data=${this.userId}&type=${this.type}`, { headers: { Authorization: getToken(), }, responseType: 'blob', } ) .then((response) => { let str = response.headers['content-disposition'] .split(';')[1] .split('=')[1]; let fileName = decodeURI(str); if (window.navigator.msSaveOrOpenBlob) { // 兼容 IE10 navigator.msSaveBlob( new Blob([response.data]), fileName ); } else { let url = window.URL.createObjectURL( new Blob([response.data]) ); let link = document.createElement('a'); link.style.display = 'none'; link.href = url; link.setAttribute('download', `${fileName}`); document.body.appendChild(link); link.click(); document.body.removeChild(link); } this.exportLoading = false; // 结束加载 }) .catch((err) => { this.$message.success('导出失败!'); }); }, 2000, true ), }, }; </script> <style lang="scss" scoped> // 导出加载样式 ::v-deep .exportIconLoading { > .el-loading-spinner { width: 100%; top: 50%; margin-top: 0; text-align: center; position: absolute; transform: translateY(-50%); // 修改 loading > i { color: #409eff; font-size: 50px; } } } </style>
Message 消息提示
常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒。
bug 问题 ：
ElementUI 按需引入 时 , 刷新页面 就会 显示出
Message 消息提示 和 MessageBox 弹框 的 问题
正常情况下，应该是点击按钮才触发 ，而不是现在这样页面刷新的时候就弹出来
解决方案 ：
换一种引用方式即可解决
import { Message, MessageBox, } from "element-ui"; Vue.component(Message.name, Message); Vue.component(MessageBox.name, MessageBox);
MessageBox 弹框
模拟系统的消息提示框而实现的一套模态对话框组件，用于消息提示、确认消息和提交内容。
修改 MessageBox 弹框 中确定和取消按钮顺序
需求：修改弹框中的 取消 / 确定按钮顺序, 及头部和底部背景颜色;
通过设置类的样式来改变位置
【注意 ： 一定不要写在 scope 内 ， 可另起一组样式】
.el-message-box__btns { /* 确定按钮 */ .confirmButton { color: #FFF; background-color: #409EFF; border-color: #409EFF; } /* 取消按钮 */ .cancelButton { float: right; margin-left: 10px; color: #357AFF; background-color: #FFF; border-color: #409EFF; } }自定义
可自定义配置不同内容。
<template> <el-button type="text" @click="open">点击打开 Message Box</el-button> </template> <script> export default { methods: { open() { const h = this.$createElement; this.$msgbox({ title: "消息", message: h("p", null, [ h("span", null, "内容可以是 "), h("i", { style: "color: teal" }, "VNode"), ]), showCancelButton: true, confirmButtonText: "确定", cancelButtonText: "取消", beforeClose: (action, instance, done) => { if (action === "confirm") { instance.confirmButtonLoading = true; instance.confirmButtonText = "执行中..."; setTimeout(() => { done(); setTimeout(() => { instance.confirmButtonLoading = false; }, 300); }, 3000); } else { done(); } }, }).then((action) => { this.$message({ type: "info", message: "action: " + action, }); }); }, }, }; </script>
自定义简写写法 ：
methods: { open() { const h = this.$createElement; this.$msgbox({ title: "提示", type: "warning", showCancelButton: true, confirmButtonText: "确定编辑", cancelButtonText: "取消", message: h("div", { style: "fontSize: 16px" }, [ h("p", null, "内容可以是 "), h("p", null, "VNode"), ]), }) .then(() => { this.$router.push({ path: "home", query: { id: 1, type: "2", }, }); }) .catch(() => {}); }, },
Dialog 对话框
在保留当前页面状态的情况下，告知用户并承载相关操作。
在写 Vue 项目时候，
遇见如下需求：点击编辑按钮弹出一个 dialog , dialog 中的表单展示当前行显示数据，然后编辑后保存。
但是我点击后，出现了遮罩层，但是 dialog 怎么也不显示，如图
二、解决方案
这里是由于一个属性没有设置正确导致的问题。在 el-dialog 标签内，添加如图红色矩形框内所示属性。
即可解决问题。
写法上：
可以直接写 append-to-body
也可以写成 :append-to-body=“true” （ 勿忘 + ：）
我更喜欢第一种，因为看起来更简洁。顺便补充第二种不要忘了加冒号 ：
打开 Dialog 页面存在 padding-right 的 bug 问题
问题重现：在页面没有打开 dialog 时 ，显示是正常的 。而在打开 dialog 后 ，页面的右侧会出现 padding-right：17px；
正常页面：页面布局不会出现任何变化。
在打开 dialog 后，可以看到右侧会出现空隙，页面布局被向左挤压
打开控制台查看代码可以看到 => 打开 dialog 后 ，
body 增加了一个 el-popup-parent--hidden 样式
解决方法：
( 1 ) 将 el-popup-parent--hidden 类样式的 padding-right 强制改成 0px
.el-popup-parent--hidden { padding-right: 0 !important; }( 2 ) 可以在 el-dialog 上加 :lock-scroll="false"
Timeline 时间线
可视化地呈现时间流信息。
自定义 el-timeline 节点样式
<div class="left-lineBox"> <el-timeline> <el-timeline-item v-for="(activity, index) in activities" :key="index" :icon="activity.icon" :type="activity.type" :color="activity.color" :class="{ eltimelinefocus: activity.type && activity.type == '01', }" size="normal" > <p class="timeline-name">{{ activity.name }}</p> <p class="timeline-content">{{ activity.content }}</p> <p class="timeline-content" v-if="activity.idea"> <span>意见: </span ><span class="timeline-content__idea">{{ activity.idea }}</span> </p> <p class="timeline-content">{{ activity.timestamp }}</p> </el-timeline-item> </el-timeline> </div>
测试数据
activities: [ { content: "郭艾伦 (人事专员)", name: "提交", timestamp: "2018-04-12 20:46", idea: "一朵小红花", color: "#4E97FF" }, { content: "赵继伟 (人事主管)", name: "复核通过", timestamp: "2018-04-03 20:46", type: "01", color: "#4E97FF" }, { content: "韩德君 (财务主管)", name: "复核2", timestamp: "2018-04-03 20:46" }, { content: "贺天举 (董事长)", name: "审批", timestamp: "2018-04-03 20:46" } ],半透明圆环 样式
.left-lineBox { margin-top: 12px; padding-left: 5px; .el-timeline { .el-timeline-item { padding-bottom: 1px !important; } } .el-timeline-item__node--normal { width: 7px; height: 7px; left: 2px; } .eltimelinefocus { .el-timeline-item__node { border: 2px solid hsla(0, 0%, 90%, 0.7); background-clip: content-box; background: rgba(78, 151, 255, 1); } .el-timeline-item__node--normal { left: 0px; width: 11px; height: 11px; } } .timeline-name { font-size: 13px; color: rgba(0, 0, 0, 0.7); } .timeline-content { color: rgba(0, 0, 0, 0.5); font-size: 12px; margin-top: 4px; .timeline-content__idea { color: rgba(0, 0, 0, 0.7); } } }效果图
Image 图片
图片容器，在保留原生img的特性下，支持懒加载，自定义占位、加载失败等
el-image 使用本地图片
使用 require 引入本地文件
<el-image fit="contain" :src="require('@/assets/imgs/logo.png')"></el-image> <el-image fit="contain" :src="url"></el-image> data(){ return{ url: require('@assets/image/LOGO1.png') } }
InfiniteScroll 无限滚动
如何实现隔行变色 ？
右键 F12 检查其元素，才发现原来都是一堆 li 循环出来的，所以那就好办啦
li:nth-child(odd) { background-color: skyblue; } li:nth-child(even) { background-color: pink; }
Drawer 抽屉
有些时候,
Dialog组件并不满足我们的需求, 比如你的表单很长, 亦或是你需要临时展示一些文档,Drawer拥有和Dialog几乎相同的 API, 在 UI 上带来不一样的体验.
样式穿透问题 ：
我现在不需要 elementUI 组件自带的下边距 ， 所以需要对其样式进行一番调整
加 ！important 增加其权重值无效果
改成对其 样式穿透 ， 就有效果了
::v-deep .el-className { }
5362
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
