vteam-ui2-element 组件库

快速开始

1.安装组件库

npm install vteam-ui2-element
yarn add vteam-ui2-element
pnpm install vteam-ui2-element

2.引用组件库

// 全部引入
import VteamUI from 'vteam-ui2-element';
import 'vteam-ui2-element/dist/css/index.css';

Vue.use(VteamUI);

介绍

vteam-ui2-element 是一个基于 Element-ui 二次封装UI组件库,主要提供了配置化的组件

1. vt-form
2. vt-render
3. vt-table

使用方式

<template>
  <div class="container">
    {{ requestForm }}
    <hr />
    <vt-form
        ref="commonFormRef"
        :form="requestForm"
        :config="searchFormConfig"
    ></vt-form>
    <vt-table
        v-loading="loading"
        :columns="tableColumnsConfig"
        :data="tableData"
    ></vt-table>
  </div>
</template>

<script>
// 例如：import 《组件名称》 from '《组件路径》';
import { searchFormConfig, tableColumnsConfig } from "./AppConfig";
export default {
  // import引入的组件需要注入到对象中才能使用
  mixins: [],
  components: {},
  props: {},
  data() {
    // 这里存放数据
    return {
      requestForm: {},
      loading: false,
      tableData: [{}],
    };
  },
  // 监听属性 类似于data概念
  computed: {
    searchFormConfig() {
      return searchFormConfig(this);
    },
    tableColumnsConfig() {
      return tableColumnsConfig(this);
    },
  },
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>

<style lang="scss" scoped></style>

// 驱动组件的配置文件AppConfig.js
export const searchFormConfig = () => {
  return {
    labelWidth: "100px",
    props: [
      {
        width: "200px",
        type: "select",
        prop: "approvalStatus",
        placeholder: "审核状态",
        options: [
          { value: 1, label: "发送" },
          { value: 2, label: "发送中" },
          { value: 3, label: "发送完成" },
        ],
      },
      {
        width: "200px",
        type: "select",
        prop: "relatedAppId",
        placeholder: "所属应用",
        options: [
          { value: 1, label: "发送" },
          { value: 2, label: "发送中" },
          { value: 3, label: "发送完成" },
        ],
      },
      {
        width: "200px",
        type: "select",
        prop: "deliveryChannel",
        placeholder: "发送渠道",
        // label: '发送状态',
        options: [
          { value: 1, label: "发送" },
          { value: 2, label: "发送中" },
          { value: 3, label: "发送完成" },
        ],
      },
      {
        width: "200px",
        type: "input",
        prop: "msgKey",
        placeholder: "输入消息关键字查询",
        // label: 'ID查询'
      },
    ],
  };
};
export const tableColumnsConfig = (vm) => {
  return [
    {
      type: "selection",
    },
    {
      prop: "id",
      label: "ID",
      width: 80,
    },
    {
      prop: "manager",
      label: "类型",
      render: (h, row, index, column) => {
        let str = row.type == 1 ? "系统新增" : "三方推送";
        return h("span", {}, str || "-");
      },
    },
    {
      prop: "userName",
      label: "姓名",
    },
    {
      prop: "phoneNumber",
      label: "手机号",
      width: 150,
    },
    {
      prop: "openId",
      label: "微信OPENID",
      width: 220,
    },
    {
      prop: "registrationId",
      label: "极光唯一标识",
      width: 220,
    },
    {
      prop: "deviceId",
      label: "阿里唯一标识",
      width: 220,
    },
    {
      prop: "updateTime",
      label: "更新时间",
      width: 170,
    },
    {
      prop: "operate",
      label: "操作",
      width: 200,
      fixed: "right",
      operation: [
        {
          label: "编辑",
          showIf: (row) => {
            return true;
          },
          click: (row) => {},
        },
        {
          label: "标签",
          showIf: (row) => {
            return true;
          },
          click: (row) => {},
        },
        {
          label: "删除",
          showIf: (row) => {
            return true;
          },
          click: (row) => {},
        },
      ],
    },
  ];
};