noob-components/packages/base/data/search-row.vue

<template>
  <div class="search-row">
    <div class="left">
      <span class="title" v-if="title">{{ title }}</span>
      <NoobButton v-if="fresh" type="info" icon="Refresh" @click="emit('query')"> </NoobButton>
      <NoobButton v-if="add" type="primary" icon="Plus" @click="emit('add')">
        {{ t("base.add") }}
      </NoobButton>
      <NoobButton v-if="del" type="danger" icon="Delete" @click="emit('delete')">
        {{ t("base.delete") }}
      </NoobButton>
      <slot name="left"></slot>
    </div>
    <div class="query">
      <slot></slot>
      <NoobButton v-if="query" type="primary" icon="Search" @click="emit('query')">
        {{ t("base.select") }}
      </NoobButton>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted } from "vue";
import { useStore } from "vuex";
import { useI18n } from "vue3-i18n";
import { NoobButton } from "noob-mengyxu";
const { t } = useI18n();
const { state } = useStore();
const prop = defineProps({
  title: {
    type: String,
    default: null,
  },
  fresh: {
    type: Boolean,
    default: true,
  },
  add: {
    type: Boolean,
    default: true,
  },
  del: {
    type: Boolean,
    default: true,
  },
  query: {
    type: Boolean,
    default: true,
  },
});

const emit = defineEmits(["query", "add", "delete"]);

onMounted(() => {});
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.search-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: v-bind("state.size.searchRowPad");
  background-color: v-bind("state.style.searchRowBg");
}

.left,
.query {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  height: fit-content;
}

.query {
  // align-items: right;
  justify-content: flex-end;
  text-align: right;
  // width: 50%;
}

.left .el-button,
.query .el-button {
  margin-left: 0 !important;
}

.search-row,
.query,
.title,
.left {
  min-height: v-bind("state.size.searchRowHeight");
  line-height: v-bind("state.size.searchRowHeight");
}

.title {
  font-weight: bold;
  padding-right: 15px;
  font-size: v-bind("state.size.titleSize");
  min-width: 20px;
  color: v-bind("state.style.subTitleColor");
}
</style>