Vue3-fengyang-ui 组件库

Fengyang-ul 是一个 Vue Ul 库，它提供了一整套丰富的、可定制的 UI 组件，使得开发者可以快速地构建出具有吸引力的、响应式的前端页面。Fengyang-ul 是基于 Element-Plus 规范构建的，这意味着它提供了一套既美观又功能丰富的组件，以帮助你构建具有统一风格的界面。

开始使用

要开始使用 fengyang-ul，你首先需要在你的 Vue 项目中安装它。这可以通过 npm 来完成：

npm install fengyang-ui

安装完成后，你需要在你的 Vue 应用中引入并使用 fengyang-ui：

import FyUi from 'fengyang-ui'
const app = createApp(App)
app.use(FyUi)
app.mount('#app')

这样就完成了 fengyang-ui 的基本设置，接下来你就可以开始使用 fengyang-ui 提供的各种组件来构建你的应用了。

fy-dropdownLoadSearch

搜索下拉加载输入框

 <template>
<fy-dropdownLoadSearch @blur="handleBlur" :total="total" size="nomarl" @change="handleChange" @select="handleSelect" v-model="searchValue" @scroll="handleScroll" popper-class="popper-class" :fetchsuggestions="querySearch">
      <template #prefix>
        <el-icon>
          <Search />
        </el-icon>
      </template>
      <template #default="{ item }">
        <span>{{ item.name }}</span>
      </template>
      <template #suffix>
        <el-icon>
          <Search />
        </el-icon>
      </template>
    </fy-dropdownLoadSearch>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';

// 输入框事件
const handleChange = (e: any) => {
  console.log(e.target.value)
}
// 搜索表单
const searchForm = ref<any>({
  page: 1,
  limit: 10,
  keyword: ''
})

// 搜索事件
const handleQuery = async (newPage?: number, keywords = '') => {
  if (newPage) {
    searchForm.value.page = newPage
  }
  searchForm.value.keyword = keywords
  const { page, limit, keyword } = searchForm.value
  const res = await project_list(`?page=${page}&limit=${limit}&keywords=${keyword}`) as any
  if (res.code == 200) {
    callback.value(res.data.data, res.data.total)
  }
}
// 输入框值
const searchValue = ref<string>('')

// 下拉框选中事件
const handleSelect = (item: any) => {
  searchValue.value = item.name
}

// 下拉触底事件
const handleScroll = async () => {
  handleQuery(searchForm.value.page + 1)
}

// 函数回调
const callback = ref<any>()

// 输入框搜索
const querySearch = async (keywords: string, cb: any) => {
  if (cb) {
    callback.value = cb
  }
  await handleQuery(1, keywords)
}

// 输入框失去焦点
const handleBlur = () => {
}

</script>

<template>
  <div>
      <fy-dropdownLoadSearch @blur="handleBlur" size="nomarl" @change="handleChange" @select="handleSelect"
        v-model="searchValue" @scroll="handleScroll" popper-class="popper-class" :fetchsuggestions="querySearch">
        <template #prefix>
          <el-icon>
            <Search />
          </el-icon>
        </template>
        <template #default="{ item }">
          <span>{{ item.name }}</span>
        </template>
        <template #suffix>
          <el-icon>
            <Search />
          </el-icon>
        </template>
      </fy-dropdownLoadSearch>
  </div>
</template>

  
  </script>

API

Attributes

| 属性名 | 选中项绑定说明 | 类型 | 默认值 | | ----------------- | :----------------------------------------------------------- | -------- | ------ | | v-model | 选中项绑定值 | string | — | | placeholder | 占位文本 | string | — | | clearable | 是否可清空 | boolean | false | | fetch-suggestions | 获取输入建议的方法， 仅当你的输入建议数据 resolve 时，通过调用callback([]) 来返回它 | Function | — | | fit-input-width | 下拉框的宽度是否与输入框相同 | boolean | false | | size | 输入框尺寸（large/small） | string | | | value-key | 输入建议对象中用于显示的键名 | string | value | | popper-class | 下拉列表的类名 | string | — |

Events

| 事件名 | 详情 | 类型 | | ------ | -------------------------- | -------- | | select | 点击选中下拉框建议项时触发 | Function | | change | 在 Input 值改变时触发 | Function |

Slots

| 插槽名 | 描述说明 | 类型 | | ------- | ---------------------- | ------ | | default | 自定义输入建议的内容。 | object | | prefix | 输入框头部内容 | — | | suffix | 输入框尾部内容 | — |

Fy-bmap

百度地图

 
<script setup lang='ts'>
import Image from '@/assets/image.png'
const marker = ref<any>([
    position: ['132', '32'],
    icon: {
        img: Image,
        size: [45, 57]
    },
    Information: {
        event: 'mouseover',
        width: 340,
        height: 300,
        title: '',
        html: ``
    }
])
const bmap = ref<any>()
const menuList = ref<any>([
  {
    text: '放大',
    callback: function () {
      bmap.value.thatMap.zoomIn()
    },

  },
  {
    text: '缩小',
    callback: function () {
      bmap.value.thatMap.zoomOut()

    }


  },
  {
    text: '放置到最大级',
    callback: function () {
      bmap.value.thatMap.setZoom(18)

    }

  },
  {
    text: '查看全国',
    callback: function () {
      bmap.value.thatMap.setZoom(4)
    }
  }
])

// 地图初始化加载完成
const handleInit = () => {
  // 绘制地图遮罩层
  let BMapGL = (window as any).BMapGL
  let map = bmap.value.thatMap
  var bdary = new BMapGL.Boundary();
  bdary.get('海淀区', function (rs: any) {
    // 绘制行政区
    for (var i = 0; i < rs.boundaries.length; i++) {
      var xyArr = rs.boundaries[i].split(';');
      var ptArr = [];
      for (var j = 0; j < xyArr.length; j++) {
        var tmp = xyArr[j].split(',');
        var pt = new BMapGL.Point(tmp[0], tmp[1]);
        ptArr.push(pt);
      }
      var mapmask = new BMapGL.MapMask(ptArr, {
        isBuildingMask: true,
        isPoiMask: true,
        isMapMask: true,
        showRegion: 'inside',
        topFillColor: '#5679ea',
        topFillOpacity: 0.5,
        sideFillColor: '#5679ea',
        sideFillOpacity: 0.9
      });
      map.addOverlay(mapmask);
      var border = new BMapGL.Polyline(ptArr, {
        strokeColor: 'red',
        strokeWeight: 3,
        strokeOpacity: 1
      });
      map.addOverlay(border);
    }
  });


}

</script>
<template>
    <fy-bmap @markerMouseover="markerMouseover" :marker="marker" :menu-list="menuList" ref="myMap" class="myMap" :heading="0"
        styleId="94d70ea6824e10bd266ca2228e1341ce" @mapInit="handleInit" :tilt="0" :center="center" ak="m5ZCteRCNEGCF1qUsyGU5HCi3LROawHT"
        :map-zoom="zoom">
    </fy-bmap>
</template>

API

Attributes

| 属性名 | 选中项绑定说明 | 类型 | 默认值 | | ----------- | ------------------------------------------ | ------- | ---------------- | | className | 类名 | string | 'allmap' | | width | 地图宽度 | string | '100%' | | height | 地图高度 | string | '100%' | | tilt | 地图倾斜角度 | number | — | | styleId | 个性化地图样式id | string | — | | marker | 地图点位相关配置信息 | Array | — | | center | 地图中心点 | Array | — | | mapZoom | 地图层级 | number | 5 | | ak | 百度地图开发者ak（详见百度地图开发者平台） | string | — | | heading | 地图旋转角度 | number | — | | mapType | 地图类型 | string | 'BMAP_EARTH_MAP' | | zoom | 地图缩放控件 | Boolean | false | | scale | 地图比例尺控件 | Boolean | false | | scrollWheel | 鼠标滚轮 | Boolean | true | | city | 地图城市列表控件 | Object | — | | menu-list | 右键菜单 | Array | — |

Events

| 事件名 | 详情 | 类型 | | --------------- | ---------------------- | -------- | | markerMouseover | 移动到点位触发 | Function | | markerClick | 点击点位触发 | Function | | markerMouseout | 离开到点位触发 | Function | | mapInit | 地图初始化加载完成触发 | Function |

Fy-tmap

天地图

<script setup lang='ts'>
import { ref } from 'vue';
import FyTmap from './package/fy-tmap/index.vue';
import sensorImage from './assets/point-marker-device.png'

const center = ref<any>(['118.6175888522', '32.77751697468'])

const marker = ref<any>([
  {
    position: [118.6175888522, 32.77751697468], //点位坐标
    icon: {
      img: sensorImage, // 点位图片
      size: [45, 57]   //点位大小
    },
    Information: {
      event: 'mouseover', // 触发信息窗口事件
      html: `内容` // 信息窗口主体内容
    }
  }
])

// 点位点击
const markerClick = (e) => {
  console.log(e)
}
// 移入点位
const markerMouseover = (e) => {
  console.log(e)
}
// 地图实例
const tmap = ref<any>()

// 自定义右键菜单
const menuList = ref<any>([
  {
    text: '放大',
    callback: function () {
      tmap.value.thatMap.zoomIn()
    },
    // 是否启用分割线
    line:false
    
  },
  {
    text: '缩小',
    callback: function () {
      tmap.value.thatMap.zoomOut()

    },
    line:true

  },
  {
    text: '放置到最大级',
    callback: function () {
      tmap.value.thatMap.setZoom(18)

    },
    line:false

  },
  {
    text: '查看全国',
    callback: function () {
      tmap.value.thatMap.setZoom(4)

    },
    line:false

  }
])

</script>

<template>
  <div>
    <fy-tmap width="800px" height="800px" :marker="marker" :menuList="menuList" ref="tmap" :scale="true" :center="center"
      @markerClick="markerClick" @markerMouseover="markerMouseover" ak="04a896e445e9761ec3979c584e6ac09d" :map-zoom="5">
    </fy-tmap>
  </div>
</template>

API

Attributes

| 属性名 | 选中项绑定说明 | 类型 | 默认值 | | ----------- | -------------------------------------- | ------- | -------------------- | | className | 类名 | string | 'allmap' | | width | 地图宽度 | string | '100%' | | height | 地图高度 | string | '100%' | | marker | 地图点位相关配置信息 | Array | — | | center | 地图中心点 | Array | — | | mapZoom | 地图层级 | number | 5 | | ak | 天地图开发者ak（详见天地图开发者平台） | string | — | | mapType | 地图类型 | string | 'TMAP_SATELLITE_MAP' | | zoom | 地图缩放控件 | Boolean | false | | scale | 地图比例尺控件 | Boolean | false | | scrollWheel | 鼠标滚轮 | Boolean | true | | menuList | 右键菜单 | Array | — |

Events

| 事件名 | 详情 | 类型 | | --------------- | -------------- | -------- | | markerMouseover | 移动到点位触发 | Function | | markerClick | 点击点位触发 | Function | | markerMouseout | 离开到点位触发 | Function |