yudao-init/src/views/copilot/components/select.vue

<!-- 
    filename: select.vue
    author: liubin
    date: 2024-04-17 09:50:03
    description: 
-->

<template>
  <div style="display: inline-block; text-align: center">
    <div class="copilot-select">
      <button
        type="button"
        v-for="item in options"
        :key="item"
        @click="currentActive = item"
        :class="[item == currentActive ? 'active' : '']"
      >
        {{ item }}
      </button>
    </div>
  </div>
</template>

<script>
export default {
  name: "CopilotSelect",
  components: {},
  props: {
    options: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      currentActive: this.options[0],
    };
  },
  watch: {
    currentActive: {
      handler(val) {
        this.$emit("update:active", val);
      },
      immediate: true,
    },
  },
  computed: {},
  methods: {},
};
</script>

<style scoped>
.copilot-select {
  display: flex;
  align-items: center;
  background: #01306c;
  border-radius: 4px;
  overflow: hidden;
}

button {
  color: #fff;
  padding: 8px 12px;
  cursor: pointer;
  position: relative;
  transition: all 0.3s;
}

button.active,
button:hover {
  background: #1d74d8;
}

button:not(:first-child)::before {
  content: "";
  position: absolute;
  top: 20%;
  left: -1px;
  width: 2px;
  height: 60%;
  background: #02236d;
}
</style>