xmcomponents v0.1.15

安装

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 资源，地址可以点击处查看[资源地址](https://img-bulky.xunmengvip.com/cdn/js/img-bulky.xunmengvip.com_cdn_js_vue.global_2.min.js)

**示例**

- 属性
- 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"}> ); }, }}

**使用 CatchTab 的地方**

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

### **AsyncImage**组件

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

**使用示例**

**属性**

- 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**,即可主动关闭窗口,其它的地方不用监听