Schinta-components-vue2 NPM

schinta-components-vue2

包含组件

ImagePreview、ImagePreview2、SchintaCascader

安装与使用

npm安装:  npm install schinta-components-vue2  
或者在package.json中直接引用："schinta-components-vue2": "^1.0.4"，注意版本号改为最新的   
更新：
方式1(已知最新版本号)：在package.json中调整版本号后install。如果调整package.json后上传到git给其他人使用，则他需要再次install才会使用最新的包，否则不会（不install直接yarn serve并不会报错）    
方式2（不知道最新版本号）：npm update schinta-components-vue2，类似于方式1，只不过自动得到最新版本号  
在main.js中引入
import 'schinta-components-vue2/dist/style.css';
import 'ant-design-vue/dist/antd.css'; 
因该组件是在ant-design-vue基础上开发，所以如果你的项目中没有ant-design-vue，则需要安装ant-design-vue
使用（以ImagePreview组件为例）： 

<template>
    <ImagePreview :imgUrl="imgUrl1" ref="ip1"  />
</template>
import { ImagePreview } from 'schinta-components-vue2';
...,
components:{
    ImagePreview
}

SchintaCascader

下拉级联，适用于省市区选择以及其他业务场景

支持v-model双向数据绑定
rootValue: string | number // 根区域编码
keyField: string // key 键名称，用于映射
textField: string // text 键名称，用于映射
hasChildrenField: string // hasChildren 键名称，用于映射
placeholder: string // 提示语句
getChildrenCallback: (parentKey: string) => Promise<any[]> // 获取子列函数

image-preview

图片预览、查看组件，支持：
放大、缩小、平移、旋转
在图片上叠加多边形
自定义绘制多边形双图片对比展示

ImagePreview 功能

左转  this.$refs.ip1.rotateImg('left')
右转  this.$refs.ip1.rotateImg('right')
铺满  this.$refs.ip1.adjust()
原始大小  this.$refs.ip1.picSize()
放大、缩小  鼠标滚轮上下滚动
刷新  this.$refs.ip1.update()

在图片上叠加多边形：
<ImagePreview :imgUrl="imgUrl1" :features="features" ref="ip1"  />
features: [
                {
                    type: 'polygon',
                    text: '卡车 68.1%',
                    fillColor: 'rgba(197, 226, 255, 0.6)',
                    points: [
                        [128, 209],[127, 210],........
                    ]
                },
                {
                    type: 'polygon',
                    text: '挖掘机 43.3%',
                    fillColor: 'rgba(255, 208, 186, 0.6)',
                    points: [
                        [128, 209],[127, 210],........
                    ]
                },
                ......
            ]
features是要绘制的形状的对象列表，每个对象具有如下属性：
type：类型，目前只支持多边形polygon
hideBorder：是否隐藏矩形框（矩形框是将所有点包围的一个最小矩形），默认值false
text：在矩形外框左上角输出的文字
hideText：是否隐藏文字，默认值false
fillColor：内部填充颜色
points：点数组，polygon最少需要3个点。以图片左上角为原点。
drawPoint：是否绘制控制点，默认值false
controlsVisible:是否显示控制按钮行，默认值true
leftBtnVisible:是否显示左转按钮，默认值true
rightBtnVisible:是否显示右转按钮，默认值true
customBtns:自定义按钮，格式：
[
                {
                    img: require('./assets/images/full.png'),
                    text: '全屏',
                    callback: () => {
                        alert(1);
                    }
                },
                {
                    img: require('./assets/images/full.png'),
                    text: '全屏2',
                    callback: () => {
                        alert(2);
                    }
                }
]



开始自定义绘制多边形(左键添加点，右键结束)  this.$refs.ip1.beginDrawFeature('polygon')
删除最后一个点  this.$refs.ip1.clearOnePoint()
删除所有点  this.$refs.ip1.clearAllPoint()
通过事件响应绘制结束事件：
<ImagePreview :imgUrl="imgUrl1" :features="features" ref="ip1" @featureDrawed="onFeatureDrawed" />
onFeatureDrawed(type, points, imgWidth, imgHeight) {
            console.info('new ' + type, points);
            this.features.push({
                type,
                points,
                fillColor: 'rgba(255,255,255,0.4)',
                text: '',
                hideBorder: true,
                hideText: true,
                drawPoint: true
            });
}

设置图像边框(加到上层容器)：
        <div class="imagePreview">
            <ImagePreview
            />
        </div>
    .imagePreview {
        border: solid 1px red;
    }

ImagePreview2 功能

左右两张图片对比显示，可以做到同步放大、缩小、平移、旋转
支持的方法名基本与ImagePreview一致，需要的属性名有差别：
            <ImagePreview2
                :imgUrl1="imgUrl1"
                :imgUrl2="imgUrl2"
                :features1="features"
                :features2="features"
                ref="ip2"
            />

不支持自定义绘制多边形

支持显示模式的切换：
显示1  this.$refs.ip2.changeShowMode(1)
显示2  this.$refs.ip2.changeShowMode(2)
都显示  this.$refs.ip2.changeShowMode(3)

设置图像边框(加到上层容器)：
        <div class="imagePreview2">
            <ImagePreview2
            />
        </div>
    .imagePreview2 {
        border-radius: 5px;
        /deep/ .wapper {
            .ip {
                border-color: red;
            }
        }
    }