联系九游

    公司 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
          })  
        }    
               
      },  
    })

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