Demo:节点标签输入适配新颜色生成逻辑

This commit is contained in:
wanglin2 2023-09-23 10:52:04 +08:00
parent 5052c0427a
commit 6bbee4a5cc

View File

@ -20,8 +20,7 @@
v-for="(item, index) in tagArr" v-for="(item, index) in tagArr"
:key="index" :key="index"
:style="{ :style="{
backgroundColor: tagColorList[index].background, backgroundColor: generateColorByContent(item)
color: tagColorList[index].color
}" }"
> >
{{ item }} {{ item }}
@ -40,7 +39,7 @@
</template> </template>
<script> <script>
import { tagColorList } from 'simple-mind-map/src/constants/constant' import { generateColorByContent } from 'simple-mind-map/src/utils/index'
/** /**
* @Author: 王林 * @Author: 王林
@ -52,7 +51,6 @@ export default {
data() { data() {
return { return {
dialogVisible: false, dialogVisible: false,
tagColorList,
tagArr: [], tagArr: [],
tag: '', tag: '',
activeNodes: [], activeNodes: [],
@ -68,6 +66,8 @@ export default {
this.$bus.$off('showNodeTag', this.handleShowNodeTag) this.$bus.$off('showNodeTag', this.handleShowNodeTag)
}, },
methods: { methods: {
generateColorByContent,
handleNodeActive(...args) { handleNodeActive(...args) {
this.activeNodes = [...args[1]] this.activeNodes = [...args[1]]
if (this.activeNodes.length > 0) { if (this.activeNodes.length > 0) {
@ -140,6 +140,7 @@ export default {
padding: 3px 5px; padding: 3px 5px;
margin-right: 5px; margin-right: 5px;
margin-bottom: 5px; margin-bottom: 5px;
color: #fff;
.delBtn { .delBtn {
position: absolute; position: absolute;