提交 20d91ee4 authored 作者: wangjiahao's avatar wangjiahao

feat(fix): 【仪表板】文本,选中后无法取消

上级 1dcdff50
...@@ -1197,7 +1197,6 @@ export default { ...@@ -1197,7 +1197,6 @@ export default {
// 如果辅助设计 需要最后调整矩阵 // 如果辅助设计 需要最后调整矩阵
if (this.canvasStyleData.auxiliaryMatrix) { if (this.canvasStyleData.auxiliaryMatrix) {
debugger
this.recordMatrixCurStyle() this.recordMatrixCurStyle()
} }
this.hasMove && this.$store.commit('recordSnapshot') this.hasMove && this.$store.commit('recordSnapshot')
......
...@@ -40,6 +40,8 @@ ...@@ -40,6 +40,8 @@
:prop-value="item.propValue" :prop-value="item.propValue"
:element="item" :element="item"
:out-style="getShapeStyleInt(item.style)" :out-style="getShapeStyleInt(item.style)"
:edit-mode="'edit'"
:active="item === curComponent"
@input="handleInput" @input="handleInput"
/> />
<component <component
......
...@@ -271,6 +271,7 @@ export default { ...@@ -271,6 +271,7 @@ export default {
float: right; float: right;
height: 35px; height: 35px;
line-height: 35px; line-height: 35px;
min-width: 900px;
/*background: #fff;*/ /*background: #fff;*/
/*border-bottom: 1px solid #ddd;*/ /*border-bottom: 1px solid #ddd;*/
......
<template> <template>
<div v-if="editMode == 'edit'" class="v-text" @keydown="handleKeydown" @keyup="handleKeyup"> <div v-if="editMode == 'edit'" class="v-text" @keydown="handleKeydown" @keyup="handleKeyup">
<!-- tabindex >= 0 使得双击时聚集该元素 --> <!-- tabindex >= 0 使得双击时聚集该元素 -->
<div :contenteditable="canEdit" :class="{ canEdit }" @dblclick="setEdit" :tabindex="element.id" @paste="clearStyle" <div
@mousedown="handleMousedown" @blur="handleBlur" ref="text" v-html="element.propValue" @input="handleInput" ref="text"
:contenteditable="canEdit"
:class="{ canEdit }"
:tabindex="element.id"
:style="{ verticalAlign: element.style.verticalAlign }" :style="{ verticalAlign: element.style.verticalAlign }"
></div> @dblclick="setEdit"
@paste="clearStyle"
@mousedown="handleMousedown"
@blur="handleBlur"
@input="handleInput"
v-html="element.propValue"
/>
</div> </div>
<div v-else class="v-text"> <div v-else class="v-text">
<div v-html="element.propValue" :style="{ verticalAlign: element.style.verticalAlign }"></div> <div :style="{ verticalAlign: element.style.verticalAlign }" v-html="element.propValue" />
</div> </div>
</template> </template>
<script> <script>
import { mapState } from 'vuex'
import { keycodes } from '@/components/canvas/utils/shortcutKey.js' import { keycodes } from '@/components/canvas/utils/shortcutKey.js'
export default { export default {
props: { props: {
propValue: { propValue: {
type: String, type: String,
require: true, require: true
}, },
element: { element: {
type: Object, type: Object
}, },
editMode: {
type: String,
require: false,
default: 'preview'
},
active: {
type: Boolean,
require: false,
default: false
}
}, },
data() { data() {
return { return {
canEdit: false, canEdit: false,
ctrlKey: 17, ctrlKey: 17,
isCtrlDown: false, isCtrlDown: false
} }
}, },
computed: { computed: {
...mapState([ },
'editMode',
]), watch: {
active: {
handler(newVal, oldVla) {
debugger
this.removeSelectText()
},
deep: true
}
}, },
methods: { methods: {
handleInput(e) { handleInput(e) {
...@@ -93,7 +119,12 @@ export default { ...@@ -93,7 +119,12 @@ export default {
selection.removeAllRanges() selection.removeAllRanges()
selection.addRange(range) selection.addRange(range)
}, },
},
removeSelectText() {
const selection = window.getSelection()
selection.removeAllRanges()
}
}
} }
</script> </script>
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论