本文小编为大家详细介绍“vue中怎么使用el-popover”，内容详细，步骤清晰，细节处理妥当，希望这篇“vue中怎么使用el-popover”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。
关于el-popover的使用
trigger属性用于设置何时触发 Popover，支持四种触发方式：hover，click，focus 和 manual。
对于触发 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" > <h4>{{item.industryName}}</h4> <el-row v-for="(zxSysIndustryChildren,cindex) in item.zxSysIndustryChildren" :key="cindex" > <el-col :span="6" > {{zxSysIndustryChildren.occupationName}} </el-col> <el-col :span="18" > <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" > <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(){ //三级联查 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: '错误原因：' + 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; h4{ // 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点击关闭el-popover
<el-popover ref="popover" placement="bottom" trigger="click" > <div> <el-form label-width="90px" size="small" :model="formInline"> <el-form-item label="数据名称："> <el-input v-model="formInline.text"></el-input> </el-form-item> <el-form-item label="创建人："> <el-input v-model="formInline.creator"></el-input> </el-form-item> <el-form-item label="数据类型："> <el-select v-model="formInline.type" placeholder="请选择"> <el-option label="请选择" 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="创建时间："> <el-date-picker v-model="formInline.timerange" type="daterange" range-separator="至" value-format="yyyy-MM-dd HH:mm:ss" start-placeholder="开始日期" end-placeholder="结束日期" ></el-date-picker> </el-form-item> </el-form> <span slot="footer" > <el-button @click="cancel()">取 消</el-button> <el-button @click="resetQuery()">重 置</el-button> <el-button @click="search()" >查 询</el-button> </span> </div> <el-button slot="reference" icon="el-icon-search" size="middle" >高级查询</el-button> </el-popover>方法里面：
cancel(){ this.$refs.popover.showPopper = false; }读到这里，这篇“vue中怎么使用el-popover”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注编程网行业资讯频道。
