dvcp_v2_webapp/components/layout/AiDvPlot/AiDvPlot.vue

<template>
  <section class="AiDvPlot">
    <ai-select class="plotPicker" v-model="current" :select-list="charts" @change="handleChangeChart"/>
    <div ref="DvPlot"/>
  </section>
</template>
<script>
export default {
  name: "AiDvPlot",
  props: {
    options: {default: () => []}
  },
  data() {
    return {
      current: 0
    }
  },
  computed: {
    charts: v => v.options.map((e, id) => ({id, label: e.title})),
    plot: v => v.options[v.current]
  },
  methods: {
    handleChangeChart() {

    }
  },
}
</script>
<style scoped lang="scss">
.AiDvPlot {
  position: relative;
  height: 100%;

  :deep(.plotPicker) {
    position: absolute;
    right: 12px;
    top: -10px;

    .el-select {
      .el-input__inner {
        background: #218ffd1a;
        border: 1px solid #1F66AD;
        color: #2FC5FF;
      }

      .el-input__suffix {
        color: #2FC5FF !important;
      }
    }
  }
}
</style>