DOCSEARCHbyAlgolia
Submit Docs

kvuse UI Component Library

website·Indexed 30 days ago

https://kvuse.github.io/kvuse

A Vue-based component library providing a wide range of UI elements and directives. It includes implementations for Element Plus and Vant, featuring components such as Table-V2, VirtualList, DatePicker, and NumberKeyboard, as well as custom directives for keyboard listening, money formatting, and autofocus.

Tokens
23.6K
Snippets
153
Records
164
Agent score
72%

What's inside kvuse

  1. Customize k-picker columns and headers using slots

    You can customize the rendering of specific columns and headers in k-picker by using slots. To enable custom rendering for a column, add custom and header properties to the column definition in tableColumn.

    • Use #header-{headerName} to customize the column header.
    • Use #{columnProp} to customize the cell content (provides { row } in the slot scope).
    • Use #right-header to add custom content to the right side of the picker header.
    <template>
  <k-picker
    :table-column="tableColumn"
    :table-data="tableData"
    v-model="multipleSelection"
  >
    <!-- Custom Header for 'address' column -->
    <template #header-address>
      <el-tag>自定义表头</el-tag>
    </template>

    <!-- Custom Cell for 'address' column -->
    <template #address="{ row }">
      {{ `custom: ${row.address}` }}
    </template>

    <!-- Custom Right Header content -->
    <template #right-header>
      <el-tag>自定义右侧表头</el-tag>
    </template>

    <template #footer>
      <k-button type="primary" @click="clickHandle">确认</k-button>
    </template>
  </k-picker>
</template>

<script setup>
const tableColumn = [
  { label: '日期', prop: 'date' },
  { label: '姓名', prop: 'name' },
  {
    label: '地址', 
    prop: 'address', 
    custom: 'address', // Matches the slot name #address
    header: 'header-address', // Matches the slot name #header-address
  },
];
// ... tableData and multipleSelection definitions
</script>

  2. Implement basic tooltips with k-tooltip

    The k-tooltip component provides a pop-up text hint when hovering over an element. You can define the hint text using the content prop for simple text, or use the #content slot for complex HTML content. The overflow prop can be used to show the tooltip only when the trigger element's text overflows its container.
    <template>
  <div class="flex">
    <!-- Simple text tooltip -->
    <k-tooltip content="消息提示">
      <k-button>消息提示</k-button>
    </k-tooltip>

    <!-- Slot-based tooltip for custom content -->
    <k-tooltip>
      <k-button>插槽提示</k-button>
      <template #content>
        插槽消息提示
      </template>
    </k-tooltip>

    <!-- Tooltip that triggers on text overflow -->
    <k-tooltip overflow>
      <span class="text-overflow">超出显示省略号...</span>
      <template #content>
        超出显示省略号完整内容
      </template>
    </k-tooltip>
  </div>
</template>

  3. Handle empty states in Table-V2

    When table-data is an empty array, the table displays a 'no data' state. You can customize the displayed text using the empty-text prop or provide custom content via the #empty slot.
    <template>
  <!-- Using default empty text -->
  <k-table-v2 :table-data="[]" :table-column="tableColumn" />

  <!-- Or customize the text -->
  <k-table-v2 
    :table-data="[]" 
    :table-column="tableColumn" 
    empty-text="Custom No Data Message" 
  />
</template>

  4. Implement sorting in k-table-v2

    To enable sorting, set sortable: true in the column configuration object. The component emits a @sort-change event providing the column and sortType ('ascending' or 'descending'), which should be used to manually sort the data source.
    <template>
  <k-table-v2
    height="auto"
    :table-data="tableData" 
    :table-column="tableColumn"
    @sort-change="sortChange"
  />
</template>

<script setup>
import { ref } from 'vue';

const tableColumn = [
  { label: '日期', prop: 'date', sortable: true },
  { label: '姓名', prop: 'name', sortable: true },
  { label: '地址', prop: 'address', showOverflowTooltip: true, width: '150px' },
];

const tableData = ref([
  { id: 1, date: '2016-05-04', name: 'Jhon', address: '...' },
  { id: 2, date: '2016-05-03', name: 'Luke', address: '...' },
]);

const sortChange = ({ column, sortType }) => {
  tableData.value = sortType === 'ascending'
    ? tableData.value.sort((a, b) => b.id - a.id)
    : tableData.value.sort((a, b) => a.id - b.id);
};
</script>

  5. Add icons to k-tooltip

    Enable an icon next to the tooltip text by adding the show-icon prop. You can customize the icon using the #icon slot.
    <template>
  <div class="flex">
    <!-- Default icon -->
    <k-tooltip content="消息提示显示图标" show-icon placement="right">
      显示图标
    </k-tooltip>

    <!-- Custom icon via slot -->
    <k-tooltip content="消息提示显示图标" show-icon placement="right">
      <k-button>插槽图标提示</k-button>
      <template #icon>
        <el-icon :size="18">
          <InfoFilled />
        </el-icon>
      </template>
    </k-tooltip>
  </div>
</template>

