遇到问题:
点击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() {
-
- },
- }
正常显示如下图: