LamboCard 卡片

介绍

LamboCard 是一个卡片组件,主要用于配合LamboListPage，实现卡片列表页面。卡片包含标题，副标题，标记，标签，明细键值展示列表，及底部操作按钮元素，除标题外，其他元素不是必须的。

引入

import Vue from 'vue';
import LamboCard from '@lambo-design-mobile/lambo-card';

Vue.use(LamboCard);

代码演示

示例

<LamboListPage :searchForm="searchForm" :params="params" :showFilter="true" :url="'/ibp-upms-server/manage/demoUser/list'" :useBatch="true"
        listTitle="用户列表" placeholder="请输入用户关键字" :autoSearch="true" >
        <template #filter>
            <van-field
                v-model="searchForm.userId"
                label="用户帐号"
                placeholder="请输入用户帐号"
                :rules="[{ required: true}]"
            />
            <van-field
                v-model="searchForm.userName" 
                label="用户名称"
                placeholder="请输入用户名称"
                :rules="[{ required: false, }]"
            />
        </template>
            
        <template #row="{ item, isBatching, reload }">
            <LamboCard :title="item.userName" :subTitle="item.userId" :mark="item.status" :tag="tag"  :detail='[
                {"label":"编码编码","value":item.organId},
                {"label":"帐号状态","value":item.status},
                {"label":"用户邮箱","value":item.userEmail},
                {"label":"手机号码","value":item.userPhone},
                {"label":"性别","value":item.userSex}
                ]'>
                <van-button v-if="!isBatching" plain color="#0e78ff" size="small" style="margin-left: 10px;border-radius: 5px;padding:0 10px" @click="delItem(item,reload)">删除</van-button>
            </LamboCard>
        </template>
       <template #batch="{ itemCheckList ,reload }">
            <van-button icon="passed"  plain color="#0e78ff" size="small" style="margin-left: 10px;" @click="auditItem(itemCheckList,reload)">启用</van-button>
            <van-button icon="warning-o" plain color="#0e78ff" size="small" style="margin-left: 10px;" @click="denyItem(itemCheckList,reload)">禁用</van-button>
       </template>
         
    </LamboListPage>

    import { Toast } from 'vant';
    import LamboListPage from '@lambo-design-mobile/lambo-list-page';
    import LamboCard from '../src/card.vue';

    export default {
        components:{
            LamboListPage,
            LamboCard
        },
        data(){
            return {
                params: { paraSearch: '' },
                searchForm:{
                    "userId": "",
                    "userName": "",
                },
                tag:["标签一","标签二"],
            }
        },
        methods:{
            delItem(itemCheckList,reload){
                console.log('stopItem',itemCheckList);
                Toast.success('删除成功');
                reload();
            },
            auditItem(itemCheckList,reload){
                console.log('stopItem',itemCheckList);
                Toast.success('批量审核成功');
                reload();
            },
            denyItem(itemCheckList,reload){
                console.log('stopItem',itemCheckList);
                Toast.success('批量驳回成功');
                reload();
            },
        }
    }

API

Props

| 参数 | 说明 | 类型 | 默认值 | 版本 | |------|------|------|------|------| | title | 标题 | string | | - | | mark | 标题行右侧文字 | string | - | | | subTitle | 副标题 | string | - | | | tag | 标签 | array | - | | | detail | 对象属性明细列表 | array | - | | | leftWidth | 左侧列宽，取值范围1-24 | number | 12 | |

Slots

| 名称 | 说明 | |------|-----------------------------| | default | 用于渲染卡片底部按钮行|