目录
element-ui
表单自定义规则
表单里嵌套表格时的prop验证
设置可以为空，但是输入必须符合规则
表格的内容插槽
分页的注意事项
下拉菜单
图标
tree树形控件
级联选择器
动态编辑的Tag标签
导入与下载模块布局
弹框内的时间选择器遇到的问题
文件导出
vant-ui
rem适配
tab标签页
checkbox的使用
Eacharts图表
引入
基本概念
堆叠面积图
element-ui
表单自定义规则
1 在表单上定义ref表单验证与每项的一个验证规则
<el-form
:model="ruleForm" // 渲染的数据
status-icon
:rules="rules" //开启验证
ref="ruleForm" //在提交时需要使用ref获取来判断是否验证通过
label-width="100px" class="demo-ruleForm">
<el-form-item label="邮箱" prop="email">
<el-input type="password" v-model="ruleForm.email" autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
2 在vue的data数据中，自定义验证的正则，可以写在return之外
data(){
// 自定义邮箱规则,可以写在return之外
var checkEmail = (rule, value, callback) => {
const regEmail = /^\w+@\w+(\.\w+)+$/
if (regEmail.test(value)) {
// 合法邮箱
return callback()
}
callback(new Error('请输入合法邮箱'))
}
return{}
}
3 在data的return中，定义验证
data(){
return{
email: [
{ required: true, message: '请输入邮箱', trigger: 'blur' },
{ validator: checkEmail, trigger: 'blur' }
],
}
}
4 提交时确认是否通过
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
//valid为false,表示验证没有通过
if (!valid) return
});
}
表单里嵌套表格时的prop验证
html
<el-table :data="ruleForm.organization_structure" style="width: 100%">
<el-table-column label="序号" width="60">
<template slot-scope="scope">
{{ scope.$index + 1 }}
</template>
</el-table-column>
<el-table-column prop="name" label="网安相关部门名称" width="150">
<template slot-scope="scope">
// 必须使用表单项包裹 rules可以自由设置验证规则 prop调用一个函数指向当前的下标的值
<el-form-item
:rules="rules.organizationData"
:prop="organizationProps(scope.$index, 'name')"
>
// 要想使用输入框 必须使用封装的组件 绑定当前行的数据
<el-input v-model="scope.row.name"></el-input>
</el-form-item>
</template>
</el-table-column>
</el-table>
函数指向当前行的值
// 推荐写在计算属性中
computed: {
organizationProps() {
return (index, prop) => {
// 下面的数据，为对应的那个数组
return `organization_structure.${index}.${prop}`;
};
},
}
设置可以为空，但是输入必须符合规则
rules规则定义
rules: {
applicantTels: [
// false为非必传值 自定义验证规则 触发方式
{ required: false, validator: checkPhone, trigger: "blur" },
],
}
自定义验证规则
// 推荐写在export default之上
const checkPhone = (rule, value, callback) => {
if (value) {
// 判断当输入的有值时，才校验
if (!/^1[3456789]\d{9}$/.test(value)) {
callback(new Error("手机号格式不正确"));
} else {
callback(); // 注意这里要回调一下，不然提交不了
}
} else {
callback();
}
};
注意：如果是一开始就有的验证规则，可以简单一点，直接设置type值就可以了
email: [
{ type: "email", message: "请输入正确的邮箱", trigger: "blur" },
],
prop的type类型有
string：必须是类型string。
number：必须是类型number。
boolean：必须是类型boolean。
method：必须是类型function。
regexp：必须是RegExp创建新项时不生成异常的实例 或* 字符串RegExp。
integer：必须是类型number和整数。
float：必须是类型number和浮点数。
array：必须是由…确定的数组Array.isArray。
object：必须是类型object而不是Array.isArray。
enum：价值必须存在于enum。
date：值必须有效，由确定 Date
url：必须是类型url。
hex：必须是类型hex。
email：必须是类型email。
表格的内容插槽
V2 <template slot-scope="scope">
scope.row是当前行的数据 scope.$index是当前的下标
V3 <template #default="scope">
scope.row是当前行的数据 scope.$index是当前的下标
想要使用索引，只需要将prop更改为type="index"即可
分页的注意事项
@current-change传递当前页码，默认为1
事件里自带一个value参数，是当前的页码
下拉菜单
el-select 需注意使用一个value变量接收才能显示
图标
v3的图标要单独引入，不然不会显示
import { Edit } from "@element-plus/icons";
tree树形控件
请求获取了数据，想做到以下的效果
布局代码如下
<el-tree
:data="powerData" // 渲染的数据
:props='treeProps' // 配置选项
show-checkbox // 带复选框
default-expand-all //默认展开所有
node-key="id" // 以id排序
ref="tree" // 获取选中的id
:default-checked-keys="userId" //默认选中的id
>
</el-tree>
所需变量
// 渲染的数据
powerData: [],
// 权限弹框的显示隐藏
show: false,
// 树形选择的参数 具体数据按照数据属性
treeProps: {
label: "authName", // 即全选部分为数据的对应属性
children: "children" // 全选组为数据的对应属性
}
想要拿到选中与半选中的数据 根据id
setPower() {
// 获取选中的权限id 上面设置的node-key必须为id 获取到的是一个数组
let arr = this.$refs.tree.getCheckedKeys();
// 获取半选中的权限id 上面设置的node-key必须为id 获取到的是一个数组
let arr1 = this.$refs.tree.getHalfCheckedKeys
}
默认选中 tree控件要求，默认选中的id,只需要最后一层的id
利用递归遍历，拿到最后一层的id
// 封装递归遍历
forUser(data, arr) {
if (!data.children) {
return arr.push(data.id);
}
data.children.forEach(item => this.forUser(item, arr));
},
级联选择器
与上文的tree树形控件类似，都是通过props来配置所需要的参数，但是，他有一个value可以直接设置所需要的id, 在组件上，有一个v-model可以选择完成后直接获取对应的值
动态编辑的Tag标签
实现的效果
html代码如下
// 循环渲染数据
<el-tag
v-for="（item,i） in dynamicTags"
:key="item"
closable
:disable-transitions="false"
//删除时触发的事件，要将删除的数据传递过去
@close="handleClose(item)">
{{item}} //循环渲染的数据
</el-tag>
// 在点击添加后才会出现的input，默认为隐藏的
<el-input
class="input-new-tag"
v-if="inputVisible"
// 新添加的数据
v-model="inputValue"
ref="saveTagInput"
size="small"
// 以下两个事件是输入新数据后，在失焦或者按回车时触发
@keyup.enter.native="handleInputConfirm"
@blur="handleInputConfirm"
>
</el-input>
// 添加的按钮，里面的事件是在点击之后隐藏，让上面的input显示
<el-button v-else class="button-new-tag" size="small" @click="showInput">
+ New Tag
</el-button>
所需要的data数据
dynamicTags:[], //循环渲染的数据
inputVisible: false, //控制按钮与input的显示隐藏
inputValue: "" //新数据添加后的双项绑定
vue中的事件
// 删除时触发，要将删除的数据传过来，在全部数据的数组中进行切割，先需要用indexOf
//找到对应的下标，如果是动态数据，需要先用一个变量保存后，在进行切割
handleClose(tag) {
this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
},
//点击添加按钮后触发，在这一步，进行显示隐藏的切换
showInput() {
this.inputVisible = true;
this.$nextTick(_ => {
this.$refs.saveTagInput.$refs.input.focus();
});
},
//input失焦或者点击回车后触发，在这里将新的数据，push进数组中，然后在将状态切换
handleInputConfirm() {
let inputValue = this.inputValue;
if (inputValue) {
this.dynamicTags.push(inputValue);
}
this.inputVisible = false;
this.inputValue = '';
}
样式需要在 elementUi 中自己复制即可
导入与下载模块布局
实现样式
html代码
本质上是使用框架的下拉菜单，内包裹上传按钮实现
<q-dropdown
split-button
class="btn"
@command="ImportData" //菜单项的事件
trigger="click" // 事件类型
>
// 下拉菜单内插入上传文件框架，实现布局
<sti-upload
class="upload"
ref="upload"
action="/situation/intelligence/monitor/vulnerability/import"
name="file" // 导入的文件类型
:on-success="uploadSuccess"
:on-error="error"
:show-file-list="false"
>
<span class="text">导入Excel</span>
</sti-upload>
// 下拉菜单的菜单项
<q-dropdown-menu slot="dropdown">
<q-dropdown-item>下载模板</q-dropdown-item>
</q-dropdown-menu>
</q-dropdown>
注意：下拉菜单的事件名称与事件项需写在上方 上传文件注意文件类型
css样式
.count-group {
display: flex;
align-items: center;
background: #fff;
padding: 15px 15px 0;
.count-group_text {
color: #333;
margin-right: 35px;
span {
font-weight: 600;
font-size: 18px;
}
}
.count-group_btn {
flex: 1;
display: flex;
justify-content: right;
.btn {
margin: 0 10px;
height: 34px;
/deep/.q-button {
background-color: #1f5aff;
height: 34px;
color: #fff;
}
// 用于去除上传组件文字的hover背景效果
/deep/.q-upload--text:hover {
background-color: #1f5aff;
}
}
}
}
下载文件
调用js中对应的浏览器 api ，将网址中的内容下载至浏览器
methods:{
ImportData() {
window.location.href = `${'/situation/intelligence/monitor/vulnerability/template' +
'?_csrfToken=' +
this.$ajax.csrfToken
}`;
},
}
弹框内的时间选择器遇到的问题
我们经常会遇见一种情况，新增或编辑弹框里含有时间选择器，如下图
代码如下
<sti-dialog
:title="
state == 0
? '编辑恶意IP监测'
: state == 1
? '查看恶意IP监测'
: '新增恶意IP监测'
"
:visible.sync="dialogFormVisible"
:z-index="100"
>
<sti-form
label-position="right"
label-width="105px"
class="form_wrapper"
ref="ruleForm"
:rules="rules"
:model="getData"
>
<sti-form-item label="攻击开始时间" class="form_item">
<sti-date-picker
type="datetime"
placeholder="选择日期时间"
v-model="getData.first_time"
:disabled="state == 1"
class="form_item_content"
:append-to-body="false"
>
</sti-date-picker>
</sti-form-item>
</sti-form>
<div slot="footer" class="dialog-footer" v-if="state != 1">
<sti-button @click="dialogFormVisible = false">取 消</sti-button>
<sti-button type="primary" @click="skip('ruleForm')">确 定</sti-button>
</div>
</sti-dialog>
以上布局的css代码
.form_wrapper {
.form_item {
width: 50%;
float: left;
margin-right: 0 !important;
.form_item_content {
width: 100%;
}
}
.form_item_title { // 独占一行的form项
width: 100%;
}
}
可能会遇到的两种问题
1 时间控件点击后。弹出的时间选择控件再 dialog 弹框的遮罩之下
原因 ：时间选择控件的 z-index 值低于 dialog 弹框的遮罩，但是修改时间选择控件的 z-index 值是无用的，因为他会自动修复回来
解决方案：给 dialog 弹框重新设置一个 z-index 值
2 再页面进行放大时，点击时间选择控件，对应时间选择弹框会闪退
原因未知
解决方法：给时间选择器增加一个 :append-to-body="false" 属性，使其定位脱离 body
文件导出
可使用 elementUi 中的 el-download 组件来完成文件的导出下载，样式可以使用自带的也可以自己写
<sti-download
v-show="false"
href="/situation/intelligence/monitor/malicious_file/export" target="_blank" rel="external nofollow"
:data="searchForm" // 对应参数，非必传
ref="download"
/>
触发导出事件
this.$refs.download.download();
vant-ui
rem适配
点击查看vant-ui的rem适配
tab标签页
标签页在切换时候，想知道当前项，有一个 @click-tab 事件
不用传实参，自带一个形参，是当前项的下标以及文本
要想获取对应数据。可以设置name值
<van-tabs @click-tab="skip">
<van-tab name=‘data’> </van-tab>
</van-tabs>
checkbox的使用
因为它是封装好的组件，v-model 是不起作用的，设置其是否被勾选的值为 value ，可以通过 @click 来设置其点击事件，在事件中修改 value 值 , 如果是循环的数据 ，在事件中传递 下标 来更改对应数据
Eacharts图表
引入
npm install echarts --save
基本概念
坐标轴
坐标轴有两个，X轴与Y轴，X轴与Y轴可以有多个
option = {
xAxis: {
// ...
},
yAxis: {
// ...
}
};
X Y 轴相关配置
axisLine 用来配置轴线，例如箭头，样式等
axisTick 配置刻度，例如刻度线的长度，样式等
axisLabel 配置刻度标签，例如文字对齐，自定义刻度样式等
点击查看具体使用
堆叠面积图
引用注意：
1 更改路径
<script>
const echarts = require("echarts");
export default {
data(){
return{ }
}
}
</script>
2 装它的盒子必须有宽高
<div id="main" ref="chart"></div>
3 需要写在能够获取dom节点的钩子函数里 推荐mounted
mounted() {
// 这句代码的意思为，给这个图表中添加渲染的内容，内容写在setOption中
echarts.init(this.$refs.chart).setOption(this.data);
}
4 option的数据，写在vue的data数据中，也可以是请求获取到的数据