# cms_vue

**Repository Path**: giteewang-yao/cms_vue

## Basic Information

- **Project Name**: cms_vue
- **Description**: vue的组件包
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-11-21
- **Last Updated**: 2022-12-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 安装

## V0.0.18

```shell
npm i @yanniswy/cms_vue
import cms from '@yanniswy/cms_vue';
Vue.use(cms)
```

## Git

 :point_right: [Gitee](https://gitee.com/giteewang-yao/cms_vue)

# node版本  v18.12.1

# BaseTable

![](./README_img/0-1670220435587-1.png)

## BaseTable组件属性

> * 需要引入 `Table` `TableColumn`

* `:tableData=Array[Object]`  表格数据

* `:tableColumnOptions=Array[Object]` 表格列配置数据, 此项`必填`
  
  * `label=String` : 列名
  
  * `prop=String` : 与 表格数据 相应字段名 一致
  
  * `width=Number` : 列宽, 可不填
  
  * `tooltip=Boolean` : 该列是否添加 `show-overflow-tooltip` 属性,(只显示一行, 溢出省略,hover显示Tooltpi)
  
  * `slot=String` :  开启插槽, 值为插槽名
  
    ```html
    //使用:
    <template slot="img" slot-scope="scope">
      <div class="img w100 h100 fx-center fx-col-center">
        <el-image fit="cover" :src="scope.row.img"></el-image>
      </div>
    </template>
    ```
  
* `:table_cell_height=Number` 表格内容行高, 默认80px

* `:header_cell_height=Number` 表头行高, 默认50px

* `:body_cell_style=Object` 表格样式

  ```js
  :body_cell_style="{
    backgroundColor: '#fff',
    color: '#999',
    fontSize: '12px',
  }"
  ```

* `:header_cell_style=Object` 表头样式

  ```js
  :header_cell_style="{
    backgroundColor: '#fff',
    color: '#999',
    fontSize: '12px',
  }"
  ```

* `:rowspanArray=Array[String]`  需要纵向合并相邻相同的表格的 列名数组. 可不填

  ```
  :rowspanArray="['id']"
  ```

* `rowGap=Boolean` : 是否开启行间距,`20px`,不可调 

## 勾选框

> * 需要引入 `Checkbox`

* `selection=Boolean`  是否显示勾选框
* `:multipleSelection.sync=Array` 被选中的数据,`若开启selection`,此项`必填`

## 分页器

> * 需要引入 `Pagination`

* **fy** `Boolean`

  * 是否显示分页器
  
* `:fyData=Object` 分页数据, 不传值则不显示 分页器

  ```js
  // 页面初次加载表格数据时初始化分页数据
  this.getData({size: 10, page: 1}).then(res => {
    console.log(res)
    this.tableData=res.data
    this.fyData = {
      page: res.page,  // 当前页面
      size: res.size,  // 每页数量
      total: res.total // 数据总量
    }
  })
  ```

* `@checkPage=Callback` 分页器选择页码的回调函数,参数为更新后的 `fyData`

  ```js
  checkPage(v) {
    this.getData({size: v.size, page: v.page}).then(res => {
      this.tableData = res.data
    })
  },
  ```

* `:pageSize=Array` 每页显示条目数量的数组,默认 `[10, 15, 20, 25, 30]`

## 加载更多

* `:loadMore=Boolean`  是否开启加载更多,默认 `false`

* `@loadMore=Callback`  加载更多的回调, 进行数据请求, 参数 `fyData`

  ```js
  loadMore(v) {
    this.getData({size: v.size, page: v.page}).then(res => {
      this.tableData.push(...res.data)
    })
  },
  ```

## 点击事件

* **@cellClick="click"**

* 触发当前组件的 **click** 事件

* **usage**

  ```vue
  <base-table
     @cellClick="click"
  >
  </base-table>
  
  methods: {
    click(e) {
      console.log(e);
    },
  }
  ```

* 回调参数:**点击行的所有数据**

## usage

```vue
<template>
  <div class="AllTable w100 h100 pd-20" v-if="tableData">
    <div class="title pd-bottom-10 fw-600 f20">所有商品:</div>
    <base-table
      :tableData="tableData"
      :tableColumnOptions="tableColumnOptions"
      :table_cell_height="40"
      :header_cell_height="45"
      :body_cell_style="{
        backgroundColor: 'transparent',
        color: '#3cc5e4',
        fontSize: '16px',
      }"
      :header_cell_style="{
        backgroundColor: 'transparent',
        color: '#3cc5e4',
        fontSize: '18px',
        fontWeight: 600,
      }"
      :fyData="fyData"
      :pageSize="[10]"
      :fy="true"
      @checkPage="checkPage"
      loadMore
      @loadMore="loadMore"
      @cellClick="click"
    >
      <!-- <template slot-scope="scope" slot="img">
        <div class="demo-image__preview h100">
          <el-image
            fit="cover"
            class="h100"
            :src="scope.row.goodsImgUrl"
            :preview-src-list="[scope.row.goodsImgUrl]"
          ></el-image>
        </div>
      </template> -->
    </base-table>
  </div>
</template>
<script>
import { getJDInfo } from "@/api/MachineLearning/bigScreen";
export default {
  data() {
    return {
      tableData: null, // 表格数据
      tableColumnOptions: [
        // 表格列配置数据
        {
          label: "商品标题",
          prop: "title",
          tooltip: true,
        },
        {
          label: "商品类型",
          prop: "type",
          width: 120,
        },
        {
          label: "商品价格",
          prop: "price",
          width: 120,
        },
      ],
      fyData: {},
    };
  },
  mounted() {
    getJDInfo({ size: 10, page: 1 }).then((res) => {
      this.tableData = res.data.data;
      console.log(res);
      this.fyData = {
        page: res.data.page, // 当前页面
        size: res.data.size, // 每页数量
        total: res.data.totalSize, // 数据总量
      };
    });
  },
  methods: {
    // 点击时,事件车发送消息,更新词云
    click(e) {
      this.eventBus.$emit("commodity_id", e.id);
    },
    loadMore(v) {
      getJDInfo({ size: v.size, page: v.page }).then((res) => {
        this.tableData.push(...res.data.data);
      });
    },
    checkPage(v) {
      getJDInfo({ size: v.size, page: v.page }).then((res) => {
        this.tableData = res.data.data;
        this.fyData = {
          page: res.data.page, // 当前页面
          size: res.data.size, // 每页数量
          total: res.data.totalSize, // 数据总量
        };
      });
    },
  },
};
</script>
<style lang="less" scoped>
.title {
  color: var(--col-main);
}
</style>
```

## 其它问题

* 当 **loadmore** 图标旋转动画不自动停止时, 可以用 `ref` 手动更改组件的 `loading` 属性为 `false`
* 所有列宽累加不能超过组件整体宽度, 不然布局会乱.

# VirtualScroller

![](./README_img/0-1671262378316-1.png)

## 属性

* ```js
  <div class="GradeRank w100 h100 pd-20">   // 在外层元素可以设置 内边距
    <div v-if="data" class="w100 h100">     // 这里最好做个判断, 避免因为数据还没拿到,初始化组件报错
      <virtual-scroller
        title="KTV评分排行榜"                 // 组件标题
        titleColor="#00fff7"                // 标题颜色,默认#00fff7
        :data="data"                        // 表格数据 [{value,id},{value,id}...]
        :interval="1200"                    // 滑动时间,(每 interval/itemHeight 时长滑动 1px)
        :itemHeight="60"                    // 每行的高度, 单位(px)
        color="#fff"                        // 文本颜色
        :fontWeight="600"                   // 文本字重
        fontSize="20px"                     // 文本大小
        @click="click"                      // 点击事件, 返回数据 id
        :radius="20"                        // 容器 border-radius
        :showScroll="false"                 // 是否显示滚动条
      ></virtual-scroller>
    </div>
  </div>
  <style lang="less" scoped>
  :deep(.virtual-scroller) {       // 设置 背景色
    .odd {
      background-color: rgba(255, 0, 0, 0.3);
    }
    .even {
      background-color: rgba(0, 0, 255, 0.3);
    }
  }
  </style>
  ```

# LightBorder

<img src="./README_img/0-1670060038805-1.png" style="zoom:50%;" />

## 属性

* ```html
  <light-border :reverse="false" time="4s" :width="10">
    <div class="context"></div>
  </light-border>
  ```

* **reverse** `Boolean`

  * 是否逆时针旋转, 默认 `false`

* **time** `String`

  * 单次动画时长,默认 `3s`

* **width** `Number`

  * 光效边框宽度, 默认 `4` (px)