<script setup>
import { InfoFilled } from '@element-plus/icons-vue';
</script>

  6. Display and customize summary rows in k-table-v2

    Enable the summary row by adding the show-summary attribute to the k-table-v2 component. To customize the calculation logic, provide a function to the summary-method prop. The method receives an object containing the current row (column info) and index.
    <template>
  <k-table-v2 
    :table-data="tableData" 
    :table-column="tableColumn" 
    show-summary 
    :summary-method="summaryMethod"
  />
</template>

<script setup>
const summaryMethod = ({ row, index }) => {
  if (!index) return 'sum'; // First cell of summary row
  const sum = tableData.value.reduce((total, pre) => total + Number(pre[row.prop]), 0);
  return Number.isNaN(sum) ? '' : `￥${sum.toFixed(2)}`;
};
</script>

  7. Use k-auto-counter to create an animated number display

    The k-auto-counter component is used to display a number that animates when its value changes. It supports two-way binding via v-model.
    <template>
  <k-auto-counter v-model="count" class="font-20 font-bold" />
</template>

<script setup>
import { ref } from 'vue';
const count = ref(20);
</script>

  8. Implement infinite scroll loading in k-card-list

    The k-card-list component emits a @scroll event that provides the distance from the bottom of the scrollbar. This can be used to trigger data fetching or appending when the user reaches the end of the list.
    <template>
  <div class="card-basic">
    <k-card-list :data="data" row-class="shadow" @scroll="scrollHandle">
      <template #default="{ index }">
        <div class="flex-center card-row">{{ `list ${index}` }}</div>
      </template>
    </k-card-list>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const data = ref(new Array(30).fill({ name: 12 }));

const scrollHandle = ({ distance }) => {
  // Trigger load when distance to bottom is less than 100px
  if (distance < 100 && data.value.length < 100) {
    setTimeout(() => {
      data.value = [...data.value, ...data.value];
    }, 1000);
  }
};
</script>

  9. Customize k-batch-table using slots

    The k-batch-table component provides slots for custom content:

    • #footer: Used to add elements like batch action buttons below the table.
    • Custom Headers: Define a header property in the table-column object (e.g., header: 'dateHeader'), then use the corresponding slot (e.g., #dateHeader).
    • Custom Cells: Define a custom property in the table-column object (e.g., custom: 'set'), then use the corresponding slot (e.g., #set="{ row, index }") to render custom cell content.
    <template>
  <k-batch-table
    :table-data="tableData"
    :table-column="tableColumn"
    v-model="multipleSelection"
  >
    <!-- Footer Slot -->
    <template #footer>
      <el-button @click="batchHandle">批量操作</el-button>
    </template>

    <!-- Custom Header Slot (defined by header: 'dateHeader' in column config) -->
    <template #dateHeader>
      <el-tag>自定义表头</el-tag>
    </template>

    <!-- Custom Cell Slot (defined by custom: 'set' in column config) -->
    <template #set="{ row, index }">
      <k-button @click="clickHandle(row, index)">操作</k-button>
    </template>
  </k-batch-table>
</template>

<script setup>
const tableColumn = [
  { label: '日期', prop: 'date', header: 'dateHeader' },
  { label: '操作', custom: 'set' },
];
</script>

  10. Implement click debouncing with v-button directive

    The v-button directive prevents multiple rapid clicks (debouncing) by automatically setting the button to a disabled state immediately after it is clicked. By default, the button remains disabled for 800ms before becoming clickable again.
    <template>
  <el-button type="primary" v-button>防抖点击</el-button>
</template>

  11. Configure Dialog footer visibility and customization

    You can hide the default footer by setting the show-footer prop to false. To provide custom buttons or content in the footer, use the #footer slot.
    <!-- Hide footer -->
<k-dialog v-model="visible" :show-footer="false">
  这是一个没有底部的对话框
</k-dialog>

<!-- Custom footer -->
<k-dialog v-model="visible">
  这是一个对话框
  <template #footer>
    <k-button>自定义按钮</k-button>
  </template>
</k-dialog>

  12. Customize k-table-v2 columns using slots

    You can customize column headers and cell content using slots:

    • Custom Header: Define a header property in the column config (e.g., header: 'dateHeader') and use the corresponding slot #dateHeader.
    • Custom Cell Content: Define a custom property in the column config (e.g., custom: 'set') and use the corresponding slot #set="{ row }" to access the row data.
    <template>
  <k-table-v2 :table-data="tableData" :table-column="tableColumn" height="300px">
    <!-- Custom Header Slot -->
    <template #dateHeader>
      <el-tag>自定义表头</el-tag>
    </template>
    <!-- Custom Cell Slot -->
    <template #set="{ row }">
      <k-button @click="clickHandle(row)">设置</k-button>
    </template>
  </k-table-v2>
</template>

<script setup>
const tableColumn = [
  { label: '日期', prop: 'date', header: 'dateHeader', width: '200px' },
  { label: '操作', custom: 'set', width: '120px' },
];
// ... tableData and clickHandle implementation
</script>