vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > 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" >
                <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(){
          //三级联查
          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;
        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点击关闭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="数据名称:">
                                      <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" 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" >高级查询</el-button>
                      </el-popover>

方法里面:

            /*取消*/
            cancel(){
                this.$refs.popover.showPopper = false;
            }

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文