TDesign 具有统一的价值观,一致的设计语言和视觉风格,帮助用户形成连续、统一的体验认知。在此基础上,TDesign 提供了开箱即用的 UI 组件库、设计指南 和相关 设计资产,以优雅高效的方式将设计和研发从重复劳动中解放出来,同时方便大家在 TDesign 的基础上扩展,更好的的贴近业务需求。

  • RDesign是传智研究院对腾讯的TDesign组件进行了简易的封装,可以更快的创建脚手架项目,达到快速开发的目的
  1. 安装脚手架
npm i -g rdesign-starter-cli
  1. 创建rdesign项目
rdesign create XXX
  1. 选择template4
  2. cd进入项目,yarn install
  3. npm run dev

RDesign的封装:

TDesign常用组件

在项目中使用第三方组件,都需要参考组件中提供的文档,每个组件主要包含三部分内容:

  • 代码示例:每个组件的核心功能
  • API文档:描述每一个API的功能和注意事项
  • 设计指南:交互使用建议

入门案例

需求说明:

  • 在创建好的项目中新增路由菜单
  1. 主菜单:权限管理
  2. 子菜单:用户管理和角色管理
  • 在用户管理菜单中新增组件,展示用户列表。

实现新增路由菜单

观察router结构:

自定义路由实际上是放在了modules文件夹下,自定义路由:

mport Layout from '@/layouts/index.vue'  
import GrzxIcon from '@/assets/test-img/icon_menu_grzx.svg'  
import HomeIcon from '@/assets/test-img/icon_menu_diaodu.svg'  
import ModelIcon from '@/assets/test-img/icon_menu_zj.svg'  
  
export default [  
  {  
    path: '/permission',  
    name: 'permission',  
    component: Layout,  
    redirect: '/permission/index',  
    meta: {  
      title: '权限管理',  
      icon: HomeIcon  
    },  
    children: [  
      {  
        path: 'index',  
        name: 'index',  
        component: () => import('@/pages/permission/user/index.vue'),  
        meta: {  
          title: '用户管理',  
          icon: ModelIcon  
        }  
      },  
      {  
        path: 'role',  
        name: 'role',  
        component: () => import('@/pages/permission/role/index.vue'),  
        meta: {  
          title: '角色管理',  
          icon: GrzxIcon  
        }  
      }  
    ]  
  }  
]

主菜单项就是父路由,子菜单项就是子路由,注意子路由的path不加 /

实现用户管理菜单中展示用户列表

TDesign提供的表格:

<h1>用户管理</h1>  
  
<t-space direction="vertical">  
  <!-- 当数据为空需要占位时,会显示 cellEmptyContent -->  <t-table  
    row-key="index"  
    :data="data"  
    :columns="columns"  
    :pagination="pagination"  
    cell-empty-content="-"  
    resizable  
    lazy-load  >  
  </t-table>  
</t-space>

表头由columns指定,表格中数据由data指定。

const data = [  
  {  
    "id": 1,  
    "name": "谢逊",  
    "image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/web/1.jpg",  
    "gender": 1,  
    "job": "班主任",  
    "entrydate": "2023-06-09",  
    "updatetime": "2023-07-01 00:00:00"  
  },  
  {  
    "id": 2,  
    "name": "韦一笑",  
    "image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/web/2.jpg",  
    "gender": 1,  
    "job": "班主任",  
    "entrydate": "2023-06-09",  
    "updatetime": "2023-07-01 00:00:00"  
  }];  
  
const columns = ref([  
  { colKey: 'rowIndex', title: '序号', width: '100' },  
  { colKey: 'name', title: '名称' },  
  { colKey: 'image', title: '图片', ellipsis: true },  
  { colKey: 'gender', title: '性别' },  
  { colKey: 'job', title: '职位' },  
  { colKey: 'entrydate', title: '入职日期' },  
  { colKey: 'updatetime', title: '更新时间' },  
]);

重点是如何在表格中展示序号如何实现图片预览性别处理

使用ImageViewer实现图片预览:


