88 lines
1.7 KiB
Markdown
88 lines
1.7 KiB
Markdown
## 说明
|
||
|
||
输入内容并返回内容的prompt组件
|
||
|
||
提示名称： title
|
||
|
||
输入类型：inputType
|
||
|
||
默认值：defaultValue
|
||
|
||
input逻辑处理方法名称： func
|
||
|
||
输入最大长度：maxlength
|
||
|
||
主色：themeColor
|
||
|
||
|
||
## 用法
|
||
|
||
**父组件**
|
||
|
||
```html
|
||
<template>
|
||
<view>
|
||
<yomol-prompt :title="promptTitle" :inputType="promptInputType" :maxlength="maxlength" :defaultValue="promptDefaultValue" :func="promptFunc" ref="yomolPrompt" @onConfirm="onPromptConfirm"></yomol-prompt>
|
||
</view>
|
||
</template>
|
||
```
|
||
|
||
```js
|
||
<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>
|
||
``` |