比我长的不多

xinshi-mini

信使 Web builder 是基于 Material 的 Angular 低代码前端框架，丰富的组件库可提供优秀的数字创新体验，通过拖拽可视化配置快速构建现代化响应式 UI、多主题、多语言的 Web 页面，包含美观的后台管理主题，拥有完整的前端解决方案。体验：https://builder.design

PunkMaccccc

vue3 中的 ref 在template中使用必须加.value才生效，为什么？

下面按钮，"测试3" 那个 "disabled" 不生效，为什么？但是后面 "{{options.isDisabled}}" 显示是 "false"，必须要像 "测试4" 那样加上 ".value" 才可以，但是 "测试1" 没有加 ".value" 确实正常的，这是为什么？ const isDisabled = ref(false); const options = { options: reactive({ isDisabled: false }), isDisabled: ref(false), } 测试1 {{isDisabled}} 测试2 {{options.options.isDisabled}} 测试3 {{options.isDisabled}} 测试4 {{options.isDisabled.value}}

爬虫爬呀爬

cesium 请问如何通过点击车辆模型，实现视角跟随？

let socketInfo = 'xxxxxx' let ws = new WebSocket(socketInfo) let pingInterval = ref(null) // 心跳间隔ID let viewer = null let entity = null let polylineInitialized = false; // 轨迹线是否已初始化的标志 let polylineEntity = null; // 用于存储轨迹线实体 let pointEntity = null; const positionParams = []; // 用于存储所有的位置参数数据 const bufferLimit = 50; // 缓冲区大小限制 // 加载websocket function webValue() { // 初始Websocket const onOpen = () => { const data = JSON.stringify({ command: 1, serializeAlgorithm: 1, token: window.localStorage.getItem('token') }); ws.send(data); // 发送JSON字符串 // 设置心跳间隔为5秒 pingInterval.value = window.setInterval(() => { const pingMessage = JSON.stringify({ command: 2, serializeAlgorithm: 1 }); ws.send(pingMessage); }, 5000); }; // 接收websocket数据 const onMessage = async (event) => { const data = JSON.parse(event.data); if (data.data == undefined) { console.log('未响应'); } else { processPositionParams(data.data); updateCarModelPosition(positionParams);// 实时更新车辆移动位置 if (!polylineInitialized) { initializePolyline(positionParams); // 初始化轨迹线 polylineInitialized = true; // 标记轨迹线已初始化 } else { updatePolylinePosition(positionParams); // 更新轨迹线位置 } } }; // 封装处理返回的参数 function processPositionParams(data) { const targetingTypes = { 0x10: 'RTK', 0x11: 'UWB', 0x12: '融合' }; const newPositionParam = { TargetingType: targetingTypes[data.type], UID: data.uid, Angle: data.angle, Height: data.height, longitude: data.longitude, latitude: data.latitude }; positionParams.push(newPositionParam); // 超过缓冲区大小限制时移除最旧的位置参数数据 if (positionParams.length > bufferLimit) { positionParams.shift(); } const labelText = `终端ID:${data.uid},定位类型:${targetingTypes[data.type]}\n经度:${data.longitude},纬度:${data.latitude}\n角度:${data.angle},高度:${data.height}`; point(positionParams, labelText);// 更新实体点位置信息 } const onClose = () => { window.clearInterval(pingInterval.value); // 清除心跳间隔定时器 console.log('Websocket连接关闭'); webValue(); }; const onError = (error) => { console.log('Websocket连接错误'); ws.close(); window.clearInterval(pingInterval.value); // 清除心跳间隔定时器 webValue(); }; ws.addEventListener('open', onOpen); ws.addEventListener('message', onMessage); ws.addEventListener('close', onClose); ws.addEventListener('error', onError); } ------------------------------------- // 绘制车辆模型和轨迹点、轨迹线 let checkedPoint = ref(true); let checkedLines = ref(false); // 保存checkedPoint和checkedLines的值到LocalStorage function saveCheckedValues() { localStorage.setItem('checkedPoint', JSON.stringify(checkedPoint.value)); localStorage.setItem('checkedLines', JSON.stringify(checkedLines.value)); } // 从LocalStorage中获取checkedPoint和checkedLines的值 function loadCheckedValues() { const storedCheckedPoint = localStorage.getItem('checkedPoint'); const storedCheckedLines = localStorage.getItem('checkedLines'); if (storedCheckedPoint) { checkedPoint.value = JSON.parse(storedCheckedPoint); } if (storedCheckedLines) { checkedLines.value = JSON.parse(storedCheckedLines); } } // 监听checkedPoint和checkedLines的变化，并保存到LocalStorage watch([checkedPoint, checkedLines], saveCheckedValues, { deep: true }); // 在页面加载时加载checkedPoint和checkedLines的值 window.addEventListener('load', loadCheckedValues); // 车辆模型 let carModelData = null; let shouldFollowCar = false; // 标志位 function updateCarModelPosition(positions) { if (positions.length === 0) { return; } const latestPosition = positions[positions.length - 1]; const cartesian3 = Cesium.Cartesian3.fromDegrees(latestPosition.longitude, latestPosition.latitude, 0.4); if (!carModelData) { createCarModel(cartesian3, latestPosition.Angle); } else { carModelData.position = cartesian3; const headingPitchRoll = new Cesium.HeadingPitchRoll( Cesium.Math.toRadians(latestPosition.Angle + 90), Cesium.Math.toRadians(0), Cesium.Math.toRadians(0) ); carModelData.orientation = Cesium.Transforms.headingPitchRollQuaternion(cartesian3, headingPitchRoll); } } function createCarModel(cartesian3, angle) { const headingPitchRoll = new Cesium.HeadingPitchRoll( Cesium.Math.toRadians(angle + 90), Cesium.Math.toRadians(0), Cesium.Math.toRadians(0) ); const scaleByDistance = new Cesium.NearFarScalar(200, 120, 1200, 0.6); const distanceDisplayCondition = new Cesium.DistanceDisplayCondition(0, 10000); carModelData = viewer.entities.add({ position: cartesian3, orientation: Cesium.Transforms.headingPitchRollQuaternion(cartesian3, headingPitchRoll), model: { uri: "http://127.0.0.1:5501/car/scene.gltf", scale: 75, scaleByDistance, distanceDisplayCondition, }, id: 'carModel' // 添加id属性 }); } --------------------------------------------------------------- // 轨迹点 和 轨迹线 和 标签文字 let positionsArray = []; let entityList = []; function point(positions, labelText) { const cartesian3Array = []; positionsArray = positions.flatMap(pos => [pos.longitude, pos.latitude]); // 移除之前的实体点 for (const entity of entityList) { viewer.entities.remove(entity); } entityList = []; for (const position of positions) { let entityIndex = entityList.length; const cartesian3 = Cesium.Cartesian3.fromDegrees( position.longitude, position.latitude, 0.02 ); const pointLabel = new Cesium.Entity({ position: cartesian3, point: { pixelSize: 10, color: Cesium.Color.BLUE, show: checkedPoint.value, outlineColor: Cesium.Color.WHITE, distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 500), scaleByDistance: new Cesium.NearFarScalar(100, 1, 300, 0.5), outlineWidth: 1, }, // label: { // text: labelText, // font: '14pt monospace', // show: new Cesium.CallbackProperty(() => { // return entityIndex === entityList.length - 1; // }, false), // style: Cesium.LabelStyle.FILL_AND_OUTLINE, // outlineWidth: 2, // verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // pixelOffset: new Cesium.Cartesian2(0, -9), // scaleByDistance: new Cesium.NearFarScalar(300, 1, 1000, 0.4), //设置随图缩放距离和比例 // scale: 1, // fillColor: Cesium.Color.WHITE,//标签的文本填充颜色。 // outlineColor: Cesium.Color.WHITE,//标签的文本轮廓颜色。 // }, }); entityList.push(pointLabel); viewer.entities.add(pointLabel); cartesian3Array.push(cartesian3); } } -------------------------------------------------------- // 创建新的轨迹线 let polylineGeometry = null; let geometryInstance = null; function initializePolyline(positions) { const positionsArray = positions.flatMap(pos => [pos.longitude, pos.latitude]); const positionsInCartesian = Cesium.Cartesian3.fromDegreesArray(positionsArray); polylineGeometry = new Cesium.PolylineGeometry({ positions: positionsInCartesian, width: 5, distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 500), scaleByDistance: new Cesium.NearFarScalar(100, 10, 500, 1), }); geometryInstance = new Cesium.GeometryInstance({ geometry: polylineGeometry, attributes: { color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED) } }); const primitive = new Cesium.Primitive({ geometryInstances: geometryInstance, appearance: new Cesium.PolylineMaterialAppearance({ material: Cesium.Material.fromType(Cesium.Material.ColorType) }) }); viewer.scene.primitives.add(primitive); } // 更新轨迹线位置 function updatePolylinePosition(positions) { if (geometryInstance) { const positionsArray = positions.flatMap(pos => [pos.longitude, pos.latitude]); const positionsInCartesian = Cesium.Cartesian3.fromDegreesArray(positionsArray); polylineGeometry.positions = positionsInCartesian; geometryInstance.geometry = polylineGeometry; geometryInstance.show = checkedLines.value; } } ***

