<template>
  <div class='tuitui-notify'>
    <div class="title">点击按钮查看</div>
    <div class='btns-wrap'>
      <div><BKButton :text="'点我显示'" @click="showbNotifycation('bNotifycation')"></BKButton></div>
      <div><BKButton :text="'多行内容'" @click="showbNotifycation('bNotifycation1')"></BKButton></div>
      <div><BKButton :text="'文字大小颜色'" @click="showbNotifycation('bNotifycation2')"></BKButton></div>
      <div><BKButton :text="'背景'"  @click="showbNotifycation('bNotifycation3')"></BKButton></div>
    </div>
    <BKNotify :delayTime="3000" :text="'我是通知栏'" ref="bNotifycation"></BKNotify>
    <BKNotify :delayTime="3000" :text="'我是通知栏我是通知栏我是通知栏我是通知栏我是通知栏我是通知栏我是通知栏我是通知栏'" ref="bNotifycation1"></BKNotify>
    <BKNotify 
      :delayTime="3000" 
      :textColor="'red'"
      :textSize="'16'"
      :text="'我是通知栏'" 
      ref="bNotifycation2"></BKNotify>
      <BKNotify 
      :delayTime="3000" 
      :backgroundColor="'blue'"
      :textColor="'#fff'"
      :text="'我是通知栏'" 
      ref="bNotifycation3"></BKNotify>
  </div>
</template>
<script>
import BKButton from '@/components/BKButton'
import BKNotify from '@/components/BKNotify'
export default {
  components: {
    BKButton,
    BKNotify
  },
  mounted () {
    wx.setNavigationBarTitle({
      title: 'BKNotify 提示'
    })
  },
  methods: {
    showbNotifycation (target) {
      this.$refs[target].show()
    }
  }
}
</script>
<style scoped>
.btns-wrap {
  display: flex;
  flex-direction: column;
}
.tuitui-notify .btns-wrap {
  padding: 0 40px;
}
.tuitui-notify .btns-wrap > div {
  margin-top: 60px;
}
.title {
  margin: 40px;
  font-size: 26px;
  color: #ccc;
  font-weight: 600;
}
</style>
