update
This commit is contained in:
min.jiang
parent
73ea1e43e6
commit
d699077d45
@ -11,96 +11,99 @@
|
||||
@mouseup.stop="selectionEnd"
|
||||
/>
|
||||
<div v-if="!disabled" class="editor-control" :style="editorCtrlStyle">
|
||||
<template v-if="!inputing">
|
||||
<div v-for="(item, index) in iconList" :key="index" class="editor-item">
|
||||
<button
|
||||
class="item-icon"
|
||||
:class="{
|
||||
activity: commandStates.indexOf(item.type) !== -1,
|
||||
last: index === iconList.length - 1
|
||||
}"
|
||||
:data-info="item.name"
|
||||
@click="iconClick($event, item.type)"
|
||||
:data-bs-toggle="item.drop ? 'dropdown' : ''"
|
||||
data-bs-auto-close="outside"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<svg-icon :icon="item.icon" class-name="icon" />
|
||||
</button>
|
||||
<div class="dropmenu drop-style" v-if="item.type === 'style'">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#" @click="iconClick($event, 'p', 'style')"><p>Text</p></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" @click="iconClick($event, 'pre', 'style')"><pre>code</pre></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" @click="iconClick($event, 'blockquote', 'style')"
|
||||
><blockquote>引用</blockquote></a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" @click="iconClick($event, 'h1', 'style')"><h1>Caption 1</h1></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" @click="iconClick($event, 'h2', 'style')"><h2>Caption 2</h2></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" @click="iconClick($event, 'h3', 'style')"><h3>Caption 3</h3></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" @click="iconClick($event, 'h4', 'style')"><h4>Caption 4</h4></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" @click="iconClick($event, 'h5', 'style')"><h5>Caption 5</h5></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" @click="iconClick($event, 'h6', 'style')"><h6>Caption 6</h6></a>
|
||||
</li>
|
||||
</ul>
|
||||
<transition-group appear name="fade-transform" mode="out-in">
|
||||
<template v-if="!inputing">
|
||||
<div v-for="(item, index) in iconList" :key="index" class="editor-item">
|
||||
<button
|
||||
class="item-icon"
|
||||
:class="{
|
||||
activity: commandStates.indexOf(item.type) !== -1,
|
||||
last: index === iconList.length - 1
|
||||
}"
|
||||
:data-info="item.name"
|
||||
@click="iconClick($event, item.type)"
|
||||
:data-bs-toggle="item.drop ? 'dropdown' : ''"
|
||||
data-bs-auto-close="outside"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<svg-icon :icon="item.icon" class-name="icon" />
|
||||
</button>
|
||||
<div class="dropmenu drop-style" v-if="item.type === 'style'">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#" @click="iconClick($event, 'p', 'style')"><p>Text</p></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" @click="iconClick($event, 'pre', 'style')"><pre>code</pre></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" @click="iconClick($event, 'blockquote', 'style')"
|
||||
><blockquote>引用</blockquote></a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" @click="iconClick($event, 'h1', 'style')"><h1>Caption 1</h1></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" @click="iconClick($event, 'h2', 'style')"><h2>Caption 2</h2></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" @click="iconClick($event, 'h3', 'style')"><h3>Caption 3</h3></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" @click="iconClick($event, 'h4', 'style')"><h4>Caption 4</h4></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" @click="iconClick($event, 'h5', 'style')"><h5>Caption 5</h5></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" @click="iconClick($event, 'h6', 'style')"><h6>Caption 6</h6></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="dropmenu drop-style" v-if="item.type === 'alignjustify'">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#" @click="iconClick($event, 'justifyCenter', 'alignjustify')">
|
||||
<i class="iconfont icon-aligncenter"></i>
|
||||
<span>middle</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" @click="iconClick($event, 'justifyLeft', 'alignjustify')">
|
||||
<i class="iconfont icon-alignleft"></i>
|
||||
<span>left aligned</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" @click="iconClick($event, 'justifyRight', 'alignjustify')">
|
||||
<i class="iconfont icon-alignright"></i>
|
||||
<span>right aligned</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" @click="iconClick($event, 'justifyFull', 'alignjustify')">
|
||||
<i class="iconfont icon-alignjustify"></i>
|
||||
<span>default aligned</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropmenu drop-style" v-if="item.type === 'alignjustify'">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#" @click="iconClick($event, 'justifyCenter', 'alignjustify')">
|
||||
<i class="iconfont icon-aligncenter"></i>
|
||||
<span>middle</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" @click="iconClick($event, 'justifyLeft', 'alignjustify')">
|
||||
<i class="iconfont icon-alignleft"></i>
|
||||
<span>left aligned</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" @click="iconClick($event, 'justifyRight', 'alignjustify')">
|
||||
<i class="iconfont icon-alignright"></i>
|
||||
<span>right aligned</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" @click="iconClick($event, 'justifyFull', 'alignjustify')">
|
||||
<i class="iconfont icon-alignjustify"></i>
|
||||
<span>default aligned</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
<template v-if="inputing">
|
||||
<div class="editor-item">
|
||||
<button class="item-icon item-icon-back" @click="backAction" data-info="back">
|
||||
<svg-icon icon="fe-back" class-name="icon" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="inputing">
|
||||
<div class="editor-item">
|
||||
<button class="item-icon item-icon-back" @click="backAction">
|
||||
<svg-icon icon="fe-back" class-name="icon" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="editor-item">
|
||||
<input type="text" v-model="linkUrl" autofocus @keydown.enter="inputAction">
|
||||
<svg-icon icon="msg-enter" class-name="item-enter-icon" />
|
||||
</div>
|
||||
</template>
|
||||
<div class="editor-item">
|
||||
<input type="text" v-model="linkUrl" autofocus @keydown.enter="inputAction">
|
||||
<svg-icon icon="msg-enter" class-name="item-enter-icon" />
|
||||
</div>
|
||||
</template>
|
||||
</transition-group>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -225,6 +228,8 @@ export default {
|
||||
} else {
|
||||
this.selectedRange = null
|
||||
this.editorCtrlStyle = { display: 'none' }
|
||||
this.inputing = false
|
||||
this.linkUrl = ''
|
||||
// this.commandStates = []
|
||||
}
|
||||
},
|
||||
@ -267,6 +272,7 @@ export default {
|
||||
},
|
||||
backAction() {
|
||||
this.inputing = false
|
||||
this.linkUrl = ''
|
||||
this.$refs.editor.focus()
|
||||
this.restoreSelection()
|
||||
},
|
||||
@ -281,6 +287,7 @@ export default {
|
||||
this.selectedRange.surroundContents(a_node)
|
||||
this.backAction()
|
||||
this.$refs.editor.blur()
|
||||
this.linkUrl = ''
|
||||
this.editorCtrlStyle = { display: 'none' }
|
||||
},
|
||||
getSelect() {
|
||||
@ -593,4 +600,23 @@ export default {
|
||||
.editor-body ol {
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
/* fade-transform */
|
||||
.fade-transform-leave-active,
|
||||
.fade-transform-enter-active {
|
||||
transition: all 300;
|
||||
}
|
||||
|
||||
.fade-transform-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateX(-50px);
|
||||
}
|
||||
|
||||
.fade-transform-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(50px);
|
||||
}
|
||||
.fade-transform-active {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -25,7 +25,6 @@
|
||||
<p class="error-msg">{{ message }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<freeleaps-editor v-model:content="message" style="margin-top: 20px" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -35,10 +34,8 @@ import {
|
||||
// userProfileValidator,
|
||||
} from '@/utils/index'
|
||||
import { signinActionEnum } from '@/types/index'
|
||||
import FreeleapsEditor from '../../components/FreeleapsEditor.vue'
|
||||
|
||||
export default {
|
||||
components: { FreeleapsEditor },
|
||||
name: 'FrontDoor',
|
||||
props: {},
|
||||
data() {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user