# 组件开发

**Repository Path**: yaolei123123/component-development

## Basic Information

- **Project Name**: 组件开发
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-22
- **Last Updated**: 2026-01-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# yl-ui

一款yl自己打造的UI组件库

## 安装

- `NPM`

```shell
npm install yl-ui --save 需切换镜像源至私服环境 http://192.168.8.120:14873/
或者 在package.json中添加 "yl-ui": "http://192.168.8.120:14873/yl-ui/-/yl-ui-1.0.1.tgz",
```


## 组件配置

### 属性

- `mapKey`

  > 高德地图 key

  ```js
  // 类型
  type: string;
  // 是否必选
  required: true;
  ```

- `position`

  > 默认经纬度坐标

  ```js
  // 类型
  type:string|number[]; //[lng,lat]
  // 是否必选
  required:false;
  ```

- `mapConfig`

  > 地图组件配置项

  ```js
  // 类型
  type:{
      width?:string, //地图宽度
      height?:string, //地图高度
      center?:number[], //地图中心 如传入position属性 则默认以position为地图中心坐标
      zoom?:number, //地图层级
      satellite?:boolean, //是否开启卫星图
  };
  // 默认值
  default:{
      width:'100%',
      height:'100%',
      satellite:false,
      zoom:10
  };
  // 是否必选
  required:false;
  ```

### 事件

- `onCoordChange`

  > 当点位地址变化时触发的事件

  ```js
  // 回调参数
  {
      lng:string|number, //经度
      lat:string|number, //纬度
      position:string|number[], //经纬度数组[经度，纬度]
      address:Address, //地址对象
      formattedAddress:string //地址
  };
  // address类型
  interface Address{
      addressComponent: {
          citycode:string,
          adcode:string,
          businessAreas:string[],
          neighborhoodType:string,
          neighborhood: string,
          province: string,
          street: string,
          streetNumber: string,
          township: string
      },
      crosses: string[],
      formattedAddress: string,
      pois: string[],
      roads: string[]
  };
  ```

### 方法

- `resetMap`

  > 重置地图状态

  ```js
  // 参数
  posClear?:boolean //default:false 是否强行清除所有状态，如果组件传入position属性，默认不重置点位及地址数据
  ```

- `destroyMap`

  > 重置并销毁地图

## 注意项

> 组件所在容器需设置高度，或者在配置项属性里设置组件的高度

## 使用

### 注册组件

- 全局组件注册`install`

```js
// main.js
import { createApp } from "vue";
import App from "./App.vue";
import CoordMap from "yl-ui";
const app = createApp(App);
app.use(CoordMap);
app.mount("#app");
```

- 单个.vue 文件局部注册

```vue
// Options API 方式
<script>
import { CoordMap } from "yl-ui";
export default {
  components: {
    CoordMap,
  },
};
</script>
```

```vue
// Composition API 方式
<script setup>
import { CoordMap } from "yl-ui";
</script>
```

### 使用组件

```vue
<script setup>
import { ref, watchEffect } from "vue";
import { CoordMap,CoordChangeProps, CoordMapExpose } from "yl-ui";

const onCoordChange = (value: CoordChangeProps) => {
  console.log(value);
};
const position = ref([120.382665, 36.066938]);
const CoordMapRef = ref<CoordMapExpose>();
watchEffect(() => {
  console.log(position.value);
});
</script>

<template>
  <div style="height:600px">
    <CoordMap
      ref="CoordMapRef"
      :mapKey="高德地图key"
      :securityJsCode="高德地图安全码"
      @onCoordChange="onCoordChange"
      v-model:position="position"
    />
  </div>
</template>
```