更新记录

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

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问