0offer糕手

vue3语法实践写法?

"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250105/50d95cffc299b6a8c04ebef1acf7f2c0.png) 写了一个去重函数，和一个数组，但是这个怎么调用 怎么去处理呢，vue3写法，不太熟悉

卑微实习僧

命令行npm create vue@latest创建的vue3+ts项目能运行成功，但是为什么会出现各种警告？

"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241225/4b01ed6191702e5b761996fe53163db7.png) "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241225/6731b121859cdbdfb09e717d0459b710.png) "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241225/edeca031f3f5da74f177f4b0ba03c0c4.png) "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241225/7a537f49063d32042c9f6a5fd151f5d9.png) "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241225/a45e9f8be58fe3f71514fe36f8c87b29.png) "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241225/9b49602118059a56ac4b87b18c89bb99.png)

Midclimateeee

vue3同步调用咨询？

"图片.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241229/30e04c86501a0c577a10aeb8d64f298f.png) 如图，在vue3组件里面js代码部分调用这个函数，需要使用setTimeout延迟一段时间才能获取到返回值、但是页面模板上又能直接使用这个返回值。为什么？

瞳孔放大黑洞

开发uniapp用vue3有像uview一样的框架吗？

平时需要用uniapp开发项目，需要同时支付H5,微信小程序，支付宝小程序，微信公众号，支付宝生活号，但用的是vue2，这时用uview非常不错。 但是我现在想用vue3来开发新的项目，但是uview不行，那用vue3时有可用的像uview一样的框架吗？

