# Led 屏幕控件

<template>
  <led-screen-set
    v-model="val"
    :selectKey="selectKey"
    :selectName="selectName"
    :childrens="childrens"
    :keywords="keywords"
    :cwidth.sync="width"
    :cheight.sync="height"
    @showTypeChange="showTypeChange"
    @showModeChange="showModeChange"
    @clickRect="clickRect"
  ></led-screen-set>
</template>
<script>
  import Vue from 'vue';
  import ImgPreview from '@hui-pro/img-preview';
  import '@hui-pro/img-preview/theme/index.scss';
  Vue.use(ImgPreview);

  export default {
    data() {
      return {
        selectKey: 'dictCode',
        selectName: 'dictName',
        childrens: 'childrenList',
        keywords: [
          {
            dictName: '类型一',
            dictCode: '11111',
            childrenList: [
              { dictName: '关键字1', dictCode: 'key1111' },
              { dictName: '关键字2', dictCode: 'key2221' },
              { dictName: '换行', dictCode: 'line_feed' },
               {
          dictName: '换行1',
          dictCode: 'line_feed1'
        },
        {
          dictName: '换行2',
          dictCode: 'line_feed2'
        }
            ]
          },
          {
            dictName: '类型二',
            dictCode: '22222',
            childrenList: [
              { dictName: '关键字3', dictCode: 'key3333' },
              { dictName: '关键字4', dictCode: 'key4444' },
              { dictName: '换行', dictCode: 'line_feed' }
            ]
          }
        ],
        val: [],
        width: '0',
        height: '0',
        fontColors:[
         {
          name: '黑色',
          value: 'black',
          active: true
          }
        ],
        fontSizes:[
          {
            name:'20px',
            value: 20
          }
      ]
      };
    }
  };
</script>