uni-app——uniapp 中实现 可输入下拉选择框

使用 uniapp 扩展组件 uni-combox

uni-combox 之 uni-app 官网

<template>
  <view
    ><uni-combox
      :candidates="candidates"
      placeholder="请选择所在城市"
      v-model="city"
      @input="comboxInput"
    ></uni-combox>
    <view class="result-box">
      <text>所选城市为：{{ city }}</text>
    </view></view
  >
</template>

<script>
export default {
  data() {
    return {
      candidates: ["北京", "南京", "东京", "武汉", "天津", "上海", "海口"],
      city: "",
    };
  },
  methods: {
    // @input	combox输入事件	返回combox值
    comboxInput(e) {
      console.log("当前输入的值：", e);
    },
  },
};
</script>

<style lang="scss" scoped>
.result-box {
  text-align: center;
  padding: 20px 0px;
  font-size: 16px;
}
</style>

效果：