Tui基础组件文档库

# 安装&使用

提示

@wocwin/t-ui 是基于 vue2 + Element-ui 二次封装的基础组件

# 安装

npm install @wocwin/t-ui -S
&
yarn add @wocwin/t-ui -S

# npm 方式安装使用

# 前提条件：使用项目必须全局注册 Element-ui组件库

// 先安装
npm i @wocwin/t-ui
// 1、 在main.js中按下引入(全局使用)
import Tui from '@wocwin/t-ui'
Vue.use(Tui)

// 2、按需引入，在单个vue文件如下引入，在注册；或者在main.js中如下引入在注册，皆可！
import { TTable, TLayoutPage, TLayoutPageItem, TForm, TQueryCondition } from '@wocwin/t-ui'

# Copy packages文件夹在项目中全局使用

// 1、把packages文件夹复制，放在自己项目中
// 2、假设 packages 与 src是同级，那么src下 main.js 如下操作即可全局使用t-ui
import Tui from '../packages'
Vue.use(Tui)

# 浏览器直接引入使用（Use CDN in Project）(v1.3.0支持)--建议使用npm安装使用

<head>
  <!-- Import elemtn-ui style -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app">
    <t-select
      placeholder="请选择工序"
      v-model="selectVlaue"
      :option-source="stepList"
      value-key="label"
      style="width: 200px;"
      @change="selectChange"
    ></t-select>
  </div>
  <!-- Import Vue  -->
  <script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>
  <!-- Import elemtn-ui -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <!-- 引入t-ui的组件库 -->
  <script src="https://unpkg.com/@wocwin/t-ui@latest"></script>
</body>
<script>
   new Vue({
    el: '#app',
    data() {
      return {
        selectVlaue: null,
        stepList: [
          { label: '开始', id: 1 },
          { label: 'POSUI', id: 2 },
          { label: '11', id: 3 },
          { label: 'GX123', id: 4 },
          { label: '烘干破碎', id: 5 },
          { label: '车间仓库', id: 6 },
          { label: 'ui3333', id: 7 },
          { label: 'hhh333', id: 8 }]
      }
    },
    methods: {
      // 复选框
      selectChange(val) {
        console.log('selectChange', val, this.selectVlaue)
      }
    }
  })
</script>

# 全部组件如下

组件名称 说明
TLayoutPage 布局页面
TLayoutPageItem 布局页面子项
TAdaptivePage 一屏组件 (opens new window)（继承TTable 及 TQueryCondition 组件的所有属性、事件、插槽、方法）
TQueryCondition 条件查询组件 (opens new window)
TTable 表格组件 (opens new window)
TForm 表单组件 (opens new window)
TSelectTable 下拉选择表格组件 (opens new window)
TSelect 下拉选择组件 (opens new window)
TDetail 详情组件 (opens new window)
TButton 防抖按钮组件 (opens new window)
TStepWizard 步骤条组件 (opens new window)
TTimerBtn 定时按钮组件
TModuleForm 模块表单/详情组件 (opens new window)
TDatePicker 日期选择器组件 (opens new window)
TInput input组件 (opens new window)
TDialog 弹窗组件 (opens new window)
TTreeSelect 下拉树形结构组件 (opens new window)

# Git 提交规范

ci: ci 配置文件和脚本的变动;
chore: 构建系统或辅助工具的变动;
fix: 代码 BUG 修复;
feat: 新功能;
perf: 性能优化和提升;
refactor: 仅仅是代码变动，既不是修复 BUG 也不是引入新功能;
style: 代码格式调整，可能是空格、分号、缩进等等;
docs: 文档变动;
test: 补充缺失的测试用例或者修正现有的测试用例;
revert: 回滚操作;

# Vue2 基于ant-design-vue封装基础组件地址 (opens new window)

基于 ant-design-vue 二次封装基础组件地址

# Vue3 基础组件地址 (opens new window)

基于 Element-plus 二次封装基础组件地址