【Elemnt-UI——el-popover点击出现多个弹框】

效果图
【Elemnt-UI——el-popover点击出现多个弹框】_第1张图片
解决
:append-to-body="false"添加这个属性就可以了

<el-popover
                v-model="item.contextmenuVisible"
                placement="bottom-end"
                :append-to-body="false"
                trigger="click"
                :visible-arrow="false"
                @hide="item.contextBtnVisible = false"
              >
                <ul
                  @mouseover="item.contextBtnVisible = true"
                  @mouseleave="!item.contextmenuVisible?item.contextBtnVisible = false:null"
                >
                  <li v-show="pageType === 'drafts'||pageType === 'error'||pageType === 'remove'" @click="handleTips(item,0)">删除li>
                  <li v-show="pageType === 'loading'" @click="handleTips(item,1)">取消发布li>
                  <li v-show="pageType === 'drafts'" @click="handleCopy(item,index)">复制li>
                  <li v-show="pageType === 'remove'" @click="handleTips(item,2)">上架li>
                  <li v-show="pageType === 'release'" @click="handleTips(item,3)">下架li>
                ul>
                <span slot="reference" @click.stop="clickContextmenu(index)">
                  <img alt="拓展" src="@/assets/images/[email protected]" class="context-btn">
                span>
              el-popover>

你可能感兴趣的:(记录项目中遇到的问题,vue.js,elementui,前端)