欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

微信小程序自定义prompt组件步骤详解

程序员文章站 2022-07-01 20:41:59
步骤一:新建一个component的文件夹,用来放所有的自定义组件;  步骤二:在该目录下新建一个prompt的文件夹,用来放prompt组件; &nbs...

步骤一:新建一个component的文件夹,用来放所有的自定义组件;
 步骤二:在该目录下新建一个prompt的文件夹,用来放prompt组件;
 步骤三:右击–>新建–>component

微信小程序自定义prompt组件步骤详解

直接上代码

wxml

<view class="prompt-box" hidden="{{ishidden}}">
  <view class="prompt-content contentfontcolor">
    <view class="prompt-title">{{title}}</view>
    <input class="prompt-input" type="digit" bindinput="_input" value="{{cost}}" />
    <view class="prompt-btn-group">
      <button class="btn-item prompt-cancel-btn contentfontcolor" bind:tap="_cancel">{{btn_cancel}}</button>
      <button class="btn-item prompt-certain-btn" bind:tap="_confirm">{{btn_certain}}</button>
    </view>
  </view>
</view>

js

// components/prompt/prompt.js
component({
 options: {
  multipleslots: true // 在组件定义时的选项中启用多slot支持
 },
 /**
  * 组件的属性列表
  */
 properties: {
  title: {      
   type: string,  
   value: '标题'  
  },
  btn_cancel: {
   type: string,
   value: '取消'
  },
  btn_certain: {
   type: string,
   value: '确定'
  }
 },
 data: {
  ishidden: true,
 },
 methods: {
  hideprompt: function () {
   this.setdata({
    ishidden: true
   })
  },
  showprompt () {
   this.setdata({
    ishidden: false
   })
  },
  /*
  * 内部私有方法建议以下划线开头
  * triggerevent 用于触发事件
  */
  _cancel () {
    //触发cancel事件,即在外部,在组件上绑定cancel事件即可,bind:cancel,像绑定tap一样
   this.triggerevent("cancel")
  },
  _confirm () {
   this.triggerevent("confirm");
  },
  _input(e){
    //将参数传出去,这样在getinput函数中可以通过e去获得必要的参数
   this.triggerevent("getinput",e.detail);   
  }
 }
})

json

{
 "component": true,
 "usingcomponents": {}
}

wxss

/* components/vas-prompt/vas-prompt.wxss */
.prompt-box {
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 z-index: 11;
 background: rgba(0, 0, 0, .5);
}
.prompt-content {
 position: absolute;
 left: 50%;
 top: 40%;
 width: 80%;
 max-width: 600rpx;
 border: 2rpx solid #ccc;
 border-radius: 10rpx;
 box-sizing: bordre-box;
 transform: translate(-50%, -50%); 
 overflow: hidden;
 background: #fff;
}
.prompt-title {
 width: 100%;
 padding: 20rpx;
 text-align: center;
 font-size: 40rpx;
 border-bottom: 2rpx solid gray;
}
.prompt-input{
 margin: 8%;
 padding: 10rpx 15rpx;
 width: 80%;
 height:85rpx;
 border: 1px solid #ccc;
 border-radius: 10rpx;
}
.prompt-btn-group{
 display: flex;
}
.btn-item {
 width: 35%;
 margin-bottom: 20rpx;
 height: 100rpx;
 line-height: 100rpx;
 background-color: white;
 justify-content: space-around;
}
.prompt-certain-btn{
 color: white;
 background-color: #4febde;
}
.prompt-cancel-btn{
 border: 1px solid #4febde;
}
.contentfontcolor {
 color: #868686;
}

使用

 例如,在index.html中使用

 在json中添加usecomponents属性

 "usingcomponents": {
  "vas-prompt": "./components/prompt/prompt" 
 }

wxml

<prompt id="prompt" 
  title='test' 
  btn_certain='确定' 
  bind:getinput="getinput" 
  bind:cancel="cancel"
  bind:confirm="confirm">
</prompt>
<button bindtap="showprompt">点击弹出prompt</button>

js

//在onready生命周期函数中,先获取prompt实例
onready:function(){
  this.prompt = this.selectcomponent("#prompt");
},
//显示prompt
showprompt:function(){
  this.prompt.showprompt();
},
//将输入的value保存起来
getinput: function (e) {
  this.setdata({
   value: e.detail.value
  })
},
confirm: function () {
  let _cost = this.data.value;
  if (_cost == '') {
   console.log('你还未输入');
   return;
  }
  else{
    ....
  }
 },
 cancel: function () {
  this.prompt.hideprompt();
 },

原理:

 将prompt隐藏起来,点击显示的时候则显示,然后通过原生的tap事件,触发自定义事件,在使用该组件的时候,则使用自定义事件.

总结

以上所述是小编给大家介绍的微信小程序自定义prompt组件步骤详解,希望对大家有所帮助