项目十遇到的知识点
一、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 = "";
四、flex.css:移动端flex布局
<dd data-flex="cross:center">
<p data-felx="0"></p>
<p data-flex="1"></p>
</dd>
1、npm
npm install flex.css --save
2、use
<!--
将dist目录下的css文件引入到你的页面中,根据你的需要引入
flex.css 使用flex属性匹配
data-flex.css 使用data-flex属性匹配(React使用)
如果使用了webpack打包,npm安装后,并且配置了ES6编译器的话,
flex 属性匹配可以直接使用:
import 'flex.css';
data-flex 属性匹配可以直接使用(react使用)
import 'flex.css/dist/data-flex.css';
-->
<!-- flex属性匹配,简单的子元素居中例子: -->
<div flex="main:center cross:center" style="width:500px; height: 500px; background: #108423">
<div style="background: #fff">看看我是不是居中的</div>
</div>
<!-- data-flex属性匹配,简单的子元素居中例子: -->
<div data-flex="main:center cross:center" style="width:500px; height: 500px; background: #f1d722">
<div style="background: #fff">看看我是不是居中的</div>
</div>
3、flex属性大全
dir
dir:主轴方向
top:从上到下
right:从右到左
bottom:从下到上
left:从左到右(默认)
main
main:主轴对齐方式
right:从右到左
left:从左到右(默认)
justify:两端对齐
center:居中对齐
cross
cross:交叉轴对齐方式
top:从上到下(默认)
bottom:从上到下
baseline:基线对齐
center:居中对齐
stretch:高度并排铺满
box
box:子元素设置
mean:子元素平分空间
first:第一个子元素不要多余空间,其他子元素平分多余空间
last:最后一个子元素不要多余空间,其他子元素平分多余空间
justify:两端第一个元素不要多余空间,其他子元素平分多余空间
4、flex-box属性说明
- 取值范围(0-10),单独设置子元素多余空间的如何分配,设置为0,则子元素不占用多余的多余空间
多余空间分配 = 当前flex-box值/子元素的flex-box值相加之和
其他知识
千分位金额的正则表达式
NumberRenderer(params) {
if (params === null || params === undefined) {
return null;
} else if (isNaN(params)) {
return "NaN";
} else {
let num = params.toString(); // 将输入的数字转换为字符串
if (/^-?\d+\.?\d+$/.test(num)) {
// 判断输入内容是否为整数或小数
if (/^-?\d+$/.test(num)) {
// 判断输入内容是否为整数
num = num.replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,"); // 对其进行分割
} else {
const num_array = num.split("."); // 如果是小数就根据"."拆分成两个数组,整数部分和小数部分,对整数部分进行千分位处理,再合并小数部分
const num_before = num_array[0].replace(
/(\d)(?=(\d{3})+(?!\d))/g,
"$1,"
);
num = num_before + "." + num_array[1];
}
}
return num;
}
}
- console.log(this.NumberRenderer(185962.5632241)) // 185,962.5632241
改变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
element table 的index显示
-
PageIndex 当前页
-
PageSize 每页的数量
<el-table-column label="序号" header-align="center" width="80"> <template scope="scope"><span>{{scope.$index+(PageIndex - 1) * PageSize + 1}} </span></template> </el-table-column>
html禁止缓存
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
Cache-Control
-
客户端可以在HTTP请求中使用的标准 Cache-Control 指令
Cache-Control: max-age=<seconds> Cache-Control: max-stale[=<seconds>] Cache-Control: min-fresh=<seconds> Cache-control: no-cache Cache-control: no-store Cache-control: no-transform Cache-control: only-if-cached
-
no-cache
-
在发布缓存副本之前,强制要求缓存把请求提交给原始服务器进行验证。