无心插柳柳成萌

vue3修改样式的问题？

1 2 3 4 5 6 7 8 9 setup(){ const allRef = ref(null) const oneRef=ref(null) const setx=(index)=>{ switch (index) { case 0: allRef.value.style.display='block' oneRef.value.style.backgroundColor='#D3EAFD' oneRef.value.style.border='1px solid #C1C1C1' oneRef.value.style.padding='20px' oneRef.value.style.fontSize='30px' oneRef.value.style.textAlign='center' break; } } return{ setx, allRef, oneRef } } "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250103/4eb323d273ed460b9f2ec06f0b24288d.png) 为什么执行 allRef.value.style.display='block' oneRef.value.style.backgroundColor='#D3EAFD' oneRef.value.style.border='1px solid #C1C1C1' oneRef.value.style.padding='20px' oneRef.value.style.fontSize='30px' oneRef.value.style.textAlign='center' 时只有最后一个元素发生了变化？

少年阿T

Vue3前端预览PDF文件

"https://wmprod.oss-cn-shanghai.aliyuncs.com/community/FrMUWxHT5PONNOz5eEiYhRP618eW.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/community/FrMUWxHT5PONNOz5eEiYhRP618eW.png)

小飞侠007

vite配置指定浏览器用ip打开？

"server"现在的配置是这样， server: { host: "0.0.0.0", open: true, // 开发服务器启动时，是否自动在浏览器中打开应用程序 } 然后在"env"中添加了配置 "BROWSER='C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe'" 现在可以打开浏览器，但是是"localhost"的，现在想打开时直接用"ip" 应该怎么改呢