ww-ui-vue v0.0.23

Vue 3 + TypeScript + Vite

快速开始

完整引入

// main.ts

import { createApp } from 'vue'
import App from './App.vue'
import wwUi from "ww-ui-vue";
import "ww-ui-vue/lib/style.css"

createApp(App).use(wwUi).mount('#app')

按需导入

自动导入^推荐^

• 首先你需要安装unplugin-vue-components这款插件

npm install -D unplugin-vue-components

• 然后把下列代码插入到你的 Vite 或 Webpack 的配置文件中

Vite

// vite.config.ts
import { defineConfig } from 'vite'
import Components from 'unplugin-vue-components/vite'
import { WwUiResolver } from 'ww-ui-vue/resolver'

export default defineConfig({
    // ...
    plugins: [
        Components({
            resolvers: [WwUiResolver()],
        }),
    ],
})

Webpack

const Components = require('unplugin-vue-components/webpack').default
const { WwUiResolver } = require('ww-ui-vue/resolver')

module.exports = {
  // ...
  plugins: [
    Components({
      resolvers: [WwUiResolver()],
    }),
  ],
}

手动导入

App.vue

<template>
  <media-device-selector />
</template>
<script>
  import { MediaDeviceSelector } from 'ww-ui-vue'
  export default {
    components: { MediaDeviceSelector },
  }
</script>

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import "ww-ui-vue/lib/style.css"

createApp(App).mount('#app')

自定义组件

MediaDeviceSelector

电脑摄像头和麦克风设备选择组件,需要https

属性

事件

AudioWave

音频画声纹图组件

属性

方法

MapBase

地图底图组件

属性

事件

方法

MapLayerGroups

地图图层多组组件

属性

方法

MapLayerGroup

地图图层单组组件

属性

方法

MapModelLayer

地图图层组件

属性

方法

插槽

MapPopup

地图鼠标移上显示名称(通过标签实现显示名称,可通过插槽自定义)、点击弹窗组件

属性

事件

方法

插槽

MapPopupWithTitle

地图鼠标移上显示名称(通过地图样式实现显示名称)、点击弹窗组件

属性

事件

方法

插槽

MapPopupCommon

地图弹窗内容通用组件

属性

事件

方法

插槽

MapDraw

地图画图组件(点、线、多边形绘制/修改/删除)

属性

方法

MapDrawMeasure

地图计算组件(距离,面积)

属性

方法

MapDrawTrack

地图画轨迹组件

属性

方法

MapDrawingTool

地图标注工具组件(图层设置点、线、多边形经纬度时使用)

属性

工具

• Mqtt 对mqtt的封装
• HttpRequest 对axios的封装
• MapDrawing 对地图画图的封装,MapDraw组件在此基础上封装成组件
• setGifPointStyle 方法 对feature点设置gif图片样式
• eventGifIcon 告警事件Gif图片