微信小程序自定义组件之可清除的input组件


Posted in Javascript onJuly 17, 2018

最近正在做的一个小程序项目中需要用到一个可清除的输入框控件,为了在项目中使用方便以及方便其他项目直接使用,便封装了一个可清除的input自定义组件。

组件需要达到的需求是:输入框内没有内容时,删除按钮隐藏;当输入框内有内容时,删除按钮显示,点击删除按钮则清空输入框内所有内容。并且还可以设置输入框整体样式以及输入框左侧图标。

明确了需求之后,就可以开始着手实现了。

首先,在目标目录下新建一个自定义组件

微信小程序自定义组件之可清除的input组件

建好之后,我们需要来设计布局。根据需求来看,我们只需要三个组件:两个image和一个input。左边一个image提示图标,然后一个input输入框,最后一个image删除按钮。我们要把尽可能多的数据设置成可以修改的绑定数据,提高自定义组件的可扩展性。

最终确定的wxml布局文件如下:

<view class='input-class'>
   <image src='{{inputIcon}}' mode="scaleToFill" class='icon-class'></image>
   <input placeholder='{{inputHint}}' bindconfirm='{{confirmTap}}' style='flex:1;width:100%;padding-left:12rpx;' bindinput='inputListener' bindconfirm='inputConfirm' value='{{inputValue}}' type='{{inputType}}' password='{{isPassword}}' confirm-type='{{confirmType}}'></input>
   <image class="{{isClearShow?'clearImgShow':'clearImgHide'}}" src='clear.png' bindtap='clearTap' mode='widthFix'></image>
</view>

然后,我们就要来设置组件的一些属性和监听方法了。小程序的组件属性列表是定义在.js文件的properties里的。把需要暴露出去并可以修改的属性都写在这里面。其语法示例如下:

properties: {
  myProperty: { // 属性名
   type: String, // 类型(必填),目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型)
   value: '', // 属性初始值(可选),如果未指定则会根据类型选择一个
   observer: function(newVal, oldVal, changedPath) {
     // 属性被改变时执行的函数(可选),也可以写成在methods段中定义的方法名字符串, 如:'_propertyChange'
     // 通常 newVal 就是新设置的数据, oldVal 是旧数据
   }
  },
  myProperty2: String // 简化的定义方式
 }

我的属性列表如下:

/**
   * 组件的属性列表
   */
   properties: {
     inputHint: {
        type: String,
        value: '搜索'
     },
     inputIcon: {
        type: String,
        value: 'search.png'
     },
     inputType: {
        type: String,
        value: 'text'
     },
     isPassword: {
        type: Boolean,
        value: false
     },
     confirmType: {
        type: String,
        value: "done"
     }
   }

完成了属性列表的编写之后,接下来我们需要为自定义组件添加监听事件。

 事件系统是组件间通信的主要方式之一。自定义组件可以触发任意的事件,引用组件的页面可以监听这些事件。

监听以及触发事件的语法是这样的:

//触发事件
//自定义组件触发事件时,需要使用 triggerEvent 方法,指定事件名、detail对象和事件选项
methods: {
  onTap: function(){
   var myEventDetail = {} // detail对象,提供给事件监听函数
   var myEventOption = {} // 触发事件的选项
   this.triggerEvent('myevent', myEventDetail, myEventOption)
  }
 }
//监听事件
<!-- 当自定义组件触发“myevent”事件时,调用“onMyEvent”方法 -->
<component-tag-name bindmyevent="onMyEvent" />
<!-- 或者可以写成 -->
<component-tag-name bind:myevent="onMyEvent" />

这里我们需要设置的触发事件有,输入框的输入事件以及输入框的确认事件。通过 triggerEvent 方法指定事件名以及事件触发事件参数

/**
   * 组件的方法列表
   */
   methods: {
     inputListener: function (e) {
        var value = e.detail.value;
        var cursor = e.detail.cursor;
        if (value === null || value === undefined || value.length === 0) {
          this.setData({
             isClearShow: false
          });
        } else {
          this.setData({
             isClearShow: true
          });
        }
        var detail = {
          value: value,
          cursor: cursor
        };
        this.triggerEvent('inputListener', detail);
     },
     inputConfirm: function (e) {
        var value = e.detail.value;
        var detail = {
          value: value
        }
        this.triggerEvent('inputConfirm', detail);
     },
     clearTap: function () {
        this.setData({
          isClearShow: false,
          inputValue: ''
        });
     }
   }

以上就已经完成了这个可清除input组件的自定义开发了。现在来看怎么使用这个组件。

首先在需要使用此组件的页面.json文件中设置usingComponents属性来引入这个自定义组件

