From 5f4ce7fc71d2f3f38c40668639709f77b7ca7b6d Mon Sep 17 00:00:00 2001 From: Pan Date: Tue, 13 Mar 2018 17:57:05 +0800 Subject: [PATCH 001/172] update[ImageCropper]: update vue-image-crop-upload to new version --- src/components/ImageCropper/index.vue | 2088 +++++++++++------ src/components/ImageCropper/lang.js | 41 - src/components/ImageCropper/upload.css | 691 ------ src/components/ImageCropper/utils.js | 58 - .../ImageCropper/utils/data2blob.js | 19 + .../ImageCropper/utils/effectRipple.js | 39 + src/components/ImageCropper/utils/language.js | 232 ++ src/components/ImageCropper/utils/mimes.js | 7 + 8 files changed, 1700 insertions(+), 1475 deletions(-) delete mode 100644 src/components/ImageCropper/lang.js delete mode 100644 src/components/ImageCropper/upload.css delete mode 100644 src/components/ImageCropper/utils.js create mode 100755 src/components/ImageCropper/utils/data2blob.js create mode 100755 src/components/ImageCropper/utils/effectRipple.js create mode 100755 src/components/ImageCropper/utils/language.js create mode 100755 src/components/ImageCropper/utils/mimes.js diff --git a/src/components/ImageCropper/index.vue b/src/components/ImageCropper/index.vue index c33f6ec9..2bd22c59 100644 --- a/src/components/ImageCropper/index.vue +++ b/src/components/ImageCropper/index.vue @@ -1,697 +1,1415 @@ - --> + + diff --git a/src/components/ImageCropper/lang.js b/src/components/ImageCropper/lang.js deleted file mode 100644 index 264f914c..00000000 --- a/src/components/ImageCropper/lang.js +++ /dev/null @@ -1,41 +0,0 @@ -const langBag = { - zh: { - hint: '点击，或拖动图片至此处', - loading: '正在上传……', - noSupported: '浏览器不支持该功能，请使用IE10以上或其他现在浏览器！', - success: '上传成功', - fail: '图片上传失败', - preview: '头像预览', - btn: { - off: '取消', - close: '关闭', - back: '上一步', - save: '保存' - }, - error: { - onlyImg: '仅限图片格式', - outOfSize: '单文件大小不能超过 ', - lowestPx: '图片最低像素为（宽*高）：' - } - }, - en: { - hint: 'Click, or drag the file here', - loading: 'Uploading……', - noSupported: 'Browser does not support, please use IE10+ or other browsers', - success: 'Upload success', - fail: 'Upload failed', - preview: 'Preview', - btn: { - off: 'Cancel', - close: 'Close', - back: 'Back', - save: 'Save' - }, - error: { - onlyImg: 'Image only', - outOfSize: 'Image exceeds size limit: ', - lowestPx: 'The lowest pixel in the image: ' - } - } -} -export default langBag diff --git a/src/components/ImageCropper/upload.css b/src/components/ImageCropper/upload.css deleted file mode 100644 index d01dc40c..00000000 --- a/src/components/ImageCropper/upload.css +++ /dev/null @@ -1,691 +0,0 @@ -@charset "UTF-8"; -@-webkit-keyframes vicp_progress { - 0% { - background-position-y: 0; - } - 100% { - background-position-y: 40px; - } -} - -@keyframes vicp_progress { - 0% { - background-position-y: 0; - } - 100% { - background-position-y: 40px; - } -} - -@-webkit-keyframes vicp { - 0% { - opacity: 0; - -webkit-transform: scale(0) translatey(-60px); - transform: scale(0) translatey(-60px); - } - 100% { - opacity: 1; - -webkit-transform: scale(1) translatey(0); - transform: scale(1) translatey(0); - } -} - -@keyframes vicp { - 0% { - opacity: 0; - -webkit-transform: scale(0) translatey(-60px); - transform: scale(0) translatey(-60px); - } - 100% { - opacity: 1; - -webkit-transform: scale(1) translatey(0); - transform: scale(1) translatey(0); - } -} - -.vue-image-crop-upload { - position: fixed; - display: block; - -webkit-box-sizing: border-box; - box-sizing: border-box; - z-index: 10000; - top: 0; - bottom: 0; - left: 0; - right: 0; - width: 100%; - height: 100%; - background-color: rgba(0, 0, 0, 0.65); - -webkit-tap-highlight-color: transparent; - -moz-tap-highlight-color: transparent; -} - -.vue-image-crop-upload .vicp-wrap { - -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23); - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23); - position: fixed; - display: block; - -webkit-box-sizing: border-box; - box-sizing: border-box; - z-index: 10000; - top: 0; - bottom: 0; - left: 0; - right: 0; - margin: auto; - width: 600px; - height: 330px; - padding: 25px; - background-color: #fff; - border-radius: 2px; - -webkit-animation: vicp 0.12s ease-in; - animation: vicp 0.12s ease-in; -} - -.vue-image-crop-upload .vicp-wrap .vicp-close { - position: absolute; - right: -30px; - top: -30px; -} - -.vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4 { - position: relative; - display: block; - width: 30px; - height: 30px; - cursor: pointer; - -webkit-transition: -webkit-transform 0.18s; - transition: -webkit-transform 0.18s; - transition: transform 0.18s; - transition: transform 0.18s, -webkit-transform 0.18s; - -webkit-transform: rotate(0); - -ms-transform: rotate(0); - transform: rotate(0); -} - -.vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4::after, .vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4::before { - -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23); - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23); - content: ''; - position: absolute; - top: 12px; - left: 4px; - width: 20px; - height: 3px; - -webkit-transform: rotate(45deg); - -ms-transform: rotate(45deg); - transform: rotate(45deg); - background-color: #fff; -} - -.vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4::after { - -webkit-transform: rotate(-45deg); - -ms-transform: rotate(-45deg); - transform: rotate(-45deg); -} - -.vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4:hover { - -webkit-transform: rotate(90deg); - -ms-transform: rotate(90deg); - transform: rotate(90deg); -} - -.vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area { - position: relative; - padding: 35px; - height: 200px; - background-color: rgba(0, 0, 0, 0.03); - text-align: center; - border: 1px dashed rgba(0, 0, 0, 0.08); - overflow: hidden; -} - -.vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area .vicp-icon1 { - display: block; - margin: 0 auto 6px; - width: 42px; - height: 42px; - overflow: hidden; -} - -.vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area .vicp-icon1 .vicp-icon1-arrow { - display: block; - margin: 0 auto; - width: 0; - height: 0; - border-bottom: 14.7px solid rgba(0, 0, 0, 0.3); - border-left: 14.7px solid transparent; - border-right: 14.7px solid transparent; -} - -.vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area .vicp-icon1 .vicp-icon1-body { - display: block; - width: 12.6px; - height: 14.7px; - margin: 0 auto; - background-color: rgba(0, 0, 0, 0.3); -} - -.vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area .vicp-icon1 .vicp-icon1-bottom { - -webkit-box-sizing: border-box; - box-sizing: border-box; - display: block; - height: 12.6px; - border: 6px solid rgba(0, 0, 0, 0.3); - border-top: none; -} - -.vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area .vicp-hint { - display: block; - padding: 15px; - font-size: 14px; - color: #666; - line-height: 30px; -} - -.vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area .vicp-no-supported-hint { - display: block; - position: absolute; - top: 0; - left: 0; - padding: 30px; - width: 100%; - height: 60px; - line-height: 30px; - background-color: #eee; - text-align: center; - color: #666; - font-size: 14px; -} - -.vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area:hover { - cursor: pointer; - border-color: rgba(0, 0, 0, 0.1); - background-color: rgba(0, 0, 0, 0.05); -} - -.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop { - overflow: hidden; -} - -.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left { - float: left; -} - -.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-img-container { - position: relative; - display: block; - width: 240px; - height: 180px; - background-color: #e5e5e0; - overflow: hidden; -} - -.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-img-container .vicp-img { - position: absolute; - display: block; - cursor: move; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-img-container .vicp-img-shade { - -webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18); - box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18); - position: absolute; - background-color: rgba(241, 242, 243, 0.8); -} - -.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-img-container .vicp-img-shade.vicp-img-shade-1 { - top: 0; - left: 0; -} - -.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-img-container .vicp-img-shade.vicp-img-shade-2 { - bottom: 0; - right: 0; -} - -.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range { - position: relative; - margin: 30px 0; - width: 240px; - height: 18px; -} - -.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon5, -.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon6 { - position: absolute; - top: 0; - width: 18px; - height: 18px; - border-radius: 100%; - background-color: rgba(0, 0, 0, 0.08); -} - -.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon5:hover, -.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon6:hover { - -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12); - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12); - cursor: pointer; - background-color: rgba(0, 0, 0, 0.14); -} - -.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon5 { - left: 0; -} - -.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon5::before { - position: absolute; - content: ''; - display: block; - left: 3px; - top: 8px; - width: 12px; - height: 2px; - background-color: #fff; -} - -.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon6 { - right: 0; -} - -.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon6::before { - position: absolute; - content: ''; - display: block; - left: 3px; - top: 8px; - width: 12px; - height: 2px; - background-color: #fff; -} - -.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon6::after { - position: absolute; - content: ''; - display: block; - top: 3px; - left: 8px; - width: 2px; - height: 12px; - background-color: #fff; -} - -.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range] { - display: block; - padding-top: 5px; - margin: 0 auto; - width: 180px; - height: 8px; - vertical-align: top; - background: transparent; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - cursor: pointer; - /* 滑块 - ---------------------------------------------------------------*/ - /* 轨道 - ---------------------------------------------------------------*/ -} - -.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:focus { - outline: none; -} - -.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-webkit-slider-thumb { - -webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18); - box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18); - -webkit-appearance: none; - appearance: none; - margin-top: -3px; - width: 12px; - height: 12px; - background-color: #61c091; - border-radius: 100%; - border: none; - -webkit-transition: 0.2s; - transition: 0.2s; -} - -.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-moz-range-thumb { - box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18); - -moz-appearance: none; - appearance: none; - width: 12px; - height: 12px; - background-color: #61c091; - border-radius: 100%; - border: none; - -webkit-transition: 0.2s; - transition: 0.2s; -} - -.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-ms-thumb { - box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18); - appearance: none; - width: 12px; - height: 12px; - background-color: #61c091; - border: none; - border-radius: 100%; - -webkit-transition: 0.2s; - transition: 0.2s; -} - -.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:active::-moz-range-thumb { - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23); - width: 14px; - height: 14px; -} - -.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:active::-ms-thumb { - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23); - width: 14px; - height: 14px; -} - -.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:active::-webkit-slider-thumb { - -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23); - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23); - margin-top: -4px; - width: 14px; - height: 14px; -} - -.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-webkit-slider-runnable-track { - -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12); - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12); - width: 100%; - height: 6px; - cursor: pointer; - border-radius: 2px; - border: none; - background-color: rgba(68, 170, 119, 0.3); -} - -.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-moz-range-track { - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12); - width: 100%; - height: 6px; - cursor: pointer; - border-radius: 2px; - border: none; - background-color: rgba(68, 170, 119, 0.3); -} - -.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-ms-track { - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12); - width: 100%; - cursor: pointer; - background: transparent; - border-color: transparent; - color: transparent; - height: 6px; - border-radius: 2px; - border: none; -} - -.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-ms-fill-lower { - background-color: rgba(68, 170, 119, 0.3); -} - -.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-ms-fill-upper { - background-color: rgba(68, 170, 119, 0.15); -} - -.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:focus::-webkit-slider-runnable-track { - background-color: rgba(68, 170, 119, 0.5); -} - -.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:focus::-moz-range-track { - background-color: rgba(68, 170, 119, 0.5); -} - -.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:focus::-ms-fill-lower { - background-color: rgba(68, 170, 119, 0.45); -} - -.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:focus::-ms-fill-upper { - background-color: rgba(68, 170, 119, 0.25); -} - -.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right { - float: right; -} - -.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right .vicp-preview { - height: 150px; - overflow: hidden; -} - -.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right .vicp-preview .vicp-preview-item { - position: relative; - padding: 5px; - width: 100px; - height: 100px; - float: left; - margin-right: 16px; -} - -.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right .vicp-preview .vicp-preview-item span { - position: absolute; - bottom: -30px; - width: 100%; - font-size: 14px; - color: #bbb; - display: block; - text-align: center; -} - -.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right .vicp-preview .vicp-preview-item img { - position: absolute; - display: block; - top: 0; - bottom: 0; - left: 0; - right: 0; - margin: auto; - padding: 3px; - background-color: #fff; - border: 1px solid rgba(0, 0, 0, 0.15); - overflow: hidden; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right .vicp-preview .vicp-preview-item:last-child { - margin-right: 0; -} - -.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right .vicp-preview .vicp-preview-item:last-child img { - border-radius: 100%; -} - -.vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload { - position: relative; - padding: 35px; - height: 200px; - background-color: rgba(0, 0, 0, 0.03); - text-align: center; - border: 1px dashed #ddd; -} - -.vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-loading { - display: block; - padding: 15px; - font-size: 16px; - color: #999; - line-height: 30px; -} - -.vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-progress-wrap { - margin-top: 12px; - background-color: rgba(0, 0, 0, 0.08); - border-radius: 3px; -} - -.vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-progress-wrap .vicp-progress { - position: relative; - display: block; - height: 5px; - border-radius: 3px; - background-color: #4a7; - -webkit-box-shadow: 0 2px 6px 0 rgba(68, 170, 119, 0.3); - box-shadow: 0 2px 6px 0 rgba(68, 170, 119, 0.3); - -webkit-transition: width 0.15s linear; - transition: width 0.15s linear; - background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); - background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); - background-size: 40px 40px; - -webkit-animation: vicp_progress 0.5s linear infinite; - animation: vicp_progress 0.5s linear infinite; -} - -.vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-progress-wrap .vicp-progress::after { - content: ''; - position: absolute; - display: block; - top: -3px; - right: -3px; - width: 9px; - height: 9px; - border: 1px solid rgba(245, 246, 247, 0.7); - -webkit-box-shadow: 0 1px 4px 0 rgba(68, 170, 119, 0.7); - box-shadow: 0 1px 4px 0 rgba(68, 170, 119, 0.7); - border-radius: 100%; - background-color: #4a7; -} - -.vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-error, -.vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-success { - height: 100px; - line-height: 100px; -} - -.vue-image-crop-upload .vicp-wrap .vicp-operate { - position: absolute; - right: 20px; - bottom: 20px; -} - -.vue-image-crop-upload .vicp-wrap .vicp-operate a { - position: relative; - float: left; - display: block; - margin-left: 10px; - width: 100px; - height: 36px; - line-height: 36px; - text-align: center; - cursor: pointer; - font-size: 14px; - color: #4a7; - border-radius: 2px; - overflow: hidden; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.vue-image-crop-upload .vicp-wrap .vicp-operate a:hover { - background-color: rgba(0, 0, 0, 0.03); -} - -.vue-image-crop-upload .vicp-wrap .vicp-error, -.vue-image-crop-upload .vicp-wrap .vicp-success { - display: block; - font-size: 14px; - line-height: 24px; - height: 24px; - color: #d10; - text-align: center; - vertical-align: top; -} - -.vue-image-crop-upload .vicp-wrap .vicp-success { - color: #4a7; -} - -.vue-image-crop-upload .vicp-wrap .vicp-icon3 { - position: relative; - display: inline-block; - width: 20px; - height: 20px; - top: 4px; -} - -.vue-image-crop-upload .vicp-wrap .vicp-icon3::after { - position: absolute; - top: 3px; - left: 6px; - width: 6px; - height: 10px; - border-width: 0 2px 2px 0; - border-color: #4a7; - border-style: solid; - -webkit-transform: rotate(45deg); - -ms-transform: rotate(45deg); - transform: rotate(45deg); - content: ''; -} - -.vue-image-crop-upload .vicp-wrap .vicp-icon2 { - position: relative; - display: inline-block; - width: 20px; - height: 20px; - top: 4px; -} - -.vue-image-crop-upload .vicp-wrap .vicp-icon2::after, .vue-image-crop-upload .vicp-wrap .vicp-icon2::before { - content: ''; - position: absolute; - top: 9px; - left: 4px; - width: 13px; - height: 2px; - background-color: #d10; - -webkit-transform: rotate(45deg); - -ms-transform: rotate(45deg); - transform: rotate(45deg); -} - -.vue-image-crop-upload .vicp-wrap .vicp-icon2::after { - -webkit-transform: rotate(-45deg); - -ms-transform: rotate(-45deg); - transform: rotate(-45deg); -} - -.e-ripple { - position: absolute; - border-radius: 100%; - background-color: rgba(0, 0, 0, 0.15); - background-clip: padding-box; - pointer-events: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - -webkit-transform: scale(0); - -ms-transform: scale(0); - transform: scale(0); - opacity: 1; -} - -.e-ripple.z-active { - opacity: 0; - -webkit-transform: scale(2); - -ms-transform: scale(2); - transform: scale(2); - -webkit-transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out; - transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out; - transition: opacity 1.2s ease-out, transform 0.6s ease-out; - transition: opacity 1.2s ease-out, transform 0.6s ease-out, -webkit-transform 0.6s ease-out; -} \ No newline at end of file diff --git a/src/components/ImageCropper/utils.js b/src/components/ImageCropper/utils.js deleted file mode 100644 index 0ccd3af0..00000000 --- a/src/components/ImageCropper/utils.js +++ /dev/null @@ -1,58 +0,0 @@ -/* eslint-disable */ - -/** - * - * @param e - * @param arg_opts - * @returns {boolean} - */ -export function effectRipple(e, arg_opts) { - let opts = Object.assign({ - ele: e.target, // 波纹作用元素 - type: 'hit', // hit点击位置扩散　center中心点扩展 - bgc: 'rgba(0, 0, 0, 0.15)' // 波纹颜色 - }, arg_opts), - target = opts.ele; - if (target) { - let rect = target.getBoundingClientRect(), - ripple = target.querySelector('.e-ripple'); - if (!ripple) { - ripple = document.createElement('span'); - ripple.className = 'e-ripple'; - ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px'; - target.appendChild(ripple); - } else { - ripple.className = 'e-ripple'; - } - switch (opts.type) { - case 'center': - ripple.style.top = (rect.height / 2 - ripple.offsetHeight / 2) + 'px'; - ripple.style.left = (rect.width / 2 - ripple.offsetWidth / 2) + 'px'; - break; - default: - ripple.style.top = (e.pageY - rect.top - ripple.offsetHeight / 2 - document.body.scrollTop) + 'px'; - ripple.style.left = (e.pageX - rect.left - ripple.offsetWidth / 2 - document.body.scrollLeft) + 'px'; - } - ripple.style.backgroundColor = opts.bgc; - ripple.className = 'e-ripple z-active'; - return false; - } -} -// database64文件格式转换为2进制 -/** - * - * @param data - * @param mime - * @returns {*} - */ -export function data2blob(data, mime) { - // dataURL 的格式为 “data:image/png;base64,****”,逗号之前都是一些说明性的文字，我们只需要逗号之后的就行了 - data = data.split(',')[1]; - data = window.atob(data); - var ia = new Uint8Array(data.length); - for (var i = 0; i < data.length; i++) { - ia[i] = data.charCodeAt(i); - } - // canvas.toDataURL 返回的默认格式就是 image/png - return new Blob([ia], {type: mime}); -}; diff --git a/src/components/ImageCropper/utils/data2blob.js b/src/components/ImageCropper/utils/data2blob.js new file mode 100755 index 00000000..9c47f8af --- /dev/null +++ b/src/components/ImageCropper/utils/data2blob.js @@ -0,0 +1,19 @@ +/** + * database64文件格式转换为2进制 + * + * @param {[String]} data dataURL 的格式为 “data:image/png;base64,****”,逗号之前都是一些说明性的文字，我们只需要逗号之后的就行了 + * @param {[String]} mime [description] + * @return {[blob]} [description] + */ +export default function(data, mime) { + data = data.split(',')[1] + data = window.atob(data) + var ia = new Uint8Array(data.length) + for (var i = 0; i < data.length; i++) { + ia[i] = data.charCodeAt(i) + } + // canvas.toDataURL 返回的默认格式就是 image/png + return new Blob([ia], { + type: mime + }) +} diff --git a/src/components/ImageCropper/utils/effectRipple.js b/src/components/ImageCropper/utils/effectRipple.js new file mode 100755 index 00000000..46a01640 --- /dev/null +++ b/src/components/ImageCropper/utils/effectRipple.js @@ -0,0 +1,39 @@ +/** + * 点击波纹效果 + * + * @param {[event]} e [description] + * @param {[Object]} arg_opts [description] + * @return {[bollean]} [description] + */ +export default function(e, arg_opts) { + var opts = Object.assign({ + ele: e.target, // 波纹作用元素 + type: 'hit', // hit点击位置扩散center中心点扩展 + bgc: 'rgba(0, 0, 0, 0.15)' // 波纹颜色 + }, arg_opts) + var target = opts.ele + if (target) { + var rect = target.getBoundingClientRect() + var ripple = target.querySelector('.e-ripple') + if (!ripple) { + ripple = document.createElement('span') + ripple.className = 'e-ripple' + ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px' + target.appendChild(ripple) + } else { + ripple.className = 'e-ripple' + } + switch (opts.type) { + case 'center': + ripple.style.top = (rect.height / 2 - ripple.offsetHeight / 2) + 'px' + ripple.style.left = (rect.width / 2 - ripple.offsetWidth / 2) + 'px' + break + default: + ripple.style.top = (e.pageY - rect.top - ripple.offsetHeight / 2 - document.body.scrollTop) + 'px' + ripple.style.left = (e.pageX - rect.left - ripple.offsetWidth / 2 - document.body.scrollLeft) + 'px' + } + ripple.style.backgroundColor = opts.bgc + ripple.className = 'e-ripple z-active' + return false + } +} diff --git a/src/components/ImageCropper/utils/language.js b/src/components/ImageCropper/utils/language.js new file mode 100755 index 00000000..727872d9 --- /dev/null +++ b/src/components/ImageCropper/utils/language.js @@ -0,0 +1,232 @@ +export default { + zh: { + hint: '点击，或拖动图片至此处', + loading: '正在上传……', + noSupported: '浏览器不支持该功能，请使用IE10以上或其他现在浏览器！', + success: '上传成功', + fail: '图片上传失败', + preview: '头像预览', + btn: { + off: '取消', + close: '关闭', + back: '上一步', + save: '保存' + }, + error: { + onlyImg: '仅限图片格式', + outOfSize: '单文件大小不能超过 ', + lowestPx: '图片最低像素为（宽*高）：' + } + }, + 'zh-tw': { + hint: '點擊，或拖動圖片至此處', + loading: '正在上傳……', + noSupported: '瀏覽器不支持該功能，請使用IE10以上或其他現代瀏覽器！', + success: '上傳成功', + fail: '圖片上傳失敗', + preview: '頭像預覽', + btn: { + off: '取消', + close: '關閉', + back: '上一步', + save: '保存' + }, + error: { + onlyImg: '僅限圖片格式', + outOfSize: '單文件大小不能超過 ', + lowestPx: '圖片最低像素為（寬*高）：' + } + }, + en: { + hint: 'Click or drag the file here to upload', + loading: 'Uploading…', + noSupported: 'Browser is not supported, please use IE10+ or other browsers', + success: 'Upload success', + fail: 'Upload failed', + preview: 'Preview', + btn: { + off: 'Cancel', + close: 'Close', + back: 'Back', + save: 'Save' + }, + error: { + onlyImg: 'Image only', + outOfSize: 'Image exceeds size limit: ', + lowestPx: 'Image\'s size is too low. Expected at least: ' + } + }, + ro: { + hint: 'Atinge sau trage fișierul aici', + loading: 'Se încarcă', + noSupported: 'Browser-ul tău nu suportă acest feature. Te rugăm încearcă cu alt browser.', + success: 'S-a încărcat cu succes', + fail: 'A apărut o problemă la încărcare', + preview: 'Previzualizează', + + btn: { + off: 'Anulează', + close: 'Închide', + back: 'Înapoi', + save: 'Salvează' + }, + + error: { + onlyImg: 'Doar imagini', + outOfSize: 'Imaginea depășește limita de: ', + loewstPx: 'Imaginea este prea mică; Minim: ' + } + }, + ru: { + hint: 'Нажмите, или перетащите файл в это окно', + loading: 'Загружаю……', + noSupported: 'Ваш браузер не поддерживается, пожалуйста, используйте IE10 + или другие браузеры', + success: 'Загрузка выполнена успешно', + fail: 'Ошибка загрузки', + preview: 'Предпросмотр', + btn: { + off: 'Отменить', + close: 'Закрыть', + back: 'Назад', + save: 'Сохранить' + }, + error: { + onlyImg: 'Только изображения', + outOfSize: 'Изображение превышает предельный размер: ', + lowestPx: 'Минимальный размер изображения: ' + } + }, + 'pt-br': { + hint: 'Clique ou arraste o arquivo aqui para carregar', + loading: 'Carregando…', + noSupported: 'Browser não suportado, use o IE10+ ou outro browser', + success: 'Sucesso ao carregar imagem', + fail: 'Falha ao carregar imagem', + preview: 'Pré-visualizar', + btn: { + off: 'Cancelar', + close: 'Fechar', + back: 'Voltar', + save: 'Salvar' + }, + error: { + onlyImg: 'Apenas imagens', + outOfSize: 'A imagem excede o limite de tamanho: ', + lowestPx: 'O tamanho da imagem é muito pequeno. Tamanho mínimo: ' + } + }, + fr: { + hint: 'Cliquez ou glissez le fichier ici.', + loading: 'Téléchargement…', + noSupported: 'Votre navigateur n\'est pas supporté. Utilisez IE10 + ou un autre navigateur s\'il vous plaît.', + success: 'Téléchargement réussit', + fail: 'Téléchargement echoué', + preview: 'Aperçu', + btn: { + off: 'Annuler', + close: 'Fermer', + back: 'Retour', + save: 'Enregistrer' + }, + error: { + onlyImg: 'Image uniquement', + outOfSize: 'L\'image sélectionnée dépasse la taille maximum: ', + lowestPx: 'L\'image sélectionnée est trop petite. Dimensions attendues: ' + } + }, + nl: { + hint: 'Klik hier of sleep een afbeelding in dit vlak', + loading: 'Uploaden…', + noSupported: 'Je browser wordt helaas niet ondersteund. Gebruik IE10+ of een andere browser.', + success: 'Upload succesvol', + fail: 'Upload mislukt', + preview: 'Voorbeeld', + btn: { + off: 'Annuleren', + close: 'Sluiten', + back: 'Terug', + save: 'Opslaan' + }, + error: { + onlyImg: 'Alleen afbeeldingen', + outOfSize: 'De afbeelding is groter dan: ', + lowestPx: 'De afbeelding is te klein! Minimale afmetingen: ' + } + }, + tr: { + hint: 'Tıkla veya yüklemek istediğini buraya sürükle', + loading: 'Yükleniyor…', + noSupported: 'Tarayıcı desteklenmiyor, lütfen IE10+ veya farklı tarayıcı kullanın', + success: 'Yükleme başarılı', + fail: 'Yüklemede hata oluştu', + preview: 'Önizle', + btn: { + off: 'İptal', + close: 'Kapat', + back: 'Geri', + save: 'Kaydet' + }, + error: { + onlyImg: 'Sadece resim', + outOfSize: 'Resim yükleme limitini aşıyor: ', + lowestPx: 'Resmin boyutu çok küçük. En az olması gereken: ' + } + }, + 'es-MX': { + hint: 'Selecciona o arrastra una imagen', + loading: 'Subiendo...', + noSupported: 'Tu navegador no es soportado, porfavor usa IE10+ u otros navegadores mas recientes', + success: 'Subido exitosamente', + fail: 'Sucedió un error', + preview: 'Vista previa', + btn: { + off: 'Cancelar', + close: 'Cerrar', + back: 'Atras', + save: 'Guardar' + }, + error: { + onlyImg: 'Unicamente imagenes', + outOfSize: 'La imagen excede el tamaño maximo:', + lowestPx: 'La imagen es demasiado pequeño. Se espera por lo menos:' + } + }, + de: { + hint: 'Klick hier oder zieh eine Datei hier rein zum Hochladen', + loading: 'Hochladen…', + noSupported: 'Browser wird nicht unterstützt, bitte verwende IE10+ oder andere Browser', + success: 'Upload erfolgreich', + fail: 'Upload fehlgeschlagen', + preview: 'Vorschau', + btn: { + off: 'Abbrechen', + close: 'Schließen', + back: 'Zurück', + save: 'Speichern' + }, + error: { + onlyImg: 'Nur Bilder', + outOfSize: 'Das Bild ist zu groß: ', + lowestPx: 'Das Bild ist zu klein. Mindestens: ' + } + }, + ja: { + hint: 'クリック・ドラッグしてファイルをアップロード', + loading: 'アップロード中...', + noSupported: 'このブラウザは対応されていません。IE10+かその他の主要ブラウザをお使いください。', + success: 'アップロード成功', + fail: 'アップロード失敗', + preview: 'プレビュー', + btn: { + off: 'キャンセル', + close: '閉じる', + back: '戻る', + save: '保存' + }, + error: { + onlyImg: '画像のみ', + outOfSize: '画像サイズが上限を超えています。上限: ', + lowestPx: '画像が小さすぎます。最小サイズ: ' + } + } +} diff --git a/src/components/ImageCropper/utils/mimes.js b/src/components/ImageCropper/utils/mimes.js new file mode 100755 index 00000000..e20c085c --- /dev/null +++ b/src/components/ImageCropper/utils/mimes.js @@ -0,0 +1,7 @@ +export default { + 'jpg': 'image/jpeg', + 'png': 'image/png', + 'gif': 'image/gif', + 'svg': 'image/svg+xml', + 'psd': 'image/photoshop' +} From f9c4dd7af3d7d0016e6cce95ddb7ec654732ad68 Mon Sep 17 00:00:00 2001 From: Pan Date: Tue, 13 Mar 2018 18:01:42 +0800 Subject: [PATCH 002/172] Fix typo --- README.md | 6 +++--- README.zh-CN.md | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index e18e5f51..2edf422d 100644 --- a/README.md +++ b/README.md @@ -30,16 +30,16 @@ English | [简体中文](./README.zh-CN.md) - [Documentation](https://panjiachen.github.io/vue-element-admin-site/#/) -- [wiki](https://github.com/PanJiaChen/vue-element-admin/wiki) +- [Wiki](https://github.com/PanJiaChen/vue-element-admin/wiki) -- [donate](https://panjiachen.github.io/vue-element-admin-site/#/donate) +- [Donate](https://panjiachen.github.io/vue-element-admin-site/#/donate) **vue-element-admin is a admin interfaces integration solution, which is not suitable for secondary development as a base template.** - Base template recommends using: [vueAdmin-template](https://github.com/PanJiaChen/vueAdmin-template)   - Desktop: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin) -**Note: This project uses element-ui@2.0.0+ version, so the minimum compatible vue@2.5.0** +**Note: This project uses element-ui@2.0.0+ version, so the minimum compatible vue@2.5.0+** ## Preparation diff --git a/README.zh-CN.md b/README.zh-CN.md index 5b45deae..41a4a77e 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -30,15 +30,15 @@ - [使用文档](https://panjiachen.github.io/vue-element-admin-site/#/zh-cn/) -- [wiki](https://github.com/PanJiaChen/vue-element-admin/wiki) +- [Wiki](https://github.com/PanJiaChen/vue-element-admin/wiki) -- [donate](https://panjiachen.github.io/vue-element-admin-site/#/zh-cn/donate) +- [Donate](https://panjiachen.github.io/vue-element-admin-site/#/zh-cn/donate) **本项目的定位是后台集成方案，不适合当基础模板来开发。** - 模板建议使用: [vueAdmin-template](https://github.com/PanJiaChen/vueAdmin-template)   - 桌面端: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin) -**注意：该项目使用 element-ui@2.0.0+ 版本，所以最低兼容 vue@2.5.0** +**注意：该项目使用 element-ui@2.0.0+ 版本，所以最低兼容 vue@2.5.0+** ## 前序准备 From a633729215c27f8f52cf080fc621ffd2d0445008 Mon Sep 17 00:00:00 2001 From: Pan Date: Tue, 13 Mar 2018 18:18:27 +0800 Subject: [PATCH 003/172] perf[i18n]: TagsView contextmenu --- src/lang/en.js | 5 +++++ src/lang/zh.js | 5 +++++ src/views/layout/components/TagsView.vue | 6 +++--- 3 files changed, 13 insertions(+), 3 deletions(-) diff --git a/src/lang/en.js b/src/lang/en.js index 30fe5b34..4ffc628b 100644 --- a/src/lang/en.js +++ b/src/lang/en.js @@ -125,5 +125,10 @@ export default { change: 'Theme change', documentation: 'Theme documentation', tips: 'Tips: It is different from the theme-pick on the navbar is two different skinning methods, each with different application scenarios. Refer to the documentation for details.' + }, + tagsView: { + close: 'Close', + closeOthers: 'Close Others', + closeAll: 'Close All' } } diff --git a/src/lang/zh.js b/src/lang/zh.js index 4c1e3ac2..bcae0dac 100644 --- a/src/lang/zh.js +++ b/src/lang/zh.js @@ -125,5 +125,10 @@ export default { change: '换肤', documentation: '换肤文档', tips: 'Tips: 它区别于 navbar 上的 theme-pick, 是两种不同的换肤方法，各自有不同的应用场景，具体请参考文档。' + }, + tagsView: { + close: '关闭', + closeOthers: '关闭其它', + closeAll: '关闭所有' } } diff --git a/src/views/layout/components/TagsView.vue b/src/views/layout/components/TagsView.vue index eadf2d61..09e95499 100644 --- a/src/views/layout/components/TagsView.vue +++ b/src/views/layout/components/TagsView.vue @@ -8,9 +8,9 @@
    -
  • Close
    • -
  • Close Others
    • -
  • Close All
    • +
  • {{$t('tagsView.close')}}
    • +
  • {{$t('tagsView.closeOthers')}}
    • +
  • {{$t('tagsView.closeAll')}}
