web输入法vue3版本开发使用手册

安装

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

// 设置npm源
npm config set registry https://registry.npmjs.org

// 下载
npm install  @xianyongwen/tw-terminal-vue3 -S

引入 TwTerminal

初始化

初始化配置请查阅【Options Attributes】章节

//  main.js

import kfTw from '@xianyongwen/tw-terminal-vue3'
import '@xianyongwen/tw-terminal-vue3/lib/style.css'

/**
 * 初始化 Web输入法·新 
 * @param {string} opts.type  类型，指定声明的输入法类型 指定输入法服务（默认值：http://ai.kffami.com:8880）
 **/
Vue.use(kfTw, {
  type: 2, // 声明类型： 0-多文 1-字库 2-web输入法（新发布版本）
  // 字典配置
  dictConfig: {
    // 拼音字典
    pinyin: {
        gd: ['广东', '广东省'] // [关键词]:[匹配项数组]
    }
  }
})

注意：

1. 输入法类型一经声明不可修改；

方法调用

输入法初始化后，会在window上挂载一个全局变量$tw，通过window.$tw可以访问到输入法实例。

示例：

<template>
    <!--
        文本框支持的参数请查阅【Input Attributes】章节
        mode: 键盘支持的模式【必填】，具体支持的请查阅【Mode Attributes】章节
        title: 显示在键盘上方的标题【可选】，不传将默认不显示标题
    -->
    <input
      v-model="text"
      v-tw="{
        mode: 'all',
        title: '全部输入法',
        type: type
      }"
    />
</template>

Attributes & Methods

Options Attributes

web初始化时需要声明的属性

通用配置

| 参数 | 说明 | 类型 | 可选值 | 默认值 | 版本支持 | 备注 | |------|------|-----|--------|-------|---------|---------| | type | 指定键盘类型 | number | 0,1,2 | 2 | * | 0-多闻键盘 1-字库键盘 2-web键盘·新 |

web键盘配置

以下配置仅对于字库键盘、web键盘生效，从v3.0.0-beta.2开始支持

| 参数 | 说明 | 类型 | 可选值 | 默认值 | 版本支持 | 备注 | |------|------|-----|--------|-------|---------|---------| | service | 服务端地址 | string | — | http://ai.kffami.com:8880 | * | 手写识别服务 | | dictCover | 字典覆盖 | boolean | — | false | 3.0.0-beta.3 | true-覆盖字典 false-追加字典 | | dictConfig | 字典配置 | Object | — | — | 3.0.0-beta.3 | 详阅【字典配置】章节 |

字典配置

支持配置的字典如下

| 参数 | 说明 | 类型 | 可选值 | 默认值 | 版本支持 | |------|------|-----|--------|-------|---------| | pinyin | 拼音字典 | Object | — | — | * |

格式如下

Vue.use(kfTw, {
  type: 2, // 声明类型： 0-多文 1-字库 2-web输入法（新发布版本）
  // 是否进行字典覆盖，
  // 为true时，新增的拼音字典会覆盖旧的字典，
  // 为false时，则在原本的字典中追加新增的匹配项
  dictCover: false,
  // 字典配置
  dictConfig: {
    // 拼音字典
    pinyin: {
        // [关键词]:[匹配项数组]，输入gd，会出现广东、广东省的匹配项
        gd: ['广东', '广东省']
    }
  }
})

多闻键盘配置

以下配置仅对于多闻键盘生效

| 参数 | 说明 | 类型 | 可选值 | 默认值 | 版本支持 | 备注 | |------|------|-----|--------|-------|---------|---------| | url | 服务端地址 | string | — | ws://127.0.0.1:10086 | * | — | | exePath | 应用路径 | string | — | C:\DWIme\dwCmd.exe | * | — | | width | 窗口宽度 | number | — | 浏览器可视区域宽度 | * | — | | height | 窗口高度 | number | — | 浏览器可视区域高度 | * | — | | twWidth | 输入法宽度 | number | — | — | * | 不小于650 | | twHeight | 输入法高度 | number | — | 400 | * | 不小于300 | | animation | 是否启用动画效果 | number | 0,1 | 1 | * | 0-否 1-是 | | direction | 弹出动画方向 | number | 0,1,2 | 0 | * | 0-从下到上 1-从左到右 2-从右到左 | | processName | 挤压应用名称 | string | — | — | * | — |

Input Attributes

调用web输入法，文本框需要指定的配置

| 参数 | 说明 | 类型 | 可选值 | 默认值 | 版本支持 | |------|------|-----|--------|-------|---------| | mode | 输入模式（必填） | string | 请查阅【Mode Attributes】章节 | all | * |

Mode Attributes

输入法支持的输入模式

| 参数 | 说明 | 版本支持 | |------|------|------| | all | 全部 | 3.0.0-beta.2 | | cn | 汉字简体（包括拼音26键、手写输入法） | 同上 | | en | 英文 | 同上 | | symb | 特殊符号 | 同上 |

Type Attributes

输入法支持的键盘类型

| 参数 | 说明 | 版本支持 | |------|------|------| | 0 | 多闻键盘 | * | | 1 | 字库键盘 | 0.1.6 | | 2 | web键盘 | 3.0.0-beta.2 |

方法

输入法初始化后，会在Vue上挂载一个全局变量$tw，通过this.$tw可以访问到输入法实例。

下面将会以element-ui作为demo，展示如何调用各个api

v-tw指令

点击输入框即可显示输入键盘

<template>
    <!--
        文本框支持的参数请查阅【Input Attributes】章节
        mode: 键盘支持的模式【必填】，具体支持的请查阅【Mode Attributes】章节
        title: 显示在键盘上方的标题【可选】，不传将默认不显示标题
    -->
    <input
      v-model="text"
      v-tw="{
        mode: 'all',
        title: '全部输入法',
        type: type
      }"
    />
</template>

关闭输入法

点击空白位置或者确定，即可关闭输入键盘。

getType

检测当前输入法类型

const type = window.$tw.getType()
console.log('当前输入法类型为：' + type) // 当前输入法类型为：2

init

// type为需要重新初始化的输入法类型【必填】
this.$tw.init(type)

【慎用】 仅建议在多闻输入法服务断开后，无法重新连接，需要重新初始化时使用；
【注意】 除type外，其他配置将使用原配置项进行配置。

// 重新初始化为web输入法
window.$tw.init(2).then(res => {
    // 已成功初始化为web输入法
}).catch(err => {
    // 初始化失败
})

其他

• 当前版本，初始化多闻输入法（即 type:0）失败时，默认重连 5次（尝试失败后间隔5秒重新尝试） 如果无法连上，默认转为初始化新版web输入法（type:2）；
• 类型参数异常时，默认转为初始化新版web输入法；