安装

yarn install xmcomponents

使用

导入组件库

import xmcomponents,{useMyWin,setAutoCloseWinFunWhenRouteChange} from "xmcomponents";
import "xmcomponents/dist/xmcomponents.css";

在 Vue 中使用

const app = Vue.createApp({});

app.use(xmcomponents);

组件列表

BigTable

BigTable 组件，异步显示 table 列表数据，根据屏幕显示列表中在屏幕中的数据

• 属性

  • dataSource 表格列表中的数据

    [
        {
            id:number
            ...
        }
    ]

  • columns 表格列表配置项

    [ {
      key: "categoryId",
      dataIndex: "categoryId",
      title: "分类",
      width: "10%",
      render: ({ record }) => {
        const i = categoryList.findIndex((x) => x.id == record.categoryId);
        if (i >= 0) {
          return categoryList[i].categoryName;
        }
      }
    }]

  render 可以省略，省略则直接显示数据

  • selection 存储行选中项
  • rowKey 行 key
  • onBatchCheck 全选回调函数
    • status boolean 参数，全选是否选中

        ({status}:{status:boolean}) => {
        }

  • fixedHead 表格头部固定时，配置表格头部的高度(此属性可以省略，省略则不固定头部)
  • onSingleCheck 行 checkbox check 时回调
    • data 选中项数据
    • status 是否选中
  • skeletonStyle 设置tr的样式

    ({data, status})=>{
  
  
    }

示例

 <big-table
        dataSource={list.data}
        columns={column()}
        selection={selectedRow.list}
        rowKey="id"
        onBatchCheck={(e) => {
        }}
        skeletonStyle={{
          height:"20px"
          .
          .
          .
        }}
        fixedHead={{
            fixed: true,
            style: {
            height: " calc(  100vh - 285px) ",
            overflowY: "auto",
            },
        }}
        onSingleCheck={({ data, status }) => {

        }}
/>

CatchTab 组件

在使用 keepAlive 组件做缓存的时候，可以使用此组件快速组成 tabs 切换按钮形式,在使用此组件前，app 应用需要用 cdn 形式加载 vue 资源，地址可以点击处查看资源地址

示例

• 属性

• cacheFn 异步返回一个 keepAlive 组件的 ref 信息

    <KeepAlive ref={"remf"}></KeepAlive>

  • cacheFn 的回调函数

    const cacheFn = () => {
      return remf.value;
    };

定义 keepAlive 使用的地方

<router-view
v-slots={{
    default: ({ Component, route }) => {
        return (
        <KeepAlive ref={"remf"}>
            <Component
            key={this.route.path}
            fullPath={this.route.fullPath}
            name={route.meta.cn}
            />
        </KeepAlive>
        );
    },
    }}

> </router-view>

使用 CatchTab 的地方

<catch-tab
    key={this.route.path}
    cacheFn={async () => {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve(this.cacheFn());
          }, 1);
    });
}}
/>

AsyncImage组件

AsyncImage 组件会异步加载图片，只有在显示区域的图片才会加载，不在显示区域中的图片不会加载.

使用示例

 <AsyImage
    src="https://cube.elemecdn.com/5/0e/1c180a81df114d44038a854c5af8fpng.png"
    width="200px"
    height="300px"
    preview={true}
  />

属性

• src 图片地址

• width 图片显示的宽度 {string} 默认值为 70px

• height 图片显示的高度 {string} 默认值为 70px

• preview 点击图片是否发送预览 事件(windowns 全局事件) 默认值为 true

  • event.detail.file.url 是图片地址

Hooks

• 全局方法setAutoCloseWinFunWhenRouteChange

setAutoCloseWinFunWhenRouteChange((callBack)=>void)

当使用 useMyWin 弹出窗口时， 路由变化时，监听处理弹出窗口函数，此函数一般只需要设置一次，在入口处设置即可,多次设置以最后一次设置为准

callBack 传入的内部传入的函数

example

() => {
  try {
    if (target) {
      render(null, target);
      document.body.removeChild(target);
      target = null;
      document.body.style.overflow = "auto";
    }
  } catch (e) {
    console.error(e);
  }
}

useMyWin

• 使用示例

    const [win] = useMyWin({
      component: <自定义组件或html />,
      attr: {
        title: "test title",
      },
    });

    const clickHandler = () => {
      win({
        params:{
          //传入组件的数或事件监听
        },
        //二次覆盖弹出窗口属性
        attr2:{
          title:"zzz
        }
      });
    };

    return () => {
      return (
        <div>
          <a-button onClick={clickHandler} type="primary">
            use my win test
          </a-button>
        </div>
      );
    };

• 主动关闭窗口可以在自定义组件中 发生事件 close,即可主动关闭窗口,其它的地方不用监听