wcomp v0.1.2

智慧科技图片处理 v1.0.2

用于图片上传和处理 (缩放,裁剪,镜像,旋转,滤镜等)

安装方式

$ npm i zhkj-ui

使用方式

// 在main.js中引入与注册
import zhkjUi from "zhkj-ui"
import "zhkj-ui/dist/zhkj-ui.css"
Vue.use(zhkjUi);
Vue.component('imageUpload', zhkjUi.imageUpload);

// 普通使用
<imageUpload action="http://xxx/api/upload" v-model="fileurl" @upload="upload" tip="只能上传jpg/png文件，且不超过500kb"></imageUpload>

// avue.js中使用
<template>
    ...
	<avue-form :option="option" v-model="form"></avue-form>
	...
</template>

data:{
    return {
         form: {},
         option: {
            column: [
              {
                label: '图片上传',
                prop: 'thumb',
                component: 'imageUpload',
                span: 24,
                event: {
                  upload: (val) => {
                    this.form.thumb = val;
                  },
                },
                params: {
                  action: '/api/blade-resource/oss/endpoint/put-file',
                  headers: {
                    Authorization: 'tokenxxxxxx',
                  },
                  tip: "只能上传jpg/png文件，且不超过500kb",
                }
              }
           ]
      },
    }
}

配置项

第三方依赖

Element-ui

tui-image-editor