联系凯发K8555VIP

公司 80号
联系 15
邮箱：

微信小程序自定义组件－数字键盘

接上文，上篇由于长度限制，没有写调用方法。

一、新建页面index

二、引入组件页面

在index.json中引入

{
  "pageOrientation":"landscape",
  "usingComponents": {    
    "dialog": "/components/dialog"
  }
}

三、注册组件

在index.wxml中写入

<view>
  <!-- 以下是对一个自定义组件的引用 -->
  <my-component inner-text="Some text"></my-component>
  <dialog id='dialog' 
        title='我是标题'         
        cancelText='取消' 
        confirmText='确认'
        bind:cancelEvent="_cancelEvent"  
        bind:confirmEvent="_confirmEvent">
    </dialog>    
    <view>自定义组件示例效果</view>
    <input  id="setdehu" class="weui-input" value="{{_setdehu}}" type="digit"  placeholder="0~99" 
          disabled="true" readonly="readonly"  
          data-code="6" data-value="{{_setdehu}}" data-min="-10" data-max="99" data-header="副标题"
          bindtap="showDialog" /> 
  <view>系统默认组件效果</view>
  <input type="number" class="weui-input"  value="123"/>
</view>

四、修改index.js文件

const app = getApp()

Page({
  data: {
    _setdehu:20
  },
  onLoad: function () {
    //获得dialog组件
    this.dialog = this.selectComponent("#dialog");    
  },
  showDialog(e){
    var that=this;
    let ids=(e.target.id);
    var data = e.currentTarget.dataset;
    // console.log(data);
    // console.log(data.code);
    // console.log(data.value);
    // console.log(data.min);
    // console.log(data.max);
    // console.log(data.header);

    //值,最小值,最大值
    this.dialog.showDialog(data.value+","+data.min+","+data.max+","+data.header);
  },
  
     //取消事件
  _cancelEvent(){
    console.log('你点击了取消');
    this.dialog.hideDialog();    
  },
  //确认事件
  _confirmEvent(e){
    console.log('你点击了确定');
    this.dialog.hideDialog();
    console.log(e.detail.retvalue);
    let retvalue=e.detail.retvalue;
    let that=this;
    if(retvalue!=that.data._obj_setValue && that.data._obj_setCode!=0)
    {    
      that.setData({
        _setdehu:retvalue
      })  
    }    
           
  },  
})

结束，如果有需要的，请微信联系我。