遇到问题:
点击Popup弹框关闭按钮,弹框的遮罩不能正常关闭,如下图。经研究,排除了popup属性问题,最后只能删除代码排除法。
<!--弹框:选号-->
<van-popup
v-model="showNumber"
closeable
round
position="bottom"
:style="{ height: '73%' }"
:close-on-click-overlay="false"
>
<div class="popupBox">
<van-search
v-model="value"
show-action
placeholder="搜索关键词"
@search="onSearch"
>
<template #action>
<div @click="onSearch" class="btn_search">搜索</div>
</template>
</van-search>
<div class="number">
<ul>
<li class="active">18888888888</li>
<li>18888888888</li>
....
</ul>
</div>
<div class="refresh">
<van-icon name="replay" /><sapn>换一批</sapn>
</div>
<div class="selected">选中号码:13277705857</div>
<div class="bom_btn">
<van-button round size="large">立即购买</van-button>
</div>
</div>
</van-popup>
解决:
原因是搜索框的事件未定义,去掉@search="onSearch"和@search="onSearch"即可。
<van-search
v-model="value"
show-action
placeholder="搜索关键词"
@search="onSearch"
>
<template #action>
<div @click="onSearch" class="btn_search">搜索</div>
</template>
</van-search>
或者在js里定义方法onSearch
methods: {
onSearch() {
},
}
正常显示如下图: