微信小程序自定义组件示例

亦凉 2022-05-29 12:28 458阅读 0赞

声明:此文借鉴两位前辈的博文
https://www.jianshu.com/p/8a2a730d9e60
http://www.jb51.net/article/117295.htm
感谢这两位前辈的贡献!!!
实现功能:把密码输入封装成一个自定义组件,可以多处调用此组件
component部分:

pwdalert.wxml

  1. <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

  1. page { height: 100%; width: 100%; background: #e8e8e8; }
  2. page .password { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); }
  3. 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; }
  4. page .password .input-content-wrap .top { display: flex; align-items: center; height: 90rpx; border-bottom: 2rpx solid #ddd; justify-content: space-around; }
  5. page .password .input-content-wrap .top .close { font-size: 44rpx; color: #999; font-weight: 100; }
  6. page .password .input-content-wrap .top .forget { color: #00a2ff; font-size: 22rpx; }
  7. 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; }
  8. page .password .input-content-wrap .actual_fee span { font-size: 60rpx; }
  9. page .password .input-content-wrap .actual_fee text { font-size: 60rpx; }
  10. page .password .input-content-wrap .input-password-wrap { display: flex; align-items: center; justify-content: center; height: 150rpx; }
  11. 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; }
  12. page .password .input-content-wrap .input-password-wrap .password_dot:nth-child(1) { border-left: 2rpx solid #ddd; }
  13. page .password .input-content-wrap .input-password-wrap .password_dot i { background: #000; border-radius: 50%; width: 20rpx; height: 20rpx; }
  14. page .password .input-content { position: absolute; opacity: 0; left: -100%; top: 600rpx; background: #f56; z-index: -999; }
  15. page .password .input-content.active { z-index: -99; }

pwdalert.json

  1. {
  2. "component": true }

pwdalert.js

  1. Component({
  2. properties: {
  3. pwdtitle: { // 属性名
  4. type: String, // 类型(必填),目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型)
  5. value: '请输入支付密码', // 属性初始值(可选),如果未指定则会根据类型选择一个
  6. observer: function (newVal, oldVal) { } // 属性被改变时执行的函数(可选),也可以写成在methods段中定义的方法名字符串, 如:'_propertyChange'
  7. },
  8. currency:{ //币种
  9. type:String,
  10. value:'',
  11. },
  12. amt: { //金额
  13. type: String,
  14. value: '',
  15. },
  16. pwdfull: { //
  17. type: String,
  18. value: '',
  19. },
  20. },//组件的对外属性
  21. data: {
  22. isFocus: false,//控制input 聚焦
  23. pwd_flag: false//密码输入遮罩
  24. },//私有数据,可用于模版渲染
  25. methods: {
  26. //组件的方法,包括事件响应函数和任意的自定义方法
  27. close_pwd_alert: function () { //关闭钱包输入密码遮罩
  28. console.log('close pwd alert')
  29. this.setData({
  30. isFocus: false,//失去焦点
  31. pwd_flag: false,
  32. })
  33. },
  34. show_pwd_alert: function () { //关闭钱包输入密码遮罩
  35. console.log('show pwd alert')
  36. this.setData({
  37. isFocus: true,//获得焦点
  38. pwd_flag: true,//获得焦点
  39. })
  40. },
  41. setFocus: function () {
  42. console.log('isFocus', this.data.isFocus)
  43. this.setData({
  44. isFocus: true
  45. })
  46. },
  47. _pwdEvent: function (e) {
  48. var pwd = e.detail.value
  49. // var app = this
  50. // console.log("pwdEvent=="+JSON.stringify(e))
  51. this.setData({
  52. pay_password: pwd
  53. });
  54. if (pwd.length == 6) {
  55. //密码长度6位时
  56. //监听密码输入6位时,要做的事情
  57. console.log("密码长度是6位")
  58. this.data.pwdfull = pwd
  59. }
  60. //自定义组件触发事件时,需要使用 triggerEvent 方法,指定事件名、detail对象和事件选项
  61. // this.triggerEvent("pwdEvent")
  62. this.triggerEvent("pwdEvent",e.detail)
  63. },
  64. },
  65. // 内部方法建议以下划线开头
  66. _propertyChange: function (newVal, oldVal) {
  67. }
  68. })

调用component:
index.wxml

  1. <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

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

index.json

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

index.js

  1. Page({
  2. data: {
  3. pwdtitle:"我是标题",
  4. pwdfull:'',
  5. currency:'¥',
  6. amt:'100',
  7. },
  8. onReady: function () { /**生命周期函数--监听页面初次渲染完成 *///获得dialog组件
  9. this.dialog = this.selectComponent("#pwddialog");
  10. },
  11. showDialog: function () { //button点击事件
  12. console.log("click dialog button1")
  13. //显示alert
  14. this.dialog.show_pwd_alert()
  15. console.log("click dialog button2")
  16. },
  17. _pwdEvent(e) { //回调事件
  18. console.log("e.detail==" + JSON.stringify(e.detail))
  19. console.log("e.detail.value==" + JSON.stringify(e.detail.value))
  20. console.log("pwdfull==" + this.dialog.data.pwdfull)
  21. },
  22. });

发表评论

表情:
评论列表 (有 0 条评论,458人围观)

还没有评论,来说两句吧...

相关阅读

    相关 程序定义组件

    在写小程序的时候,有时候页面的内容过多,逻辑比较复杂,如果全部都写在一个页面的话,会比较繁杂,代码可读性比较差,也不易于后期代码维护,这时候可以把里面某部分功能抽出来,单独封装