smart-screen-design v3.9.3

使用

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>

topBar

顶部栏

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

powerSwitch

设备开关

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

adjustCard

调节卡片

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

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;
}

DropdownMenu

下拉框组件

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

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

functionCard

功能卡片

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

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

functionSwitch

功能开关

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

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

ScreenCell

单元格组件

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

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