# futuret-ui

**Repository Path**: mr-yichen/futuret-ui

## Basic Information

- **Project Name**: futuret-ui
- **Description**: 一个基于 vue 的 PC 端ui组件库
未来化，不常规的Vue3UI组件(包括但不限于表格、表单、弹窗、按钮等等)
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 0
- **Created**: 2024-08-15
- **Last Updated**: 2024-11-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: UI组件, vue3库, npm

## README

# Futuret-ui

一个基于 vue 的 PC 端 ui 组件库 未来化，不常规的 Vue3UI 组件(包括但不限于表格、表单、弹窗、按钮等等)

# 预览

http://mochen.3vzhuji.cc/vue-futuret-Admin/index.html#/modular_package/table

## 功能点

- 特色表格
- 弹窗
- 多样按钮
- 表单
- ...

## 浏览器支持

| ![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png) |
| ---------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- |
| 80+ ✔                                                                              | 80+ ✔                                                                                    | 90+ ✔                                                                                       | 75+ ✔                                                                                 | 10+ ✔                                                                                    |

## 安装

版本：[vue](https://www.npmjs.com/package/vue) 3.x

```shell
npm install futuret-ui -d
```

### NPM

### 只使用表格

_表格超过 50 行就会触发虚拟化表格支持十万行渲染_

```javascript
// ...
import futuretui from "futuret-ui";
import "futuret-ui/es/style.css";
// ...

createApp(App).use(futuretui).mount("#app");
```

## 示例

```html
<template>
  <div>
    <future-tableTroor ref="xToolbar">
      <template v-slot:buttons>
        <button>提示(10000条数据)</button>
      </template>
      <template v-slot:tools>
        <button>提示(10000条数据)</button>
      </template>
    </future-tableTroor>
    <future-table
      ref="xTable1"
      :data="data"
      :options="options"
      :rowCofig="{
      highlight: false
    }"
      ids="id"
      height="70vh"
    >
      <template v-slot:caozuo>
        <button>编辑</button>
        <button>添加</button>
      </template>
    </future-table>
  </div>
</template>

<script lang="ts" setup>
  import { ref, nextTick, onMounted, provide } from "vue";
  const xTable1: Ref<any | null | undefined> = ref();
  const xToolbar: Ref<any | null | undefined> = ref();
  nextTick(() => {
    setTimeout(() => {
      // 将表格和工具栏进行关联
      const $table = xTable1.value;
      const $toolbar = xToolbar.value;
      $table.connect($toolbar);
    }, 0);
  });
  const options: any = {
    column: [
      {
        prop: "id",
        title: "Id",
      },
      {
        prop: "names",
        title: "姓名",
      },
      {
        prop: "age",
        title: "年龄",
      },
      {
        prop: "sex",
        title: "性别",
      },
      {
        prop: "address",
        title: "地址",
      },
      {
        prop: "caozuo",
        title: "操作",
      },
    ],
  };
  const data = ref<any>([
    {
      id: "15",
      names: "张三",
      age: 18,
      sex: "女",
      address: "中国第一龙江市",
    },
  ]);
  onMounted(() => {
    for (let index = 0; index < 10000; index++) {
      data.value.push({
        id: index,
        names: "张三",
        age: 18,
        sex: "女",
        address: "中国第一龙江市",
      });
    }
  });
</script>
```

### FutureTable 配置项

| 属性      | 说明                                             | 类型              | 可选值        | 默认值     |
| --------- | :----------------------------------------------- | ----------------- | ------------- | ---------- |
| data      | 显示的数据                                       | Array             | [ ]           | [ ]        |
| options   | 列配置                                           | 对象 OptionObject | OptionObject  | 配置看下面 |
| rowCofig  | 表格配置                                         | 对象              | -             | -          |
| ids       | 表格配置 highlight 为 true 的时候，选中的 key 值 | string            | -             | -          |
| height    | 表格高度                                         | string            | px/vw/vh/em/% | -          |
| minheight | 表格最小高度                                     | string            | px/vw/vh/em/% | -          |
| maxheight | 表格最大高度                                     | string            | px/vw/vh/em/% | -          |

### FutureTable OptionObject 配置项

| 属性   | 说明       | 类型  | 可选值 | 默认值 |
| ------ | :--------- | ----- | ------ | ------ |
| column | 展示列数据 | array | column | [ ]    |

### column

| 属性  | 说明               | 类型   | 可选值        | 默认值 |
| ----- | :----------------- | ------ | ------------- | ------ |
| prop  | 对应列内容的字段名 | string | -             | -      |
| title | 显示的标题         | string | -             | -      |
| width | 列宽               | string | px/vw/vh/em/% | -      |
| style | 表头和表格的样式   | string | -             | -      |

### rowCofig

| 属性      | 说明                                    | 类型   | 可选值 | 默认值 |
| --------- | :-------------------------------------- | ------ | ------ | ------ |
| highlight | 选中列的时候有高亮                      | boolen | -      | false  |
| isChecked | 多选框可通过 ref 获取里面的 checkstr 值 | bool   | -      | false  |

#### isChecked 用法

```html
<future-table
  ref="xTable1"
  :data="data"
  :options="options"
  :rowCofig="{
      isChecked: true
    }"
  ids="id"
  height="70vh"
>
  <template v-slot:caozuo>
    <button>编辑</button>
    <button>添加</button>
  </template>
</future-table>
<script lang="ts" setup>
  import { ref, nextTick, onMounted } from "vue";
  const xTable1: Ref<any | null | undefined> = ref();

  nextTick(() => {
    //选中多选框之后的值
    console.log(xTable1.value.checkstr); //值为['15']
  });
  const options: any = {
    column: [
      {
        prop: "id",
        title: "Id",
      },
      {
        prop: "names",
        title: "姓名",
      },
      {
        prop: "age",
        title: "年龄",
      },
      {
        prop: "sex",
        title: "性别",
      },
      {
        prop: "address",
        title: "地址",
      },
      {
        prop: "caozuo",
        title: "操作",
      },
    ],
  };
  const data = ref<any>([
    {
      id: "15",
      names: "张三",
      age: 18,
      sex: "女",
      address: "中国第一龙江市",
    },
  ]);
</script>
```

### FutureTable Event 事件

| 属性          | 说明                                         | 参数    |
| ------------- | :------------------------------------------- | ------- |
| handchangeAll | highlight 为 true 的时候的用户触发的点击事件 | options |

### FutureTable slot 表格 如果需要对表头进行插入则加上\_title

我们针对表格的操作列和姓名列进行插入按钮

```html
<future-table
  :data="data"
  :options="options"
  :rowCofig="{
      isChecked: true
    }"
  ids="id"
  height="70vh"
>
  <template v-slot:caozuo>
    <button>编辑</button>
    <button>添加</button>
  </template>
  <!--rows是这一列的数据，indexs是索引  -->
  <template v-slot:names="{rows,indexs}"> {{rows.name}} </template>
  <!--这是对应name那一列的表头进行插槽  -->
  <template v-slot:names_title="{rows}"> {{rows.title}} </template>
</future-table>
<script lang="ts" setup>
  import { ref, nextTick, onMounted } from "vue";

  const options: any = {
    column: [
      {
        prop: "id",
        title: "Id",
      },
      {
        prop: "names",
        title: "姓名",
      },
      {
        prop: "age",
        title: "年龄",
      },
      {
        prop: "sex",
        title: "性别",
      },
      {
        prop: "address",
        title: "地址",
      },
      {
        prop: "caozuo",
        title: "操作",
      },
    ],
  };
  const data = ref<any>([
    {
      id: "15",
      names: "张三",
      age: 18,
      sex: "女",
      address: "中国第一龙江市",
    },
  ]);
</script>
```

...后续的功能在补充,现在可以单纯的当个表格组件使用