From c398ee0ddc88579beabebe1324573c08115488b3 Mon Sep 17 00:00:00 2001 From: Pan Date: Tue, 13 Mar 2018 18:36:11 +0800 Subject: [PATCH 004/172] perf[Charts]: add resize mixin --- src/components/Charts/keyboard.vue | 2 ++ src/components/Charts/lineMarker.vue | 2 ++ src/components/Charts/mixChart.vue | 3 ++- src/components/Charts/mixins/resize.js | 15 +++++++++++++++ 4 files changed, 21 insertions(+), 1 deletion(-) create mode 100644 src/components/Charts/mixins/resize.js diff --git a/src/components/Charts/keyboard.vue b/src/components/Charts/keyboard.vue index 4c2a0bbd..4b1bd499 100644 --- a/src/components/Charts/keyboard.vue +++ b/src/components/Charts/keyboard.vue @@ -4,8 +4,10 @@ +
From 4aa9345d9051ed0e0cab3a0478a13595c02768e7 Mon Sep 17 00:00:00 2001 From: Pan Date: Mon, 19 Mar 2018 17:19:13 +0800 Subject: [PATCH 007/172] fix[Tinmyce]: fiexd fullscreen ui bug --- src/components/Tinymce/index.vue | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/Tinymce/index.vue b/src/components/Tinymce/index.vue index b1a56fe2..97ad2432 100644 --- a/src/components/Tinymce/index.vue +++ b/src/components/Tinymce/index.vue @@ -153,7 +153,10 @@ export default { diff --git a/src/components/ImageCropper/index.vue b/src/components/ImageCropper/index.vue index cf7c4fb2..c1dade3f 100644 --- a/src/components/ImageCropper/index.vue +++ b/src/components/ImageCropper/index.vue @@ -1,104 +1,104 @@ @@ -409,7 +409,7 @@ export default { }, 200) }, /* 图片选择区域函数绑定 - ---------------------------------------------------------------*/ + ---------------------------------------------------------------*/ preventDefault(e) { e.preventDefault() return false @@ -589,7 +589,7 @@ export default { scale.x = rX scale.y = rY }, - // 按钮按下开始向右旋转 + // 按钮按下开始向右旋转 startRotateRight(e) { let that = this, { @@ -737,7 +737,7 @@ export default { } }, 300) }, - // 生成需求图片 + // 生成需求图片 createImg(e) { let that = this, { @@ -1132,9 +1132,9 @@ export default { appearance: none; cursor: pointer; /* 滑块 - ---------------------------------------------------------------*/ + ---------------------------------------------------------------*/ /* 轨道 - ---------------------------------------------------------------*/ } + ---------------------------------------------------------------*/ } .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:focus { outline: none; } .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-webkit-slider-thumb { diff --git a/src/components/PanThumb/index.vue b/src/components/PanThumb/index.vue index f980b762..f3478d6c 100644 --- a/src/components/PanThumb/index.vue +++ b/src/components/PanThumb/index.vue @@ -1,12 +1,12 @@ diff --git a/src/views/dashboard/admin/components/TodoList/index.scss b/src/views/dashboard/admin/components/TodoList/index.scss index 0632ac90..95f1acaa 100644 --- a/src/views/dashboard/admin/components/TodoList/index.scss +++ b/src/views/dashboard/admin/components/TodoList/index.scss @@ -1,317 +1,317 @@ .todoapp { - font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif; - line-height: 1.4em; - color: #4d4d4d; - min-width: 230px; - max-width: 550px; - margin: 0 auto ; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - font-weight: 300; - background: #fff; - z-index: 1; - position: relative; - button { - margin: 0; - padding: 0; - border: 0; - background: none; - font-size: 100%; - vertical-align: baseline; - font-family: inherit; - font-weight: inherit; - color: inherit; - -webkit-appearance: none; - appearance: none; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - } - :focus { - outline: 0; - } - .hidden { - display: none; - } - .todoapp { - background: #fff; - margin: 130px 0 40px 0; - position: relative; - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1); - } - .todoapp input::-webkit-input-placeholder { - font-style: italic; - font-weight: 300; - color: #e6e6e6; - } - .todoapp input::-moz-placeholder { - font-style: italic; - font-weight: 300; - color: #e6e6e6; - } - .todoapp input::input-placeholder { - font-style: italic; - font-weight: 300; - color: #e6e6e6; - } - .todoapp h1 { - position: absolute; - top: -155px; - width: 100%; - font-size: 100px; - font-weight: 100; - text-align: center; - color: rgba(175, 47, 47, 0.15); - -webkit-text-rendering: optimizeLegibility; - -moz-text-rendering: optimizeLegibility; - text-rendering: optimizeLegibility; - } - .new-todo, - .edit { - position: relative; - margin: 0; - width: 100%; - font-size: 18px; - font-family: inherit; - font-weight: inherit; - line-height: 1.4em; - border: 0; - color: inherit; - padding: 6px; - border: 1px solid #999; - box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2); - box-sizing: border-box; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - } - .new-todo { - padding: 10px 16px 16px 60px; - border: none; - background: rgba(0, 0, 0, 0.003); - box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03); - } - .main { - position: relative; - z-index: 2; - border-top: 1px solid #e6e6e6; - } - .toggle-all { - text-align: center; - border: none; - /* Mobile Safari */ - opacity: 0; - position: absolute; - } - .toggle-all+label { - width: 60px; - height: 34px; - font-size: 0; - position: absolute; - top: -52px; - left: -13px; - -webkit-transform: rotate(90deg); - transform: rotate(90deg); - } - .toggle-all+label:before { - content: '❯'; - font-size: 22px; - color: #e6e6e6; - padding: 10px 27px 10px 27px; - } - .toggle-all:checked+label:before { - color: #737373; - } - .todo-list { - margin: 0; - padding: 0; - list-style: none; - } - .todo-list li { - position: relative; - font-size: 24px; - border-bottom: 1px solid #ededed; - } - .todo-list li:last-child { - border-bottom: none; - } - .todo-list li.editing { - border-bottom: none; - padding: 0; - } - .todo-list li.editing .edit { - display: block; - width: 506px; - padding: 12px 16px; - margin: 0 0 0 43px; - } - .todo-list li.editing .view { - display: none; - } - .todo-list li .toggle { - text-align: center; - width: 40px; - /* auto, since non-WebKit browsers doesn't support input styling */ - height: auto; - position: absolute; - top: 0; - bottom: 0; - margin: auto 0; - border: none; - /* Mobile Safari */ - -webkit-appearance: none; - appearance: none; - } - .todo-list li .toggle { - opacity: 0; - } - .todo-list li .toggle+label { - /* - Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433 - IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/ - */ - background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E'); - background-repeat: no-repeat; - background-position: center left; - background-size: 36px; - } - .todo-list li .toggle:checked+label { - background-size: 36px; - background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E'); - } - .todo-list li label { - word-break: break-all; - padding: 15px 15px 15px 50px; - display: block; - line-height: 1.0; - font-size: 14px; - transition: color 0.4s; - } - .todo-list li.completed label { - color: #d9d9d9; - text-decoration: line-through; - } - .todo-list li .destroy { - display: none; - position: absolute; - top: 0; - right: 10px; - bottom: 0; - width: 40px; - height: 40px; - margin: auto 0; - font-size: 30px; - color: #cc9a9a; - transition: color 0.2s ease-out; - } - .todo-list li .destroy:hover { - color: #af5b5e; - } - .todo-list li .destroy:after { - content: '×'; - } - .todo-list li:hover .destroy { - display: block; - } - .todo-list li .edit { - display: none; - } - .todo-list li.editing:last-child { - margin-bottom: -1px; - } - .footer { - color: #777; - position: relative; - padding: 10px 15px; - height: 40px; - text-align: center; - border-top: 1px solid #e6e6e6; - } - .footer:before { - content: ''; - position: absolute; - right: 0; - bottom: 0; - left: 0; - height: 50px; - overflow: hidden; - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6, 0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6, 0 17px 2px -6px rgba(0, 0, 0, 0.2); - } - .todo-count { - float: left; - text-align: left; - } - .todo-count strong { - font-weight: 300; - } - .filters { - margin: 0; - padding: 0; - list-style: none; - } - .filters li { - display: inline; - } - .filters li a { - color: inherit; - font-size: 12px; - padding: 3px 7px; - text-decoration: none; - border: 1px solid transparent; - border-radius: 3px; - } - .filters li a:hover { - border-color: rgba(175, 47, 47, 0.1); - } - .filters li a.selected { - border-color: rgba(175, 47, 47, 0.2); - } - .clear-completed, - html .clear-completed:active { - float: right; - position: relative; - line-height: 20px; - text-decoration: none; - cursor: pointer; - } - .clear-completed:hover { - text-decoration: underline; - } - .info { - margin: 65px auto 0; - color: #bfbfbf; - font-size: 10px; - text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); - text-align: center; - } - .info p { - line-height: 1; - } - .info a { - color: inherit; - text-decoration: none; - font-weight: 400; - } - .info a:hover { - text-decoration: underline; - } - /* - Hack to remove background from Mobile Safari. - Can't use it globally since it destroys checkboxes in Firefox + font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif; + line-height: 1.4em; + color: #4d4d4d; + min-width: 230px; + max-width: 550px; + margin: 0 auto ; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-weight: 300; + background: #fff; + z-index: 1; + position: relative; + button { + margin: 0; + padding: 0; + border: 0; + background: none; + font-size: 100%; + vertical-align: baseline; + font-family: inherit; + font-weight: inherit; + color: inherit; + -webkit-appearance: none; + appearance: none; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } + :focus { + outline: 0; + } + .hidden { + display: none; + } + .todoapp { + background: #fff; + margin: 130px 0 40px 0; + position: relative; + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1); + } + .todoapp input::-webkit-input-placeholder { + font-style: italic; + font-weight: 300; + color: #e6e6e6; + } + .todoapp input::-moz-placeholder { + font-style: italic; + font-weight: 300; + color: #e6e6e6; + } + .todoapp input::input-placeholder { + font-style: italic; + font-weight: 300; + color: #e6e6e6; + } + .todoapp h1 { + position: absolute; + top: -155px; + width: 100%; + font-size: 100px; + font-weight: 100; + text-align: center; + color: rgba(175, 47, 47, 0.15); + -webkit-text-rendering: optimizeLegibility; + -moz-text-rendering: optimizeLegibility; + text-rendering: optimizeLegibility; + } + .new-todo, + .edit { + position: relative; + margin: 0; + width: 100%; + font-size: 18px; + font-family: inherit; + font-weight: inherit; + line-height: 1.4em; + border: 0; + color: inherit; + padding: 6px; + border: 1px solid #999; + box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2); + box-sizing: border-box; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } + .new-todo { + padding: 10px 16px 16px 60px; + border: none; + background: rgba(0, 0, 0, 0.003); + box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03); + } + .main { + position: relative; + z-index: 2; + border-top: 1px solid #e6e6e6; + } + .toggle-all { + text-align: center; + border: none; + /* Mobile Safari */ + opacity: 0; + position: absolute; + } + .toggle-all+label { + width: 60px; + height: 34px; + font-size: 0; + position: absolute; + top: -52px; + left: -13px; + -webkit-transform: rotate(90deg); + transform: rotate(90deg); + } + .toggle-all+label:before { + content: '❯'; + font-size: 22px; + color: #e6e6e6; + padding: 10px 27px 10px 27px; + } + .toggle-all:checked+label:before { + color: #737373; + } + .todo-list { + margin: 0; + padding: 0; + list-style: none; + } + .todo-list li { + position: relative; + font-size: 24px; + border-bottom: 1px solid #ededed; + } + .todo-list li:last-child { + border-bottom: none; + } + .todo-list li.editing { + border-bottom: none; + padding: 0; + } + .todo-list li.editing .edit { + display: block; + width: 506px; + padding: 12px 16px; + margin: 0 0 0 43px; + } + .todo-list li.editing .view { + display: none; + } + .todo-list li .toggle { + text-align: center; + width: 40px; + /* auto, since non-WebKit browsers doesn't support input styling */ + height: auto; + position: absolute; + top: 0; + bottom: 0; + margin: auto 0; + border: none; + /* Mobile Safari */ + -webkit-appearance: none; + appearance: none; + } + .todo-list li .toggle { + opacity: 0; + } + .todo-list li .toggle+label { + /* + Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433 + IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/ + */ + background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E'); + background-repeat: no-repeat; + background-position: center left; + background-size: 36px; + } + .todo-list li .toggle:checked+label { + background-size: 36px; + background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E'); + } + .todo-list li label { + word-break: break-all; + padding: 15px 15px 15px 50px; + display: block; + line-height: 1.0; + font-size: 14px; + transition: color 0.4s; + } + .todo-list li.completed label { + color: #d9d9d9; + text-decoration: line-through; + } + .todo-list li .destroy { + display: none; + position: absolute; + top: 0; + right: 10px; + bottom: 0; + width: 40px; + height: 40px; + margin: auto 0; + font-size: 30px; + color: #cc9a9a; + transition: color 0.2s ease-out; + } + .todo-list li .destroy:hover { + color: #af5b5e; + } + .todo-list li .destroy:after { + content: '×'; + } + .todo-list li:hover .destroy { + display: block; + } + .todo-list li .edit { + display: none; + } + .todo-list li.editing:last-child { + margin-bottom: -1px; + } + .footer { + color: #777; + position: relative; + padding: 10px 15px; + height: 40px; + text-align: center; + border-top: 1px solid #e6e6e6; + } + .footer:before { + content: ''; + position: absolute; + right: 0; + bottom: 0; + left: 0; + height: 50px; + overflow: hidden; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6, 0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6, 0 17px 2px -6px rgba(0, 0, 0, 0.2); + } + .todo-count { + float: left; + text-align: left; + } + .todo-count strong { + font-weight: 300; + } + .filters { + margin: 0; + padding: 0; + list-style: none; + } + .filters li { + display: inline; + } + .filters li a { + color: inherit; + font-size: 12px; + padding: 3px 7px; + text-decoration: none; + border: 1px solid transparent; + border-radius: 3px; + } + .filters li a:hover { + border-color: rgba(175, 47, 47, 0.1); + } + .filters li a.selected { + border-color: rgba(175, 47, 47, 0.2); + } + .clear-completed, + html .clear-completed:active { + float: right; + position: relative; + line-height: 20px; + text-decoration: none; + cursor: pointer; + } + .clear-completed:hover { + text-decoration: underline; + } + .info { + margin: 65px auto 0; + color: #bfbfbf; + font-size: 10px; + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); + text-align: center; + } + .info p { + line-height: 1; + } + .info a { + color: inherit; + text-decoration: none; + font-weight: 400; + } + .info a:hover { + text-decoration: underline; + } + /* + Hack to remove background from Mobile Safari. + Can't use it globally since it destroys checkboxes in Firefox */ - @media screen and (-webkit-min-device-pixel-ratio:0) { - .toggle-all, - .todo-list li .toggle { - background: none; - } - .todo-list li .toggle { - height: 40px; - } - } - @media (max-width: 430px) { - .footer { - height: 50px; - } - .filters { - bottom: 10px; - } - } + @media screen and (-webkit-min-device-pixel-ratio:0) { + .toggle-all, + .todo-list li .toggle { + background: none; + } + .todo-list li .toggle { + height: 40px; + } + } + @media (max-width: 430px) { + .footer { + height: 50px; + } + .filters { + bottom: 10px; + } + } } diff --git a/src/views/dashboard/editor/index.vue b/src/views/dashboard/editor/index.vue index dd9996ff..d3eb0b0b 100644 --- a/src/views/dashboard/editor/index.vue +++ b/src/views/dashboard/editor/index.vue @@ -40,34 +40,34 @@ export default { diff --git a/src/views/layout/Layout.vue b/src/views/layout/Layout.vue index 0811866c..7c824531 100644 --- a/src/views/layout/Layout.vue +++ b/src/views/layout/Layout.vue @@ -1,12 +1,12 @@ diff --git a/src/views/login/socialsignin.vue b/src/views/login/socialsignin.vue index bdd11120..fc782b5c 100644 --- a/src/views/login/socialsignin.vue +++ b/src/views/login/socialsignin.vue @@ -34,35 +34,35 @@ export default { From 88c28f5d7e23d310d9e6a00b1a40bdad7960787f Mon Sep 17 00:00:00 2001 From: Yuga Sun Date: Tue, 20 Mar 2018 17:27:42 +0800 Subject: [PATCH 012/172] perf: change in operation to Object.keys (#518) --- src/utils/index.js | 30 +++++++++++++----------------- 1 file changed, 13 insertions(+), 17 deletions(-) diff --git a/src/utils/index.js b/src/utils/index.js index 2140fdff..285cd19a 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -131,16 +131,14 @@ export function objectMerge(target, source) { if (Array.isArray(source)) { return source.slice() } - for (const property in source) { - if (source.hasOwnProperty(property)) { - const sourceProperty = source[property] - if (typeof sourceProperty === 'object') { - target[property] = objectMerge(target[property], sourceProperty) - continue - } + Object.keys(source).forEach((property) => { + const sourceProperty = source[property] + if (typeof sourceProperty === 'object') { + target[property] = objectMerge(target[property], sourceProperty) + } else { target[property] = sourceProperty } - } + }) return target } @@ -253,15 +251,13 @@ export function deepClone(source) { throw new Error('error arguments', 'shallowClone') } const targetObj = source.constructor === Array ? [] : {} - for (const keys in source) { - if (source.hasOwnProperty(keys)) { - if (source[keys] && typeof source[keys] === 'object') { - targetObj[keys] = source[keys].constructor === Array ? [] : {} - targetObj[keys] = deepClone(source[keys]) - } else { - targetObj[keys] = source[keys] - } + Object.keys(source).forEach((keys) => { + if (source[keys] && typeof source[keys] === 'object') { + targetObj[keys] = source[keys].constructor === Array ? [] : {} + targetObj[keys] = deepClone(source[keys]) + } else { + targetObj[keys] = source[keys] } - } + }) return targetObj } From de066192669246d09ae8a04d20ff918dbbf85b64 Mon Sep 17 00:00:00 2001 From: Pan Date: Thu, 22 Mar 2018 13:55:39 +0800 Subject: [PATCH 013/172] fix:[menu]: some bug in only has one showing child #484 --- src/views/layout/components/Sidebar/SidebarItem.vue | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/views/layout/components/Sidebar/SidebarItem.vue b/src/views/layout/components/Sidebar/SidebarItem.vue index da07831b..e60313f9 100644 --- a/src/views/layout/components/Sidebar/SidebarItem.vue +++ b/src/views/layout/components/Sidebar/SidebarItem.vue @@ -2,7 +2,7 @@