目錄

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});}

簡單的驗證寫法

// 此時el-form 可省略 rules 值 <el-form-itemlabel="薪資月"prop="month":rules="[{ required: true, message: '請選擇薪資月', trigger: 'blur' }]" />

表單里嵌套表格時的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-tagv-for="（item,i） in dynamicTags":key="item"closable:disable-transitions="false" //刪除時觸發的事件，要將刪除的數據傳遞過去@close="handleClose(item)">{{item}} //循環渲染的數據 </el-tag>// 在點擊添加后才會出現的input，默認為隱藏的 <el-inputclass="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-dropdownsplit-buttonclass="btn"@command="ImportData" //菜單項的事件trigger="click" // 事件類型 >// 下拉菜單內插入上傳文件框架，實現布局<sti-uploadclass="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-formlabel-position="right"label-width="105px"class="form_wrapper"ref="ruleForm":rules="rules":model="getData"><sti-form-item label="攻擊開始時間"><sti-date-pickertype="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 {margin: 0 auto;overflow: hidden;.el-form-item {width: 50%;float: left;}.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-downloadv-show="false"href="/situation/intelligence/monitor/malicious_file/export":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數據中，也可以是請求獲取到的數據

總結

以上是生活随笔為你收集整理的组件库的使用注意的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。