pwdalert.wxml

<view wx:if="{{pwd_flag}}" class="password">
  <view class="input-content-wrap">
    <view class="top">
      <view catchtap="close_pwd_alert" class="close">×</view>
      <view class="txt">{{pwdtitle}}</view>
      <view catchtap="modify_password"
 
 class="forget"></view>
    </view>
    <view class="actual_fee">
      <span>{{currency}}</span>
      <text>{{amt}}</text>
    </view>
    <view catchtap="setFocus" class="input-password-wrap">
      <view class="password_dot">
        <i
 
 wx:if="{{pay_password.length>=1}}"></i>
      </view>
      <view class="password_dot">
        <i wx:if="{{pay_password.length>=2}}"></i>
      </view>
      <view class="password_dot">
        <i wx:if="{{pay_password.length>=3}}"></i>
      </view
 
>
      <view class="password_dot">
        <i wx:if="{{pay_password.length>=4}}"></i>
      </view>
      <view class="password_dot">
        <i wx:if="{{pay_password.length>=5}}"></i>
      </view>
      <view class="password_dot">
        <i wx:if="{{pay_password.length>=6}}"></i>
      </view>
    </view>
  </view>
  <input bindinput="_pwdEvent" class="input-content" password type="number" focus="{{isFocus}}" maxlength="6" />
</view>

pwdalert.wxss

page {
  height: 100%;
  width: 100%;
  background: #e8e8e8;
}

page .password {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
}

page .password .input-content-wrap {
  position: absolute;
  top:300rpx;
  left: 50%;
  display: flex;
  flex-direction: column;
  width: 600rpx;
  margin-left: -300rpx;
  background: #fff;
  border-radius: 20rpx;
}

page .password .input-content-wrap .top {
  display: flex;
  align-items: center;
  height: 90rpx;
  border-bottom: 2rpx solid #ddd;
  justify-content: space-around;
}

page .password .input-content-wrap .top .close {
  font-size: 44rpx;
  color: #999;
  font-weight: 100;
}

page .password .input-content-wrap .top .forget {
  color: #00a2ff;
  font-size: 22rpx;
}

page .password .input-content-wrap .actual_fee {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  height: 100rpx;
  margin: 0 23rpx;
  border-bottom: 2rpx solid #ddd;
}

page .password .input-content-wrap .actual_fee span {
  font-size: 60rpx;
}

page .password .input-content-wrap .actual_fee text {
  font-size: 60rpx;
}

page .password .input-content-wrap .input-password-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 150rpx;
}

page .password .input-content-wrap .input-password-wrap .password_dot {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #000;
  box-sizing: border-box;
  width: 90rpx;
  height: 90rpx;
  border: 2rpx solid #ddd;
  border-left: none 0;
}

page .password .input-content-wrap .input-password-wrap .password_dot:nth-child(1) {
  border-left: 2rpx solid #ddd;
}

page .password .input-content-wrap .input-password-wrap .password_dot i {
  background: #000;
  border-radius: 50%;
  width: 20rpx;
  height: 20rpx;
}

page .password .input-content {
  position: absolute;
  opacity: 0;
  left: -100%;
  top: 600rpx;
  background: #f56;
  z-index: -999;
}

page .password .input-content.active {
  z-index: -99;
}

pwdalert.json

{
  "component": true
}

pwdalert.js

Component({
  properties: {
    pwdtitle: { // 屬性名
      type: String, // 型別（必填），目前接受的型別包括：String, Number, Boolean, Object, Array, null（表示任意型別）
      value: '請輸入支付密碼', // 屬性初始值（可選），如果未指定則會根據型別選擇一個
      observer: function (newVal, oldVal) { } // 屬性被改變時執行的函式（可選），也可以寫成在methods段中定義的方法名字串, 如：'_propertyChange'
    },
    currency:{ //幣種
      type:String,
      value:'',
    },
    amt: { //金額
      type: String,
      value: '',
    },
    pwdfull: { //
      type: String,
      value: '',
    },
  },//元件的對外屬性

  data: {
    isFocus: false,//控制input 聚焦
    pwd_flag: false//密碼輸入遮罩
  },//私有資料，可用於模版渲染

  methods: {//元件的方法，包括事件響應函式和任意的自定義方法
    close_pwd_alert: function () {//關閉錢包輸入密碼遮罩
      console.log('close pwd alert')
      this.setData({
        isFocus: false,//失去焦點
        pwd_flag: false,
      })

    },

    show_pwd_alert: function () {//關閉錢包輸入密碼遮罩
    console.log('show pwd alert')
      this.setData({
        isFocus: true,//獲得焦點
        pwd_flag: true,//獲得焦點
      })

    },
    setFocus: function () {    
      console.log('isFocus', this.data.isFocus)
      this.setData({
        isFocus: true
      })
    },
    _pwdEvent: function (e) {
      var pwd = e.detail.value
     // var app = this
     // console.log("pwdEvent=="+JSON.stringify(e))

      this.setData({
        pay_password: pwd
      });

      if (pwd.length == 6) {//密碼長度6位時
        //監聽密碼輸入6位時，要做的事情
        console.log("密碼長度是6位")

        this.data.pwdfull = pwd



      }
//自定義元件觸發事件時，需要使用 triggerEvent 方法，指定事件名、detail物件和事件選項
     // this.triggerEvent("pwdEvent") 
   this.triggerEvent("pwdEvent",e.detail) 


    },
  },



  // 內部方法建議以下劃線開頭
  _propertyChange: function (newVal, oldVal) {

  }
})

呼叫component：
index.wxml

<view class="page">
    <view style='padding-left:20rpx;padding-right:20rpx;padding-top:100rpx;'>

        <button class="weui-btn" type="primary" bindtap="showDialog" style='clear:both'>showDialog</button>

    </view>

<!--呼叫自定義元件-->
 <pwddialog id='pwddialog' pwdtitle="{{pwdtitle}}" currency="{{currency}}" amt="{{amt}}" bind:pwdEvent="_pwdEvent" bind:close_pwd_alert="close_pwd_alert" bind:setFocus="setFocus"></pwddialog>

</view>

index.wxss

@import "../../utils/weui.wxss";
.primaryfont{
  font-size:1.0rem;
  color:black;
}

index.json

{
  "usingComponents": {
    "dialog": "../components/dialog/dialog",
    "pwddialog":"../components/pwddialog/pwddialog"
  }
}

index.js

Page({
  data: {
    pwdtitle:"我是標題",
    pwdfull:'',
    currency:'￥',
    amt:'100',

  },
  onReady: function () { /**生命週期函式--監聽頁面初次渲染完成 *///獲得dialog元件  
    this.dialog = this.selectComponent("#pwddialog");
  },

 showDialog: function () { //button點選事件
    console.log("click dialog button1")
    //顯示alert
    this.dialog.show_pwd_alert()
    console.log("click dialog button2")
  },
 _pwdEvent(e) { //回撥事件   
   console.log("e.detail==" + JSON.stringify(e.detail))
   console.log("e.detail.value==" + JSON.stringify(e.detail.value))
   console.log("pwdfull==" + this.dialog.data.pwdfull)




 },



});