平台兼容性
说明
输入内容并返回内容的prompt组件
提示名称: title
输入类型:inputType
默认值:defaultValue
input逻辑处理方法名称: func
输入最大长度:maxlength
主色:themeColor
用法
父组件
<template>
<view>
<yomol-prompt :title="promptTitle" :inputType="promptInputType" :maxlength="maxlength" :defaultValue="promptDefaultValue" :func="promptFunc" ref="yomolPrompt" @onConfirm="onPromptConfirm"></yomol-prompt>
</view>
</template>
<script>
import yomolPrompt from '@/components/yomol/yomol-prompt.vue'
export default {
components:{
yomolPrompt
},
data() {
return {
promptTitle: '提示',
promptDefaultValue: '',
promptInputType: 'text',
promptFunc: "", //空值不执行
maxlength: 18,
}
},
onBackPress() {
if(this.$refs.yomolPrompt.visible){
this.$refs.yomolPrompt.hide()
return true
}
},
onLoad呢(e) {
//自定义input处理事件监听
uni.$on('update-prompt',(data)=>{
// data.value input输入值
// data.callback 处理后返回方法名
let val = data.value
//逻辑处理
uni.$emit(e.callback,val)
})
},
onUnload呢() {
/* 移除事件监听 */
uni.$off('update-prompt')
},
methods: {
/*
* 打开提示框
*/
onOpenPromptClick() {
this.promptTitle = '修改名称' //提示名称
this.promptDefaultValue = 'yomol' //默认值
this.promptInputType = 'text' //输入类型 同Input组件
this.maxlength = 18 //最大长度
this.promptFunc = "update-prompt" //将定义好的处理逻辑名传给组件回调
this.$refs.yomolPrompt.show()
},
/*
* 输入内容
*/
onPromptConfirm(e){
console.log(e);
}
}
}
</script>