使用

import MZUI from 'smart-screen-design';
import 'smart-screen-design/windi.css';
app.use(MZUI);

TLayout

T型布局

<TLayout>
    <template #top>
    </template>
    <template #left>
    </template>
    <template #right>
    </template>
  </TLayout>

slot | 说明 --- | :---: top | 顶部栏 left | 下方左半部分 right | 下方左半部分

topBar

顶部栏

<top-bar
    :device-name="deviceInfo.value.name"
    :room-name="deviceInfo.value.homeName"
    :desc="delayDesc"
    @exit="exitPage"
></top-bar>

prop|type|default|说明 --- |:---:|:---:|:---: deviceName| string | 灯光 | 设备名 roomName | string | 主卧 | 房间名 desc | string | 你想讲滴咩野 | 设备状态描述 background-color| string | #000 | 背景色

event|callback|type|说明 --- |:---:|:---:|:---: exit | | |告知点击退出按钮

powerSwitch

设备开关

<power-switch :power="OnOff" :on-icon="onIcon" :off-icon="offIcon" @change="OnOffControl"></power-switch>

prop|type|default|说明 --- |:---:|:---:|:---: power| boolean | true |当前开关值 onIcon | 图片 | 智慧屏开图标 |开图标 offIcon | 图片 | 智慧屏关图标 |关图标

event|callback|type|说明 --- |:---:|:---:|:---: change | !power | boolean |返回!power

adjustCard

调节卡片

<adjust-card class="flex-auto" title="亮度" :percentage="brightNessPercentage" @update="brightNessHandler">
</adjust-card>

prop| type |default|说明 --- |:-------:|:--:|:---: title| string | 亮度 |标题 desc| string | '' | 描述 percentage | number | 60 |百分比 min | number | 0 |最小百分比 max | number | 100 |最大百分比 color | string | 0 |背景色 height | number | 20 |拖动条高度 unit| string | % | 单位 step | number | 1 | 指定步长 graph | number | 3 | 段落分节 disabled | boolean | false | 是否禁用 slideDisabled | boolean | false | 是否禁用滑动

event|callback| type |说明 --- |:---:|:------:|:---: update | percent | number |返回拖动变化percent sliderEnd | percent | number |返回拖动结束时的百分比percent

modeCard

模式卡片

<mode-card class="flex-auto" :modes="runModes" @select="changeMode"></mode-card>

interface Mode {
  id: number;

  name: string;

  icon_on: string;

  icon_off: string;

  selected: boolean;

  [key: string]: any;
}

prop|type|default|说明 --- |:---:|:---:|:---: title| string | 模式 |标题 selectedVisable | boolean | true |已选模式是否标注 modes | Array<Mode> | 0 |最小百分比 row | number | 4 | 行容量

event|callback|type|说明 --- |:---:|:---:|:---: select | id | number |返回选择模式id

DropdownMenu

下拉框组件

<DropdownMenu
          title="模式"
          :value="device.mode"
          :options="config.modeList"
          @change="changeMode"
        ></DropdownMenu>

import { DropdownMenu } from 'smart-screen-design';

prop| type | default |说明 --- |:----------------------------------:|:-------:|:---: title| string | 标题 |标题 v-model | string | "" | 当前选中项对应的 value disabled | boolean | false | 是否禁用 options | Array<{text: string;value: string }> | [] | 选项数组

event|回调参数|说明 --- |:---:|:---: change | {text: string;value: string } |点击选项导致 value 变化时触发

functionCard

功能卡片

        <functionCard title="零冷水" :icon="noCold">
          <template #right>
            <functionSwitch :checked="zeroOnOff" @change="handleNoCold">
            </functionSwitch>
          </template>
        </functionCard>

import { functionCard, functionSwitch } from 'smart-screen-design';

prop| type | default |说明 --- |:----------------------------------:|:-------:|:---: title| string | 标题 |标题 icon | string | '' | 前置图标

slot|说明 --- |:---: right | 右侧插槽

functionSwitch

功能开关

            <functionSwitch :checked="zeroOnOff" @change="handleNoCold">
            </functionSwitch>

import { functionSwitch } from 'smart-screen-design';

prop| type | default |说明 --- |:----------------------------------:|:-------:|:---: checked| boolean | true |开关

event|回调参数|说明 --- |:---:|:---: change | swi: boolean |点击切换

ScreenCell

单元格组件

<ScreenCell
          title="模式"
          :value="device.mode"
          :options="config.modeList"
          @change="changeMode"
        ></ScreenCell>

import { ScreenCell } from 'smart-screen-design';

prop| type | default |说明 --- |:---------------------------------------:|:-------:|:---: title| string | 标题 |标题 desc | string | "" | 描述状态文案 icon | 图片 | - | 图标