Basic Components

<Button @click="showSuccess" color="success">
  成功消息
</Button>

&lt;script setup&gt;
import { useAlert } from '~/composables/useAlert'
const { showSuccess } = useAlert()
&lt;/script&gt;

<Button @click="showSuccess" color="success">
  成功消息
</Button>
<Button @click="showWarning" color="warning">
  警告消息
</Button>
<Button @click="showError" color="error">
  错误消息
</Button>

<Input
  v-model="customDuration"
  type="number"
  label="持续时间（毫秒）"
  min="1000"
  step="1000"
/>
<Button @click="showCustomDuration">
  显示自定义时长消息
</Button>

&lt;script setup&gt;
const customDuration = ref(5000)
const showCustomDuration = () => {
  showSuccess('消息内容', { duration: customDuration.value })
}
&lt;/script&gt;

<Input
  v-model="detailsText"
  label="详细信息"
  placeholder="输入详细信息内容"
/>
<Button @click="showWithDetails">
  显示带详情的消息
</Button>

&lt;script setup&gt;
const detailsText = ref('这是详细信息')
const showWithDetails = () => {
  showSuccess('操作成功', { details: detailsText.value })
}
&lt;/script&gt;