Skip to content
On this page

Scrollboard

ๅธธ็”จๆ— ้™ๆปšๅŠจ

ๅŸบ็ก€็”จๆณ•

ๅŸบ็ก€็š„ๅ‡ฝๆ•ฐ็”จๆณ•

ไฝฟ็”จsizeใ€colorใ€painใ€roundๅฑžๆ€งๆฅๅฎšไน‰ Scrollboard ็š„ๆ ทๅผใ€‚
<script setup lang="ts">
import { ref } from 'vue'
const config = ref({
  header: ['ๅˆ—1', 'ๅˆ—2', 'ๅˆ—3'],
  data: [
    ['<span style="color:#37a2da;">่กŒ1ๅˆ—1</span>', '่กŒ1ๅˆ—2', '่กŒ1ๅˆ—3'],
    ['่กŒ2ๅˆ—1', '<span style="color:#32c5e9;">่กŒ2ๅˆ—2</span>', '่กŒ2ๅˆ—3'],
    ['่กŒ3ๅˆ—1', '่กŒ3ๅˆ—2', '<span style="color:#67e0e3;">่กŒ3ๅˆ—3</span>'],
    ['่กŒ4ๅˆ—1', '<span style="color:#9fe6b8;">่กŒ4ๅˆ—2</span>', '่กŒ4ๅˆ—3'],
    ['<span style="color:#ffdb5c;">่กŒ5ๅˆ—1</span>', '่กŒ5ๅˆ—2', '่กŒ5ๅˆ—3'],
    ['่กŒ6ๅˆ—1', '<span style="color:#ff9f7f;">่กŒ6ๅˆ—2</span>', '่กŒ6ๅˆ—3'],
    ['่กŒ7ๅˆ—1', '่กŒ7ๅˆ—2', '<span style="color:#fb7293;">่กŒ7ๅˆ—3</span>'],
    ['่กŒ8ๅˆ—1', '<span style="color:#e062ae;">่กŒ8ๅˆ—2</span>', '่กŒ8ๅˆ—3'],
    ['<span style="color:#e690d1;">่กŒ9ๅˆ—1</span>', '่กŒ9ๅˆ—2', '่กŒ9ๅˆ—3'],
    ['่กŒ10ๅˆ—1', '<span style="color:#e7bcf3;">่กŒ10ๅˆ—2</span>', '่กŒ10ๅˆ—3'],
  ],
  index: true,
  columnWidth: [50],
  align: ['center'],
  // waitTime: 500,
})
</script>
<template>
  <ElScrollboard :config="config" style="width:100%;height:300px;" />
</template>

Alert API

Attributes

NameDescriptionTypeDefaultRequired
titlealert title.^[string]โ€”No
typealert type.^[enum]'success' | 'warning' | 'info' | 'error' infoNo
descriptiondescriptive text.^[string]โ€”No
closablewhether alert can be dismissed.^[boolean]trueNo
centerwhether content is placed in the center.^[boolean]falseNo
close-textcustomized close button text.^[string]โ€”No
show-iconwhether a type icon is displayed.^[boolean]falseNo
effecttheme style.^[enum]'light' | 'dark''light'No

Released under the MIT License.