uniapp/components/zzlb-mutiselect/zzlb-mutiselect.vue

<template>
  <view class="" style="width: 100%;">
    <view class=" flex flex-wrap">
      <view v-for="(item, index) in items" class="cu-tag bg-cyan radius">
        <slot name="default" v-bind:item="item">{{ item }}</slot>
        <text class="margin-left line-blue cuIcon-close round bg-red" @click="onremove(index)"></text>
      </view>
      <view class="flex ">
        <input style1="width: 60px;" placeholder="输入..." type="text" v-model="query" @input="onshuru" @click="onquery" @keyup="onquery" />
        <text
          v-if="query"
          class=" cuIcon-close "
          @click="
            query = '';
            onquery();
          "
        ></text>
        <text v-if="visible" class="cu-btn sm" @click="onqueren">确认</text>
      </view>
    </view>
    <view v-if="visible" class="fixed bg-white">
      <!-- <view class="flex justify-between ">
        <button class="cu-btn " @click="visible = 0">取消</button>
        <button class="cu-btn " @click="onqueren">确认</button>
      </view> -->
      <picker-view
        class="picker-view"
        @change="e => (pvvalue = mlist[e.detail.value[0]])"
        indicator-style1="height:40px"
        :style1="{ height: (mlist.length > 6 ? 6 : mlist.length / 2) * 34 + 'px' }"
      >
        <picker-view-column>
          <view class="item" v-for="(item, index) in mlist" :key="index">
            <slot name="option" v-bind:item="item">{{ item }}</slot>
          </view>
        </picker-view-column>
      </picker-view>
    </view>
  </view>
</template>
<script>
export default {
  props: {
    url: { type: String, default: '' },
    list: {
      type: Array,
      default: function() {
        return [];
      }
    },
    value: {
      type: Array,
      default: function() {
        return [];
      }
    }
  },
  data() {
    return {
      visible: 0,
      items: [],
      query: '',
      mlist: [],
      pvvalue: []
    };
  },
  computed: {},
  watch: {
    value() {
      this.items = this.value || [];
    }
  },
  methods: {
    onquery() {
      console.log(this.query);
      this.visible = 1;
      this.pvvalue = this.mlist[0];

      if (this.list && this.list.length > 0) {
        const l = this.list.filter(f => f.indexOf(this.query) > -1);
        if (l.indexOf(this.pvvalue) === -1) {
          this.pvvalue = l[0];
        }
        this.mlist = l;
        return;
      }
      this.$http.get(this.url, { params: { title: this.query } }).then(r => {
        r.data.list;
        this.mlist = r.data.list;
        this.pvvalue = this.mlist[0];
      });
    },
    onremove(index) {
      this.items.splice(index, 1);
      this.$emit('input', this.items);
    },
    onshuru() {
      this.visible = 1;
    },
    onqueren() {
      this.visible = 0;
      if (this.pvvalue) this.items.push(this.pvvalue);
      this.$emit('input', this.items);
    }
  }
};
</script>
<style>
.picker-view {
  width: 100%;
  height: 100px;
  /* margin-top: 20rpx; */
}
.item {
  /* height: 50px; */
  align-items: center;
  justify-content: center;
  text-align: center;
}
</style>