@lx-vue-materiel/ui
v1.0.0-beta.1
Published
lx 物料仓库组件合集
Downloads
3
Keywords
Readme
@lx-vue-materiel/ui
包含所有物料汇总报
添加包
- 添加依赖
lerna add @lx-vue-materiel/info-table --scope=@lx-vue-materiel/ui
把 @lx-vue-materiel/info-table
替换成自己包名
- 导出依赖
在 index.js
增加一行,如下:
export { default as infoTable } from '@lx-vue-materiel/info-table';
export default {};
Usage
<template>
<div>
<info-table title="基本信息" :infoList="list" ></info-table>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { infoTable } from '@lx-vue-materiel/ui';
@Component({
components: {
infoTable,
},
})
export default class HelloWorld extends Vue {
list = [
{
subTitle: '子标题1',
items: [
{ title: '车辆VIN码', value: 'LB1WA5884A8008781' },
{ title: '表显里程(公里)', value: '2832566' },
{ title: '排量(L)', value: '3.982' },
{ title: '排放标准', value: '低于国一' },
],
},
];
}
</script>
img-preview
组件形式打开
<ImgPreview
:imgsData="imgsData"
:showIndex="showIndex"
:visible.sync="visible"
:options="{}"
></ImgPreview>
- 传入props
| props | 说明 | 类型 |默认值 | | ---- | ---- | ---- |---- | | visible.sync | 预览组件是否展示 | boolean | false | | imgsData | 图片数组,请传入字符串数组格式 | array | [] | | showIndex | 展示图片索引 | number | 0 | | options | 配置对象 | object | {} |
- 配置对象options说明,不传代表默认
| key | 说明 | 类型 |默认值 | | ---- | ---- | ---- |---- | | clickMaskClose | 点击mask是否关闭图片 | boolean | false | | closeIcon | 是否展示关闭按钮 | boolean | true | | width | 图片默认显示宽度。 高度自适应 | number | 800 | | scale | 缩放 按钮 | boolean | true | | rotateLeft | 顺时针旋转 按钮 | boolean | true | | rotateRight | 逆时针旋转 按钮 | boolean | false | | download | 下载 按钮 | boolean | false | | stepScale | 缩放step (建议不修改) | number | 0.1 | | maxScale | 最大放大倍数 (建议不修改) | number | 5 | | minScale | 最小放大倍数 (建议不修改) | number | 0.1 | | stepRotate | 默认每次旋转度数 90 度 (建议不修改) | number | 90 | | isAnimation | 是否执行缩放等动画 (建议不修改) | boolean | true | | downloadName | 下载图片名称 | string | 'timp.jpg' |
- 提供插槽slot name=previewEdit 可自定义底部按钮,传递参数index 当前图片的索引值
引入调用和全局引入调用形式打开
- 引入调用
import imgPreview from '@lx-vue-materiel/img-preview';
// 展示
ImgPreview.visible({
imgsData: [], // 图片数组,请传入字符串数组格式
showIndex: 0, // 展示图片索引
options: {} // 配置对象
})
// 隐藏
ImgPreview.hide()
- 全局引入调用
import imgPreview from '@lx-vue-materiel/img-preview';
Vue.use(ImgPreview)
// 展示
this.ImgPreview.visible({
imgsData: [], // 图片数组,请传入字符串数组格式
showIndex: 0, // 展示图片索引
options: {} // 配置对象
})
// 隐藏
this.ImgPreview.hide()