GP 组件库

1.省市区选择器

yarn add gp-module
import { GpCitySelector } from "gp-module";

<script setup lang="ts">
import { ref } from "vue";
import { GpCitySelector } from "gp-module";
import { IBasicSelectOption } from "gp-module/dist/types/components/GpCitySelector.vue";

const provincesData: IBasicSelectOption[] = [
  {
    label: "A-G",
    value: "A-G",
    children: [
      {
        label: "安徽",
        value: "1-1",
        children: [
          {
            label: "安庆",
            value: "1-1-1",
            children: [
              { label: "潜山", value: "1-1-1-1" },
              { label: "太湖", value: "1-1-1-2" },
            ],
          },
          { label: "蚌埠", value: "1-1-2", children: [] },
        ],
      },
    ],
  },
  {
    label: "H-K",
    value: "H-K",
    children: [
      {
        label: "河南",
        value: "2-1",
        children: [
          {
            label: "郑州",
            value: "2-1-1",
            children: [
              { label: "中原", value: "2-1-1-1" },
              { label: "二七", value: "2-1-1-2" },
            ],
          },
          { label: "洛阳", value: "2-1-2", children: [] },
        ],
      },
    ],
  },
];

const areaId = ref<string>("1-1-1");
const areaName = ref<string>("");
</script>

<template>
  <div class="p-8 w-96">
    <h2>省市区选择器使用示例</h2>
    <GpCitySelector
      v-model:value="areaId"
      v-model:text="areaName"
      :provincesData="provincesData"
    />
    {{ areaId }} - {{ areaName }}
  </div>
</template>

<style scoped></style>

2.百度地图标注

<script setup lang="ts">
// 百度地图
import GpMap from "./components/GpMap.vue";

const showMap = ref(false);
// 地区 id
const mapAreaId = ref("161318");
// 坐标
const latlngRef = ref("23.137164,113.373831");
// 地址
const addressRef = ref("天河公园-北门");
// 名称+地址
const nameAndAddress = ref("");
</script>

  <div class="p-8 w-96">
    <h2>百度地图标注工具</h2>
    <Button @click="showMap = true" type="primary">打开地图</Button>
    <GpMap
      :provincesData="provincesData"
      v-model:latlng="latlngRef"
      v-model:id="mapAreaId"
      v-model:fullAddress="nameAndAddress"
      v-model:address="addressRef"
      v-model:visible="showMap"
      :isHot="false"
    >
      <template #footer>
        <div class="flex flex-row items-center mt-3">
          <div class="w-full text-center">
            <span class="font-bold text-red-600"
              >请在教学点位置单击鼠标右键添加标注</span
            >
            <span>，鼠标滚轮放大和缩小地图，鼠标左键拖动地图</span>
          </div>
        </div>
      </template>
    </GpMap>
    {{ latlngRef }} - {{ mapAreaId }} - {{ addressRef }} - {{ nameAndAddress }}
  </div>

3.百度地图显示组件

// 百度地图显示组件
import GpBaiduMap from "./components/GpBaiduMap.vue";

<GpBaiduMap class="w-[360px]" :lng="lng" :lat="lat" :title="title" />

项目说明

Vue 3 + TypeScript + Vite + ant-design-vue + tailwindcss

• 提示 antd 采用按需引入的方式。

初始化项目

npm init vite@latest gp-city-selector --template vue-ts

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

npm i --save [email protected]

Vue 3 + TypeScript + Vite

npm init vite@latest gp-module -- --template vue-ts cd my-vue3-lib npm install

This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.

Learn more about the recommended Project Setup and IDE Support in the Vue Docs TypeScript Guide.

问题参考

• 打包 ts 类型问题：https://blog.csdn.net/Wrysmile0308/article/details/134318030