目錄
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資料中，也可以是請求擷取到的資料