parent
3da320db77
commit
a8911002e9
14 changed files with 11 additions and 753 deletions
Binary file not shown.
@ -1,134 +0,0 @@ |
|||||||
<template> |
|
||||||
<div> |
|
||||||
<el-dialog |
|
||||||
custom-class="pdf-dia" |
|
||||||
:close-on-click-modal="false" |
|
||||||
:visible.sync="visible" |
|
||||||
@close="closePdf" |
|
||||||
:fullscreen="true" |
|
||||||
:modal="false" |
|
||||||
:append-to-body="true"> |
|
||||||
<div> |
|
||||||
<button type="button" aria-label="Close" class="el-dialog__headerbtn" @click="closePdf"><i |
|
||||||
class="el-dialog__close el-icon el-icon-close"></i></button> |
|
||||||
<div class="pdf"> |
|
||||||
<p class="arrow"> |
|
||||||
<span @click="changePdfPage(0)" class="turn el-icon-arrow-left" |
|
||||||
:class="{grey: currentPage==1}"></span> |
|
||||||
{{ currentPage }} / {{ pageCount }} |
|
||||||
<span @click="changePdfPage(1)" class="turn el-icon-arrow-right" |
|
||||||
:class="{grey: currentPage==pageCount}"></span> |
|
||||||
</p> |
|
||||||
<pdf |
|
||||||
class="pdf-wrap" |
|
||||||
:src="src" |
|
||||||
:page="currentPage" |
|
||||||
@num-pages="pageCount=$event" |
|
||||||
@page-loaded="currentPage=$event" |
|
||||||
@loaded="loadPdfHandler" |
|
||||||
> |
|
||||||
</pdf> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</el-dialog> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
<script> |
|
||||||
import pdf from "vue-pdf"; |
|
||||||
|
|
||||||
export default { |
|
||||||
props: ["visible", "src"], |
|
||||||
data() { |
|
||||||
return { |
|
||||||
pdfVisible: false, |
|
||||||
pdfSrc: "", |
|
||||||
currentPage: 0, |
|
||||||
pageCount: 0, |
|
||||||
fileType: "pdf" |
|
||||||
}; |
|
||||||
}, |
|
||||||
components: { pdf }, |
|
||||||
mounted() { |
|
||||||
this.addEvent(); |
|
||||||
}, |
|
||||||
methods: { |
|
||||||
closePdf() { |
|
||||||
this.$emit("update:visible", false); |
|
||||||
this.$emit("update:src", ""); |
|
||||||
this.currentPage = 1; |
|
||||||
}, |
|
||||||
changePdfPage(val) { |
|
||||||
if (val === 0 && this.currentPage > 1) { |
|
||||||
this.currentPage--; |
|
||||||
} |
|
||||||
if (val === 1 && this.currentPage < this.pageCount) { |
|
||||||
this.currentPage++; |
|
||||||
} |
|
||||||
}, |
|
||||||
loadPdfHandler(e) { |
|
||||||
this.currentPage = 1; |
|
||||||
}, |
|
||||||
addEvent() { |
|
||||||
document.onkeydown = e => { |
|
||||||
let key = window.event.keyCode; |
|
||||||
if (key == 37) { |
|
||||||
this.changePdfPage(0); |
|
||||||
} else if (key == 39) { |
|
||||||
this.changePdfPage(1); |
|
||||||
} |
|
||||||
}; |
|
||||||
this.$once("hook:beforeDestroy", () => { |
|
||||||
document.onkeydown = null; |
|
||||||
}); |
|
||||||
} |
|
||||||
} |
|
||||||
}; |
|
||||||
</script> |
|
||||||
<style lang="scss" scoped> |
|
||||||
/deep/ .pdf-dia { |
|
||||||
border-radius: 0 !important; |
|
||||||
|
|
||||||
.el-dialog__header { |
|
||||||
display: none; |
|
||||||
} |
|
||||||
|
|
||||||
.el-dialog__body { |
|
||||||
padding: 0; |
|
||||||
} |
|
||||||
|
|
||||||
.el-dialog__headerbtn { |
|
||||||
top: 10px; |
|
||||||
|
|
||||||
.el-dialog__close { |
|
||||||
color: #fff; |
|
||||||
font-size: 16px; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.pdf { |
|
||||||
.arrow { |
|
||||||
display: flex; |
|
||||||
justify-content: center; |
|
||||||
align-items: center; |
|
||||||
width: 100%; |
|
||||||
padding: 10px 0; |
|
||||||
font-size: 16px; |
|
||||||
color: #fff; |
|
||||||
background-color: #333; |
|
||||||
|
|
||||||
.turn { |
|
||||||
margin: 0 10px; |
|
||||||
font-size: 18px; |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.pdf-wrap { |
|
||||||
height: calc(100vh - 45px); |
|
||||||
margin: 0 auto; |
|
||||||
overflow: auto; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
</style> |
|
||||||
@ -1,255 +0,0 @@ |
|||||||
<template> |
|
||||||
<div class="quill" ref="quill" :class="classes"> |
|
||||||
<div ref="editor" :style="styles" v-loading="loading"></div> |
|
||||||
|
|
||||||
<el-upload |
|
||||||
:headers="headers" |
|
||||||
:action="this.api.fileupload" |
|
||||||
:before-upload="beforeUpload" |
|
||||||
:on-success="editorUploadSuccess" |
|
||||||
style="display: none" |
|
||||||
> |
|
||||||
<el-button class="editorUpload" type="primary">点击上传</el-button> |
|
||||||
</el-upload> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import util from "@/libs/util"; |
|
||||||
import Setting from "@/setting"; |
|
||||||
import Quill from "quill"; |
|
||||||
import "quill/dist/quill.core.css"; |
|
||||||
import "quill/dist/quill.snow.css"; |
|
||||||
import "quill/dist/quill.bubble.css"; |
|
||||||
import toolbarOptions from "./options"; |
|
||||||
|
|
||||||
export default { |
|
||||||
name: "quill", |
|
||||||
props: { |
|
||||||
value: { |
|
||||||
type: String, |
|
||||||
default: "" |
|
||||||
}, |
|
||||||
readonly: { |
|
||||||
type: Boolean, |
|
||||||
default: false |
|
||||||
}, |
|
||||||
toTop: { |
|
||||||
type: Boolean, |
|
||||||
default: true |
|
||||||
}, |
|
||||||
border: { |
|
||||||
type: Boolean, |
|
||||||
default: false |
|
||||||
}, |
|
||||||
height: { |
|
||||||
type: Number |
|
||||||
}, |
|
||||||
minHeight: { |
|
||||||
type: Number |
|
||||||
}, |
|
||||||
/* |
|
||||||
* 原本的readOnly失效,对比其他项目，发现是quill版本不同导致， |
|
||||||
* 使用props传入elseRead = 'true'，手动隐藏工具栏 |
|
||||||
*/ |
|
||||||
elseRead: { |
|
||||||
type: String, default: "false" |
|
||||||
} |
|
||||||
}, |
|
||||||
data() { |
|
||||||
return { |
|
||||||
headers: { |
|
||||||
token: util.local.get(Setting.tokenKey) |
|
||||||
}, |
|
||||||
Quill: null, |
|
||||||
currentValue: "", |
|
||||||
options: { |
|
||||||
theme: "snow", |
|
||||||
bounds: document.body, |
|
||||||
debug: "warn", |
|
||||||
modules: { |
|
||||||
toolbar: { |
|
||||||
container: toolbarOptions, |
|
||||||
handlers: { |
|
||||||
"image": function(value) { |
|
||||||
if (value) { |
|
||||||
// 调用iview图片上传 |
|
||||||
document.querySelector(".editorUpload").click(); |
|
||||||
} else { |
|
||||||
this.Quill.format("image", false); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
placeholder: "", |
|
||||||
readOnly: this.readonly |
|
||||||
}, |
|
||||||
loading: false |
|
||||||
}; |
|
||||||
}, |
|
||||||
computed: { |
|
||||||
classes() { |
|
||||||
return [ |
|
||||||
{ |
|
||||||
"quill-no-border": !this.border |
|
||||||
} |
|
||||||
]; |
|
||||||
}, |
|
||||||
styles() { |
|
||||||
let style = {}; |
|
||||||
if (this.minHeight) { |
|
||||||
style.minHeight = `${this.minHeight}px`; |
|
||||||
} |
|
||||||
if (this.height) { |
|
||||||
style.height = `${this.height}px`; |
|
||||||
} |
|
||||||
return style; |
|
||||||
} |
|
||||||
|
|
||||||
}, |
|
||||||
watch: { |
|
||||||
value: { |
|
||||||
handler(val) { |
|
||||||
if (val !== this.currentValue) { |
|
||||||
this.currentValue = val; |
|
||||||
if (this.Quill) { |
|
||||||
this.Quill.pasteHTML(this.value); |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
immediate: true |
|
||||||
} |
|
||||||
}, |
|
||||||
created() { |
|
||||||
}, |
|
||||||
mounted() { |
|
||||||
this.init(); |
|
||||||
// 处理工具栏隐藏样式 |
|
||||||
if (this.elseRead === "true") { |
|
||||||
let children = this.$refs.quill.children[0].style; |
|
||||||
children.padding = "0"; |
|
||||||
children.overflow = "hidden"; |
|
||||||
children.height = "0"; |
|
||||||
children.borderTop = "0"; |
|
||||||
} |
|
||||||
}, |
|
||||||
beforeDestroy() { |
|
||||||
// 在组件销毁后销毁实例 |
|
||||||
this.Quill = null; |
|
||||||
}, |
|
||||||
methods: { |
|
||||||
init () { |
|
||||||
const editor = this.$refs.editor; |
|
||||||
// 初始化编辑器 |
|
||||||
this.Quill = new Quill(editor, this.options); |
|
||||||
const ins = this.Quill |
|
||||||
// 默认值 |
|
||||||
ins.pasteHTML(this.currentValue); |
|
||||||
if(this.toTop){ |
|
||||||
this.$nextTick(() => { |
|
||||||
window.scrollTo(0,0) |
|
||||||
}) |
|
||||||
} |
|
||||||
// 绑定事件 |
|
||||||
ins.on('text-change', (delta, oldDelta, source) => { |
|
||||||
const html = this.$refs.editor.children[0].innerHTML; |
|
||||||
const text = ins.getText(); |
|
||||||
const quill = this.Quill; |
|
||||||
// 更新内部的值 |
|
||||||
this.currentValue = html; |
|
||||||
// 发出事件 v-model |
|
||||||
this.$emit('input', html); |
|
||||||
// 发出事件 |
|
||||||
this.$emit('on-change', { html, text, quill }); |
|
||||||
}); |
|
||||||
// 将一些 quill 自带的事件传递出去 |
|
||||||
ins.on('text-change', (delta, oldDelta, source) => { |
|
||||||
this.$emit('on-text-change', delta, oldDelta, source); |
|
||||||
}); |
|
||||||
ins.on('selection-change', (range, oldRange, source) => { |
|
||||||
this.$emit('on-selection-change', range, oldRange, source); |
|
||||||
}); |
|
||||||
ins.on('editor-change', (eventName, ...args) => { |
|
||||||
this.$emit('on-editor-change', eventName, ...args); |
|
||||||
}); |
|
||||||
// 监听粘贴事件 |
|
||||||
ins.root.addEventListener('paste', evt => { |
|
||||||
if (evt.clipboardData && evt.clipboardData.files && evt.clipboardData.files.length) { |
|
||||||
evt.preventDefault(); |
|
||||||
// 检测是否粘贴的是图片 |
|
||||||
[].forEach.call(evt.clipboardData.files, file => { |
|
||||||
if (!file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) { |
|
||||||
return |
|
||||||
} |
|
||||||
const param = new FormData() |
|
||||||
param.append('file', file) |
|
||||||
// 把图片上传到服务器，不然会直接把base64存到数据库 |
|
||||||
this.$post(this.api.fileupload, param, { |
|
||||||
headers: { "Content-Type": "multipart/form-data" } |
|
||||||
}).then(res => { |
|
||||||
var range = ins.getSelection() |
|
||||||
if (range) { |
|
||||||
// 在当前光标位置插入图片 |
|
||||||
ins.insertEmbed(range.index, 'image', res.data.filesResult.fileUrl) |
|
||||||
// 将光标移动到图片后面 |
|
||||||
ins.setSelection(range.index + 1) |
|
||||||
} |
|
||||||
}).catch(res => {}) |
|
||||||
}); |
|
||||||
} |
|
||||||
}, false) |
|
||||||
}, |
|
||||||
beforeUpload(file) { |
|
||||||
this.loading = true; |
|
||||||
}, |
|
||||||
editorUploadSuccess(res) { |
|
||||||
// 获取富文本组件实例 |
|
||||||
let quill = this.Quill; |
|
||||||
// 如果上传成功 |
|
||||||
if (res.data.filesResult.fileUrl) { |
|
||||||
// 获取光标所在位置 |
|
||||||
let length = quill.getSelection().index; |
|
||||||
// 插入图片，res为服务器返回的图片链接地址 |
|
||||||
quill.insertEmbed(length, "image", res.data.filesResult.fileUrl); |
|
||||||
// 调整光标到最后 |
|
||||||
quill.setSelection(length + 1); |
|
||||||
} else { |
|
||||||
util.successMsg("图片插入失败"); |
|
||||||
} |
|
||||||
this.loading = false; |
|
||||||
} |
|
||||||
} |
|
||||||
}; |
|
||||||
</script> |
|
||||||
<style lang="scss" scoped> |
|
||||||
.quill-no-border { |
|
||||||
.ql-toolbar.ql-snow { |
|
||||||
border: none; |
|
||||||
border-bottom: 1px solid #e8eaec; |
|
||||||
} |
|
||||||
|
|
||||||
.ql-container.ql-snow { |
|
||||||
border: none; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.else { |
|
||||||
.ql-toolbar.ql-snow { |
|
||||||
height: 0; |
|
||||||
overflow: hidden; |
|
||||||
padding: 0; |
|
||||||
border-top: 0; |
|
||||||
} |
|
||||||
} |
|
||||||
/deep/.ql-snow { |
|
||||||
position: relative; |
|
||||||
.ql-tooltip { |
|
||||||
position: absolute !important; |
|
||||||
top: 10px !important; |
|
||||||
left: 10px !important; |
|
||||||
transform: translateY(10px); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
</style> |
|
||||||
@ -1,16 +0,0 @@ |
|||||||
export default [ |
|
||||||
["bold", "italic", "underline", "strike"], |
|
||||||
["blockquote", "code-block"], |
|
||||||
[{ "header": 1 }, { "header": 2 }], |
|
||||||
[{ "list": "ordered" }, { "list": "bullet" }], |
|
||||||
[{ "script": "sub" }, { "script": "super" }], |
|
||||||
[{ "indent": "-1" }, { "indent": "+1" }], |
|
||||||
[{ "direction": "rtl" }], |
|
||||||
[{ "size": ["small", false, "large", "huge"] }], |
|
||||||
[{ "header": [1, 2, 3, 4, 5, 6, false] }], |
|
||||||
[{ "color": [] }, { "background": [] }], |
|
||||||
[{ "font": [] }], |
|
||||||
[{ "align": [] }], |
|
||||||
["clean"], |
|
||||||
["link", "image", "video"] |
|
||||||
]; |
|
||||||
@ -1,43 +0,0 @@ |
|||||||
import Cookies from "js-cookie"; |
|
||||||
import Setting from "@/setting"; |
|
||||||
|
|
||||||
const cookies = {}; |
|
||||||
|
|
||||||
/** |
|
||||||
* @description 存储 cookie 值 |
|
||||||
* @param {String} name cookie name |
|
||||||
* @param {String} value cookie value |
|
||||||
* @param {Object} cookieSetting cookie setting |
|
||||||
*/ |
|
||||||
cookies.set = function(name = "default", value = "", cookieSetting = {}) { |
|
||||||
let currentCookieSetting = { |
|
||||||
expires: Setting.cookiesExpires |
|
||||||
}; |
|
||||||
Object.assign(currentCookieSetting, cookieSetting); |
|
||||||
Cookies.set(`admin-${name}`, value, currentCookieSetting); |
|
||||||
}; |
|
||||||
|
|
||||||
/** |
|
||||||
* @description 拿到 cookie 值 |
|
||||||
* @param {String} name cookie name |
|
||||||
*/ |
|
||||||
cookies.get = function(name = "default") { |
|
||||||
return Cookies.get(`admin-${name}`); |
|
||||||
}; |
|
||||||
|
|
||||||
/** |
|
||||||
* @description 拿到 cookie 全部的值 |
|
||||||
*/ |
|
||||||
cookies.getAll = function() { |
|
||||||
return Cookies.get(); |
|
||||||
}; |
|
||||||
|
|
||||||
/** |
|
||||||
* @description 删除 cookie |
|
||||||
* @param {String} name cookie name |
|
||||||
*/ |
|
||||||
cookies.remove = function(name = "default") { |
|
||||||
return Cookies.remove(`admin-${name}`); |
|
||||||
}; |
|
||||||
|
|
||||||
export default cookies; |
|
||||||
@ -1,12 +0,0 @@ |
|||||||
/** |
|
||||||
* @description 返回缺省值 |
|
||||||
* 传入的如果是null，就返回'--' |
|
||||||
* 用例：<Tag :default="val">text</Tag> 或者：<Tag>{{val | default}}</Tag> |
|
||||||
* */ |
|
||||||
const defaultShow = (val) => { |
|
||||||
return val == null ? "--" : val; |
|
||||||
}; |
|
||||||
|
|
||||||
module.exports = { |
|
||||||
defaultShow |
|
||||||
}; |
|
||||||
@ -1,18 +0,0 @@ |
|||||||
/** |
|
||||||
* @description 节流指令 |
|
||||||
* 限制连续快速点击按钮 |
|
||||||
* 用例：<Tag v-throttle>text</Tag> |
|
||||||
* */ |
|
||||||
|
|
||||||
export default { |
|
||||||
inserted(el, binding, vnode) { |
|
||||||
el.addEventListener("click", () => { |
|
||||||
if (!el.disabled) { |
|
||||||
el.disabled = true; |
|
||||||
setTimeout(() => { |
|
||||||
el.disabled = false; |
|
||||||
}, binding.value || 1000); |
|
||||||
} |
|
||||||
}); |
|
||||||
} |
|
||||||
}; |
|
||||||
Loading…
Reference in new issue