@lx-vue-materiel/ui NPM

`@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()

@lx-vue-materiel/img-preview @lx-vue-materiel/info-table vue-property-decorator

@everything-registry/sub-chunk-567

1.0.0-beta.1

3 years ago

1.0.0-beta.0

3 years ago