Merge branch 'master' into deploy

This commit is contained in:
Pan
2018-11-28 14:25:01 +08:00
19 changed files with 239 additions and 140 deletions

View File

@@ -1,15 +1,40 @@
<template>
<div class="components-container">
<code>Markdown is based on
<a href="https://github.com/sparksuite/simplemde-markdown-editor" target="_blank">simplemde-markdown-editor</a> Simply encapsulated in Vue.
<a target="_blank" href="https://juejin.im/post/593121aa0ce4630057f70d35#heading-15">
相关文章 </a>
<a href="https://github.com/nhnent/tui.editor" target="_blank">tui.editor</a> Simply encapsulated in Vue.
<a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/feature/component/markdown-editor.html">
Documentation </a>
</code>
<div class="editor-container">
<markdown-editor id="contentEditor" ref="contentEditor" v-model="content" :height="300" :z-index="20"/>
<el-tag class="tag-title">Basic:</el-tag>
<markdown-editor v-model="content" height="300px"/>
</div>
<el-button style="margin-top:80px;" type="primary" icon="el-icon-document" @click="markdown2Html">To HTML</el-button>
<div class="editor-container">
<el-tag class="tag-title">Markdown Mode:</el-tag>
<markdown-editor ref="markdownEditor" v-model="content" :options="{hideModeSwitch:true,previewStyle:'tab'}" height="200px"/>
</div>
<div class="editor-container">
<el-tag class="tag-title">Customize Toolbar:</el-tag>
<markdown-editor
ref="markdownEditor"
v-model="content"
:options="{ toolbarItems: ['heading','bold','italic']}"
/>
</div>
<div class="editor-container">
<el-tag class="tag-title">I18n:</el-tag>
<el-alert :closable="false" title="You can change the language of the admin system to see the effect" type="success"/>
<markdown-editor v-model="content" :language="language" height="300px"/>
</div>
<el-button style="margin-top:80px;" type="primary" icon="el-icon-document" @click="getHtml">Get HTML</el-button>
<div v-html="html"/>
</div>
</template>
@@ -17,32 +42,46 @@
import MarkdownEditor from '@/components/MarkdownEditor'
const content = `
**this is test**
**This is test**
* vue
* element
* webpack
## Simplemde
`
export default {
name: 'MarkdownDemo',
components: { MarkdownEditor },
data() {
return {
content: content,
html: ''
html: '',
languageTypeList: {
'en': 'en_US',
'zh': 'zh_CN',
'es': 'es_ES'
}
}
},
computed: {
language() {
return this.languageTypeList[this.$store.getters.language]
}
},
methods: {
markdown2Html() {
import('showdown').then(showdown => {
const converter = new showdown.Converter()
this.html = converter.makeHtml(this.content)
})
getHtml() {
this.html = this.$refs.markdownEditor.getHtml()
console.log(this.html)
}
}
}
</script>
<style scoped>
.editor-container{
margin-bottom: 30px;
}
.tag-title{
margin-bottom: 5px;
}
</style>

View File

@@ -32,7 +32,8 @@ export default {
},
data() {
return {
chart: null
chart: null,
sidebarElm: null
}
},
watch: {
@@ -55,8 +56,8 @@ export default {
}
// 监听侧边栏的变化
const sidebarElm = document.getElementsByClassName('sidebar-container')[0]
sidebarElm.addEventListener('transitionend', this.sidebarResizeHandler)
this.sidebarElm = document.getElementsByClassName('sidebar-container')[0]
this.sidebarElm && this.sidebarElm.addEventListener('transitionend', this.sidebarResizeHandler)
},
beforeDestroy() {
if (!this.chart) {
@@ -66,8 +67,7 @@ export default {
window.removeEventListener('resize', this.__resizeHandler)
}
const sidebarElm = document.getElementsByClassName('sidebar-container')[0]
sidebarElm.removeEventListener('transitionend', this.sidebarResizeHandler)
this.sidebarElm && this.sidebarElm.removeEventListener('transitionend', this.sidebarResizeHandler)
this.chart.dispose()
this.chart = null

View File

@@ -234,7 +234,7 @@ export default {
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
@import "~@/styles/mixin.scss";
.createPost-container {
position: relative;
.createPost-main-container {

View File

@@ -51,7 +51,7 @@ export default {
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
@import "~@/styles/mixin.scss";
.app-wrapper {
@include clearfix;
position: relative;

View File

@@ -130,15 +130,16 @@ export default {
height: 50px;
margin-right: 30px;
.avatar-wrapper {
cursor: pointer;
margin-top: 5px;
position: relative;
.user-avatar {
cursor: pointer;
width: 40px;
height: 40px;
border-radius: 10px;
}
.el-icon-caret-bottom {
cursor: pointer;
position: absolute;
right: -20px;
top: 25px;

View File

@@ -121,11 +121,21 @@ export default {
this.$router.push('/')
},
openMenu(tag, e) {
const menuMinWidth = 105
const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
const offsetWidth = this.$el.offsetWidth // container width
const maxLeft = offsetWidth - menuMinWidth // left boundary
const left = e.clientX - offsetLeft + 15 // 15: margin right
if (left > maxLeft) {
this.left = maxLeft
} else {
this.left = left
}
this.top = e.clientY
this.visible = true
this.selectedTag = tag
const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
this.left = e.clientX - offsetLeft + 15 // 15: margin right
this.top = e.clientY
},
closeMenu() {
this.visible = false

View File

@@ -107,7 +107,6 @@ export default {
},
immediate: true
}
},
created() {
// window.addEventListener('hashchange', this.afterQRScan)