Card 卡片

默认插槽自带 space 间距

search 插槽中修改了 el-form-item 的样式，垂直居中

header

Approved by

内容1

内容2

内容3

footer

<script setup lang="ts">
import { QlCard } from 'qin-lantern'

const formInline = reactive({
  user: '',
})

function onSubmit() {
  console.log('submit!')
}
</script>

<template>
  <QlCard>
    <template #header>
      header
    </template>

    <template #search>
      <el-form
        style="background-color: #FAFAFA;"
        :inline="true"
        :model="formInline"
      >
        <el-form-item label="Approved by">
          <el-input
            v-model="formInline.user"
            placeholder="Approved by"
            clearable
          />
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            @click="onSubmit"
          >
            Query
          </el-button>
        </el-form-item>
      </el-form>
    </template>

    <div>
      内容1
    </div>

    <div>
      内容2
    </div>

    <div>
      内容3
    </div>

    <template #footer>
      footer
    </template>
  </QlCard>
</template>

<style scoped lang='scss'></style>

API

Attributes