输入框点击出现下拉框。下拉框点击不隐藏下拉框同时出现详情弹窗

需求:

实现如下图输入框点击出现下拉框。下拉框点击不隐藏下拉框同时出现详情弹窗_第1张图片

分析:

1.下拉框带搜索,一般情况下使用el-select组件完成,该需求存在的问题是点击选项,不能隐藏下拉框,同时显示详情信息。使用el-select未找到能够实现下拉框不隐藏的方法,因此弃用el-select。
2.抛去搜索下拉框,这个样式很符合el-popover的情况。尝试使用el-popover

实现过程:

方法1
初步思路:
popover1,template是el-input,内容是一个列表循环出的template为p标签的popover2。popover2的内容就是详情。这样就实现了,点击输入框,显示popover1。点击p——popover2的template,就显示了popover2的内容——详情。
适用范围: 选项不多,此写法简单,代码逻辑顺畅。
缺点: 在选项很多的情况下,那么有多少个选项,就会有多少个popover2。就会让页面卡顿,页面元素如下图:
输入框点击出现下拉框。下拉框点击不隐藏下拉框同时出现详情弹窗_第2张图片

代码如下:

<el-popover placement="bottom" :show-arrow="false" :width="200" :offset="0" trigger="click" popper-class="xxx">
              <template #reference>
                <el-input v-model="xxx" placeholder="xxx" />
              </template>
              <div class="xxx">
                <el-popover
                  popper-class="xxx"
                  placement="right-start"
                  trigger="click"
                  ref="popoverRef"
                  :show-arrow="false"
                  :width="312"
                  :offset="0"
                   v-for="item in xxx"
                >
                  <template #reference>
                    <p class="xxx">{{ item.zhenshixingming }}</p>
                  </template>
                  <p class="itemTitle">详细信息</p>
                  <p>
                    <span class="detailLabel">真实姓名</span>
                    <span class="detailInfo" style="margin-right: 40px;">{{ item.zhenshixingming }}</span>
                  </p>
                  <p>
                    <span class="detailLabel">员工编号</span>
                    <span class="detailInfo">{{ item.yuangongbianhao }}</span>
                  </p>
                  <p>
                    <span class="detailLabel">手机号码</span>
                    <span class="detailInfo">{{ item.shoujihaoma }}</span>
                  </p>
                  <div class="alert" v-if="xxx">
                    <img src="xxx" align="left" />
                    xxxxxxx
                  </div>
                  <el-button type="primary" size="small" style="float: right;" @click="clickBtn">确认</el-button>
                </el-popover>
              </div>
            </el-popover>

备注: 通过popoverRef.value或el-popover源码可知,popover的显/隐对应方法是show() / hide(),(element-ui应该是doShow() / doHide())。因为确认按钮在popover中,所以点击后popover不会主动隐藏,需要执行popoverRef.value.hide()隐藏。

方法2
初步思路:
方法1的问题是popover2过多,其实popover2作用只是显示一个详情弹窗,且同时只显示1个,那么1个popover,通过传值显示不同信息,就可以达到效果。只有1个popover2,那这个popover2就不能是选项的 -> 就不能通过点击p来触发显示 -> 需要一个元素的动作来触发显示 ==> 使用el-popover的“虚拟出发” -> 所需的触发元素使用el-input(https://element-plus.gitee.io/zh-CN/component/popover.html#%E8%99%9A%E6%8B%9F%E8%A7%A6%E5%8F%91)
适用范围: 选项数据很多。
缺点: 代码逻辑没有方法1那么简单
代码如下:

<el-popover placement="bottom" :show-arrow="false" :width="200" :offset="0" trigger="click" popper-class="xxx">
              <template #reference>
                <el-input v-model="xxx" placeholder="xxx" ref="inputRef" />
              </template>
              <div class="xxx">
                <p class="xxx" v-for="item in xxx" @click="() => clickP(item.id)">{{ item.zhenshixingming }}</p>
              </div>
            </el-popover>
            <el-popover
              popper-class="xxx"
              placement="right-start"
              :show-arrow="false"
              :width="312"
              :offset="0"
              ref="popoverRef"
              :virtual-ref="inputRef"
            >
              <template #reference><p></p></template>
              <p class="itemTitle">详细信息</p>
              <p>
                <span class="detailLabel">真实姓名</span>
                <span class="detailInfo" style="margin-right: 40px;">{{ detailInfo.zhenshixingming }}</span>
              </p>
              <p>
                <span class="detailLabel">员工编号</span>
                <span class="detailInfo">{{ detailInfo.yuangongbianhao }}</span>
              </p>
              <p>
                <span class="detailLabel">手机号码</span>
                <span class="detailInfo">{{ detailInfo.shoujihaoma }}</span>
              </p>
              <div class="alert" v-if="xxx">
                <img src="xxx" align="left" />
                xxxxxxx
              </div>
              <el-button type="primary" size="small" style="float: right;" @click="clickBtn">确认</el-button>
            </el-popover>

备注: 通过popoverRef.value或el-popover源码可知,popover的显/隐对应方法是show() / hide(),(element-ui应该是doShow() / doHide())。
1.在clickP方法中要给detalInfo赋值,且执行popoverRef.value.show()显示详情。
2.因为确认按钮在popover中,所以点击后popover不会主动隐藏,需要执行popoverRef.value.hide()隐藏。

你可能感兴趣的:(学习笔记,vue.js)