Tag 標籤

輕量標籤。type 語意色 + round/hit 形態 + 可關閉。

標籤

<template>
  <div class="demo-col">
    <div class="demo-row">
      <LhTag>預設</LhTag>
      <LhTag type="primary">主要</LhTag>
      <LhTag type="success">成功</LhTag>
      <LhTag type="warning">警告</LhTag>
      <LhTag type="danger">危險</LhTag>
      <LhTag type="info">資訊</LhTag>
    </div>
    <div class="demo-row">
      <LhTag size="small">小型</LhTag>
      <LhTag size="medium">預設尺寸</LhTag>
      <LhTag size="large">大型</LhTag>
      <LhTag type="primary" round>圓角</LhTag>
      <LhTag type="primary" hit>描邊（hit）</LhTag>
    </div>
    <div class="demo-row">
      <LhTag type="primary" closable @close="closed = true">可關閉</LhTag>
      <LhTag v-if="!closed" type="info" round>已關閉後隱藏</LhTag>
      <LhTag type="warning" disabled>停用</LhTag>
    </div>
  </div>
</template>

<script>
export default {
  data: () => ({ closed: false }),
}
</script>

Props

屬性	說明	類型	預設值
type	語意色	'default' \| 'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'	'default'
size	尺寸	'small' \| 'medium' \| 'large'	'medium'
closable	顯示關閉按鈕（aria-label 走語言包）	boolean	false
disabled	停用（關閉按鈕攔截）	boolean	false
round / hit	圓角 / 描邊強調	boolean	false
onClose	關閉回呼（與 close 事件並存）	(e: Event) => void	—
sx	sx 快速佈局	—	—

Events

事件	說明	回呼參數
click	點選時觸發	(e: MouseEvent)
close	關閉按鈕點選時觸發（與 onClose prop 並存）	(e: Event)