头部胶囊input框与胶囊对其

javascript 复制代码
<template>
	<view class="box">
		<input :style="{ width: withs, top:tops,height: hights}" type="text" value="" />
	</view>
</template>

<script>
	export default {

		data() {
			return {
				tops: '',
				withs: '',
				hights: ''
			}
		},


		methods: {},
		onLoad() {
			const res = uni.getMenuButtonBoundingClientRect()
			this.hights = res.height + 'px'
			this.withs = res.left * 0.6 + 'px'
			this.tops = res.top + 'px'
			console.log(this.tops, `kkk`)
		},
	}
</script>

<style lang="scss">
	.box {

		position: relative;

		input {
			border-radius: 20px;
			border: 1px solid black;
			position: absolute;
		}
	}
</style>

vue3写法

javascript 复制代码
<template>
	<view>
		<input class="input" :style="{width:width,height:height,top:top}" type="text">
		<u-icon name="search" size="20"></u-icon>

	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"
	import {
		onLoad
	} from "@dcloudio/uni-app"
	const height = ref('')
	const width = ref('')
	const top = ref('')

	onLoad(async () => {
		const res = uni.getMenuButtonBoundingClientRect()
		console.log(res);
		top.value = res.top + 'px'
		width.value = res.left * 0.8 + 'px'
		height.value = res.height + 'px'

	})
</script>

<style>
	.input {
		border: 1rpx solid black;
		box-sizing: border-box;
		border-radius: 40rpx;
		position: absolute;
		left: 50rpx;

	}
</style>
相关推荐
xvmingjiang7 分钟前
Vue 3 中监听多个数据变化的几种方法
前端·javascript·vue.js
我有一只臭臭7 分钟前
ES5 和 ES6 类的实现
前端·javascript·es6
excel8 分钟前
Three.js 实现高分辨率地球边界可视化
前端
LaoZhangAI22 分钟前
Google Gemini AI图片编辑完全指南:50+中英对照提示词与批量处理教程(2025年9月)
前端·后端
2301_8210465223 分钟前
Python的深度学习
开发语言·javascript·ecmascript
用户114818678948426 分钟前
从零搭建 Vue3 + Nest.js 实时通信项目:4 种方案(短轮询 / 长轮询 / SSE/WebSocket)
前端·后端
LaoZhangAI27 分钟前
Google Gemini Nano与Banana AI完整部署指南:2025年轻量级AI解决方案
前端·后端
用户114818678948431 分钟前
基于 Webpack Module Federation 的 Vue 微前端实践
前端
怪可爱的地球人32 分钟前
Pinia状态管理有哪些常用API?
前端
小高00732 分钟前
🤔函数柯里化:化繁为简的艺术与实践
前端·javascript·面试