1.實(shí)現(xiàn)效果
在這里插入圖片描述
在這里插入圖片描述
2.組件介紹
在這里插入圖片描述
3.部分代碼
// components/toastModal/index.js
Component({
/**
* 組件的屬性列表
*/
properties: {
is_show:{
type:Boolean,
value:false
},
title:{
type:String,
value:'提示'
},
content:{
type:String,
value:''
},
cancelText:{
type:String,
value:''
},
confirmText:{
type:String,
value:''
},
// 取消按鈕顏色默認(rèn)為999
cancelColor:{
type:String,
value:'#999'
},
// 確認(rèn)按鈕顏色默認(rèn)為999
confirmColor:{
type:String,
value:'#0a9117'
},
// 是否可以編輯
editable:{
type:Boolean,
value:false
},
placeholderText:{
type:String,
value:'請(qǐng)輸入'
}
},
/**
* 組件的初始數(shù)據(jù)
*/
data: {
inputValue:''
},
/**
* 組件的方法列表
*/
methods: {
// 關(guān)閉彈框
cancel(){
this.setData({
is_show:false
})
this.triggerEvent('cancel')
},
// 確定按鈕：
confirm(){
this.setData({
is_show:false
})
var myEventDetail = { a:'123'} // detail對(duì)象嗜侮，提供給事件監(jiān)聽函數(shù)
var myEventOption = {} // 觸發(fā)事件的選項(xiàng)
// 自定義組件觸發(fā)事件時(shí)炭分，需要使用 triggerEvent 方法秋度，指定事件名都伪、detail對(duì)象和事件選項(xiàng)：
this.triggerEvent('confirm',myEventDetail,myEventOption)
},
//獲取input框的內(nèi)容
getInputValue(e){
let inputValue=e.detail.value;
this.setData({
inputValue
})
this.triggerEvent('input',e.detail.value)
}
}
})
4.完整代碼
https://gitee.com/susuhhhhhh/components
