vue中關(guān)于el-popover的使用
更新時(shí)間：2023年04月12日 16:08:17 作者：榴蓮豆包
這篇文章主要介紹了vue中關(guān)于el-popover的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
關(guān)于el-popover的使用
trigger屬性用于設(shè)置何時(shí)觸發(fā) Popover，支持四種觸發(fā)方式：hover，click，focus 和 manual。
對(duì)于觸發(fā) Popover 的元素，有兩種寫法：使用 slot="reference" 的具名插槽，或使用自定義指令v-popover指向 Popover 的索引ref。
<template>
<div class="listcontent">
<el-row v-for="(item,index) in datalist" :key="index">
<el-popover
placement="right"
trigger="hover"
>
<div class="popup" >
<h3>{{item.industryName}}</h3>
<el-row v-for="(zxSysIndustryChildren,cindex) in item.zxSysIndustryChildren" :key="cindex" style="width:600px;">
<el-col :span="6" style="color:#000000;font-size:13px">
{{zxSysIndustryChildren.occupationName}}
</el-col>
<el-col :span="18" style="border-bottom: 1px solid #F4F4F4;" >
<el-radio-group v-model="radio" v-for="(zxSysPositionChildren,tindex) in zxSysIndustryChildren.zxSysPositionChildren" :key="tindex">
<el-radio-button>{{zxSysPositionChildren.positionName}}</el-radio-button>
</el-radio-group>
</el-col>
</el-row>
</div>
<el-button type="primary" plain slot="reference" style="text-align:left;">
<b>{{item.industryName}}</b>
<span class="textname" v-for="(zxSysPositionArrayHot,cindex) in item.zxSysPositionArrayHot" :key="cindex">{{zxSysPositionArrayHot.positionName}}</span>
</el-button>
</el-popover>
</el-row>
<div class="checkmore">
<el-button type="text" plain>
顯示全部職位
</el-button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
radio:'',
datalist:[],
datalist1:[],
companynum:7,
};
},
mounted() {
this.queryZxSysIndustryTree();
},
methods: {
loadmoreCompany(){
if(this.datalist1.length>=this.companynum){
this.datalist = this.datalist1.slice(0,this.companynum);
}
},
handleSelect(key, keyPath) {
this.queryZxSysIndustryTree();
},
queryZxSysIndustryTree(){
//三級(jí)聯(lián)查
this.$busapi.zxSysIndustry.zxSysIndustryTree().then((res) => {
if (res.code == "0000") {
this.datalist1 = res.data
this.datalist = res.data.slice(0,this.companynum);
} else {
this.$message({message: '錯(cuò)誤原因：' + res.msg, type: 'error'})
}
}).catch((res) => {
this.$message({message: res.msg, type: 'error'});
});
},
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped="scoped">
.listcontent{
::v-deep.el-popover__reference-wrapper{
color: red;
border-radius: 5px;
.el-button--primary.is-plain{
width: 100%;
height: 48px;
color: #515151;
border-radius: 0px;
border: 0rem;
background-color: #fff;
b{
font-size: 16px;
color: #000000;
}
span.textname{
font-size: 14px;
display: inline-block;
margin-left: 20px;
}
}
.el-button--primary.is-plain:active, .el-button.is-plain:focus, .el-button.is-plain:hover{
color: #fff;
background-color: $frontNormalColor;
b{
color: #fff;
}
}
}
.checkmore{
background-color: #fff;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
border-top: 1px solid #E4E4E4;
.el-button{
margin-left: 20px;
height: 48px;
font-size: 16px;
}
}
}
.el-popover{
color: red;
h3{
// margin-bottom: 15px;
}
.popup{
line-height: 2.4375rem;
::v-deep.el-radio-button__inner{
border: 0px;
padding: 12px 16px;
}
::v-deep.el-radio-button:first-child .el-radio-button__inner{
border-radius: 0px;
}
::v-deep.el-radio-button:last-child .el-radio-button__inner{
border-radius: 0px;
}
}
}
</style>vue點(diǎn)擊關(guān)閉el-popover
<el-popover ref="popover"
placement="bottom" trigger="click" >
<div>
<el-form style="margin-left: 30px;" label-width="90px" size="small" :model="formInline">
<el-form-item label="數(shù)據(jù)名稱：">
<el-input v-model="formInline.text"></el-input>
</el-form-item>
<el-form-item label="創(chuàng)建人：">
<el-input v-model="formInline.creator"></el-input>
</el-form-item>
<el-form-item label="數(shù)據(jù)類型：">
<el-select v-model="formInline.type" placeholder="請(qǐng)選擇">
<el-option label="請(qǐng)選擇" value />
<el-option v-for="types in dataTypes" :key="types.id" :value="types.code" v-text="types.name" :label="types.name"/>
</el-select>
</el-form-item>
<el-form-item label="創(chuàng)建時(shí)間：">
<el-date-picker
v-model="formInline.timerange"
type="daterange"
range-separator="至"
value-format="yyyy-MM-dd HH:mm:ss"
start-placeholder="開始日期"
end-placeholder="結(jié)束日期"
></el-date-picker>
</el-form-item>
</el-form>
<span slot="footer" style="float: right" >
<el-button @click="cancel()">取 消</el-button>
<el-button @click="resetQuery()">重 置</el-button>
<el-button @click="search()" style="background-color: #4C74E0;color: white">查 詢</el-button>
</span>
</div>
<el-button slot="reference" icon="el-icon-search" style="background-color:#656D92;color: white;margin-left: 20px" size="middle" >高級(jí)查詢</el-button>
</el-popover>方法里面：
? ? ? ? ? ? /*取消*/
? ? ? ? ? ? cancel(){
? ? ? ? ? ? ? ? this.$refs.popover.showPopper = false;
? ? ? ? ? ? }總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue 組件的掛載與父子組件的傳值實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2020-09-09
這篇文章主要介紹了Nuxt之vue服務(wù)端渲染，NUXT集成了利用Vue開發(fā)服務(wù)端渲染的應(yīng)用所需要的各種配置，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2018-06-06
vue3實(shí)現(xiàn)旋轉(zhuǎn)圖片驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了vue3實(shí)現(xiàn)旋轉(zhuǎn)圖片驗(yàn)證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
vue中用動(dòng)態(tài)組件實(shí)現(xiàn)選項(xiàng)卡切換效果
本篇文章主要介紹了vue中用動(dòng)態(tài)組件實(shí)現(xiàn)選項(xiàng)卡切換效果，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2017-03-03
Vue.js實(shí)現(xiàn)價(jià)格計(jì)算器功能
這篇文章主要為大家詳細(xì)介紹了Vue.js實(shí)現(xiàn)價(jià)格計(jì)算器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要介紹了vue中echarts引入中國(guó)地圖的案例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2020-07-07
Vue中data傳遞函數(shù)、props接收函數(shù)及slot傳參的使用及說明
這篇文章主要介紹了Vue中data傳遞函數(shù)、props接收函數(shù)及slot傳參的使用及說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
虛擬列表是一種優(yōu)化長(zhǎng)列表渲染的技術(shù),它可以在保持流暢性的同時(shí),渲染大量的數(shù)據(jù),本文主要介紹了如何使用vue手寫一個(gè)虛擬列表,感興趣的可以了解下2024-04-04
這篇文章主要介紹了Vue 全局loading組件,需要的朋友可以參考下2018-05-05
vue中路由跳轉(zhuǎn)的多種方式(和$router下路由跳轉(zhuǎn)的那幾個(gè)方法的區(qū)別)
Vue.js是一款流行的前端JavaScript框架,它提供了多種方式來(lái)實(shí)現(xiàn)路由跳轉(zhuǎn),本文給大家分享vue中路由跳轉(zhuǎn)的幾種方式（和$router下路由跳轉(zhuǎn)的那幾個(gè)方法的區(qū)別）,感興趣的朋友一起看看吧2023-11-11