diff --git a/pages/admin/tag/post/_tag_id.vue b/pages/admin/tag/post/_tag_id.vue
index 790e21f..3ccb0f5 100644
--- a/pages/admin/tag/post/_tag_id.vue
+++ b/pages/admin/tag/post/_tag_id.vue
@@ -29,6 +29,64 @@
![]()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ tag.tagTitle }}
+
+
+
+ {{ tag.tagDescription }}
+
+
+
+
+ 上传
+
+
+ 重置
+ 裁剪
+
+ *
+ 上传图片调整至最佳效果后,请点击裁剪按钮截取
+
+
+
import Vue from "vue";
+import {mapState} from 'vuex';
+import VueCropper from "vue-cropperjs";
+import 'cropperjs/dist/cropper.css';
export default {
name: "PostTag",
+ components: {
+ VueCropper
+ },
validate({params, store}) {
if (typeof params.tag_id === 'undefined') {
return true;
@@ -77,10 +141,11 @@ export default {
])
},
computed: {
- uploadHeaders() {
- let token = this.$store.state.uploadHeaders;
- return {'X-Upload-Token': token}
- }
+ ...mapState({
+ uploadHeaders: state => {
+ return {'X-Upload-Token': state.uploadHeaders}
+ }
+ })
},
data() {
return {
@@ -93,6 +158,7 @@ export default {
loading: false,
isEdit: false,
tag: {},
+ autoCrop: true,
notificationFlag: true
}
},
@@ -100,44 +166,44 @@ export default {
_initEditor(data) {
let _ts = this;
- let toolbar = [
- 'emoji',
- 'headings',
- 'bold',
- 'italic',
- 'strike',
- 'link',
- '|',
- 'list',
- 'ordered-list',
- 'check',
- 'outdent',
- 'indent',
- '|',
- 'quote',
- 'line',
- 'code',
- 'inline-code',
- 'insert-before',
- 'insert-after',
- '|',
- 'upload',
- // 'record',
- 'table',
- '|',
- 'undo',
- 'redo',
- '|',
- 'edit-mode',
- {
- name: 'more',
- toolbar: [
- 'fullscreen',
- 'both',
- 'preview',
- 'info'
- ],
- }]
+ let toolbar = [
+ 'emoji',
+ 'headings',
+ 'bold',
+ 'italic',
+ 'strike',
+ 'link',
+ '|',
+ 'list',
+ 'ordered-list',
+ 'check',
+ 'outdent',
+ 'indent',
+ '|',
+ 'quote',
+ 'line',
+ 'code',
+ 'inline-code',
+ 'insert-before',
+ 'insert-after',
+ '|',
+ 'upload',
+ // 'record',
+ 'table',
+ '|',
+ 'undo',
+ 'redo',
+ '|',
+ 'edit-mode',
+ {
+ name: 'more',
+ toolbar: [
+ 'fullscreen',
+ 'both',
+ 'preview',
+ 'info'
+ ],
+ }]
return new Vue.Vditor(data.id, {
toolbar,
mode: 'sv',
@@ -180,9 +246,7 @@ export default {
url: this.tokenURL.URL,
linkToImgUrl: this.tokenURL.linkToImageURL,
token: this.tokenURL.token,
- filename: name => name.replace(/[^(a-zA-Z0-9\u4e00-\u9fa5\.)]/g, '').
- replace(/[\?\\/:|<>\*\[\]\(\)\$%\{\}@~]/g, '').
- replace('/\\s/g', '')
+ filename: name => name.replace(/[^(a-zA-Z0-9\u4e00-\u9fa5\.)]/g, '').replace(/[\?\\/:|<>\*\[\]\(\)\$%\{\}@~]/g, '').replace('/\\s/g', '')
},
height: data.height,
counter: 102400,
@@ -211,11 +275,24 @@ export default {
if (!(isJPG || isPNG)) {
this.$message.error('上传图标只能是 JPG 或者 PNG 格式!');
+ return false;
}
if (!isLt2M) {
this.$message.error('上传图标大小不能超过 2MB!');
+ return false;
+ }
+
+ this.fileToBase64(file);
+ return false;
+ },
+ fileToBase64(file) {
+ let _ts = this;
+ let reader = new FileReader();
+ reader.readAsDataURL(file);
+ reader.onload = function () {
+ _ts.$set(_ts, 'tagIconPath', this.result);
+ _ts.$refs.cropper.replace(this.result);
}
- return (isJPG || isPNG) && isLt2M;
},
async updateTag() {
let _ts = this;
@@ -240,6 +317,24 @@ export default {
_ts.$set(_ts, 'notificationFlag', false);
}
})
+ },
+ reset() {
+ this.$refs.cropper.reset();
+ },
+ // get image data for post processing, e.g. upload or setting image src
+ cropImage() {
+ let _ts = this;
+ try {
+ _ts.cropImg = _ts.$refs.cropper.getCroppedCanvas().toDataURL();
+ let tag = _ts.tag;
+ tag.tagIconPath = _ts.cropImg;
+ _ts.$set(_ts, 'tag', tag);
+ _ts.$set(_ts, 'tagIconPath', _ts.cropImg);
+ _ts.$message.success('已裁剪 !');
+ } catch (e) {
+ _ts.$message.error('图片获取失败 !');
+ return;
+ }
}
},
beforeRouteLeave(to, from, next) {
@@ -275,14 +370,14 @@ export default {
return '关闭提示';
});
let _ts = this;
- this.$store.commit('setActiveMenu', 'admin-tag-post');
- this.$axios.$get('/api/upload/simple/token').then(function (res) {
+ _ts.$store.commit('setActiveMenu', 'admin-tag-post');
+ _ts.$axios.$get('/api/upload/simple/token').then(function (res) {
if (res) {
_ts.$store.commit('setUploadHeaders', res.uploadToken);
_ts.$set(_ts, 'tokenURL', {
- token: responseData.uploadToken || '',
- URL: responseData.uploadURL || '',
- linkToImageURL: responseData.linkToImageURL || ''
+ token: res.uploadToken || '',
+ URL: res.uploadURL || '',
+ linkToImageURL: res.linkToImageURL || ''
})
}
});
@@ -313,5 +408,5 @@ export default {