更新记录

1.0.0（2023-06-20） 下载此版本

初始化

平台兼容性

x-menu-card

参数配置

<template>
  <view class="XMenuCard">
    <x-menu-card :list="list"
                 imgTheme="round"
                 title="titletitletitletitletitletitletitletitletitletitletitletitletitle"
                 :customCount="true"
                 @click="handleClick">
      <template v-slot:count="{item}">
        <view class="sign" @click.stop="() => {}">
          <u-checkbox
            shape="circle"
            :name="item.name"
            v-model="item.checked"
          ></u-checkbox>
        </view>
      </template>
    </x-menu-card>
    <x-menu-card :list="list1"
                 :row-count="5"
                 title="title"
                 @click="handleClick1">
    </x-menu-card>
    <view class="margin-none">
      <x-menu-card :list="list1"
                   title="title"
                   :row-count="6"
                   @click="handleClick1">
      </x-menu-card>
    </view>
  </view>
</template>

<script>
import XMenuCard from '../uni_modules/x-menu-card/components/x-menu-card';
export default {
  components: {XMenuCard},
  data() {
    return {
      list: [
        {
          name: '物料信息',
          imgUrl: require('@/static/logo.png'),
          count: '1',
          checked: false
        },
        {
          name: '合同信息',
          imgUrl: require('@/static/logo.png'),
          count: '999',
          checked: false
        },
        {
          name: '绩效考核',
          imgUrl: require('@/static/logo.png'),
          checked: false
        },
        {
          name: '数据仪表盘',
          imgUrl: require('@/static/logo.png'),
          show: false,
          checked: false
        },
        {
          name: '年费结算',
          imgUrl: require('@/static/logo.png'),
          checked: false
        },
        {
          name: '设备维修',
          imgUrl: require('@/static/logo.png'),
          checked: false
        }
      ],
      list1: [
        {
          name: '物料信息物料信息',
          imgUrl: require('@/static/logo.png'),
          count: '1'
        },
        {
          name: '合同信息',
          imgUrl: require('@/static/logo.png'),
          count: '999'
        },
        {
          name: '绩效考核',
          imgUrl: require('@/static/logo.png')
        },
        {
          name: '数据仪表盘',
          imgUrl: require('@/static/logo.png')
        },
        {
          name: '年费结算',
          imgUrl: require('@/static/logo.png')
        },
        {
          name: '设备维修',
          imgUrl: require('@/static/logo.png')
        }
      ]
    }
  },
  methods: {
    handleClick1({item, index}) {},
    handleClick({item, index}) {
      this.list = this.list.map((d, i) => {
        if (item.name === d.name) {
          d.checked = !d.checked;
        }
        return d;
      })
    }
  }
}
</script>

<style scoped lang="scss">
  .XMenuCard{
    background: #ccc;
  }
  .sign{
    position: absolute;
    right: -16rpx;
    top: -20rpx;
    z-index: 9;
    text-align: center;

    ::v-deep .u-checkbox__label{
      display: none;
    }
  }

  .margin-none{
    margin-top: 20rpx;

    ::v-deep .index-wrapper{
      margin: 0;
      box-shadow: none;
      border-radius: unset;
    }
  }
</style>