vant用在移动端的小项目还是挺合适的,但也有一些不符合需求的地方,比如它的picker选择器有个问题,就是没有搜索功能。
其实或许可以自己组合:比如把picker与IndexBar 索引栏结合起来,或者把picker与search搜索功能组合。
我用的是第二种方法:在picker上面加个搜索框,不过我用的van-field。
- 首先页面上的选择框其实是个vant-field,点击该vant-field就显示popup
<van-field
v-model="data.nation"
right-icon="arrow"
:readonly="true"
placeholder="国家"
class="m-b-32 border-radius-22 min-height-100"
@click="data.isNationSelectShown = true"
/>
- poup中 放一个vant-field 和一个 picker。关于国家至少需要两个变量:一个用来存放所有国家,一个用来存放筛选出来的国家
<!-- 选择国家的弹框 -->
<van-popup
v-model:show="data.isNationSelectShown"
position="bottom"
round
class="popup-container-style"
>
<van-field
placeholder="在这里查询国家"
v-model="data.keyWord"
left-icon="search"
@update:model-value="handleSearchNations(data.keyWord)"
/>
<van-picker
:columns="data.columns"
:confirm-button-text="$t('confirm')"
:cancel-button-text="$t('cancel')"
:columns-field-names="columnsFieldNames"
@cancel="handleCancel"
@confirm="onConfirm"
/>
</van-popup>
- 监听2中的vant-field的变化,来过滤picker的数据源:全部国家的数组不能动
const data: any = reactive({
isNationSelectShown: false, // 筛选下拉框的选择
keyWord: "", // 搜索国家的关键字
isNotifyShow: false,
nation: "",
nationValue: "",
allNations: [], // 全部的国家
columns: [], // 用于下拉框的数据
isBottomshow: true, //显示或者隐藏footer
});
// 检索国家
const handleSearchNations = (keyWord: string) => {
const t: any = [];
data.allNations.forEach((item: any) => {
if (item.name.indexOf(keyWord) > -1) {
t.push(item);
}
});
data.columns = t;
};
- 点击确定的时候给1中的vant-field(也就是主页面上的输入框)赋值。别忘了确定按钮的时候赋值,是否情况筛选可以自行决定,包括取消的时候
// 选择国家点击确认
const onConfirm = ({ selectedValues, selectedOptions }) => {
// console.log("确认---selectedOptions");
// console.log(selectedValues);
// console.log(selectedOptions);
data.isNationSelectShown = false;
data.isNationSelectShown = false;
data.keyWord = "";
data.columns = data.allNations;
showPicker.value = false;
data.nation = selectedOptions[0].name;
localStorage.set("locale", selectedOptions[0].code);
data.nationValue = selectedOptions[0].code;
};
// 选择国家点击取消
const handleCancel = () => {
data.isNationSelectShown = false;
data.keyWord = "";
data.columns = data.allNations;
};
以上是其中一种解决方案,希望本文对您有所帮助!
也希望有大佬不吝赐教。