Vue 3 + Vite 搭建项目
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.
...大约 7 分钟
Vue 3 + TypeScript + Vite 搭建项目
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.
...大约 9 分钟
H5 端 引用 uni-popup 组件异常
问题复现
页面代码引用了一个第三方的 sku 组件及 uni-popup 组件，在微信小程序端正常使用，无异常报错，而切换为 H5 端（Chrome 浏览器）运行时报错误了。
<!-- 商品详情页面主要代码 -->
<template>
<vk-data-goods-sku-popup
ref="skuPopup"
v-model="isShowSku"
border-radius="20"
:localdata="goodsInfo"
:mode="mode"
:actived-style="{
color: '#27BA9B',
borderColor: '#27BA9B',
backgroundColor: '#E9F8F5',
}"
add-cart-background-color="#ffa868"
buy-now-background-color="#27ba9b"
@add-cart="addCart"
@buy-now="buyNow"
/>
...
<scroll-view enable-back-to-top scroll-y class="viewport">
...
</scroll-view>
...
<!-- uni-ui 弹出层 -->
<uni-popup ref="popup" type="bottom" background-color="#fff">
...
</uni-popup>
</template>
...大约 2 分钟
地图面积计算
基于高德地图，根据用户选点（鼠标移动）创建标注点，满足至少三个标注点时可以形成多边形并计算其面积，采用命令模式实现撤销功能。
功能
- 创建标注点
- 创建标注点之间的连线
- 计算面积
- 撤销及清除重绘
绘制多边形实体类代码
// 画多边形区域类
class DrawPolygon {
...
constructor(map, id) {}
// 获取实例数据
getData() {}
// 判断当前的标注点能否组成图形
isCanSetPolygon() {}
// 获取第一个标注点
getFirstMarker() {}
// 鼠标点击时生成标注点
addMarker(lngLat) {}
// 满足两个点时生成折线
addLine(last, current, lineStyle = "solid") {}
// 删除连线
removeLine() {}
// 判断能否形成多边形
canCalcArea() {}
// 生成多边形并计算面积
addPolygon() {}
}
...小于 1 分钟
趋势图
...大约 6 分钟