example

一般用法

<template>
  <component :is="template">
    <div>
      <el-button type="primary">Addition button</el-button>
    </div>
  </component>
</template>
<script setup lang="tsx">
import { useQuery } from './useQuery';
import {
  createInputHelper,
  createSelectHelper,
  createDatePickHelper,
  createNumberHelper,
} from '@unicom-blockchain/query-component';
const { queryObject, template } = useQuery(
  [
    createInputHelper('prop1', '属性A'),
    createSelectHelper(
      'prop2',
      '属性b',
      [
        { label: 'abc', value: 'abc' },
        { label: 'abc1', value: 'abc1' },
        { label: 'abc2', value: 'abc2' },
      ],
      {
        clearable: true,
        multiple: true,
      },
    ),
    createDatePickHelper('prop3', '属性C', {
      type: 'daterange',
    }),
    createNumberHelper('props4', '属性D'),
  ],
  getData,
  getData,
);
function getData() {
  console.log(queryObject);
  return new Promise((resolve, _reject) => {
    resolve([]);
  });
}
</script>
<style>
:root {
  --un-color-fill-2: #f7f8fa;
}
</style>