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 {
    padding: v-bind('state.size.searchRowPad');
    background-color: v-bind('state.style.searchRowBg');
}

.query {
    // align-items: right;
    text-align: right;
    float: right;
    // width: 50%;
}

.left {
    float: left;
    // width: 50%;
}

.search-row,
.query,
.left {
    height: v-bind('state.size.searchRowHeight');
}

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