high-tw-web 参考文档

主要技术参考

• Система фреймворка, основанная на vue: Vue^2.5.17
• Vue-фреймворк для быстрой сборки больших приложений: Vue CLI
• Файлы стилей LESS: LESS^3.8.1
• Базовая библиотека стилей: Bootstrap^4.1.1
• Библиотека базовых компонентов: Bootstrap-Vue^2.0.0-rc.11
• Маршрутизатор для системы, использующий режим hash: Vue-Router^3.0.1
• Глобальный менеджер состояний: Vuex^3.0.1
• Библиотека иконок шрифтов: Font-Awesome^4.7.0
• HTTP-библиотека на основе Promise: Axios^0.18.0
• Компонент уведомлений Toastr: Toastr^2.1.4
• Компонент загрузки файлов: Vue-Upload-Component^2.8.13
• Многофункциональный компонент выбора: Vue-Multiselect^2.1.0
• Компонент выбора даты: Vue-Datepicker-Local^1.0.19
• Компонент дерева: Vue-Jstree^2.1.6
• Компонент меню выбора: Metismenu^2.7.9
• Компонент полосы прокрутки: Vuescroll^4.8.12

Компоненты библиотеки

В этой библиотеке компонентов все компоненты и плагины загружаются глобально, а также в неё встроена панель меню siderbar, компоненты формы, отчёты, инструменты загрузки, оповещения, подтверждения, уведомления toastr, инструменты запросов к API, обработка параметров URL, форматирование дат и фильтры.

Использование:

import Hightw from 'high-tw-web'
Vue.use(Hightw)

Создание среды разработки

1. Компилятор Рекомендуется использовать Sublime в качестве компилятора. Загрузите его с официального сайта: https://www.sublimetext.com/. Выберите соответствующую платформу для установки.

2. Плагины для компилятора Откройте компилятор, нажмите Ctrl+Shift+P, введите install, выберите Install Package, затем последовательно установите следующие плагины:

   • LESS-sublime (для подсветки синтаксиса файлов LESS),
   • Sublime-HTMLPrettify (для форматирования HTML, CSS, JavaScript, Vue). Примечание: для форматирования файлов Vue необходимо изменить настройки по умолчанию в плагине Sublime-HTMLPrettify, найти global_file_rules > html > allowed_file_extensions, и добавить «vue» в массив.

3. Установка Node.js Загрузите Node.js с официального сайта https://nodejs.org/. Выберите соответствующую платформу для установки, по умолчанию установка не требует настройки переменных окружения.

4. Настройка npm Node.js поставляется с предустановленным npm. Ознакомьтесь с документацией npm для получения дополнительной информации: https://npm.im/ru/. cnpm — это зеркало npm на Taobao, которое может значительно ускорить установку зависимостей через npm. Временное использование cnpm: npm --registry https://registry.npm.taobao.org install express. Постоянное использование cnpm: npm config set registry https://registry.npm.taobao.org.

Использование компонентов библиотеки

Использование компонента Metismenu

<template>
<metismenu :menu="metismenu" :topLevel="topLevel" :field="field" style="width: 200px; height: 100%;" />
</template>
<script>
export default {
data() {
    return {
      topLevel: '', // 顶级菜单
      metismenu: [], // 菜单数据，无需转换成树结构，平级的
      field: {
          pid: 'PARENTCODE', // 指定pid为那个字段
          id: 'RESOURCECODE', // 指定id为那个字段
          name: 'RESOURCENAME', // 指定显示那个字段
          url: 'URL' // 指定跳转的url为那个字段
      }
    }
  }
}
</script>

Использование компонента Richform

<template>
<richform :form="form" @submit="submit" />
</template>
<script>
export default {
data() {
    return {
      form: [{
        name: 'input1', // 输入框的name，id（使用时，此输入框的值的key）；必填
        value: 'test', // 默认值，没有用空字符串
        label: '分中心', // 输入框的label名字
        inputCol: 2, // 输入框的宽度，默认占2格
        labelCol: 3, // 输入框label的宽度，默认占1格
        type: 'text', // 输入框的类型，支持：text,password,email,number,url,tel,range,color；
                      // 另外非input框支持：select,singleselect、multiselect、search,singlesearch、multisearch；
        time,date,datetime、radios、checkboxes、textarea、button、option
        required: true, // 是否必填，默认不必填，会阻止表单提交
        placeholder: '请输入', // 输入框的提示
        format(value) { // 格式化输入的值
          return value.toLowerCase() // 这里将输入的值转为小写，可转换逻辑自己实现
        },
        pattern: "[A-z]{3}", // 正则校验，不通过会阻止表单提交
        maxlength: 10, // 输入的最长长度
        max: 20, // 输入的最大值，仅限于type=number
        min: 10, // 入
``` Данный фрагмент написан на языке JavaScript.

}, { // 布局用的，不需要type，一个占两行 name: 'empty', inputCol: 1, labelCol: 1 }, { name: 'button', type: 'button', // 按钮，默认会带查询和重置 col: 3, align: 'right', // 不设置默认查询和重置 buttons: [{ variant: 'secondary', // 按钮颜色，bootstrap4的规范 name: '自定义按钮', icon: 'thermometer-2', // 图标，fontawesome图标 click: function() { alert('click') } }, { variant: 'secondary', name: '自定义按钮', click: function() { alert('click1') } }] }, { name: 'option', type: 'option', // 自定义功能按钮，可放任意位置，方便布局 col: 3, align: 'center', // 不设置默认查询和重置 options: [{ variant: 'secondary', icon: 'university', name: '保存', click: function() { alert('click') } }] }] } }, methods: { submit(param) { console.log(param) // 校验通过后会打印获取的表单值 } }

Это часть кода на JavaScript, который описывает структуру пользовательского интерфейса с использованием различных элементов управления. В коде определяются три компонента с именами `empty`, `button` и `option`, каждый из которых имеет свои свойства и методы.