J-vue-component NPM

使用方法

下载

 npm install j-vue-component

引入

引入lib下的index.js(如果非按需加载其余文件可以不需要放在项目文件夹中，只需要index.js)

<script src="./lib/index.js"></script>

使用组件

1.jason-cxtemp 组件

    <div id="box">
        <jason-cxtemp
              :objs="objs"
              :width="width"
              :height="height"
              @imgWheelFn="imgWheelFn"
              @imgMoveFn="imgMoveFn"
              @imgMouseupFn="imgMouseupFn"
              @imgReductionFn="imgReductionFn"
              @calconcentratvalcallbackfn="calConcentratValCallbackFn"
              >
        </jason-cxtemp>
    </div>

    var vm = new Vue({
        el:'#box',
        mounted(){
            this.objs = data.data;
            let editSize = data.editSize;
            this.width = editSize.width;
            this.height = editSize.height;
        },
        data(){
            return{
                objs:[],
                width:'',
                height:''
            }
        },
        methods:{
            imgWheelFn(uuid, imgWidth, imgHeight){
              console.log(uuid, imgWidth, imgHeight);
            },
            imgMoveFn(uuid, l, t){
              console.log(uuid, l, t)
            },
            imgMouseupFn(uuid){
              console.log(uuid);
            },
            imgReductionFn(uuid, info){
              console.log(uuid, info);
            },
            calConcentratValCallbackFn(uuid,cellIndex,colIndex){//计算浓度ct

              for(var i = 0;i < this.objs.length;i++){
                let item = this.objs[i];
                if(item.childs.length > 0){//判断是否为嵌套元素
                    for(let j = 0;j < item.childs.length;j++){

                        if(uuid == item.childs[j].uuid){
                            console.log(item.childs[j]);
                            //将该值设为true则改变该td颜色
                            this.$set(this.objs[i].childs[j].cell[cellIndex].tds[colIndex],"isHpvColorStype",true);
                            this.$set(this.objs[i].childs[j].cell[cellIndex].tds[colIndex],"concentratVal",100);
                            return;
                        }
                    }
                };
                if(uuid == item.uuid){
                    console.log(this.objs[i])
                    //将该值设为true则改变该td颜色
                    this.$set(this.objs[i].cell[cellIndex].tds[colIndex],"isHpvColorStype",true);
                    this.$set(this.objs[i].cell[cellIndex].tds[colIndex],"concentratVal",100);
                    return;
                }

              }
            }
        }
    })

参数说明：

1.objs：生成模板的数据；
2.width：模板的宽度；
3.height：模板的高度；
4.imgWheelFn：图片组件缩放回调函数，传入该组件uuid，图片宽度，图片高度三个参数；
5.imgMoveFn：图片组件拖拽过程中回调函数，传入该组件uuid，图片left值，图片top值三个参数；
6.imgMouseupFn：图片组件拖拽结束回调函数，传入该组件uuid；
7.imgReductionFn：图片组件还原回调函数，传入该组件uuid，图片信息两个参数；
8.calConcentratValCallbackFn：病理表格输入ct值@input回调函数；传入该组件uuid，该组件数据的的第几行，该组件数据的的第几列三个参数；