@lx-vue-materiel/ui

lx 物料仓库组件合集

Usage no npm install needed!

<script type="module">
  import lxVueMaterielUi from 'https://cdn.skypack.dev/@lx-vue-materiel/ui';
</script>

README

@lx-vue-materiel/ui

包含所有物料汇总报

添加包

  1. 添加依赖
lerna add @lx-vue-materiel/info-table --scope=@lx-vue-materiel/ui

@lx-vue-materiel/info-table 替换成自己包名

  1. 导出依赖

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>
  1. 传入props
props 说明 类型 默认值
visible.sync 预览组件是否展示 boolean false
imgsData 图片数组,请传入字符串数组格式 array []
showIndex 展示图片索引 number 0
options 配置对象 object {}
  1. 配置对象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'
  1. 提供插槽slot name=previewEdit 可自定义底部按钮,传递参数index 当前图片的索引值

引入调用和全局引入调用形式打开

  1. 引入调用
import imgPreview from '@lx-vue-materiel/img-preview';
// 展示
ImgPreview.visible({
  imgsData: [], // 图片数组,请传入字符串数组格式
  showIndex: 0,  // 展示图片索引
  options: {} // 配置对象
})
// 隐藏
ImgPreview.hide()
  1. 全局引入调用
import imgPreview from '@lx-vue-materiel/img-preview';
Vue.use(ImgPreview)

// 展示
this.ImgPreview.visible({
  imgsData: [], // 图片数组,请传入字符串数组格式
  showIndex: 0,  // 展示图片索引
  options: {} // 配置对象
})
// 隐藏
this.ImgPreview.hide()