"usingComponents": {
     //这里是设置的组价标签名称以及组件地址
     "clearInput": "../../components/clearInput/clearInput"
   }

然后,我们就可以在页面中引用这个自定义组件了,引用的方式非常简单,通过我们在上一步设置的标签名称就可以引用了。

<clearInput inputHint='搜索订单' icon-class='common_search_img' input-class='common_search_input' confirmType='search' bind:inputListener='inputListener' bind:inputConfirm='searchEvent' />

最终实现的效果图如下:

微信小程序自定义组件之可清除的input组件

项目GitHub地址:https://github.com/RaoMeng/TemplateOfHotel

总结

以上所述是小编给大家介绍的微信小程序自定义组件之可清除的input组件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js中的referrer返回上一页使用介绍
Sep 26 Javascript
Bootstrap整体框架之CSS12栅格系统
Dec 15 Javascript
详解Node中导入模块require和import的区别
Aug 11 Javascript
vue中添加mp3音频文件的方法
Mar 02 Javascript
Vue2.0 http请求以及loading展示实例
Mar 06 Javascript
TypeScript基础入门教程之三重斜线指令详解
Oct 22 Javascript
如何实现一个webpack模块解析器
Oct 24 Javascript
Vue中的验证登录状态的实现方法
Mar 09 Javascript
vue实现按需加载组件及异步组件功能
May 27 Javascript
微信小程序HTTP接口请求封装代码实例
Sep 05 Javascript
vue实现购物车加减
May 30 Javascript
vue里使用create, mounted调用方法
Apr 26 Vue.js
微信小程序倒计时功能实例代码
Jul 17 #Javascript
详解vue+webpack+express中间件接口使用
Jul 17 #Javascript
微信小程序实现默认第一个选中变色效果
Jul 17 #Javascript
Vue2.X 通过AJAX动态更新数据
Jul 17 #Javascript
浅谈Angularjs中不同类型的双向数据绑定
Jul 16 #Javascript
微信小程序实现循环动画效果
Jul 16 #Javascript
mpvue 如何使用腾讯视频插件的方法
Jul 16 #Javascript
You might like
解析PHP获取当前网址及域名的实现代码
2013/06/23 PHP
php object转数组示例
2014/01/15 PHP
使用PHPMailer实现邮件发送代码分享
2014/10/23 PHP
Laravel 5 框架入门(四)完结篇
2015/04/09 PHP
javascript 从if else 到 switch case 再到抽象
2010/07/17 Javascript
JavaScript打字小游戏代码
2011/12/26 Javascript
javascript阻止浏览器后退事件防止误操作清空表单
2013/11/22 Javascript
jQuery表格插件datatables用法汇总
2016/03/29 Javascript
简单实现jQuery进度条轮播实例代码
2016/06/20 Javascript
jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
2016/09/21 Javascript
基于jPlayer三分屏的制作方法
2016/12/21 Javascript
JavaScript生成简单等差数列
2017/11/28 Javascript
vue项目打包上传github并制作预览链接(pages)
2019/04/19 Javascript
如何使用JavaScript实现栈与队列
2019/06/24 Javascript
深入理解 TypeScript Reflect Metadata
2019/12/12 Javascript
vue 弹出遮罩层样式实例
2020/07/22 Javascript
[07:09]2014DOTA2国际邀请赛-Newbee再次发威成功晋级决赛
2014/07/19 DOTA
[01:02:38]DOTA2-DPC中国联赛定级赛 LBZS vs Phoenix BO3第二场 1月10日
2021/03/11 DOTA
Python模块学习 datetime介绍
2012/08/27 Python
python缩进区别分析
2014/02/15 Python
修改Python的pyxmpp2中的主循环使其提高性能
2015/04/24 Python
1分钟快速生成用于网页内容提取的xslt
2018/02/23 Python
Python实现的序列化和反序列化二叉树算法示例
2019/03/02 Python
详解Python连接MySQL数据库的多种方式
2019/04/16 Python
Python 复平面绘图实例
2019/11/21 Python
python里反向传播算法详解
2020/11/22 Python
HTML5地理定位与第三方工具百度地图的应用
2016/11/17 HTML / CSS
Python面试题集
2012/03/08 面试题
开水果连锁店创业计划书
2013/12/29 职场文书
《中华少年》教学反思
2014/02/15 职场文书
股权转让意向书
2014/04/01 职场文书
公务员四风问题对照检查材料整改措施
2014/09/26 职场文书
工程质量保证书
2015/05/09 职场文书
三好学生主要事迹材料
2015/11/03 职场文书
《合作意向书》怎么写?
2019/08/20 职场文书
导游词之四川武侯祠
2019/10/21 职场文书