H5_单选/多选下拉框

1、效果图（单选、多选）

2、实现多选下拉框步骤

① 使用插件：下拉多选，完全仿照微信原生效果，简单美观可扩展，可在线体验 - DCloud 插件市场

② 下载插件并导入HBuilderX

3、单选/多选，完整代码

<template>
  <view class="content">
    <u-form :model="form" ref="uForm" label-width="auto">
      <u-form-item
        label="下列哪个选项是中国的首都？(单选)"
        prop="createdDate"
        :required="true"
        :border-bottom="false"
      >
        <u-select
          v-model="showDate"
          mode="single-column"
          :list="createdDateList"
          @confirm="createdDateFn"
        ></u-select>
        <u-button
          :hair-line="false"
          :plain="true"
          :custom-style="textButtonStyle"
          @click="showDate = true"
        >
          当前选择：{{ form.createdDate ? createdDateVal : "请选择" }}
        </u-button>
      </u-form-item>
      <view
        v-if="this.createdDateVal != '' && this.createdDateVal != 'C'"
        style="color: green"
      >
        正确答案：C
      </view>

      <u-form-item
        label="以下哪些城市属于中国的直辖市？(多选)"
        prop="culture"
        :required="true"
        :border-bottom="false"
      >
        <u-button
          :hair-line="false"
          :plain="true"
          :custom-style="textButtonStyle"
          :class="['select', form.culture ? 'selected' : '']"
          @tap="handleMultiple(selectIndex)"
        >
          当前选择：{{ form.culture ? cultureVal : "请选择" }}
        </u-button>
        <multiple-picker
          title="请选择"
          :show="selectMultiple.show"
          :columns="selectMultiple.columns"
          :defaultIndex="selectMultiple.index"
          @confirm="confirmMultiple"
          @cancel="selectMultiple.show = false"
          @change="changeMultiple"
        ></multiple-picker>
      </u-form-item>
      <view
        v-if="this.cultureVal != '' && this.cultureVal != 'A,B,D'"
        style="color: green"
      >
        正确答案：ABD
      </view>
    </u-form>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        createdDate: "",
        culture: "",
      },
      createdDateVal: "",
      showDate: false,
      cultureVal: "",
      selectIndex: [],
      createdDateList: [
        { label: "A、上海", value: "A" },
        { label: "B、广州", value: "B" },
        { label: "C、北京", value: "C" },
        { label: "D、深圳", value: "D" },
      ],
      selectMultiple: {
        show: false,
        index: [],
        columns: [
          { label: "A、北京", value: "A" },
          { label: "B、上海", value: "B" },
          { label: "C、广州", value: "C" },
          { label: "D、重庆", value: "D" },
        ],
      },
      textButtonStyle: {
        backgroundColor: "transparent", // 透明背景
        border: "none", // 无边框
        color: "#2979ff", // 文字颜色
        padding: "0", // 去除内边距
        margin: "0", // 去除外边距
        fontSize: "14px", // 文字大小
        height: "auto", // 高度自适应
        lineHeight: "1.5", // 行高
      },
    };
  },
  onLoad() {},
  methods: {
    createdDateFn(val) {
      this.form.createdDate = val[0].label;
      this.createdDateVal = val[0].value;
    },
    handleMultiple(val) {
      this.selectMultiple.index = val || [];
      this.selectMultiple.show = true;
    },
    confirmMultiple(e) {
      let temp = [];
      e.selected.forEach((item) => {
        temp.push(item.label);
      });
      this.form.culture = temp.toString();
      this.selectIndex = e.value;
      this.cultureVal = e.value.toString();
      this.selectMultiple.show = false;
    },
    changeMultiple(e) {},
  },
};
</script>

<style lang="scss">
/deep/ .u-form-item__body {
  display: block;
}
</style>

4、注意事项

① 插件colums中的key值是label和value，如果项目中数据的key值和插件不一致，需要在获取到数据后替换key值；

② 若label值内容过多，会显示省略号，内容显示不全，可以修改样式；

/deep/ .selectMultiple .multipleBody .list .item span {
  overflow: visible !important;
  display: block !important;
}