``` yarn install xmcomponents
npm install xmcomponents#
yarn install xmcomponents
`
使用
导入组件库
`
import xmcomponents,{useMyWin,setAutoCloseWinFunWhenRouteChange} from "xmcomponents";
import "xmcomponents/dist/xmcomponents.css";
`
在 Vue 中使用
`
const app = Vue.createApp({});
app.use(xmcomponents);
`
组件列表
$3
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})=>{
}
`
示例
`
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 }) => {
}}
/>
`
$3
在使用 keepAlive 组件做缓存的时候,可以使用此组件快速组成 tabs 切换按钮形式,在使用此组件前,app 应用需要用 cdn 形式加载 vue 资源,地址可以点击处查看资源地址
示例
- 属性
- cacheFn 异步返回一个 keepAlive 组件的 ref 信息
`
`
- cacheFn 的回调函数
`
const cacheFn = () => {
return remf.value;
};
`
定义 keepAlive 使用的地方
`
v-slots={{
default: ({ Component, route }) => {
return (
key={this.route.path}
fullPath={this.route.fullPath}
name={route.meta.cn}
/>
);
},
}}
>
`
使用 CatchTab 的地方
`
key={this.route.path}
cacheFn={async () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(this.cacheFn());
}, 1);
});
}}
/>
`
$3
AsyncImage 组件会异步加载图片,只有在显示区域的图片才会加载,不在显示区域中的图片不会加载.
使用示例
`
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);
}
}
`
$3
- 使用示例
`
const [win] = useMyWin({
component: <自定义组件或html />,
attr: {
title: "test title",
},
});
const clickHandler = () => {
win({
params:{
//传入组件的数或事件监听
},
//二次覆盖弹出窗口属性
attr2:{
title:"zzz
}
});
};
return () => {
return (
use my win test
);
};
``