weex引入iconfont之input的placeholder显示icon

最新推荐文章于 2023-03-10 11:59:05 发布

原创最新推荐文章于 2023-03-10 11:59:05 发布 · 831 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#weex #input #iconfont #placeholder

笔记专栏收录该内容

5 篇文章

订阅专栏

本文探讨了在Weex框架下，如何在输入框的占位符中显示图标。提供了两种方案，一种是在placeholder直接使用iconfont代码，另一种是通过绝对定位实现。详细介绍了每种方法的实现步骤及在iOS和Android平台上的表现。

这是本次开发的设计图，不难看出是在input的placeholder里显示icon。

反正我是第一次遇到，以往搜索框的icon不是放前，就是放后。

关于怎么引入iconfont，可以去看我的另一篇weex引入iconfont

因为placeholder也不好插入icon图片，经查阅资料以后提供两种方案。

第一种解决方案：

尝试在placeholder里直接写iconfont的代码，需要通过vue的绑定方式，绑定到placeholder上，原本为的代码要将&#替换成\u。

<!-- 搜索框 iconfont方案 -->
<div class="sm-search">
    <input type="text" class="input iconfont" :placeholder="iconPH" :value="txtInput"/>
</div>

data() {
	return {
	    iconPH: '\ue611 搜索小程序',
	    txtInput: '', // input值
	}
},

运行结果：

android：

ios：

这个方式在ios上是没问题的，但是android却显示不出来，然后我找了很久都没找到原因，放弃了，

如果你们知道，可以留言告诉我，我先换种方式处理。

第二解决方案：

通过利用绝对定位去展示，搭配@blur和@focus来控制显隐

<!-- 搜索框 定位方案-->
<div class="sm-search">
  <input type="text" class="input" @focus="onfocus" @blur="onblur" @input="onSearchInput" />
  <text class="iconfont input-placeholder" v-if="showPlaceholder">&#xe611; 搜索小程序</text>
</div>

data() {
  return {
	showPlaceholder: true, // input框是否展示placeholder
	txtInput: '', // input值
  }
},

methods: {
	// 获取搜索框输入的值
	onSearchInput(event) {
		this.txtInput = event.value;
	},
	onfocus() {
		this.showPlaceholder = false;
	},
	onblur() {
		if (!this.txtInput) {
			this.showPlaceholder = true;
		}
	},
}

运行结果是ios和android都可以显示出来。