<template>
  <div class="page-toast">
    <co-header fixed title="Toast">
      <fallback slot="left"></fallback>
    </co-header>

    <div class="co-wrapper">
      <co-cell title="点击弹出 Toast" @click.native="openToast" size="large" ></co-cell>
      <co-cell title="点击弹出带有   icon 的 Toast" @click.native="openToastWithIcon" size="large" ></co-cell>
      <co-cell title="自定义 Toast 位置" @click.native="openBottomToast" size="large" ></co-cell>
    </div>
  </div>
</template>

<script type="es6">
export default{
  data() {
    return {
      progressVisible: false,
      value: 0,
      uploading: false,
      timer: null
    };
  },
  methods: {
    openToast: function() {
      this.$toast('提示信息');
    },

    openToastWithIcon: function() {
      // 自定义图标更换class类即可
      this.$toast({
        message: '操作成功',
        iconClass: 'coicon coicon-success_large',
//        iconClass: 'coicon coicon-edit',
        duration: '2000'
      });
    },

    openBottomToast: function() {
      this.$toast({
        message: '提示信息',
        position: 'bottom'
      });
    }
  }
};
</script>
