smart-screen-design

2,502
Install
npm install smart-screen-design
Latest Version:3.9.3
Vue:3
License:ISC
Last Updated:Mar 12, 2024
Links: npm
Maintainer: worldsoon

使用

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 图片 - 图标

Version History

Version Released Vue License
3.9.3 ^3.2.36 ISC
3.9.2 ^3.2.36 ISC
3.9.1 ^3.2.36 ISC
3.9.0 ^3.2.36 ISC
3.8.14 ^3.2.36 ISC