ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

popper的几种用法

2022-01-15 16:04:21  阅读:240  来源: 互联网

标签:const dom 几种 cell popper popover netWeight 用法 row


1、简介:在优化一个页面时发现popper太多太乱,有好几种使用方法,就想着归纳总结一下

2、方式

2-1、直接使用,触发的dom是直接包在里面的,适用于单个少量元素,比如说一个页面就一个按钮需要弹出来

  <el-popover
    placement="bottom"
    title="标题"
    width="200"
    trigger="click"
    content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
    <el-button slot="reference">click 激活</el-button>
  </el-popover>

2-2、跟表格配合使用且固定大小的popover,只用写一个popover,优化性能

给表格加上

@cell-click="调用方法"

方法里写

function(row, column, cell){
       if (column.property === 'netWeight') {
          //业务逻辑 this.editNetWeightForm.unit = row.unit this.editNetWeightForm.pieceNum = '' this.editNetWeightForm.remark = '' this.editNetWeightForm.netWeight = row.netWeight // popover开关 const cellClass = cell.classList if (!cellClass.contains('el-popover__reference')) { // 点击其他numCell if (this.curNumCellt) { const curCellClass = this.curNumCellt.classList curCellClass.remove('el-popover__reference') this.curNumCellt = null } this.$nextTick(() => { this.curNumCellt = cell this.$nextTick(() => { const popover = this.$refs.netWeight popover?.doShow() }) }) } } }

html

    <el-popover
            v-if="curNumCellt"
            ref="netWeight"
            :reference="curNumCellt"
            placement="right"
            width="250"
            trigger="click"
        >
            <div v-if="columnType == 'pieceNum'">
                <div class="el-form-item el-form-item--mini" style="margin-bottom: 10px">
                    <label class="el-form-item__label">{{ $t('common.edit') + $t('addSaleOrder.pieceNum') }}</label>
                    <div class="el-form-item__content">
                        <el-input
                            size="mini"
                            v-model="editNetWeightForm.pieceNum"
                            @keydown.enter.native="confirmChangeNum"
                        >
                        </el-input>
                    </div>
                </div>
                <div style="text-align: right; margin: 0">
                    <el-button size="mini" type="text" @click="closeNumPopover">{{ $t('common.cancel') }}</el-button>
                    <el-button type="primary" size="mini" @click="confirmChangeNum">
                        {{ $t('common.confirm') }}
                    </el-button>
                </div>
            </div>
        </el-popover>

效果

2-3、在第二种方法的基础上做些更改,第二种方法如果popover里面是不固定大小的会导致错位,更改后的方法跟表格配合使用且大小可以不用固定,适用列表等

在表格内嵌的template直接调用方法

                    <el-table-column
                        class-name="align-right"
                        :label="$t('addSaleOrder.netWeightSale')"
                        prop="netWeightSale"
                        align="center"
                    >
                        <template slot-scope="scope">
                            <div
                                style="color: #409eff; cursor: pointer"
                                @click="getUnfinishedSaleOrderPage(scope.row, ...arguments)"
                            >
                                {{ scope.row.netWeightSale }}
                            </div>
                        </template>
                    </el-table-column>
getUnfinishedSaleOrderPage的方法
        getUnfinishedSaleOrderPage(row, dom) {
       //cell兼容谷歌和火狐 let cell = dom.path ? dom.path[0] : dom.srcElement console.log(row) this.ajax .post('/admin/saleInventory/getUnfinishedSaleOrderPage',this.form) .then(res => { console.log(res) this.tableDataNetWeightSale = res.list
            //popover if (this.netWeightSaleCellt) { const curCellClass = this.netWeightSaleCellt.classList curCellClass.remove('el-popover__reference') this.netWeightSaleCellt = null } this.$nextTick(() => { this.netWeightSaleCellt = cell this.$nextTick(() => { const popover = this.$refs.netWeightSale popover?.doShow() }) }) }) },

html

        <el-popover
            v-if="netWeightSaleCellt"
            :reference="netWeightSaleCellt"
            trigger="click"
            placement="top"
            ref="netWeightSale"
        >
            <el-table :data="tableDataNetWeightSale" size="mini" style="width: 610px" min-height="400">
                <el-table-column
                    prop="customerName"
                    :label="$t('customerPrice.customerName')"
                    width="200"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column prop="netWeight" :label="$t('saleInfo.reserveNum')" width="200" show-overflow-tooltip>
                    <template slot-scope="props">
                        {{ props.row.netWeight + props.row.unit }}
                    </template>
                </el-table-column>
                <el-table-column prop="orderTime" :label="$t('pickList.lastestTime')" width="200" show-overflow-tooltip>
                    <template v-slot="{ row }">
                        {{ row.lastestTime | formatTime }}
                    </template>
                </el-table-column>
            </el-table>
        </el-popover>

效果

标签:const,dom,几种,cell,popper,popover,netWeight,用法,row
来源: https://www.cnblogs.com/lovewhatIlove/p/15807203.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有