image.png

参数

参数 说明 类型 可选值 默认值
notice 主要参数 Object —— ——
padding 提示组件的 padding String 参考css padding 10px
text 展示的文字 String —— ——
importText 右侧加粗文字 String —— ——
importWeight 右侧文字是否要加粗 String 参考 css fontWeight bold
hasArrow 右侧箭头是否显示 Boolean true/false false
color 文字颜色 String 参考css color ‘#FA5353’
bgColor 背景颜色 String 参考css backgroundColor ‘rgba(250, 79, 79, .2)’
importColor 加粗文字颜色 String 参考css color ‘#FA5353’

Event

参数 说明 回调参数
handleClick 点击事件回调 返回传入的 notice 对象

使用示例

  1. <template>
  2.   <div class="Notice">
  3.     <notice :notice="notice" v-on:handleClick="handleClick"/>
  4.   </div>
  5. </template>
  6. <script type="text/ecmascript-6">
  7. import Vue from 'vue'
  8. import { Notice } from '../../tunas'
  10. export default {
  11.   components: {
  12.     Notice
  13.   },
  14.   data() {
  15.     return {
  16.       notice: {
  17.         padding: '5px 20px 30px 0px',
  18.         text: '蓝牙已关闭设备无法使用',
  19.         importText: '开启蓝蓝',
  20.         importWeight: '',
  21.         color: 'blue',
  22.         hasArrow: true
  23.       }
  24.     }
  25.   },
  27.   methods: {
  28.     handleClick(e) {
  29.       console.log('回调信息', e)
  30.     }
  31.   }
  32. }
  33. </script>