<template>
|
<div class="bounced-box">
|
<ul>
|
<li>
|
<form action="" class="bounced-box-title">
|
<span>文字标注设置</span>
|
<a @click="changeBounced()">X</a>
|
</form>
|
</li>
|
<li>
|
<form action="" class="bounced-box-content">
|
<h6>内容：</h6>
|
<div><textarea v-model='bouncedText' @blur="ChangeText"></textarea></div>
|
</form>
|
</li>
|
<li class="bounced-box-choose">
|
<span>颜色：</span>
|
<select v-model='bouncedSelect' @click="changeLabelTextSelect()">
|
<option v-for="(item,index) in selectOptions" :key="index" :value="item.value">{{ item.text }}</option>
|
</select>
|
</li>
|
</ul>
|
</div>
|
</template>
|
|
<script>
|
|
import MakeTation from '@components/plugin/MakeTation'
|
|
export default {
|
name: 'TextBounced',
|
data () {
|
return {
|
bouncedText: '',
|
bouncedSelect: 'red',
|
selectOptions: [
|
{
|
value: 'red',
|
text: '红色'
|
},
|
{
|
value: 'blue',
|
text: '蓝色'
|
},
|
{
|
value: 'yellow',
|
text: '黄色'
|
}
|
]
|
}
|
},
|
methods: {
|
changeBounced () {
|
this.$emit('changeBounced', false)
|
},
|
changeLabelTextSelect () {
|
// this.bouncedSelect = item
|
console.log('获取颜色')
|
MakeTation.setContentColor(this.bouncedSelect)
|
},
|
ChangeText () {
|
MakeTation.setContentText(this.bouncedText)
|
console.log(this.bouncedText)
|
}
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.bounced-box {
|
position: absolute;
|
border: 1px solid grey;
|
width: 150px;
|
right: 5%;
|
top: 238px;
|
background-color: rgba(3, 28, 61, 0.8);
|
color: white;
|
cursor: default;
|
left: 814px;
|
|
ul {
|
list-style: none;
|
padding: 0;
|
margin: 0;
|
|
li {
|
margin: 1rem 0;
|
}
|
|
.bounced-box-title {
|
background-color: rgba(34, 83, 130, 0.8);
|
cursor: move;
|
display: flex;
|
align-items: center;
|
justify-content: space-around;
|
|
a {
|
color: white;
|
cursor: pointer;
|
}
|
}
|
|
.bounced-box-content {
|
h6 {
|
padding: 0;
|
margin: 5px;
|
}
|
|
div {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
textarea {
|
width: 90%;
|
resize: none;
|
outline: 0;
|
border: 1px solid #a0b3d6;
|
border-radius: 5px;
|
}
|
}
|
}
|
|
.bounced-box-choose {
|
display: flex;
|
align-items: center;
|
justify-content: space-around;
|
}
|
}
|
}
|
</style>
|
