iep-ui
Version:
An enterprise-class UI design language and Vue-based implementation
286 lines (275 loc) • 8.09 kB
JavaScript
import _mergeJSXProps from 'babel-helper-vue-jsx-merge-props';
import _extends from 'babel-runtime/helpers/extends';
import { ConfigConsumerProps } from '../config-provider/configConsumerProps';
import PropTypes from '../_util/vue-types';
import Upload from "../upload";
import Dropdown from "../dropdown";
import Slider from "../slider";
import { getListeners } from "../_util/props-util";
import LeftIcon from './icons/left';
import RightIcon from './icons/right';
import AddIcon from './icons/add';
import ReduceIcon from './icons/reduce';
import { VueCropper } from 'vue-cropper';
function getBase64(img, callback) {
var reader = new FileReader();
reader.addEventListener('load', function () {
return callback(reader.result);
});
reader.readAsDataURL(img);
}
export default {
name: 'IepSundryUpload',
props: _extends({}, Upload.props, {
cropper: PropTypes.bool.def(false),
dataType: PropTypes.oneOf(['base64', 'blob']).def('base64')
}),
inject: {
configProvider: { 'default': function _default() {
return ConfigConsumerProps;
} }
},
data: function data() {
return {
localFile: undefined,
visible: false,
rotate: 0,
zoom: 0
};
},
methods: {
handleUpload: function handleUpload(e) {
var _this = this;
if (this.$props.cropper) {
getBase64(e, function (imageUrl) {
_this.localFile = imageUrl;
_this.visible = true;
});
} else {
return e;
}
},
handleTools: function handleTools(e) {
var _this2 = this;
switch (e) {
case 1:
if (this.zoom === -100) {
return false;
}
this.zoom -= 10;
if (this.zoom < -100) {
this.zoom = -100;
}
this.$refs.cropper.changeScale(-1);
break;
case 2:
if (this.zoom === 100) {
return false;
}
this.zoom += 10;
if (this.zoom > 100) {
this.zoom = 100;
}
this.$refs.cropper.changeScale(1);
break;
case 3:
if (this.rotate === 0) {
return false;
}
this.$refs.cropper.rotateRight();
this.rotate -= 90;
if (this.rotate < 0) {
this.rotate = 0;
}
break;
case 4:
if (this.rotate === 360) {
return false;
}
this.$refs.cropper.rotateLeft();
this.rotate += 90;
if (this.rotate > 360) {
this.rotate = 360;
}
break;
case 5:
this.visible = false;
break;
case 6:
if (this.$props.dataType === 'base64') {
this.$refs.cropper.getCropData(function (data) {
_this2.$emit('cropper', data);
_this2.visible = false;
});
} else {
this.$refs.cropper.getCropBlob(function (data) {
_this2.$emit('cropper', data);
_this2.visible = false;
});
}
break;
case 7:
this.visible = false;
break;
}
}
},
render: function render() {
var _this3 = this;
var h = arguments[0];
var customizePrefixCls = this.prefixCls,
$props = this.$props,
$slots = this.$slots,
visible = this.visible,
rotate = this.rotate,
zoom = this.zoom,
handleTools = this.handleTools;
var getPrefixCls = this.configProvider.getPrefixCls;
var prefixCls = getPrefixCls('iep-sundry-upload', customizePrefixCls);
var uploadProps = {
props: _extends({}, $props, {
transformFile: function transformFile(e) {
return _this3.handleUpload(e);
}
}),
on: getListeners(this)
};
var cropperProps = {
props: {
img: this.localFile,
autoCrop: true
}
};
return h(
'div',
{ 'class': prefixCls },
[h(
Dropdown,
{
attrs: { visible: visible }
},
[visible ? h(
'div',
{ 'class': prefixCls + '-cropper', slot: 'overlay' },
[h(
'div',
{ 'class': prefixCls + '-cropper-header' },
[h(
'div',
{ 'class': prefixCls + '-cropper-header-text' },
['\u7F16\u8F91\u56FE\u7247']
), h(
'div',
{ 'class': prefixCls + '-cropper-header-icon', on: {
'click': function click() {
return handleTools(7);
}
}
},
[h('a-iep-icon', {
attrs: { type: 'basic_linear_button_close', color: '#9DABC6' }
})]
)]
), h(
'div',
{ 'class': prefixCls + '-cropper-body' },
[h(
'div',
{ 'class': prefixCls + '-cropper-body-picture' },
[h(VueCropper, _mergeJSXProps([cropperProps, { ref: 'cropper' }]))]
), h(
'div',
{ 'class': prefixCls + '-cropper-body-tools' },
[h(
'div',
{ 'class': prefixCls + '-cropper-body-tools-item' },
[h(
'div',
{ 'class': prefixCls + '-cropper-body-tools-item-btn', on: {
'click': function click() {
return handleTools(1);
}
}
},
[h(ReduceIcon)]
), h(
'div',
{ 'class': prefixCls + '-cropper-body-tools-item-core' },
[h(Slider, {
attrs: { min: -100, max: 100, step: 10, value: zoom }
})]
), h(
'div',
{ 'class': prefixCls + '-cropper-body-tools-item-btn', on: {
'click': function click() {
return handleTools(2);
}
}
},
[h(AddIcon)]
)]
), h(
'div',
{ 'class': prefixCls + '-cropper-body-tools-item' },
[h(
'div',
{ 'class': prefixCls + '-cropper-body-tools-item-btn', on: {
'click': function click() {
return handleTools(3);
}
}
},
[h(LeftIcon)]
), h(
'div',
{ 'class': prefixCls + '-cropper-body-tools-item-core' },
[h(Slider, {
attrs: { min: 0, max: 360, step: 90, value: rotate }
})]
), h(
'div',
{ 'class': prefixCls + '-cropper-body-tools-item-btn', on: {
'click': function click() {
return handleTools(4);
}
}
},
[h(RightIcon)]
)]
)]
)]
), h(
'div',
{ 'class': prefixCls + '-cropper-footer' },
[h(
'a-button',
{
on: {
'click': function click() {
return handleTools(5);
}
}
},
['\u53D6\u6D88']
), h(
'a-button',
{
attrs: { type: 'primary' },
on: {
'click': function click() {
return handleTools(6);
}
}
},
['\u786E\u5B9A']
)]
)]
) : null, h(
Upload,
uploadProps,
[$slots['default']]
)]
)]
);
}
};