一、Dialog 对话框
1、取消点击Dialog 对话框黑色背景关闭弹窗
- close-on-click-modal 是否可以通过点击 modal 关闭 Dialog
:show-close="true"
:close-on-click-modal="false"
<el-dialog
:visible.sync="dialogVisible"
:before-close="cancel"
center
:show-close="true"
:close-on-click-modal="false"
>
</el-dialog>
2、Dialog组件弹框
知识点
- 改变Dialog样式--->custom-class
index.vue
<template>
<div class="home>
<div @click="onOpen">这里是首页信息</div>
<!-- 子组件 -->
<add-dialog
:visible.sync="showDialog"
@success="InitLoad"
></add-dialog>
</div>
</template>
<script lang="ts">
import { Watch, Component, Vue, Emit } from "vue-class-decorator";
import AddDialog from "./components/AddDialog.vue";
@Component({
components: {
AddDialog
}
})
export default class HomePage extends Vue {
showDialog = false; // 是否显示子组件
// 初始化数据
InitLoad() {}
// 打开子组件
onOpen(){
this.showDialog = true;
}
}
</script>
子组件
<template>
<el-dialog
title="门店信息"
:visible.sync="visible"
@close="onClose(false)"
@open="changeDetail"
custom-class="AddDialog"
>
<div class="AddDialog-box"></div>
<span
slot="footer"
class="dialog-footer"
>
<el-button
@click="onClose(false)"
class="add-mask add-btn-back"
>取 消</el-button>
<el-button
type="primary"
class="add-mask add-btn-sure"
@click="submit"
>确 定</el-button>
</span>
</el-dialog>
</template>
<script lang="ts">
import { Watch, Component, Vue, Emit, Prop } from "vue-class-decorator";
@Component
export default class PowerRole extends Vue {
@Prop({ type: Boolean, default: false })
visible: boolean;
@Emit("update:visible")
onClose(visible) {}
@Emit("success")
onSuccess() {
this.onClose(false);
}
// 打开组件触发的事件
changeDetail(){}
submit() {
this.onSuccess();
}
}
</script>
<style lang="less" scoped>
/deep/ .AddDialog.el-dialog {
// 这里处理弹框样式
}
</style>
二、上传附件
- 即可上传图片又可上传world等文件
html
<div>
<p>上传附件:</p>
<div
class="add-img"
style="width: 380px;"
>
<div
class="add-img-box"
style="width: 380px;"
v-if="fileList.length !== 0"
>
<div
style="width: 380px;min-height:35px;"
class="box-item"
v-for="(item,index) in fileList"
:key="index"
>
<span
class="de-box fr"
@click="handleDetele(index)"
></span>
<span
v-if="item.name"
@click="jumpUrl(item)"
style="display: inline-block;color: #1b4c80;"
class="f12 fl add-name"
>{{item.name}}</span>
<img
v-else
@click="jumpUrl(item)"
class="add-img-item"
:src="item.url"
style="width:45px;height:45px;"
>
</div>
</div>
<label
for="upload"
style="width:45px;height:45px;display: block;vertical-align: top;cursor:pointer"
>
<img
src="../assets/image/attachment.png"
alt=""
style="width:45px;height:45px;"
>
</label>
<form
name="imgForm"
id="imgForm"
>
<input
@change='selectFile($event)'
type="file"
id="upload"
name="file"
multiple
style="display:none"
>
</form>
</div>
</div>
js
fileList = []; // 附件列表
// 删除
handleDetele(index) {
this.fileList.splice(index, 1);
}
// 下载
jumpUrl(item) {
window.open(item.url, "_blank");
}
selectFile(event) {
const files = event.target.files;
const fileLength = files.length;
const reader = new FileReader();
for (let i = 0; i < fileLength; i++) {
const addImg = {
url: "",
fileData: {},
name: ""
};
// 判断是否是图片
if (
files[i].type === "image/gif" ||
files[i].type === "image/jpeg" ||
files[i].type === "image/jpg" ||
files[i].type === "image/png" ||
files[i].type === "image/svg"
) {
addImg.url = URL.createObjectURL(files[i]);
addImg.fileData = files[i];
} else {
addImg.name = files[i].name;
addImg.url = URL.createObjectURL(files[i]);
addImg.fileData = files[i];
}
this.fileList.push(addImg);
}
}
less
.add-img {
display: inline-block;
vertical-align: top;
.add-img-box {
display: inline-block;
vertical-align: top;
.box-item {
vertical-align: top;
position: relative;
margin-bottom: 5px;
.add-name {
width: auto;
color: #1b4c80;
cursor: pointer;
}
.add-img-item {
object-fit: cover;
object-position: center;
cursor: pointer;
width: 45px;
height: 45px;
}
.de-box {
cursor: pointer;
width: 10px;
height: 11px;
background: url("../assets/image/close.png") no-repeat top 0 right 0;
background-size: 100% 100%;
}
}
}
}
三、DatePicker 日期选择器
1、只能选取明天开始的时间
<el-date-picker
v-model="value1"
type="date"
:picker-options="pickerOptions"
value-format="yyyy-MM-dd"
placeholder="选今天之后的日期"
>
</el-date-picker>
// 选今天之后的日期(从明天开始)
pickerOptions = {
disabledDate(time) {
return time.getTime() < Date.now() - 8.64e6;
}
};
value1 = "";
2、只能选取今天开始的时间
<el-date-picker
v-model="dates"
type="date"
:picker-options="pickerOptions"
value-format="yyyy-MM-dd"
placeholder="今天开始的日期"
>
</el-date-picker>
// 选今天开始的日期
pickerOptions = {
disabledDate(time) {
return time.getTime() < Date.now() - 8.64e7;
}
};
value1 = "";
改变elementUI表格的文字大小
<el-table :header-cell-style='styleObj' style="width: 100%;font-size:12px;"></el-table>
ts
export default class Page extends Vue {
styleObj = {
"font-size": "14px"
};
}
- 头部字体14px.表格内容字体12px
- header-cell-style 表头单元格的style的回调方法,也可以使用一个固定的Object为所有表头单元格设置一样的Style