<div>
    <div class="tdesign-demo-image-viewer__base">
      <t-image-viewer :images="[img]">
        <template #trigger="{ open }">
          <div class="tdesign-demo-image-viewer__ui-image">
            <img alt="test" :src="img" class="tdesign-demo-image-viewer__ui-image--img" />
            <div class="tdesign-demo-image-viewer__ui-image--hover" @click="open">
              <span><BrowseIcon size="1.4em" /> 预览</span>
            </div>
          </div>
        </template>
      </t-image-viewer>
    </div>
  </div>

images和img是动态的值,需要将这部分内容放在table标签内部

<t-table  
  row-key="index"  
  :data="data"  
  :columns="columns"  
  :pagination="pagination"  
  cell-empty-content="-"  
  resizable  
  lazy-load>  
  
  <!--处理图片-->  
  <template #image="{row}"><!--row代表一行内容-->  
    <div>  
      <div class="tdesign-demo-image-viewer__base">  
  
        <t-image-viewer :images="[row.image]"><!--动态数据-->  
          <template #trigger="{ open }">  
            <div class="tdesign-demo-image-viewer__ui-image">  
              <img alt="test" :src="row.image" class="tdesign-demo-image-viewer__ui-image--img" /> <!--动态数据-->  
              <div class="tdesign-demo-image-viewer__ui-image--hover" @click="open">  
                <span><BrowseIcon size="1.4em" /> 预览</span>  
              </div>  
            </div>  
          </template>  
        </t-image-viewer>  
      </div>  
    </div>  
  </template>  
</t-table>

#image 就是表格中需要自定义内容的列,row就是这一行数据

实现序号:

<template>  
  <h1>用户管理</h1>  
  
  <t-space direction="vertical">  
    <!-- 当数据为空需要占位时,会显示 cellEmptyContent -->    <t-table  
      row-key="index"  
      :data="data"  
      :columns="columns"  
      :pagination="pagination"  
      cell-empty-content="-"  
      resizable  
      lazy-load    >  
  
      <!--处理序号-->  
      <template #rowIndex="{rowIndex}">{{rowIndex + 1}}</template>  
      <!--处理图片-->  
      <template #image="{row}"><!--row代表一行内容-->  
        <div>  
          <div class="tdesign-demo-image-viewer__base">  
  
            <t-image-viewer :images="[row.image]"><!--动态数据-->  
              <template #trigger="{ open }">  
                <div class="tdesign-demo-image-viewer__ui-image">  
                  <img alt="test" :src="row.image" class="tdesign-demo-image-viewer__ui-image--img" /> <!--动态数据-->  
                  <div class="tdesign-demo-image-viewer__ui-image--hover" @click="open">  
                    <span><BrowseIcon size="1.4em" /> 预览</span>  
                  </div>  
                </div>  
              </template>  
            </t-image-viewer>  
          </div>  
        </div>  
      </template>  
    </t-table>  
  </t-space>  
</template>

性别处理:

<template>  
  <h1>用户管理</h1>  
  
  <t-space direction="vertical">  
    <!-- 当数据为空需要占位时,会显示 cellEmptyContent -->    <t-table  
      row-key="index"  
      :data="data"  
      :columns="columns"  
      :pagination="pagination"  
      cell-empty-content="-"  
      resizable  
      lazy-load    >  
  
      <!--处理序号-->  
      <template #rowIndex="{rowIndex}">{{rowIndex + 1}}</template>  
      <!--处理图片-->  
      <template #image="{row}"><!--row代表一行内容-->  
        <div>  
          <div class="tdesign-demo-image-viewer__base">  
  
            <t-image-viewer :images="[row.image]"><!--动态数据-->  
              <template #trigger="{ open }">  
                <div class="tdesign-demo-image-viewer__ui-image">  
                  <img alt="test" :src="row.image" class="tdesign-demo-image-viewer__ui-image--img" /> <!--动态数据-->  
                  <div class="tdesign-demo-image-viewer__ui-image--hover" @click="open">  
                    <span><BrowseIcon size="1.4em" /> 预览</span>  
                  </div>  
                </div>  
              </template>  
            </t-image-viewer>  
          </div>  
        </div>  
      </template>  
      <!--处理性别-->  
      <template #gender="{row}">  
        {{row.gender === 1 ? '男' : '女'}}  
      </template>  
    </t-table>  
  </t-space>  
</template>

总结

重点:自定义列模板

<template #colName={row}>

</template>