vue 引入2套ui组件_vue2的窗口UI组件

vue 引入2套ui组件

窗口 (vue-window)

Recent web applications are mainly for mobile environments. Therefore window UI is no longer mainstream. However, window UI is still useful for professional web applications for PC environments. This package is an implementation of window UI for PC environment as a Vue Component.

最近的Web应用程序主要用于移动环境。 因此，窗口UI不再是主流。 但是，窗口UI对于PC环境的专业Web应用程序仍然有用。 该软件包是PC环境中作为Vue组件的窗口UI的实现。

View demo 观看演示

特征 (Features)

• Window component for vue2

  vue2的窗口组件

• Windows are draggable

  窗户是可拖动的

• Automatic z-index control

  自动z-index控制

• Resizable

  可调整大小

• z-index group

  Z索引组

• Configurable color theme

  可配置的颜色主题

• Built-in 3 color themes

  内置3种颜色主题

• Open / Close animation

  打开/关闭动画

• Tested on Safari10, Chrome60, Firefox55, IE11, Edge38 For PCs

  在Safari10，Chrome60，Firefox55，IE11，Edge38上针对PC进行了测试

用法 (Usage)

安装 (Install)

npm install --save @hscmap/vue-window

建立 (Setup)

ES6 / TypeScript (ES6 / TypeScript)

import Vue from 'vue'
import * as VueWindow from '@hscmap/vue-window'

Vue.use(VueWindow)

普通JS (CommonJS)

var Vue = require('vue')
Vue.use(require('@hscmap/vue-window'))

例 (Example)

<template>
    <hsc-window-style-metal>
        <hsc-window title="Window 1" >
            Parameters:
            <fieldset>
                <legend>&alpha;</legend>
                <input type="range" />
            </fieldset>
            <fieldset>
                <legend>&beta;</legend>
                <input type="range" />
            </fieldset>
        </hsc-window>
    </hsc-window-style-metal>
</template>

翻译自: https://vuejsexamples.com/window-ui-component-for-vue2/

vue 引入2套ui组件