06-TDesign元件庫

EUNEIR發表於2024-03-13

TDesign 具有統一的價值觀，一致的設計語言和視覺風格，幫助使用者形成連續、統一的體驗認知。在此基礎上，TDesign 提供了開箱即用的 UI 元件庫、設計指南和相關設計資產，以優雅高效的方式將設計和研發從重複勞動中解放出來，同時方便大家在 TDesign 的基礎上擴充套件，更好的的貼近業務需求。

RDesign是傳智研究院對騰訊的TDesign元件進行了簡易的封裝，可以更快的建立腳手架專案，達到快速開發的目的

安裝腳手架

npm i -g rdesign-starter-cli

建立rdesign專案

rdesign create XXX

選擇template4
cd進入專案，yarn install
npm run dev

RDesign的封裝：

TDesign常用元件

在專案中使用第三方元件，都需要參考元件中提供的文件，每個元件主要包含三部分內容：

程式碼示例：每個元件的核心功能
API文件：描述每一個API的功能和注意事項
設計指南：互動使用建議

入門案例

需求說明：

在建立好的專案中新增路由選單

主選單：許可權管理
子選單：使用者管理和角色管理

在使用者管理選單中新增元件，展示使用者列表。

實現新增路由選單

觀察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>

小程式原生高顏值元件庫--ColorUI元件庫
2019-02-28
元件UI
前端元件庫
2016-12-29
前端元件
元件庫使用BEM
2018-05-06
元件
漫談 React 元件庫開發（二）：元件庫最佳實踐
2019-02-16
React元件
FontAwesome v5.11.2 字型圖示元件庫（Axure元件庫）
2020-12-12
元件
元件庫設計實戰系列：重新設計 React 元件庫
2017-10-23
元件React
Blazor 元件庫 BootstrapBlazor 中Editor元件介紹
2022-04-21
Blazor元件boot
Blazor Bootstrap 元件庫語音元件介紹
2022-04-13
Blazorboot元件
元件庫搭建總結
2021-04-14
元件
搭建 CocosCreator 元件庫
2019-02-02
元件
元件庫的開發
2018-11-30
元件
Weex元件庫-Dialog
2018-12-12
元件
Vue熱門元件庫
2020-11-26
Vue元件
proteus元件庫對照表
2013-05-04
元件
封裝UI元件庫
2024-04-02
封裝UI元件
搭建自己的 vue 元件庫（三）—— npm 上面釋出自己的元件庫
2018-09-07
Vue元件NPM
Autocomplete自動補全元件-HeyUI元件庫
2019-03-02
元件UI
Android快速開發框架，基礎庫，樣式庫，元件化，元件整合
2019-04-15
Android框架元件化
Blazor Bootstrap 元件庫瀏覽器通知元件介紹
2022-04-16
Blazorboot元件瀏覽器
iOS元件化之私有庫
2018-08-30
iOS元件化
dumi 打包元件庫問題
2022-05-23
元件
07-ElementPlus元件庫
2024-03-13
元件
從0搭建Vue3元件庫(三): 元件庫的環境配置
2023-03-03
Vue元件
從0搭建Vue3元件庫(五): 如何使用Vite打包元件庫
2023-03-07
Vue元件Vite
Blazor Bootstrap 元件庫 Toast 輕量彈窗元件介紹
2022-04-17
Blazorboot元件AST
微信小程式 MinUI 元件庫系列之 badge 徽章元件
2018-01-17
微信小程式UI元件
微信小程式 MinUI 元件庫系列之 avatar 頭像元件
2018-01-17
微信小程式UI元件
元件庫設計實戰系列：複雜元件設計
2017-11-07
元件
如何開發React UI元件庫
2019-05-11
ReactUI元件
vuejs元件庫pk介紹
2019-04-16
VueJS元件
你好，布林瑪！(Blazor元件庫)
2021-03-03
Blazor元件
小程式元件庫mangom-we
2019-02-12
元件Go
快速構建vue ui元件庫
2018-09-29
VueUI元件
基於Vue的Qabler元件庫
2018-07-23
Vue元件
WPF控制元件庫總結
2020-11-20
控制元件
如何快速構建React元件庫
2020-10-13
React元件
AD元件庫安裝與使用
2020-10-07
元件
關於移動端元件庫
2020-09-28
元件

06-TDesign元件庫

TDesign常用元件

入門案例

總結

相關文章