vue中怎么使用el-popover

本文小编为大家详细介绍“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”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注编程网行业资讯频道。