SZYGM1.0/src/components/minheader/index.vue

<template>
  <div
    :class="isStatus || isStatuser ? 'flex' : 'flex-end'"
    class="data-table-btn"
  >
    <div v-if="isStatus || isStatuser" class="vStatus">
      <slot name="header" />
    </div>
    <div v-if="isBtn" class="rb">
      <template v-if="isSearch">
        <div class="serlog">
          <div class="log"></div>
        </div>
        <el-input
          v-model="input"
          class="inputcas"
          placeholder="请输入您要搜索的内容"
          clearable
        />
        <el-button type="danger" size="default" class="br L12">搜索</el-button>
      </template>
      <template v-if="isAuth">
        <el-button size="default" plain class="btn-white br">新增</el-button>
      </template>
    </div>
  </div>
</template>
<script setup lang="ts">
const props = defineProps({
  //是否显示新增按钮
  isBtn: {
    type: Boolean,
    default: true,
  },
  //是否启用权限按钮
  isAuth: {
    type: Boolean,
    default: false,
  },
  //是否显示状态
  isStatus: {
    type: Boolean,
    default: false,
  },
  //是否显示名称
  isStatuser: {
    type: Boolean,
    default: false,
  },
  //是否显示搜索
  isSearch: {
    type: Boolean,
    default: false,
  },
});
//搜索内容
const input = ref("");
</script>
<style lang="scss" scoped>
.data-table-btn {
  line-height: 32px;
  margin-bottom: 20px;
}
.inputcas {
  width: 240px;
  height: 32px;
  background: #ffffff;
  // border: 1px solid #d2d6df;
  // box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border: none;
  // box-shadow: 0 0 0 0;
}
::v-deep .el-input__wrapper {
  box-shadow: none;
}
.rb {
  display: flex;
  align-items: center;
}
.serlog {
  width: 32px;
  height: 32px;
  background: #fff;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  display: flex;
  align-items: center;
  > .log {
    width: 14px;
    height: 14px;
    background: url("../../assets/header/ic_search_top.png") no-repeat;
    background-size: 100% 100%;
    margin-left: 16px;
  }
}
</style>