更新记录
1.0.0(2021-06-26) 下载此版本
1、整词输入 2、联想输入 3、整词删除 4、语音输入
平台兼容性
Vue2 | Vue3 |
---|---|
√ | × |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
× | × | √ | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
× | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
× | × | × | × | × | × | × | × | × |
mnkeybord 蒙古文小程序输入法
模拟键盘组件,用于抒写蒙古文文本。组件名:mnkeybord
,代码块: mnkeybord。
模拟输入框组件,用于输出模拟键盘键入后的蒙古文文本。组件名:mnoutput
,对该组件在基本属性、监听暴露事件不变的前提下开发者可自定义输入框,可直接对mnoutput源代码进行响应的修改 代码块: mnoutput。
使用方式:
在 script
中引用组件
import {mnkeybord} from "@/pages/mnkeybord/mnkeybord"
import {mnoutput} from "@/pages/mnkeybord/mnoutput"
export default {
components: {mnkeybord,mnoutput}
}
用法
<mnoutput ref="mnoutput" @moveCusor="moveCusor"
@find="search" @alertKeyEvent="alertKeyEvent" :selectWordsProp="selectWords" :textCusorProp="textCusor"
:outWordType="outWordType" :outputForTextAreaHeight="outputForTextAreaHeight"
:outputForTextAreaWidth="outputForTextAreaWidth"
:isShowInputSubmitBtn="true" :outwordforinputsubmitBgColor="outwordforinputsubmitBgColor"></mnoutput>
<mnkeybord outWordType="textarea" ref="mnkeybord" :textCusorProp="0"
@copyOutCompoentTxt="copyOutCompoentTxt" @clearOutCompoentTxt="clearOutCompoentTxt"
@hideKeyEvent="hideKeyEvent" @selectWordEvent="selectWordEvent"
:isShowProp="true"></mnkeybord>
mnkeybord 属性说明:
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
outWordType | String | textarea | 该模拟键盘组件分别针对input输入框和textarea输入框做了功能上的区分 故该属性记录当前输入框的类型textarea/input |
textCusorProp | Number | 0 | 初始化模拟光标位置 改属性的作用是在模拟键盘和模拟文本框之间实时的记录光标展示位置 后续移动光标事件内使用(由mnoutput组件内暴露moveCusor事件控制该属性)) |
isShowProp | Boolean | false | 是否弹起模拟键盘,默认不弹出,开发人员自己控制 最好点击模拟输入框时弹出 |
mnoutput 属性说明:
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
outWordType | String | textarea | 模拟输入框类型textarea/input |
selectWordsProp | Array | [] | 模拟键盘键入词 |
textCusorProp | Number | 0 | 模拟光标位置 |
outputForTextAreaHeight | String | 300rpx | textarea时的高度 |
outputForTextAreaWidth | String | 400rpx | textarea时的宽度 |
outputwidth | String | 66rpx | input时的宽度 |
outputheight | String | 560rpx | input时的高度 |
isShowInputSubmitBtn | Boolean | true | 是否显示input的提交按钮(类似搜索按钮) |
outwordforinputsubmitBgColor | String | #22badf | input提交按钮背景颜色 |
mnkeybord 事件说明:
事件称名 | 说明 | 返回参数 |
---|---|---|
copyOutCompoentTxt | 点击模拟键盘工具栏内的复制按钮后向上暴露复制输入框文字的事件 开发人员通过refs引用输入框组件(mnoutput)来调用其提供的copyOutWord方法来完成复制文本的操作 eg:this.$refs.mnoutput.copyOutWord(); | 无 |
clearOutCompoentTxt | 点击模拟键盘工具栏内的清空按钮后向上暴露清空输入框文字的事件 开发人员通过refs引用输入框组件(mnoutput)来调用其提供的clearOutputWords方法来完成清空输入框内文本的操作 eg:this.$refs.mnoutput.clearOutputWords(); | 无 |
hideKeyEvent | 点击模拟键盘工具栏内的收起模拟键盘按钮后向上暴露收起模拟键盘事件 开发人员在事件内部改变mnkeybord组件isShowProp属性为false来收起模拟键盘,也同时调用模拟输入框mnoutput组件提供的isShowCusorHandler方法来隐藏输入框光标效果 eg:this.$refs.mnoutput.isShowCusorHandler(false); | 无 |
selectWordEvent | 使用模拟键盘键入完后向上暴露selectWordEvent事件,父组件监听并实现该事件,把接受到的俩个参数值传给模拟输入框组件mnoutput的selectWordsProp属性来完成用模拟键盘键入词在模拟输入框的展示动作 | selectWordEvent(val, val2) val:键盘键入词(数组) val2:实时光标位置) |
mnoutput 事件说明:
事件称名 | 说明 | 返回参数 |
---|---|---|
moveCusor | 移动光标 点击模拟输入框某个文字后光标出现在该文字下方 | val:光标位置 |
find | input输入框的模式下点击提交按钮/搜索按钮触发 | val:搜索关键词 |
alertKeyEvent | 弹出模拟键盘 开发者监听alertKeyEvent并实现该事件改变mnkeybord组件isShowProp属性为true | 无 |