@aienbiencien/ljzn-plugin

Vue 3 + TypeScript 插件库，提供可复用组件与命令式方法。

安装

npm install @aienbiencien/ljzn-plugin
# 或
pnpm add @aienbiencien/ljzn-plugin

快速开始

全局注册

import { createApp } from 'vue'
import App from './App.vue'
import LjznPlugin from '@aienbiencien/ljzn-plugin'
import '@aienbiencien/ljzn-plugin/style.css'

const app = createApp(App)
app.use(LjznPlugin)
app.mount('#app')

按需引入

import { LjznModal, Modal } from '@aienbiencien/ljzn-plugin'
import '@aienbiencien/ljzn-plugin/style.css'

// 地图（独立入口，不引入弹窗）
import {
  TiandituMap,
  configureMap,
  getDefaultMapProvider,
} from '@aienbiencien/ljzn-plugin/tianditu-map'
import '@aienbiencien/ljzn-plugin/tianditu-map.css'

地图组件 TiandituMap（按需）

支持天地图 / ArcGIS / TomTom，基于 Leaflet。

// main.ts 配置 Key（一次即可）
import { configureMap } from '@aienbiencien/ljzn-plugin/tianditu-map'

configureMap({
  tiandituKey: 'your-tianditu-key',
  tomtomKey: 'your-tomtom-key',
})

<template>
  <TiandituMap
    v-model:provider="mapProvider"
    :lat="39.9"
    :lng="116.4"
    :zoom="12"
    map-type="satellite"
    :is-domestic="true"
    :labels="mapLabels"
    @ready="onReady"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import {
  TiandituMap,
  getDefaultMapProvider,
  type MapProviderType,
} from '@aienbiencien/ljzn-plugin/tianditu-map'
import '@aienbiencien/ljzn-plugin/tianditu-map.css'
import type { Map } from 'leaflet'

const mapProvider = ref<MapProviderType>(getDefaultMapProvider(true))
const mapLabels = {
  switchBasemap: '切换底图',
  fullscreen: '全屏',
  tiandituBasemap: '天地图',
  arcgisBasemap: 'ArcGIS',
  tomtomBasemap: 'TomTom',
}

function onReady(map: Map) {
  console.log(map)
}
</script>

peerDependency：业务项目需自行安装 leaflet。

弹窗组件 LjznModal

声明式用法：

<template>
  <LjznModal v-model="visible" title="编辑资料" @ok="onOk">
    <p>这里是弹窗内容</p>
  </LjznModal>
  <button @click="visible = true">打开</button>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { LjznModal } from '@aienbiencien/ljzn-plugin'

const visible = ref(false)
function onOk() {
  visible.value = false
}
</script>

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | modelValue / v-model | boolean | false | 是否显示 | | title | string | 提示 | 标题 | | content | string | - | 无插槽时的文案 | | width | string | number | 420 | 宽度 | | type | info / success / warning / error / confirm | - | 类型图标 | | mask | boolean | true | 遮罩 | | maskClosable | boolean | true | 点击遮罩关闭 | | closable | boolean | true | 右上角关闭 | | okText | string | 确定 | 确认文案 | | cancelText | string | 取消 | 取消文案 | | showCancel | boolean | true | 显示取消按钮 | | confirmLoading | boolean | false | 确认 loading | | centered | boolean | true | 垂直居中 |

命令式方法 Modal

import { Modal } from '@aienbiencien/ljzn-plugin'

// 基础打开
Modal.open({
  title: '自定义',
  content: '内容',
  onOk: () => console.log('ok'),
})

// 快捷方法
await Modal.info({ content: '这是一条提示' })
await Modal.success({ content: '操作成功' })
await Modal.warning({ content: '请注意' })
await Modal.error({ content: '出错了' })

const ok = await Modal.confirm({
  title: '删除确认',
  content: '确定删除该记录吗？',
})
if (ok) {
  // 用户点了确定
}

// 异步确认（返回 false 可阻止关闭）
Modal.confirm({
  content: '提交中…',
  onOk: async () => {
    await submitApi()
  },
})

全局注册后也可使用 this.$modal.confirm(...)（Options API）。

开发

cd npm
pnpm install
pnpm run build:lib

License

MIT