uniapp开发微信小程序，设置页面中input组件的有效点击作用域加大

峪奕

于 2024-07-23 15:12:35 发布

阅读量161

点赞数 10

分类专栏： uniapp 文章标签： uni-app 微信小程序小程序

本文链接：https://blog.csdn.net/qq_42993731/article/details/140628916

版权

uniapp 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

背景：

uniapp开发微信小程序，uniapp自带的input组件无法使用ref绑定DOM元素。

官网文档地址： uni-app官网

方法：

使用uniapp的input自带的focus属性，绑定data中的数据isFocus，通过外层view点击事件触发修改isFocus变化，再通过@blur属性，当输入框失去焦点时触发修改isFocus事件。

代码示例

<template>
	<view class="fatherView" @click="onFocus">
		<input :focus="isFocus" @blur="onBlur" type="text" placeholder="请输入内容" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				"isFocus":false
			};
		},
		methods:{
			onFocus(){
				this.isFocus = true
			},
			onBlur() {
				this.isFocus = false;
			},
		}
	}
</script>

<style>
	.fatherView{
		/* 根据需要修改样式,增加input有效点击作用域 */
	}
</style>