duty-management-web/src/components/cus/CusSearchButtons.vue

<template>
  <div class="search-buttons">
    <div class="search __hover" @click="$emit('handleSearch')">查 询</div>
    <div class="reset __hover" @click="$emit('handleReset')">重 置</div>
    <div class="expand __hover" v-if="expandValue !== null" @click="$emit('update:expandValue', !expandValue)">
      {{expandValue ? '收起' : '展开'}}
      <SvgIcon name="arrow_2" size="14" :rotate="expandValue ? 270 : 90"/>
    </div>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  computed,
  onMounted,
  ref,
  reactive,
  watch,
  getCurrentInstance,
  nextTick,
  ComponentInternalInstance, toRefs
} from 'vue'
  import {useStore} from 'vuex'
  import {useRouter} from 'vue-router'

  export default defineComponent({
    name: 'CusSearchButtons',
    props: {
      expandValue: {
        default: null
      }
    },
    setup(props, { emit }) {
      const store = useStore();
      const router = useRouter();
      const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
      return {
      }
    },
  })
</script>

<style scoped lang="scss">
  .search-buttons {
    margin-left: auto;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    margin-bottom: 12px;
    >div {
      height: 30px;
      margin-right: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      box-sizing: border-box;
      padding: 0 10px;
      border-radius: 4px;
      color: #FFFFFF;
      border: 1px solid rgba(0,133,247,0.5);
      &:last-child {
        margin-right: 0;
      }
    }
    .search {
      background-color: #0085F7;
    }
    .reset {
      background-color: rgba(0, 133, 247, 0.2);
    }
    .expand {
      color: #0062E9;
      margin-top: 8px;
      .svg-icon {
        margin-left: 9px;
      }
    }
  }
</style>