# 模态加载

<template>
  <div class="wrapper">
    <dof-minibar title="Toast提示"></dof-minibar>
    <div class="title-box">
      <text class="title-text">基础样式</text>
    </div>
    <div style="padding: 32px;">
      <dof-button @dofButtonClicked="$refs['dofToast1'].showToast()" text="文字toast"></dof-button>
    </div>
    <div style="padding: 32px;">
      <dof-button @dofButtonClicked="$refs['dofToast2'].showToast()" text="成功toast"></dof-button>
    </div>
    <div style="padding: 32px;">
      <dof-button @dofButtonClicked="$refs['dofToast3'].showToast()" text="失败toast"></dof-button>
    </div>
    <dof-toast ref="dofToast1" :content="'提示文案'"></dof-toast>
    <dof-toast ref="dofToast2" type="success" :content="'提示文案'"></dof-toast>
    <dof-toast ref="dofToast3" type="fail" :content="'提示文案'"></dof-toast>
  </div>
</template>

<style scoped>
.wrapper {
  background-color: #f9f9f9;
}

@media screen and (weex-theme: colmo) {
  .wrapper {
    background-color: #151617;
  }
}
</style>

<script>
import { DofMinibar, DofButton, DofToast } from 'dolphin-weex-ui'
export default {
  components: { DofMinibar, DofButton, DofToast },
  data: () => ({}),
  computed: {},
  created() {},
  methods: {}
}
</script>