@xianyongwen/tw-terminal-vue3 v1.0.2

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初始化时需要声明的属性

通用配置

web键盘配置

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

字典配置

支持配置的字典如下

格式如下

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

多闻键盘配置

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

Input Attributes

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

Mode Attributes

输入法支持的输入模式

Type Attributes

输入法支持的键盘类型

方法

输入法初始化后，会在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输入法；