Слияние кода завершено, страница обновится автоматически
Введение
В связи с развитием интеллектуальных подключённых систем, всё больше внимания уделяется концепции Интернета вещей. Крупные компании разрабатывают собственные платформы для создания экосистемы Интернета вещей и конкуренции на рынке. Данный фреймворк представляет собой набор инструментов для разработки пользовательского интерфейса (UI) на основе стандартов дизайна пользовательского интерфейса платформы Hilink от компании Huawei. Хотя платформа Hilink предлагает инструменты для перетаскивания элементов при разработке, они не всегда могут удовлетворить разнообразные требования клиентов. С помощью данного фреймворка можно создавать приложения Hilink в соответствии с потребностями клиентов.
Документация и демоверсия
Для получения дополнительной информации о фреймворке обратитесь к документации по адресу http://hilink.cxlwt.cn/docs или посетите демонстрационную версию по адресу http://hilink.cxlwt.cn.
Установка
Установите фреймворк Hilink-UI с помощью команды npm install hi-link-ui.
Использование Hilink-UI
Импортируйте Hilink-UI в файл main.js:
import Vue from 'vue'
import HiLinkUI from 'hi-link-ui'
import 'hi-link-ui/packages/style/index.scss'
import App from './App.vue'
Vue.use(HiLinkUI);
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
Переключение тем
Hilink поддерживает переключение тем в зависимости от того, включена ли тёмная тема на устройстве. Для переключения тем используйте функцию this.$switchTheme().
Пример:
this.$switchTheme('dark');//переключение на тёмную тему
this.$switchTheme('light');//переключение на светлую тему
Нормальный режим использует следующие цвета текста:
| Цвет | Описание |
|---|---|
| 1 | Основной цвет текста |
| 2 | Второй цвет текста |
| 3 | Третий цвет текста |
| 4 | Четвёртый цвет текста |
| 5 | Пятый цвет текста |
| 6 | Шестой цвет текста |
| 7 | Седьмой цвет текста |
| 8 | Восьмой цвет текста |
| 9 | Девятый цвет текста |
| 10 | Десятый цвет текста |
| 11 | Одиннадцатый цвет текста |
Фреймворк уже адаптирован под переключение между темами, и вы можете использовать следующие CSS-стили для соответствующего текста:
.hi-color-1
.hi-color-2
.hi-color-3
.hi-color-4
.hi-color-5
.hi-color-6
.hi-color-7
.hi-color-8
.hi-color-9
.hi-color-10
.hi-color-11
Тёмный режим также использует указанные выше цвета текста.
Фреймворк уже адаптирован под переключение между режимами, и вы можете использовать указанные ниже CSS-стили для соответствующего текста:
/* ==================
Текст в тёмном режиме
==================== */
/*Первый цвет текста*/
.text-color-one {
@include text_color_one($text-color-one-dark);
}
/*Второй цвет текста*/
.text-color-two {
@include text_color_two($text-color-two-dark);
}
/*Третий цвет текста*/
.text-color-three {
@include text_color_three($text-color-three-dark);
}
/*Цвет текста во всплывающих окнах*/
.text-color-dialog{
@include text_color_one($text-color-one-dark);
}
Этот компонент использует flex-макет.
Базовый макет включает три столбца:
Пример кода:
<hi-row >
<hi-col :span="1" >
<hi-card style="background-color: #e40079;"></hi-card>
</hi-col>
<hi-col :span="1">
<hi-card style="background-color: #262626;"></hi-card>
</hi-col>
<hi-col :span="1">
<hi-card style="background-color: #e40079;"></hi-card>
</hi-col>
</hi-row>
Здесь span указывает долю пространства, занимаемую каждым столбцом. Значение может быть числом или строкой. Если это число, то оно измеряется в пикселях. Если строка, то её значение зависит от контекста.
Между столбцами существует интервал.
Значение padding определяет расстояние между столбцами. Оно может быть числом (в пикселях) или строкой (с использованием соответствующих единиц измерения).
Пример кода:
<hi-row :padding="8">
<hi-col :span="1">
<hi-card></hi-card>
</hi-col>
<hi-col :span="1">
<hi-card></hi-card>
</hi-col>
</hi-row>
<hi-row :padding="8">
<hi-col :span="1">
<hi-card ></hi-card>
</hi-col>
<hi-col :span="1">
<hi-card></hi-card>
</hi-col>
</hi-row>
Можно объединить различные макеты столбцов в одном ряду.
Пример кода:
<hi-row :padding="8">
<hi-col :span="1"><hi-card></hi-card></hi-col>
<hi-col :span="1"><hi-card></hi-card></hi-col>
</hi-row>
<hi-row :padding="8">
<hi-col :span="1"><hi-card ></hi-card></hi-col>
<hi-col :span="1"><hi-card></hi-card></hi-col>
</hi-row>
<hi-row :padding="8">
<hi-col :span="1"><hi-card ></hi-card></hi-col>
<hi-col :span="1"><hi-card></hi-card></hi-col>
<hi-col :span="1"><hi-card></hi-card></hi-col>
</hi-row>
``` **Padding | 设置内部栅栏间距**
| Параметр | Описание | Тип | Значение по умолчанию |
|:----------:|:-----------------:|:----:|:------------------:|
| padding | Устанавливает внутренние поля сетки | [String, Number] | 0 |
**Tag | Пользовательский элемент метки**
| Параметр | Описание | Тип | Значение по умолчанию |
| :------: | :--------: | :----: | :------------------: |
| tag | Пользовательская метка элемента | String | div |
**Is-vertical-line | Отображать ли рамку сетки**
| Параметр | Описание | Тип | Значение по умолчанию |
| :---------:|:-----------:|:-----:|:----------------------:|
| is-vertical-line | Показывать ли рамку сетки | Boolean | false |
### Col Attributes
| Параметр | Описание | Тип | Значение по умолчанию |
| :----------: | :------------------------------------------: | :-----: | :-----------------------: |
| span | Вес в строке | Number | 1 |
| tag | Пользовательская метка элемента | String | div |
## Card — карточка
> Элемент управления стилем карточки.
### Использование
> Элементы управления автоматически имеют закруглённые углы и соответствуют требованиям дизайна. Внутренние поля можно настроить с помощью параметра «padding», а высоту — с помощью «height».
```vue
<hi-card padding="1rem" height="auto">
<span>Содержание содержание содержание содержание содержание содержание содержание содержание содержание содержание содержание</span>
</hi-card>
<hi-card padding="1rem" height="4rem">
<span>Содержание содержание содержание содержание содержание содержание содержание содержание содержание содержание содержание</span>
</hi-code>
| Параметр | Описание | Тип | Значение по умолчанию |
|---|---|---|---|
| padding | Устанавливает внутренние поля карточки | [Number, String] | 0 |
| height | Устанавливает высоту карточки | [Number, String] | 4rem |
Диалоговое окно позволяет отобразить настраиваемое всплывающее окно.
<template>
<hi-card >
<hi-row class="item2" :padding="0">
<hi-col :span="1">
<div class="item1-div">
<div class="text-color-one model-title-main-size" @click="showDialog = true">
Подсказка
</div>
</div>
</hi-col>
<hi-col :span="1">
<img src="/img/appoint_on.png" class="item-logo">
</hi-col>
</hi-row>
</hi-card>
<hi-dialog
:visible="showDialog"
:bottom="16"
title="Теплая подсказка" @openDialog="openDialog">
<div slot="dialog-body">
После включения функции очиститель будет проверять значение PM2.5 даже при отключенном питании. Во время проверки будет слышен лёгкий шум ветра.
</div>
<div slot="dialog-foot">
<hi-row is-vertical-line :padding="0">
<hi-col :span="1" class="hi-btn-color-blue">
<span @click="showDialog = false">Отмена</span>
</hi-col>
<hi-col :span="1" class="hi-btn-color-blue">
Подтвердить запуск
</hi-col>
</hi-row>
</div>
</hi-dialog>
</template>
<script>
export default {
data(){
showDialog:false
}
}
</script>
| Параметр | Описание | Тип | Значение по умолчанию |
|---|---|---|---|
| title | Заголовок | String | '' |
| visible | Отображается ли | Boolean | false |
| bottom | Расстояние от нижней части (px) | Number | null |
| top | Расстояние от верхней части (px) | Number | null |
<template>
<hi-card>
<hi-dropdown :list="dropdownList" v-model="id">
<span slot="content">
<hi-row class="item2" :padding="0">
<hi-col :span="1">
<div class="item2-div">
<div class="text-color-one model-title-main-size">Скорость ветра</div>
<div class="text-color-two model-title-subtitle-size">{{getName(this.id)}}</div>
</div>
</hi-col>
<hi-col :span="1">
<img src="/img/appoint_on.png" class="item-logo">
</hi-col>
</hi-row>
</span>
</hi-dropdown>
</hi-card>
</template>
<script>
export default {
data() {
return {
id:1,
dropdownList: [
{
id:0,
name:'Первый пункт'
},
{
id:1,
name:'Второй пункт'
},
{
id:2,
name:'Третий пункт'
},
{
id:3,
name:'Четвёртый пункт'
},
{
id:4,
name:'Пятый пункт'
},
{
id:5,
name:'Шестой пункт'
}
]
}
},
methods:{
getName(id){
for
``` ### TimePicker
Атрибуты:
| Параметр | Описание | Тип | Возможные значения | Значение по умолчанию |
|:-----: | :--------------: | :-----------------------: | :----: | :----:|
| title | Заголовок диалогового окна выбора даты | String | — | '' |
| visible | Переключатель диалогового окна выбора даты | Boolean | — | false |
| v-model | Привязанное значение | Boolean / String / Number | — | — |
События:
| Событие | Описание | Параметры обратного вызова |
|:------: | :-----------: | :---------------------------------------------------: |
| confirm | Отслеживание нажатия кнопки в диалоговом окне | type: 'success' для успешной кнопки, 'confirm' для кнопки отмены; val: возвращаемое значение |
### Product
Использование:
> *Рисунок 1. Продукт.*
|Параметр | Описание |Тип |Возможные значения |Значение по умолчанию|
|:-----: |:----------: |:-----: |:----: |:----:|
| bigUrl | Адрес изображения продукта |String |— |'' |
| miniUrl | Адрес логотипа бренда |String |— |'' |
| black | Является ли изображение тёмным |Boolean |— |false |
### Progress
Использование:
> *Рисунок 2. Слайдер.*
| Параметр | Описание | Тип | Возможные значения | Значение по умолчанию |
|:-----: | :----------: | :-----: | :----: | :----:|
| v-model | Связанное значение | Boolean / String / Number | — | — |
| min | Минимальное значение | Number | — | 0 |
| max | Максимальное значение | Number | — | 0 |
### Swipe
Использование:
> *Рисунок 3. Свайпер.*
| Параметр | Описание | Тип | Возможные значения | Значение по умолчанию |
|:-----: | :----------: | :-----: | :----: | :----:|
| height | Высота элемента управления (px) | Number | — | 200 |
### Switch
Использование: ### Переключатель
```vue
<template>
<hi-card>
<hi-row>
<hi-col :span="1" style="margin-top: 1.25rem;margin-left: 1rem;">
<hi-switch v-model="switchState" @change="switchChange"></hi-switch>
</hi-col>
<hi-col :span="1" style="margin-top: 1.25rem;margin-right: 1rem;">
<hi-switch
v-model="switchState1"
no-color="red"></hi-switch>
</hi-col>
</hi-row>
</hi-card>
</template>
<script>
export default {
data(){
return{
switchState:false,
switchState1:false,
}
},
methods:{
switchChange(val){
console.log(val)
}
}
}
</script>
| Параметр | Описание | Тип | Возможные значения | Значение по умолчанию |
|---|---|---|---|---|
| no-color | Цвет фона в открытом состоянии | String | — | Следование системе |
| off-color | Цвет фона в закрытом состоянии | String | — | Следование системе |
| v-model | Связанное значение | Boolean / String / Number | — | — |
| Событие | Описание | Параметры обратного вызова |
|---|---|---|
| change | Мониторинг состояния переключения | val: состояние переключения |
export default {
mounted(){
this.$toast({
msg:'Исключение'
})
}
}
| Параметр | Описание | Тип | Возможные значения | Значение по умолчанию |
|---|---|---|---|---|
| msg | Содержимое сообщения | String | — | — |
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )