Snackbar 底部提示

<template>
  <PreviewBlock title="基础">
    <DuSnackbar :button-props="{ text: '自动宽度' }">
      成功添加「牛魔王」到 在卖的
    </DuSnackbar>
  </PreviewBlock>
  <PreviewBlock title="显示关闭按钮">
    <DuSnackbar show-close :button-props="{ text: '自动宽度' }">
      成功添加「牛魔王」到 在卖的
    </DuSnackbar>
  </PreviewBlock>
  <PreviewBlock title="不展示按钮">
    <DuSnackbar show-close :show-action-btn="false">
      成功添加「牛魔王」到 在卖的
    </DuSnackbar>
  </PreviewBlock>
  <PreviewBlock title="展示前置icon">
    <DuSnackbar
      show-close
      left-icon="info-circle-filled"
      :button-props="{ text: '自动宽度' }"
    >
      成功添加「牛魔王」到 在卖的
    </DuSnackbar>
  </PreviewBlock>
  <PreviewBlock title="展示前置image">
    <DuSnackbar
      show-close
      left-image="https://assets.qiandaocdn.com/admin-upload/3ff2642af2c96efc915d3de7cf864a86.png"
      :button-props="{ text: '快点我' }"
    >
      恭喜你！即将成功食用Snackbar
    </DuSnackbar>
  </PreviewBlock>
  <PreviewBlock title="支持自定义">
    <DuSnackbar
      :extStyle="{
        backgroundColor: '#fff',
        boxShadow: '0px 4px 20px 0px rgba(0, 0, 0, 0.06)',
      }"
      :button-props="{
        text: '去出价',
        type: 'outline',
        size: 'small',
        extStyle: 'color:#2B1AC0;border:1px solid #2B1AC0',
      }"
    >
      <div>
        <div class="flex items-center lh-24px">
          <div class="c-hex-2B1AC0 fw-700 mr-4px font-size-20px">¥120</div>
          <div class="c-black font-size-14px">竞拍该作品</div>
        </div>
        <div class="c-gray font-size-11px">06/15 周三 20:30 截拍</div>
      </div>
    </DuSnackbar>
  </PreviewBlock>
</template>

<script setup lang="ts">
import { DuSnackbar } from 'dangoui'
</script>