van-popup app 选人或 滚动列表单选 滚动选人

 

<template>
  <div>
    <van-popup
      v-model="isShowEnd"
      position="bottom"
      get-container="body"
      :style="{ height: height ? height : '50%' }"
      closeable
      round
    >
      <div class="pop-box">
        <div class="pop-head">
          <div class="f16 fb tc p10">确认签字人员</div>
          <van-search
            v-model="searchText"
            placeholder="请输入搜索关键词"
            @search="searchFn"
            class="w"
          />
        </div>
        <div class="pl10 pr10 pop-content">
          <div class="pb20">
            <div
              class="flexa pl10 pt5 pb5 mt10 bgf bdr5"
              v-for="(item, index) in listCopy"
              :key="index"
              @click="confirmFn(item)"
            >
              <div class="list-item-lf bxs bgcm0">
                <div class="wh flexca">
                  <van-icon style="font-size: 20px" name="manager" />
                </div>
              </div>
              <div class="ml10 f12" style="flex: 1">
                <div>
                  {{ item[labelStr] }}

                  <span class="cor9">({{ item.userName || item.value }})</span>
                </div>
                <div class="cor9">{{ item.ext1 }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>
 
<script>
export default {
  name: "SelectOnlyPerson",
  // 传入子组件的参数写到props
  props: {
    isShow: {
      type: Boolean,
      default: false,
    },

    // 展示全的提示
    placeAll: {
      type: Boolean,
      default: false,
    },
    placeholder: {
      type: String,
      default: "",
    },
    model: [String, Number, Array],
    type: String, //字典类型，字典下拉组件私用
    name: String, //参数名称
    height: String, //高度
    //是否查看状态
    see: {
      type: Boolean,
      default: true,
    },
    multiple: {
      type: Boolean,
      default: false,
    }, //true 多选

    // 是否可以清除
    clearable: {
      type: Boolean,
      default: true,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    outerList: Array,
    keyStr: {
      type: String,
      default: "id",
    },
    labelStr: {
      type: String,
      default: "label",
    },
    selectName: String,
    // 是否外部参数
    showType: {
      type: Number,
      default: 1,
    }, //1 默认下拉，2 vant下拉组件
  },
  data() {
    return {
      modelEnd: null,
      list: [],
      listCopy: [], //普通下拉
      selet: undefined, //选择的对象或数组
      selectNameEnd: "", //选中的名称

      searchText: "", //搜索关键词
      defaultIndex: null,
      isShowEnd: false,
    };
  },
  watch: {
    model: {
      handler(val) {
        this.modelEnd = val;
      },
      deep: true,
    },
    selectName: {
      handler(val) {
        this.selectNameEnd = val;
      },
      deep: true,
    },
    isShow: {
      handler(val) {
        console.log("shshs");
        this.isShowEnd = val;
      },
      deep: true,
    },
    isShowEnd: {
      handler(val) {
        console.log("1111");
        this.$emit("update:isShow", val);
      },
      deep: true,
    },
  },
  created() {
    this.isShowEnd = this.isShow;
    if (this.selectName) {
      this.selectNameEnd = this.selectName;
    }
    this.modelEnd = this.model;
    // 外部下拉数据
    this.list = this.outerList;
    this.listCopy = [...this.list];
  },
  methods: {
    // 下拉数据改变
    confirmFn(obj) {
      this.$emit("confirm", { value: [obj[this.keyStr]], selects: [obj] });
    },
    // 搜索
    searchFn(val) {
      if (val)
        this.listCopy = this.list.filter((item) =>
          item[this.labelStr].includes(val)
        );
      else this.listCopy = [...this.list];
    },

    selectBackFn(obj) {
      if (obj.selects.length > 0) {
        this.selet = { ...obj.selects[0] };
        this.selectNameEnd = obj.selects[0][this.labelStr];
        this.$emit("update:model", obj.value[0]);
        this.$emit("update:selectName", this.selectNameEnd);
      } else {
        this.selet = undefined;
        this.selectNameEnd = "";
        this.$emit("update:model", "");
        this.$emit("update:selectName", "");
      }
    },
  },
};
</script>
<style scoped  lang="scss" >
.pop-box {
  position: relative;
  height: 100%;
  padding-top: 100px;
  overflow-y: hidden;
  box-sizing: border-box;
}
.pop-content {
  height: 100%;
  background-color: #f5f6f8;
  overflow-y: auto;
  //   height: calc(100% - 50px);
}
.pop-head {
  width: 100%;
  height: 100px;
  position: absolute;
  left: 0;
  top: 0;
}
.van-popup {
  overflow-y: unset !important;
}

.list-item-lf {
  width: 40px;
  height: 40px;
  border-radius: 5px;
}
.input-text {
  width: 50px;
  margin: 2px 3px;
  background-color: #f0f0f1;
  padding: 3px 10px;
  border: 0;
  border-radius: 3px;
}
.checkbox-text {
  margin: 0px 3px;
}
</style>