wdly-mobile/src/components/common-list.vue

<template>
  <div class="common-list">
    <ul v-if="listData && listData.length>0">
      <li v-for="i in listData" :key="i.id">
        <div class="left-box" style="margin-right: 20px" v-if="isCheckbox">
          <van-checkbox v-model="i.checked" icon-size="15px" shape="square" @change="listCheck"
                        :disabled="optionalValue ? optionalValue != i[optionalKey] : false"></van-checkbox>
        </div>
        <p>

        </p>
        <div class="center-content" style="line-height: 24px" @click="listCk(i)">
          <div v-for="j in config" :key="j.prop" style="display: flex">
            <span style="min-width:80px;">{{ j.label }} <span v-if="j.label">：</span> </span>
            <span v-if="j.type && j.type === 'slot'" style="flex: 1;">
              <slot :name="j.slotName" :row="i">
                {{ j.slotName }}插槽占位符
              </slot>
            </span>
            <span v-else style="flex: 1;" :style="j.style?j.style:{}">
              <span v-if="i[j.prop]!= undefined">{{ i[j.prop] }}</span>
              <span v-else></span>
            </span>
          </div>
        </div>
        <div class="more-box" v-if="showMore" @click="listCk(i)">
          <van-icon name="arrow" />
        </div>
      </li>
    </ul>
  </div>
</template>
<script setup>
import { ref, getCurrentInstance, onMounted, defineProps, watch } from "vue";
const proxy = getCurrentInstance().proxy;
defineProps({
  data: {
    type: Array,
    default: [],
  },
  config: {
    type: Object,
    default: [],
  },
  showMore: {
    type: Boolean,
    default: true,
  },
  isCheckbox: {
    type: Boolean,
    default: false,
  },
  optionalKey: {
    type: String,
    default: null,
  },
});
let listData = ref([]);
let checkList = [];
watch(
  () => proxy.data,
  (newVal) => {
    listData.value = newVal.map((i) => {
      //判断是否有选中的
      if (checkList.length > 0) {
        checkList.map((j) => {
          if (i.id == j.id) {
            i.checked = true;
          }
        });
      }
      return i;
    });
  }
);
const optionalValue = ref(null);
const listCheck = () => {
  checkList = [];
  listData.value.map((i) => {
    if (i.checked) {
      checkList.push(i);
      if (!optionalValue.value) {
        optionalValue.value = i[proxy.optionalKey];
      }
    }
  });
  if (checkList.length == 0) {
    optionalValue.value = null;
  }
  proxy.$emit("onCheck", checkList);
};
const listCk = (item) => {
  proxy.$emit("onClick", item);
};
</script>
<style lang="scss">
.common-list {
  ul {
    margin-top: 10px;
    li {
      list-style: none;
      position: relative;
      display: flex;
      box-sizing: border-box;
      align-items: center;
      justify-content: space-between;
      padding: 12px 16px;
      background: #fff;
      border-bottom: 1px solid #f1f1f1;
      .center-content {
        flex: 1;
      }
      .left-box {
      }
    }
  }
}
</style>