Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetw...

wangqi

2021-04-08 6a5c681cfad3b2fb1d5d52b7646f0baec6afabc5

 src/components/panel/bounced/TextBounced.vue

@@ -1,131 +1,131 @@
<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>

<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>