<template>
  <div>
    <h1>Notice 公告</h1>
    <p class="fbg-text">公告提示</p>
    <h3 class="fbg-title">基础用法</h3>
    <demo :code="baseInputStr">
      <el-notice :data="dataList" style="margin-left:100px;"/>
    </demo>
    <h3 class="fbg-title">属性</h3>
    <table class="fbg-table">
      <thead>
        <tr>
          <th>参数</th>
          <th>说明</th>
          <th>类型</th>
          <th>可选值</th>
          <th>默认值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>label</td>
          <td>系统标题</td>
          <td>String</td>
          <td>--</td>
          <td>--</td>
        </tr>
        <tr>
          <td>value</td>
          <td>值</td>
          <td>String | Number</td>
          <td>--</td>
          <td>--</td>
        </tr>
        <tr>
          <td>url</td>
          <td>系统地址</td>
          <td>String</td>
          <td>--</td>
          <td>--</td>
        </tr>
        <tr>
          <td>icon</td>
          <td>系统图标</td>
          <td>String</td>
          <td>--</td>
          <td>--</td>
        </tr>
      </tbody>
    </table>
    <h3 class="fbg-title">事件</h3>
    <table class="fbg-table">
      <thead>
        <tr>
          <th>事件名称</th>
          <th>说明</th>
          <th>回调参数</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>change</td>
          <td>选择事件</td>
          <td>(value, selectedData)</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
import hljs from '../util/highlight';
export default {
  data() {
    return {
      dataList: [
        {
          title: '中华人民共和国',
          content: '庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！',
          time: '2019-09-28 10:11:12'
        },
        {
          title: '70周年',
          content: '庆祝祖国70周年快乐！！！',
          time: '2019-09-28 10:11:12'
        }
      ],
      baseInputStr: `
      <template>
        <el-notice :data="dataList" "/>
      </template>
      <script>
        export default {
          data() {
            return {
              dataList: [
                {
                  title: '中华人民共和国',
                  content: '庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！',
                  time: '2019-09-28 10:11:12'
                },
                {
                  title: '70周年',
                  content: '庆祝祖国70周年快乐！！！',
                  time: '2019-09-28 10:11:12'
                }
              ]
            }
          },
          methods: {
            handleChange(value, data){
              window.location.href = data.url;
            }
          }
        }
      <\/script>`
    }
  },
  mounted() {
    hljs.highlightCode();
  }
}
</script>
<style scoped>
.input-margin {
  margin-top: 10px;
}
</style>