feat: 文档2.0
This commit is contained in:
tackchen
parent
b6ca3d6f73
commit
568d9bfe58
105
README.md
105
README.md
|
|
@ -19,50 +19,48 @@
|
||||||
|
|
||||||
<!-- toc -->
|
<!-- toc -->
|
||||||
|
|
||||||
- [cnchar <a href="https://www.github.com/theajack/cnchar"><img src="https://img.shields.io/github/stars/theajack/cnchar.svg?style=social" alt="star"></a> <a href="https://theajack.gitee.io"><img src="https://img.shields.io/badge/author-theajack-blue.svg?style=social" alt="Author"></a>](#cnchar-img-src%22httpsimgshieldsiogithubstarstheajackcncharsvgstylesocial%22-alt%22star%22-img-src%22httpsimgshieldsiobadgeauthor-theajack-bluesvgstylesocial%22-alt%22author%22)
|
- [前言](#%E5%89%8D%E8%A8%80)
|
||||||
- [🚀 功能全面、多端支持的汉字拼音笔画 js 库](#%f0%9f%9a%80-%e5%8a%9f%e8%83%bd%e5%85%a8%e9%9d%a2%e5%a4%9a%e7%ab%af%e6%94%af%e6%8c%81%e7%9a%84%e6%b1%89%e5%ad%97%e6%8b%bc%e9%9f%b3%e7%ac%94%e7%94%bb-js-%e5%ba%93)
|
- [0.快速使用](#0%E5%BF%AB%E9%80%9F%E4%BD%BF%E7%94%A8)
|
||||||
- [前言](#%e5%89%8d%e8%a8%80)
|
- [1.功能](#1%E5%8A%9F%E8%83%BD)
|
||||||
- [0.快速使用](#0%e5%bf%ab%e9%80%9f%e4%bd%bf%e7%94%a8)
|
- [2.概览](#2%E6%A6%82%E8%A7%88)
|
||||||
- [1.功能](#1%e5%8a%9f%e8%83%bd)
|
- [3 安装](#3-%E5%AE%89%E8%A3%85)
|
||||||
- [2.概览](#2%e6%a6%82%e8%a7%88)
|
* [3.1 使用 npm 安装](#31-%E4%BD%BF%E7%94%A8-npm-%E5%AE%89%E8%A3%85)
|
||||||
- [3 安装](#3-%e5%ae%89%e8%a3%85)
|
* [3.2 使用 script 引入](#32-%E4%BD%BF%E7%94%A8-script-%E5%BC%95%E5%85%A5)
|
||||||
- [3.1 使用 npm 安装](#31-%e4%bd%bf%e7%94%a8-npm-%e5%ae%89%e8%a3%85)
|
- [4 使用](#4-%E4%BD%BF%E7%94%A8)
|
||||||
- [3.2 使用 script 引入](#32-%e4%bd%bf%e7%94%a8-script-%e5%bc%95%e5%85%a5)
|
* [4.1 webpack浏览器环境(有window对象)](#41-webpack%E6%B5%8F%E8%A7%88%E5%99%A8%E7%8E%AF%E5%A2%83%E6%9C%89window%E5%AF%B9%E8%B1%A1)
|
||||||
- [4 使用](#4-%e4%bd%bf%e7%94%a8)
|
* [4.2 nodejs 等非浏览器环境](#42-nodejs-%E7%AD%89%E9%9D%9E%E6%B5%8F%E8%A7%88%E5%99%A8%E7%8E%AF%E5%A2%83)
|
||||||
- [4.1 webpack浏览器环境(有window对象)](#41-webpack%e6%b5%8f%e8%a7%88%e5%99%a8%e7%8e%af%e5%a2%83%e6%9c%89window%e5%af%b9%e8%b1%a1)
|
* [4.3 原生浏览器环境](#43-%E5%8E%9F%E7%94%9F%E6%B5%8F%E8%A7%88%E5%99%A8%E7%8E%AF%E5%A2%83)
|
||||||
- [4.2 nodejs 等非浏览器环境](#42-nodejs-%e7%ad%89%e9%9d%9e%e6%b5%8f%e8%a7%88%e5%99%a8%e7%8e%af%e5%a2%83)
|
- [5 API](#5-api)
|
||||||
- [4.3 原生浏览器环境](#43-%e5%8e%9f%e7%94%9f%e6%b5%8f%e8%a7%88%e5%99%a8%e7%8e%af%e5%a2%83)
|
* [5.1 拼音笔画基础 API: spell & stroke](#51-%E6%8B%BC%E9%9F%B3%E7%AC%94%E7%94%BB%E5%9F%BA%E7%A1%80-api-spell--stroke)
|
||||||
- [5 API](#5-api)
|
* [5.2 可视化绘制汉字: draw](#52-%E5%8F%AF%E8%A7%86%E5%8C%96%E7%BB%98%E5%88%B6%E6%B1%89%E5%AD%97-draw)
|
||||||
- [5.1 拼音笔画基础 API: spell & stroke](#51-%e6%8b%bc%e9%9f%b3%e7%ac%94%e7%94%bb%e5%9f%ba%e7%a1%80-api-spell--stroke)
|
+ [5.2.1 使用](#521-%E4%BD%BF%E7%94%A8)
|
||||||
- [5.2 可视化绘制汉字: draw](#52-%e5%8f%af%e8%a7%86%e5%8c%96%e7%bb%98%e5%88%b6%e6%b1%89%e5%ad%97-draw)
|
+ [5.2.2 参数](#522-%E5%8F%82%E6%95%B0)
|
||||||
- [5.2.1 使用](#521-%e4%bd%bf%e7%94%a8)
|
* [5.3 繁体、简体、火星文互转: convert](#53-%E7%B9%81%E4%BD%93%E7%AE%80%E4%BD%93%E7%81%AB%E6%98%9F%E6%96%87%E4%BA%92%E8%BD%AC-convert)
|
||||||
- [5.2.2 参数](#522-%e5%8f%82%e6%95%b0)
|
* [5.4 笔画序列推出原汉字: orderToWord](#54-%E7%AC%94%E7%94%BB%E5%BA%8F%E5%88%97%E6%8E%A8%E5%87%BA%E5%8E%9F%E6%B1%89%E5%AD%97-ordertoword)
|
||||||
- [5.3 繁体、简体、火星文互转: convert](#53-%e7%b9%81%e4%bd%93%e7%ae%80%e4%bd%93%e7%81%ab%e6%98%9f%e6%96%87%e4%ba%92%e8%bd%ac-convert)
|
* [5.5 通过拼音查询原汉字: spellToWord](#55-%E9%80%9A%E8%BF%87%E6%8B%BC%E9%9F%B3%E6%9F%A5%E8%AF%A2%E5%8E%9F%E6%B1%89%E5%AD%97-spelltoword)
|
||||||
- [5.4 笔画序列推出原汉字: orderToWord](#54-%e7%ac%94%e7%94%bb%e5%ba%8f%e5%88%97%e6%8e%a8%e5%87%ba%e5%8e%9f%e6%b1%89%e5%ad%97-ordertoword)
|
* [5.6 通过笔画数查询原汉字: strokeToWord](#56-%E9%80%9A%E8%BF%87%E7%AC%94%E7%94%BB%E6%95%B0%E6%9F%A5%E8%AF%A2%E5%8E%9F%E6%B1%89%E5%AD%97-stroketoword)
|
||||||
- [5.5 通过拼音查询原汉字: spellToWord](#55-%e9%80%9a%e8%bf%87%e6%8b%bc%e9%9f%b3%e6%9f%a5%e8%af%a2%e5%8e%9f%e6%b1%89%e5%ad%97-spelltoword)
|
* [5.7 查询拼音详细信息: spellInfo](#57-%E6%9F%A5%E8%AF%A2%E6%8B%BC%E9%9F%B3%E8%AF%A6%E7%BB%86%E4%BF%A1%E6%81%AF-spellinfo)
|
||||||
- [5.6 通过笔画数查询原汉字: strokeToWord](#56-%e9%80%9a%e8%bf%87%e7%ac%94%e7%94%bb%e6%95%b0%e6%9f%a5%e8%af%a2%e5%8e%9f%e6%b1%89%e5%ad%97-stroketoword)
|
* [5.8 其他 api](#58-%E5%85%B6%E4%BB%96-api)
|
||||||
- [5.7 查询拼音详细信息: spellInfo](#57-%e6%9f%a5%e8%af%a2%e6%8b%bc%e9%9f%b3%e8%af%a6%e7%bb%86%e4%bf%a1%e6%81%af-spellinfo)
|
+ [5.8.1 .use()](#581-use)
|
||||||
- [5.8 其他 api](#58-%e5%85%b6%e4%bb%96-api)
|
+ [5.8.2 .type](#582-type)
|
||||||
- [5.8.1 .use()](#581-use)
|
+ [5.8.3 .check](#583-check)
|
||||||
- [5.8.2 .type](#582-type)
|
+ [5.8.4 .version](#584-version)
|
||||||
- [5.8.3 .check](#583-check)
|
+ [5.8.5 .plugins](#585-plugins)
|
||||||
- [5.8.4 .version](#584-version)
|
- [6 spell stroke 参数](#6-spell-stroke-%E5%8F%82%E6%95%B0)
|
||||||
- [5.8.5 .plugins](#585-plugins)
|
* [6.1 spell 参数](#61-spell-%E5%8F%82%E6%95%B0)
|
||||||
- [6 spell stroke 参数](#6-spell-stroke-%e5%8f%82%e6%95%b0)
|
* [6.2 stroke 参数](#62-stroke-%E5%8F%82%E6%95%B0)
|
||||||
- [6.1 spell 参数](#61-spell-%e5%8f%82%e6%95%b0)
|
* [6.3 orderToWord 参数](#63-ordertoword-%E5%8F%82%E6%95%B0)
|
||||||
- [6.2 stroke 参数](#62-stroke-%e5%8f%82%e6%95%b0)
|
* [6.4 spellToWord 参数](#64-spelltoword-%E5%8F%82%E6%95%B0)
|
||||||
- [6.3 orderToWord 参数](#63-ordertoword-%e5%8f%82%e6%95%b0)
|
* [6.5 strokeToWord 参数](#65-stroketoword-%E5%8F%82%E6%95%B0)
|
||||||
- [6.4 spellToWord 参数](#64-spelltoword-%e5%8f%82%e6%95%b0)
|
* [6.6 使用实例大全：](#66-%E4%BD%BF%E7%94%A8%E5%AE%9E%E4%BE%8B%E5%A4%A7%E5%85%A8)
|
||||||
- [6.5 strokeToWord 参数](#65-stroketoword-%e5%8f%82%e6%95%b0)
|
+ [6.6.0 安装使用](#660-%E5%AE%89%E8%A3%85%E4%BD%BF%E7%94%A8)
|
||||||
- [6.6 使用实例大全：](#66-%e4%bd%bf%e7%94%a8%e5%ae%9e%e4%be%8b%e5%a4%a7%e5%85%a8)
|
+ [6.6.1 cnchar 基础库功能](#661-cnchar-%E5%9F%BA%E7%A1%80%E5%BA%93%E5%8A%9F%E8%83%BD)
|
||||||
- [6.6.0 安装使用](#660-%e5%ae%89%e8%a3%85%e4%bd%bf%e7%94%a8)
|
+ [6.6.2 cnchar-poly 库功能](#662-cnchar-poly-%E5%BA%93%E5%8A%9F%E8%83%BD)
|
||||||
- [6.6.1 cnchar 基础库功能](#661-cnchar-%e5%9f%ba%e7%a1%80%e5%ba%93%e5%8a%9f%e8%83%bd)
|
+ [6.6.3 cnchar-order 库功能](#663-cnchar-order-%E5%BA%93%E5%8A%9F%E8%83%BD)
|
||||||
- [6.6.2 cnchar-poly 库功能](#662-cnchar-poly-%e5%ba%93%e5%8a%9f%e8%83%bd)
|
+ [6.6.4 cnchar-trad 库功能](#664-cnchar-trad-%E5%BA%93%E5%8A%9F%E8%83%BD)
|
||||||
- [6.6.3 cnchar-order 库功能](#663-cnchar-order-%e5%ba%93%e5%8a%9f%e8%83%bd)
|
- [6.6.4.1 convert 字体转换](#6641-convert-%E5%AD%97%E4%BD%93%E8%BD%AC%E6%8D%A2)
|
||||||
- [6.6.4 cnchar-trad 库功能](#664-cnchar-trad-%e5%ba%93%e5%8a%9f%e8%83%bd)
|
- [6.6.4.2 spell 和 stroke 方法](#6642-spell-%E5%92%8C-stroke-%E6%96%B9%E6%B3%95)
|
||||||
- [6.6.4.1 convert 字体转换](#6641-convert-%e5%ad%97%e4%bd%93%e8%bd%ac%e6%8d%a2)
|
- [7 应用例子](#7-%E5%BA%94%E7%94%A8%E4%BE%8B%E5%AD%90)
|
||||||
- [6.6.4.2 spell 和 stroke 方法](#6642-spell-%e5%92%8c-stroke-%e6%96%b9%e6%b3%95)
|
|
||||||
- [7 应用例子](#7-%e5%ba%94%e7%94%a8%e4%be%8b%e5%ad%90)
|
|
||||||
|
|
||||||
<!-- tocstop -->
|
<!-- tocstop -->
|
||||||
|
|
||||||
|
|
@ -121,7 +119,7 @@ import cnchar from 'cnchar';
|
||||||
|
|
||||||
### 2.概览
|
### 2.概览
|
||||||
|
|
||||||
考虑到不同的需求，cnchar 的功能被拆分到以下四个库中：
|
考虑到不同的需求，cnchar 的功能被拆分到以下五个库中：
|
||||||
|
|
||||||
| 名称 | 描述 | 功能 |
|
| 名称 | 描述 | 功能 |
|
||||||
| :----------: | :------------------------------: | :--------------------: |
|
| :----------: | :------------------------------: | :--------------------: |
|
||||||
|
|
@ -129,7 +127,7 @@ import cnchar from 'cnchar';
|
||||||
| cnchar-poly | 多音词库 | 含有识别多音词功能 |
|
| cnchar-poly | 多音词库 | 含有识别多音词功能 |
|
||||||
| cnchar-order | 笔画顺序库 | 含有识别笔画顺序、笔画名称、笔画形状等功能 |
|
| cnchar-order | 笔画顺序库 | 含有识别笔画顺序、笔画名称、笔画形状等功能 |
|
||||||
| cnchar-trad | 繁体字库 | 支持繁体、火星、简体互转，支持繁体拼音笔画多音字全功能 |
|
| cnchar-trad | 繁体字库 | 支持繁体、火星、简体互转，支持繁体拼音笔画多音字全功能 |
|
||||||
| cnchar-draw | 绘制笔画库 | 支持可视化绘制汉字，有 normal,animation,stroke,test 四种模式可选，该库仅在浏览器环境下可用 |
|
| cnchar-draw | 绘制笔画库 | 指出可视化绘制汉字，有 normal,animation,stroke,test 四种模式可选，该库仅在浏览器环境下可用 |
|
||||||
|
|
||||||
### 3 安装
|
### 3 安装
|
||||||
|
|
||||||
|
|
@ -269,7 +267,7 @@ cnchar.draw('你好', options); // options 为可选参数， 在5.2.2 种会详
|
||||||
|
|
||||||
运行结果如下：
|
运行结果如下：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
该库支持脱离cnchar 独立使用
|
该库支持脱离cnchar 独立使用
|
||||||
|
|
||||||
|
|
@ -293,9 +291,11 @@ draw 的参数比较繁多，首先需要理解的是，draw 分为四种绘制
|
||||||
|
|
||||||
```ts
|
```ts
|
||||||
declare interface DrawOption {
|
declare interface DrawOption {
|
||||||
el?: string | HTMLElement; // 绘制的容器，支持id和dom，若是不填，会在body后append一个dom作为容器
|
el?: string | HTMLElement; // 绘制的容器，支持选择器或dom，若是不填，会在body后append一个dom作为容器
|
||||||
type?: DrawType; // 绘制模式，默认为normal
|
type?: DrawType; // 绘制模式，默认为normal
|
||||||
|
clear?: boolean; // 绘制前是否清空容器 默认为true
|
||||||
style?: { // 样式类
|
style?: { // 样式类
|
||||||
|
backgroundColor?: string, // 默认为#fff
|
||||||
showOutline?: boolean;//: true,
|
showOutline?: boolean;//: true,
|
||||||
showCharacter?: boolean;//: true,
|
showCharacter?: boolean;//: true,
|
||||||
currentColor?: string;//: '#b44', // 仅在stroke模式下有效
|
currentColor?: string;//: '#b44', // 仅在stroke模式下有效
|
||||||
|
|
@ -649,14 +649,13 @@ arg 参数信息如下：
|
||||||
| 参数 | 作用 | 是否默认 | 依赖库 | 备注 |
|
| 参数 | 作用 | 是否默认 | 依赖库 | 备注 |
|
||||||
| :---------: | :--------: | :------: | :---------: | :---: |
|
| :---------: | :--------: | :------: | :---------: | :---: |
|
||||||
| match | 匹配含有笔序中所有笔画的汉字 | 否 | -- | -- |
|
| match | 匹配含有笔序中所有笔画的汉字 | 否 | -- | -- |
|
||||||
| matchorder | 匹配含有笔序中所有笔画的汉字且先后顺序一致 | 否 | -- | -- |
|
| match-order | 匹配含有笔序中所有笔画的汉字前先后顺序一致 | 否 | -- | -- |
|
||||||
| contain | 匹配含有该笔序的汉字 | 否 | -- | -- |
|
| contain | 匹配含有该笔序的汉字 | 否 | -- | -- |
|
||||||
| start | 匹配所有以该笔序开头的汉字 | 否 | -- | -- |
|
| start | 匹配所有以该笔序开头的汉字 | 否 | -- | -- |
|
||||||
| array | 返回符合条件的数组，默认返回的是字符串 | 否 | -- | -- |
|
| array | 返回符合条件的数组，默认返回的是字符串 | 否 | -- | -- |
|
||||||
| simple | 禁用繁体字 | 否 | cnchar-trad | 该参数仅在引入了 `cnchar-trad` 后有效 |
|
| simple | 禁用繁体字 | 否 | cnchar-trad | 该参数仅在引入了 `cnchar-trad` 后有效 |
|
||||||
| trad | 只查询繁体字 | 否 | cnchar-trad | 该参数仅在引入了 `cnchar-trad` 后有效 |
|
|
||||||
|
|
||||||
关于匹配参数，优先级为 **match > matchorder > contain > start > 默认**
|
关于匹配参数，优先级为 **match > match-order > contain > start > 默认**
|
||||||
|
|
||||||
不含有匹配参数时表示使用全匹配，即汉字笔画数与传入的 orders 完全一致
|
不含有匹配参数时表示使用全匹配，即汉字笔画数与传入的 orders 完全一致
|
||||||
|
|
||||||
|
|
@ -688,10 +687,10 @@ arg 参数信息如下：
|
||||||
|
|
||||||
#### 6.5 strokeToWord 参数
|
#### 6.5 strokeToWord 参数
|
||||||
|
|
||||||
参数调用如下，所有 arg 参数都是可选的
|
参数调用如下，count表示笔画数，所有 arg 参数都是可选的
|
||||||
|
|
||||||
```js
|
```js
|
||||||
cnchar.strokeToWord(spell,arg1,arg2,...);
|
cnchar.strokeToWord(count,arg1,arg2,...);
|
||||||
```
|
```
|
||||||
|
|
||||||
| 参数 | 作用 | 是否默认 | 依赖库 | 备注 |
|
| 参数 | 作用 | 是否默认 | 依赖库 | 备注 |
|
||||||
|
|
|
||||||
|
|
@ -1,75 +0,0 @@
|
||||||
<template>
|
|
||||||
<Vssue
|
|
||||||
:issue-id='issueId'
|
|
||||||
:options='options'
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
// import BitbucketV2 from '@vssue/api-bitbucket-v2';
|
|
||||||
import GiteeV5 from '@vssue/api-gitee-v5';
|
|
||||||
import GithubV3 from '@vssue/api-github-v3';
|
|
||||||
// import GitlabV4 from '@vssue/api-gitlab-v4';
|
|
||||||
|
|
||||||
const platforms = {
|
|
||||||
// 'bitbucket': {
|
|
||||||
// options: {
|
|
||||||
// api: BitbucketV2,
|
|
||||||
// owner: 'meteorlxy',
|
|
||||||
// repo: 'vssue',
|
|
||||||
// clientId: '6tKVqDXYzuvmzCnbGw',
|
|
||||||
// },
|
|
||||||
// issueId: 1,
|
|
||||||
// },
|
|
||||||
'gitee': {
|
|
||||||
options: {
|
|
||||||
api: GiteeV5,
|
|
||||||
owner: 'meteor_lxy',
|
|
||||||
repo: 'vssue',
|
|
||||||
clientId: '30c40c01df93c7ff2b043f389dfc404e8fe5cc3740211ac51a444a9512ea7a93',
|
|
||||||
clientSecret: '9e4f336c3d532eeae7d1e84d81199c95c8da110da24bdd3a2da5ea6e4257d5dd',
|
|
||||||
},
|
|
||||||
issueId: 'IWWRQ',
|
|
||||||
},
|
|
||||||
'github': {
|
|
||||||
options: {
|
|
||||||
api: GithubV3,
|
|
||||||
owner: 'meteorlxy',
|
|
||||||
repo: 'vssue',
|
|
||||||
clientId: 'a1097b7751127c6d1194',
|
|
||||||
clientSecret: '5c95e2f890b6a2b80dbda17656e9b1db9e87a07b',
|
|
||||||
},
|
|
||||||
issueId: 1,
|
|
||||||
},
|
|
||||||
// 'gitlab': {
|
|
||||||
// options: {
|
|
||||||
// api: GitlabV4,
|
|
||||||
// owner: 'meteorlxy',
|
|
||||||
// repo: 'vssue',
|
|
||||||
// clientId: '5a80ead2a62ec3fd3a31a78b2bf0e5602bacd0513ab3b772e580b05e15d0d2cb',
|
|
||||||
// },
|
|
||||||
// issueId: 1,
|
|
||||||
// },
|
|
||||||
};
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'VssueDemo',
|
|
||||||
|
|
||||||
props: {
|
|
||||||
platform: {
|
|
||||||
type: String,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
computed: {
|
|
||||||
options () {
|
|
||||||
return platforms[this.platform].options;
|
|
||||||
},
|
|
||||||
|
|
||||||
issueId () {
|
|
||||||
return platforms[this.platform].issueId;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,78 +0,0 @@
|
||||||
// 组件api说明 表格
|
|
||||||
<template>
|
|
||||||
<div class='api-wrap'>
|
|
||||||
<h3>{{title}}</h3>
|
|
||||||
<el-table :data='tableData'
|
|
||||||
v-bind='$attrs'
|
|
||||||
v-on='$listeners'
|
|
||||||
style='width: 100%'>
|
|
||||||
<template v-for='(item, index) in tableHeader'>
|
|
||||||
<el-table-column :prop="index+''" :label='item' :key='index'>
|
|
||||||
</el-table-column>
|
|
||||||
</template>
|
|
||||||
</el-table>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'DemoApi',
|
|
||||||
props: {
|
|
||||||
type: {
|
|
||||||
type: String,
|
|
||||||
default: 'attr'
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
type: String,
|
|
||||||
default: '属性'
|
|
||||||
},
|
|
||||||
tableBody: Array,
|
|
||||||
tableHead: String
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
tableHeader () {
|
|
||||||
return this.tableHead.split('|').map(s => s.replace(/^\s*|\s*$/g, ''));
|
|
||||||
},
|
|
||||||
tableData () {
|
|
||||||
return this.tableBody.map(str => {
|
|
||||||
let data = {};
|
|
||||||
str.split('|').map((s, i) => data[i] = s.replace(/^\s*|\s*$/g, ''));
|
|
||||||
return data;
|
|
||||||
});
|
|
||||||
},
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less">
|
|
||||||
.api-wrap {
|
|
||||||
padding: 40px 0;
|
|
||||||
+ .api-wrap {
|
|
||||||
margin: 40px 0;
|
|
||||||
}
|
|
||||||
&:first-child {
|
|
||||||
margin-top: 80px;
|
|
||||||
}
|
|
||||||
&:last-child {
|
|
||||||
margin-bottom: 80px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.el-table {
|
|
||||||
table {
|
|
||||||
border-collapse: collapse;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
th,
|
|
||||||
td,
|
|
||||||
th.is-leaf {
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-table__body,
|
|
||||||
.el-table__footer,
|
|
||||||
.el-table__header {
|
|
||||||
border-collapse: collapse;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,134 +0,0 @@
|
||||||
// 包裹示例组件
|
|
||||||
<template>
|
|
||||||
<div class='code'>
|
|
||||||
<div class='code--title'>
|
|
||||||
<h2>{{title}}</h2>
|
|
||||||
<small>{{description}}</small>
|
|
||||||
</div>
|
|
||||||
<div class='code--demo'>
|
|
||||||
<div class='code-content'>
|
|
||||||
<slot></slot>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-if='isShow'
|
|
||||||
class='code--segment'>
|
|
||||||
<slot name='codeText'></slot>
|
|
||||||
</div>
|
|
||||||
<div v-if='$slots.codeText'
|
|
||||||
class='code--button'>
|
|
||||||
<div @click='handleToggleShow'
|
|
||||||
class='code--show'>
|
|
||||||
{{codeTextBtn}}
|
|
||||||
</div>
|
|
||||||
<div v-if='onlineLink'
|
|
||||||
class='code--online'
|
|
||||||
@click='handleOnline'>
|
|
||||||
{{codeTextBtnOnline}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
props: {
|
|
||||||
title: String,
|
|
||||||
description: String,
|
|
||||||
onlineLink: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
isShow: false,
|
|
||||||
codeTextBtn: '显示代码',
|
|
||||||
codeTextBtnOnline: '在线运行'
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
handleToggleShow () {
|
|
||||||
this.isShow = !this.isShow;
|
|
||||||
this.codeTextBtn = this.isShow ? '隐藏代码' : '显示代码';
|
|
||||||
},
|
|
||||||
handleOnline () {
|
|
||||||
window.open(this.onlineLink);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.code {
|
|
||||||
padding: 40px 0;
|
|
||||||
.code--title {
|
|
||||||
h2 {
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
border-bottom: none;
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
small {
|
|
||||||
font-size: 14px;
|
|
||||||
display: inline-block;
|
|
||||||
margin: 10px 0;
|
|
||||||
color: #5e6d82;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.code--demo {
|
|
||||||
border: 1px solid #ebebeb;
|
|
||||||
border-bottom: none;
|
|
||||||
border-radius: 3px;
|
|
||||||
box-shadow: 0 0 2px 0 rgba(232, 237, 250, 0.6),
|
|
||||||
0 1px 2px 0 rgba(232, 237, 250, 0.5);
|
|
||||||
.code-content {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 4%;
|
|
||||||
border-bottom: 1px solid #ddd;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.code--button {
|
|
||||||
// display: flex;
|
|
||||||
position: relative;
|
|
||||||
background: #fafbfc;
|
|
||||||
color: #409eff;
|
|
||||||
font-weight: 400;
|
|
||||||
line-height: 40px;
|
|
||||||
text-align: center;
|
|
||||||
cursor: pointer;
|
|
||||||
box-shadow: 0 0 8px 0 rgba(232, 237, 250, 0.6),
|
|
||||||
0 2px 4px 0 rgba(232, 237, 250, 0.5);
|
|
||||||
|
|
||||||
.code--show {
|
|
||||||
// flex: 3;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.code--show:hover {
|
|
||||||
font-size: 17px;
|
|
||||||
}
|
|
||||||
.code--online {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
padding-left: 5px;
|
|
||||||
padding-right: 25px;
|
|
||||||
}
|
|
||||||
.code--online:hover {
|
|
||||||
font-size: 17px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
& + .code {
|
|
||||||
margin-top: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not(:first-child) {
|
|
||||||
margin-top: 40px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -27,9 +27,10 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import jsbox from '../../src/jsbox';
|
import initJSBox from '../../src/jsbox';
|
||||||
import {copy, extractScript, execute} from '../../src/util';
|
import {copy, extractScript, execute} from '../../src/util';
|
||||||
import event from '../../src/event';
|
import event from '../../src/event';
|
||||||
|
let jsbox = null;
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
id: {
|
id: {
|
||||||
|
|
@ -69,6 +70,7 @@
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted () {
|
mounted () {
|
||||||
|
jsbox = initJSBox();
|
||||||
this.localFold = this.fold;
|
this.localFold = this.fold;
|
||||||
if (this.code) {
|
if (this.code) {
|
||||||
this.localCode = this.code;
|
this.localCode = this.code;
|
||||||
|
|
|
||||||
|
|
@ -1,25 +0,0 @@
|
||||||
// catButton 的type属性 示例
|
|
||||||
<template>
|
|
||||||
<!-- 注意这里代码必须再包裹一层div，否则会解析报错 -->
|
|
||||||
<div>
|
|
||||||
<cat-button text='default'></cat-button>
|
|
||||||
<cat-button text='primary'
|
|
||||||
type='primary'></cat-button>
|
|
||||||
<cat-button text='success'
|
|
||||||
type='success'></cat-button>
|
|
||||||
<cat-button text='info'
|
|
||||||
type='info'></cat-button>
|
|
||||||
<cat-button text='warning'
|
|
||||||
type='warning'></cat-button>
|
|
||||||
<cat-button text='danger'
|
|
||||||
type='danger'></cat-button>
|
|
||||||
<cat-button text='text'
|
|
||||||
type='text'></cat-button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -1,5 +1,8 @@
|
||||||
<template>
|
<template>
|
||||||
<div class='home-wrapper'>
|
<div class='home-wrapper'>
|
||||||
|
<div>
|
||||||
|
<img class='logo' src='../../images/logo.png' alt='' srcset=''>
|
||||||
|
</div>
|
||||||
<div class='title'>cnchar</div>
|
<div class='title'>cnchar</div>
|
||||||
<div class='desc'>功能全面、多端支持的汉字拼音笔画js库</div>
|
<div class='desc'>功能全面、多端支持的汉字拼音笔画js库</div>
|
||||||
<div class='test'>
|
<div class='test'>
|
||||||
|
|
@ -90,8 +93,17 @@
|
||||||
return v;
|
return v;
|
||||||
},
|
},
|
||||||
start () {
|
start () {
|
||||||
window.location.href = '/cnchar/assets/v2/guide/';
|
window.location.href = '/cnchar/guide/';
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
let timer = setInterval(() => {
|
||||||
|
let comment = document.getElementById('vcomments');
|
||||||
|
if (comment) {
|
||||||
|
comment.className += ' home-comment';
|
||||||
|
clearInterval(timer);
|
||||||
|
}
|
||||||
|
}, 500);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -99,6 +111,10 @@
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
.home-wrapper{
|
.home-wrapper{
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
img.logo{
|
||||||
|
width: 100%;
|
||||||
|
max-width: 240px;
|
||||||
|
}
|
||||||
.title{
|
.title{
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-family: Microsoft Yahei;
|
font-family: Microsoft Yahei;
|
||||||
|
|
@ -112,7 +128,7 @@
|
||||||
margin: 1.4rem 0;
|
margin: 1.4rem 0;
|
||||||
}
|
}
|
||||||
.test-input{
|
.test-input{
|
||||||
max-width:500px;
|
max-width:800px;
|
||||||
font-size: 1.1rem;
|
font-size: 1.1rem;
|
||||||
.el-input__inner{
|
.el-input__inner{
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
@ -131,7 +147,7 @@
|
||||||
.feature-w{
|
.feature-w{
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
max-width: 800px;
|
max-width: 1000px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
.f-i{
|
.f-i{
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -146,20 +162,24 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.f-des{
|
.f-des{
|
||||||
line-height: 1.4rem;
|
line-height: 1.6rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.copy-right{
|
.copy-right{
|
||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
color: #aaa;
|
color: #aaa;
|
||||||
font-size: .8rem;
|
font-size: 0.9rem;
|
||||||
}
|
}
|
||||||
.start-w{
|
.start-w{
|
||||||
max-width: 800px;
|
max-width: 1000px;
|
||||||
padding: 1.5rem 0;
|
padding: 1.5rem 0;
|
||||||
border-top: 1px solid #eee;
|
border-top: 1px solid #eee;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
.el-button{
|
||||||
|
font-size: 1rem;
|
||||||
|
padding: 0.8rem 1.2rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,85 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class='frame-mask' v-show='visible'>
|
|
||||||
<div class='header'>
|
|
||||||
Powered by <a class='link' target='view_window' href='https://github.com/theajack/jsbox'><i class='ei-cube-alt'></i> JSbox</a>
|
|
||||||
<i @click='close' class='ei-times'></i>
|
|
||||||
</div>
|
|
||||||
<div class='loading-w'><i class='ei-spinner-indicator ei-spin'></i></div>
|
|
||||||
<iframe class='frame-c' ref='container' src='' frameborder='0'></iframe>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
const jsbox = 'https://theajack.gitee.io/jsbox?theme=dark&remind=false';
|
|
||||||
const config = 'http://localhost:8081/config.js';
|
|
||||||
export default {
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
visible: false,
|
|
||||||
id: '',
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
open (id = 'spell') {
|
|
||||||
if (this.id !== id) {
|
|
||||||
this.id = id;
|
|
||||||
this.$refs.container.src = `${jsbox}&config=${encodeURIComponent(config)}&id=${id}`;
|
|
||||||
}
|
|
||||||
this.visible = true;
|
|
||||||
document.body.style.overflow = 'hidden';
|
|
||||||
},
|
|
||||||
close () {
|
|
||||||
this.visible = false;
|
|
||||||
document.body.style.overflow = 'auto';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.frame-mask{
|
|
||||||
position: fixed;
|
|
||||||
z-index: 1000;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: #000d;
|
|
||||||
.header{
|
|
||||||
height: 5%;
|
|
||||||
vertical-align: middle;
|
|
||||||
font-size: 1rem;
|
|
||||||
color: #eee;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0 5px;
|
|
||||||
background-color: #1e1e1e;
|
|
||||||
.link{
|
|
||||||
margin-left: 5px;
|
|
||||||
}
|
|
||||||
.ei-times{
|
|
||||||
cursor: pointer;
|
|
||||||
position: absolute;
|
|
||||||
right: 10px;
|
|
||||||
font-size: 1.5rem;
|
|
||||||
&:hover{
|
|
||||||
color: #e88;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.frame-c{
|
|
||||||
width: 100%;
|
|
||||||
height: 95%;
|
|
||||||
box-shadow: 0 0 15px #000;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.loading-w{
|
|
||||||
position: absolute;
|
|
||||||
font-size: 3rem;
|
|
||||||
color: #aaa;
|
|
||||||
top: 50%;
|
|
||||||
transform: translate(-50%,-50%);
|
|
||||||
left: 50%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,21 +1,11 @@
|
||||||
// 很多时候，我们引入自己的组件库，路径是不对的，
|
|
||||||
// 这时就需要引入path，并在后面的chainWebpack进行配置
|
|
||||||
// const path = require('path')
|
|
||||||
// function resolve (dir) {
|
|
||||||
// return path.join(__dirname, '../../', dir)
|
|
||||||
// }
|
|
||||||
|
|
||||||
// -------------------！！！重要！！！！-----------------
|
|
||||||
// 为了更好的理解，以下所有配置，注释，须配合查看页面实际效果！
|
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
title: 'cnchar', // 标题
|
title: 'cnchar', // 标题
|
||||||
description: '功能全面、多端支持的汉字拼音笔画js库', // 描述
|
description: '功能全面、多端支持的汉字拼音笔画js库', // 描述
|
||||||
dest: './assets/v2', // 基本url
|
dest: './docs/assets/v2', // 基本url
|
||||||
base: '/cnchar/assets/v2/', // 基本url
|
base: '/cnchar/',
|
||||||
// 注入到当前页面的 HTML <head> 中的标签
|
// 注入到当前页面的 HTML <head> 中的标签
|
||||||
head: [
|
head: [
|
||||||
['link', {rel: 'icon', href: '/favicon.png'}], // 增加一个自定义的 favicon
|
['link', {rel: 'icon', href: 'https://cdn.jsdelivr.net/gh/theajack/cnchar/docs/assets/v1/images/i.ico'}], // 增加一个自定义的 favicon
|
||||||
],
|
],
|
||||||
// dest: './dist', //打包位置
|
// dest: './dist', //打包位置
|
||||||
port: 6868, // 端口号 谐音流弊流弊
|
port: 6868, // 端口号 谐音流弊流弊
|
||||||
|
|
@ -31,11 +21,11 @@ module.exports = {
|
||||||
text: '文档',
|
text: '文档',
|
||||||
// 这里是下拉列表展现形式。
|
// 这里是下拉列表展现形式。
|
||||||
items: [
|
items: [
|
||||||
{text: 'cnchar', link: '/doc/cnchar.html'},
|
{text: 'cnchar', link: '/doc/cnchar'},
|
||||||
{text: 'cnchar-poly', link: '/doc/poly.html'},
|
{text: 'cnchar-poly', link: '/doc/poly'},
|
||||||
{text: 'cnchar-order', link: '/doc/order.html'},
|
{text: 'cnchar-order', link: '/doc/order'},
|
||||||
{text: 'cnchar-trad', link: '/doc/trad.html'},
|
{text: 'cnchar-trad', link: '/doc/trad'},
|
||||||
{text: 'cnchar-draw', link: '/doc/draw.html'},
|
{text: 'cnchar-draw', link: '/doc/draw'},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
@ -83,74 +73,6 @@ module.exports = {
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
// '/doc/poly/': [
|
|
||||||
// {
|
|
||||||
// title: 'cnchar-order [多音词]',
|
|
||||||
// path: '',
|
|
||||||
// collapsable: false,
|
|
||||||
// children: [
|
|
||||||
// {
|
|
||||||
// title: 'Button 按钮',
|
|
||||||
// path: 'catButton',
|
|
||||||
// },
|
|
||||||
// ],
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// title: '基础组件1',
|
|
||||||
// path: './', // 和上面的基础组件对应，这里基础组件1则可以点击，展示对应的介绍和说明，则此处设置为'./'，它会默认解析当前文件夹下的README.md。具体效果请查看页面进行对比
|
|
||||||
// },
|
|
||||||
// ],
|
|
||||||
// '/doc/order/': [
|
|
||||||
// {
|
|
||||||
// title: 'cnchar-order [笔画笔顺]',
|
|
||||||
// path: '',
|
|
||||||
// collapsable: false,
|
|
||||||
// children: [
|
|
||||||
// {
|
|
||||||
// title: 'Button 按钮',
|
|
||||||
// path: 'catButton',
|
|
||||||
// },
|
|
||||||
// ],
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// title: '基础组件1',
|
|
||||||
// path: './', // 和上面的基础组件对应，这里基础组件1则可以点击，展示对应的介绍和说明，则此处设置为'./'，它会默认解析当前文件夹下的README.md。具体效果请查看页面进行对比
|
|
||||||
// },
|
|
||||||
// ],
|
|
||||||
// '/doc/trad/': [
|
|
||||||
// {
|
|
||||||
// title: 'cnchar-trad [繁体字]',
|
|
||||||
// path: '',
|
|
||||||
// collapsable: false,
|
|
||||||
// children: [
|
|
||||||
// {
|
|
||||||
// title: 'Button 按钮',
|
|
||||||
// path: 'catButton',
|
|
||||||
// },
|
|
||||||
// ],
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// title: '基础组件1',
|
|
||||||
// path: './', // 和上面的基础组件对应，这里基础组件1则可以点击，展示对应的介绍和说明，则此处设置为'./'，它会默认解析当前文件夹下的README.md。具体效果请查看页面进行对比
|
|
||||||
// },
|
|
||||||
// ],
|
|
||||||
// '/doc/draw/': [
|
|
||||||
// {
|
|
||||||
// title: 'cnchar-draw [汉字绘制]',
|
|
||||||
// path: '',
|
|
||||||
// collapsable: false,
|
|
||||||
// children: [
|
|
||||||
// {
|
|
||||||
// title: 'Button 按钮',
|
|
||||||
// path: 'catButton',
|
|
||||||
// },
|
|
||||||
// ],
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// title: '基础组件1',
|
|
||||||
// path: './', // 和上面的基础组件对应，这里基础组件1则可以点击，展示对应的介绍和说明，则此处设置为'./'，它会默认解析当前文件夹下的README.md。具体效果请查看页面进行对比
|
|
||||||
// },
|
|
||||||
// ],
|
|
||||||
'/guide/': [
|
'/guide/': [
|
||||||
{
|
{
|
||||||
title: '使用说明',
|
title: '使用说明',
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,8 @@
|
||||||
// 扩展 VuePress 应用 第三方应用级别配置
|
// 扩展 VuePress 应用 第三方应用级别配置
|
||||||
|
|
||||||
|
import ElementUI from 'element-ui';
|
||||||
|
import 'element-ui/lib/theme-chalk/index.css';
|
||||||
|
|
||||||
// vue代码高亮显示库 VueHighlightJS
|
// vue代码高亮显示库 VueHighlightJS
|
||||||
import VueHighlightJS from 'vue-highlight.js';
|
import VueHighlightJS from 'vue-highlight.js';
|
||||||
|
|
||||||
|
|
@ -13,7 +16,6 @@ import '../../npm/all/cnchar.all.min.js';
|
||||||
import 'easy-icon';
|
import 'easy-icon';
|
||||||
|
|
||||||
// 引入自己的组件库
|
// 引入自己的组件库
|
||||||
import Cat from '../src/index';
|
|
||||||
import '../src/style/element.css';
|
import '../src/style/element.css';
|
||||||
import '../src/style/main.css';
|
import '../src/style/main.css';
|
||||||
import '../../public/config';
|
import '../../public/config';
|
||||||
|
|
@ -38,5 +40,5 @@ export default ({
|
||||||
}) => {
|
}) => {
|
||||||
// ...做一些其他的应用级别的优化
|
// ...做一些其他的应用级别的优化
|
||||||
Vue.use(VueHighlightJS);
|
Vue.use(VueHighlightJS);
|
||||||
Vue.use(Cat);
|
Vue.use(ElementUI);
|
||||||
};
|
};
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
|
|
||||||
---
|
<!-- ---
|
||||||
cnchar--功能全面、多端支持的汉字拼音笔画js库
|
cnchar--功能全面、多端支持的汉字拼音笔画js库
|
||||||
---
|
--- -->
|
||||||
|
|
||||||
<!-- ---
|
<!-- ---
|
||||||
home: true
|
home: true
|
||||||
|
|
|
||||||
|
|
@ -1,32 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Document</title>
|
|
||||||
<link rel="stylesheet" href="https://unpkg.com/vssue/dist/vssue.min.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id='vssue'></div>
|
|
||||||
<script src="https://unpkg.com/vue/dist/vue.runtime.min.js"></script>
|
|
||||||
<script src="https://unpkg.com/vssue/dist/vssue.gitee.min.js"></script>
|
|
||||||
<script>
|
|
||||||
var vue = new Vue({
|
|
||||||
el: '#vssue',
|
|
||||||
render: function(h){
|
|
||||||
h('Vssue',{
|
|
||||||
props: {
|
|
||||||
title: 'Vssue Demo',
|
|
||||||
options:{
|
|
||||||
owner: 'theajack',
|
|
||||||
repo: 'cnchar',
|
|
||||||
clientId: '821ec73b080bf789253229157fa3aa64b442cb85ce7d9d2ae09bade44cfc3a9b',
|
|
||||||
clientSecret: '5fdbff0298ddd0839c806f58b68974ab2c2bc1a3ab045d849790f18b6ee327f0',
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
|
|
@ -0,0 +1 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="12" height="13"><g stroke-width="2" stroke="#aaa" fill="none"><path d="M11.29 11.71l-4-4"/><circle cx="5" cy="5" r="4"/></g></svg>
|
||||||
|
After Width: | Height: | Size: 216 B |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1 @@
|
||||||
|
(window.webpackJsonp=window.webpackJsonp||[]).push([[13],{623:function(t,r,a){"use strict";a.r(r);var n=a(21),s=Object(n.a)({},(function(){var t=this,r=t.$createElement,a=t._self._c||r;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h2",{attrs:{id:"_1-介绍"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#_1-介绍"}},[t._v("#")]),t._v(" 1. 介绍")]),t._v(" "),a("p",[a("code",[t._v("cnchar-poly")]),t._v(" 库是用于支持多音词的库，该库本身并不提供新的api")]),t._v(" "),a("p",[t._v("引入该库之后，"),a("code",[t._v("cnchar.spell()")]),t._v(" 方法才会支持多音词，否则对于多音字会返回默认读音")]),t._v(" "),a("p",[t._v("npm安装")]),t._v(" "),a("div",{staticClass:"language- extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[t._v("npm i cnchar-poly\n")])])]),a("p",[t._v("cdn使用")]),t._v(" "),a("div",[a("highlight-code",{attrs:{lang:"html"}},[t._v('\n<script src="https://cdn.jsdelivr.net/npm/cnchar-poly/cnchar.poly.min.js"><\/script>\n ')])],1),t._v(" "),a("p",[t._v("使用")]),t._v(" "),a("div",[a("highlight-code",{attrs:{lang:"javascript"}},[t._v("\nimport cnchar from 'cnchar';\nimport poly from 'cnchar-poly';\ncnchar.use(poly); // use 在浏览器环境中非必须\n ")])],1),t._v(" "),a("h2",{attrs:{id:"_2-实例"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#_2-实例"}},[t._v("#")]),t._v(" 2. 实例")]),t._v(" "),a("p",[t._v("以下演示几个多音词的例子")]),t._v(" "),a("p",[a("codebox",{attrs:{id:"poly"}})],1),t._v(" "),a("p",[t._v("由于多音词依赖分词与词库，且cnchar是一个静态的js库，所以可能会有诸多不准确的读音")]),t._v(" "),a("p",[t._v("如果遇到不准缺的多音词，欢迎提"),a("a",{attrs:{href:"https://github.com/theajack/cnchar/issues/new",target:"_blank",rel:"noopener noreferrer"}},[t._v("issue或pr"),a("OutboundLink")],1)])])}),[],!1,null,null,null);r.default=s.exports}}]);
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
(window.webpackJsonp=window.webpackJsonp||[]).push([[14],{625:function(r,t,n){"use strict";n.r(t);var a=n(21),c=Object(a.a)({},(function(){var r=this,t=r.$createElement,n=r._self._c||t;return n("ContentSlotsDistributor",{attrs:{"slot-key":r.$parent.slotKey}},[n("h2",{attrs:{id:"_1-介绍"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#_1-介绍"}},[r._v("#")]),r._v(" 1. 介绍")]),r._v(" "),n("p",[n("code",[r._v("cnchar-trad")]),r._v(" 库是用于繁体字，除此之外，该库还提供繁体、简体、火星文之间的相互转换")]),r._v(" "),n("p",[r._v("引入该库之后，cnchar的所有api都支持 "),n("code",[r._v("simple")]),r._v("和"),n("code",[r._v("trad")]),r._v("参数，用于只使用简体或繁体，默认两种字体都使用")]),r._v(" "),n("p",[r._v("npm安装")]),r._v(" "),n("div",{staticClass:"language- extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[r._v("npm i cnchar-trad\n")])])]),n("p",[r._v("cdn使用")]),r._v(" "),n("div",[n("highlight-code",{attrs:{lang:"html"}},[r._v('\n<script src="https://cdn.jsdelivr.net/npm/cnchar-trad/cnchar.trad.min.js"><\/script>\n ')])],1),r._v(" "),n("p",[r._v("使用")]),r._v(" "),n("div",[n("highlight-code",{attrs:{lang:"javascript"}},[r._v("\nimport cnchar from 'cnchar';\nimport trad from 'cnchar-trad';\ncnchar.use(trad); // use 在浏览器环境中非必须\n ")])],1),r._v(" "),n("h2",{attrs:{id:"_2-繁体字支持"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#_2-繁体字支持"}},[r._v("#")]),r._v(" 2. 繁体字支持")]),r._v(" "),n("p",[r._v("以下演示几个繁体字支持的例子")]),r._v(" "),n("p",[n("codebox",{attrs:{id:"trad"}})],1),r._v(" "),n("h2",{attrs:{id:"_3-字体转换-convert"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#_3-字体转换-convert"}},[r._v("#")]),r._v(" 3. 字体转换(convert)")]),r._v(" "),n("p",[r._v("引入 cnchar-trad 库之后，在cnchar上会生成一个 "),n("code",[r._v("convert")]),r._v(" 对象，功能是支持字体转换，另外在string.prototype 上也会附加上对应的方法，用法如下：")]),r._v(" "),n("div",[n("highlight-code",{attrs:{lang:"javascript"}},[r._v("\ncnchar.convert.simpleToTrad(string); // 简体 => 繁体\ncnchar.convert.simpleToSpark(string); // 简体 => 火星文\ncnchar.convert.tradToSimple(string); // 繁体 => 简体\ncnchar.convert.tradToSpark(string); // 繁体 => 火星文\ncnchar.convert.sparkToSimple(string); // 火星文 => 简体\ncnchar.convert.sparkToTrad(string); // 火星文 => 繁体\nstring.convertSimpleToTrad();\nstring.convertSimpleToSpark();\nstring.convertTradToSimple();\nstring.convertTradToSpark();\nstring.convertSparkToSimple();\nstring.convertSparkToTrad();\n ")])],1),r._v(" "),n("p",[r._v("以下是几个实例：")]),r._v(" "),n("p",[n("codebox",{attrs:{id:"convert"}})],1)])}),[],!1,null,null,null);t.default=c.exports}}]);
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1 @@
|
||||||
|
(window.webpackJsonp=window.webpackJsonp||[]).push([[16],{630:function(r,c,a){"use strict";a.r(c);var n=a(21),t=Object(n.a)({},(function(){var r=this,c=r.$createElement,a=r._self._c||c;return a("ContentSlotsDistributor",{attrs:{"slot-key":r.$parent.slotKey}},[a("h2",{attrs:{id:"_1-npm安装"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#_1-npm安装"}},[r._v("#")]),r._v(" 1. npm安装")]),r._v(" "),a("p",[r._v("cnchar包含了一个基本库和四个功能库，用于实现不同的功能，您可以按需安装其中的功能库，但是 "),a("code",[r._v("cnchar")]),r._v(" 这个基础库是必须安装的")]),r._v(" "),a("p",[r._v("安装"),a("a",{attrs:{href:"https://npmjs.com/package/cnchar",target:"_blank",rel:"noopener noreferrer"}},[r._v("主库"),a("OutboundLink")],1),r._v("：")]),r._v(" "),a("div",{staticClass:"language- extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[r._v("npm i cnchar\n")])])]),a("p",[r._v("按需安装功能库：")]),r._v(" "),a("div",{staticClass:"language- extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[r._v("npm i cnchar-poly cnchar-order cnchar-trad cnchar-draw\n")])])]),a("p",[r._v("浏览器环境中功能库可以直接使用：")]),r._v(" "),a("div",[a("highlight-code",{attrs:{lang:"javascript"}},[r._v("\n import cnchar from 'cnchar';\n // 以下功能库请按需使用\n import 'cnchar-poly';\n import 'cnchar-order';\n import 'cnchar-trad';\n import 'cnchar-draw';\n ")])],1),r._v(" "),a("p",[r._v("非浏览器环境中功能库需要使用use方法加载，且不支持 "),a("code",[r._v("cnchar-draw")]),r._v(" 库：")]),r._v(" "),a("div",[a("highlight-code",{attrs:{lang:"javascript"}},[r._v("\n import cnchar from 'cnchar';\n // 以下功能库请按需使用\n import poly from 'cnchar-poly';\n import order from 'cnchar-order';\n import trad from 'cnchar-trad';\n cnchar.use(poly, order, trad);\n ")])],1),r._v(" "),a("p",[r._v("commonjs 模块")]),r._v(" "),a("div",[a("highlight-code",{attrs:{lang:"javascript"}},[r._v("\n var cnchar = require('cnchar');\n // 以下功能库请按需使用\n var poly = require('cnchar-poly');\n var order = require('cnchar-order');\n var trad = require('cnchar-trad');\n cnchar.use(poly, order, trad);\n ")])],1),r._v(" "),a("h2",{attrs:{id:"_2-cdn引用"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#_2-cdn引用"}},[r._v("#")]),r._v(" 2. CDN引用")]),r._v(" "),a("p",[r._v("使用 script 标签使用：")]),r._v(" "),a("div",[a("highlight-code",{attrs:{lang:"html"}},[r._v('\n <script src="https://cdn.jsdelivr.net/npm/cnchar/cnchar.min.js"><\/script>\n \x3c!--以下功能库请按需使用--\x3e\n <script src="https://cdn.jsdelivr.net/npm/cnchar-poly/cnchar.poly.min.js"><\/script>\n <script src="https://cdn.jsdelivr.net/npm/cnchar-order/cnchar.order.min.js"><\/script>\n <script src="https://cdn.jsdelivr.net/npm/cnchar-trad/cnchar.trad.min.js"><\/script>\n <script src="https://cdn.jsdelivr.net/npm/cnchar-draw/cnchar.draw.min.js"><\/script>\n ')])],1),r._v(" "),a("h2",{attrs:{id:"_3-cnchar-all"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#_3-cnchar-all"}},[r._v("#")]),r._v(" 3. cnchar-all")]),r._v(" "),a("p",[r._v("如果您需要使用cnchar及其插件的所有功能，可以通过安装"),a("code",[r._v("cnchar-all")]),r._v("来使用完整功能，这个库引用了上面的五个库")]),r._v(" "),a("div",{staticClass:"language- extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[r._v("npm i cnchar-all\n")])])]),a("p",[r._v("commonjs 模块")]),r._v(" "),a("div",[a("highlight-code",{attrs:{lang:"javascript"}},[r._v("\n import cnchar from 'cnchar-all';\n ")])],1),r._v(" "),a("p",[r._v("cdn方式")]),r._v(" "),a("div",[a("highlight-code",{attrs:{lang:"html"}},[r._v('\n <script src="https://cdn.jsdelivr.net/npm/cnchar-all/cnchar.all.min.js"><\/script>\n ')])],1),r._v(" "),a("h2",{attrs:{id:"_4-简单使用"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#_4-简单使用"}},[r._v("#")]),r._v(" 4. 简单使用")]),r._v(" "),a("p",[r._v("cnchar 具有两个最核心的方法"),a("code",[r._v("spell")]),r._v(" 和 "),a("code",[r._v("stroke")]),r._v("，分别用于获取汉字的拼音和笔画数：")]),r._v(" "),a("p",[a("codebox",{attrs:{id:"easy-use",title:"spell/stroke"}})],1),r._v(" "),a("p",[r._v("这只是一个最简单的使用，这两个方法具有很多参数可选，具体请参阅 "),a("a",{attrs:{href:""}},[r._v("cnchar")]),r._v(" 部分")])])}),[],!1,null,null,null);c.default=t.exports}}]);
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1 @@
|
||||||
|
(window.webpackJsonp=window.webpackJsonp||[]).push([[19],{511:function(n,w,o){}}]);
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1 @@
|
||||||
|
(window.webpackJsonp=window.webpackJsonp||[]).push([[20],{613:function(n,w,o){}}]);
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1 @@
|
||||||
|
(window.webpackJsonp=window.webpackJsonp||[]).push([[4],{534:function(t,s,a){},605:function(t,s,a){t.exports=a.p+"assets/img/logo.6cd28633.png"},606:function(t,s,a){"use strict";var i=a(534);a.n(i).a},617:function(t,s,a){"use strict";a.r(s);var i=[function(){var t=this.$createElement,s=this._self._c||t;return s("div",[s("img",{staticClass:"logo",attrs:{src:a(605),alt:"",srcset:""}})])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"feature-w"},[a("div",{staticClass:"f-i"},[a("div",{staticClass:"f-t"},[a("i",{staticClass:"ei-rocket"}),t._v("功能全面")]),t._v(" "),a("div",{staticClass:"f-des"},[t._v("拼音、笔画数")]),t._v(" "),a("div",{staticClass:"f-des"},[t._v("多音字词")]),t._v(" "),a("div",{staticClass:"f-des"},[t._v("繁体字、火星文")]),t._v(" "),a("div",{staticClass:"f-des"},[t._v("汉字笔顺")]),t._v(" "),a("div",{staticClass:"f-des"},[t._v("多种模式绘制汉字")]),t._v(" "),a("div",{staticClass:"f-des"},[t._v("汉字推算")]),t._v(" "),a("div",{staticClass:"f-des"},[t._v("...")])]),t._v(" "),a("div",{staticClass:"f-i"},[a("div",{staticClass:"f-t"},[a("i",{staticClass:"ei-tablet"}),t._v("多端支持")]),t._v(" "),a("div",{staticClass:"f-des"},[t._v("浏览器")]),t._v(" "),a("div",{staticClass:"f-des"},[t._v("nodejs")]),t._v(" "),a("div",{staticClass:"f-des"},[t._v("小程序/小游戏")]),t._v(" "),a("div",{staticClass:"f-des"},[t._v("ReactNative/Weex/Uniapp/Electron")]),t._v(" "),a("div",{staticClass:"f-des"},[t._v("webpack")]),t._v(" "),a("div",{staticClass:"f-des"},[t._v("typescript支持")]),t._v(" "),a("div",{staticClass:"f-des"},[t._v("...")])]),t._v(" "),a("div",{staticClass:"f-i"},[a("div",{staticClass:"f-t"},[a("i",{staticClass:"ei-cubes"}),t._v("按需取用")]),t._v(" "),a("div",{staticClass:"f-des"},[t._v("功能分包")]),t._v(" "),a("div",{staticClass:"f-des"},[t._v("体积小巧")]),t._v(" "),a("div",{staticClass:"f-des"},[t._v("简单易用")]),t._v(" "),a("div",{staticClass:"f-des"},[t._v("npm")]),t._v(" "),a("div",{staticClass:"f-des"},[t._v("cdn")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("div",{staticClass:"copy-right"},[this._v("MIT Licensed | Copyright © 2020 present "),s("a",{attrs:{href:"https://www.github.com/theajack",target:"view_window"}},[this._v("theajack")])])}],e=(a(198),a(39),a(57),a(94),{data:function(){return{text:"",spell:"",stroke:"",trad:"",spark:"",order:""}},methods:{input:function(){if(this.text){this.spell=this.text.spell("array","tone").join(" "),this.stroke=this.text.stroke(),this.trad=this.text.convertSimpleToTrad("trad"),this.spark=this.text.convertSimpleToSpark("spark"),this.order=JSON.stringify(this.text.stroke("order","shape")).replace(/"/g,"").replace(/null/g,"无");var t=this.pickCnChar(this.text),s=document.getElementById("draw-area");s.innerHTML="",""!==t&&window.cnchar.draw(t,{el:s})}},isCnChar:function(t){var s=t.charCodeAt(0);return s>=19968&&s<=40869},pickCnChar:function(t){for(var s="",a=0;a<t.length;a++)this.isCnChar(t[a])&&(s+=t[a]);return s},start:function(){window.location.href="/cnchar/guide/"}},mounted:function(){var t=setInterval((function(){var s=document.getElementById("vcomments");s&&(s.className+=" home-comment",clearInterval(t))}),500)}}),v=(a(606),a(21)),r=Object(v.a)(e,(function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"home-wrapper"},[t._m(0),t._v(" "),a("div",{staticClass:"title"},[t._v("cnchar")]),t._v(" "),a("div",{staticClass:"desc"},[t._v("功能全面、多端支持的汉字拼音笔画js库")]),t._v(" "),a("div",{staticClass:"test"},[a("el-input",{staticClass:"test-input",attrs:{type:"text",placeholder:"输入一些汉字试试"},on:{input:t.input},model:{value:t.text,callback:function(s){t.text=s},expression:"text"}}),t._v(" "),a("div",{directives:[{name:"show",rawName:"v-show",value:""!==t.text,expression:'text!==""'}],staticClass:"show-area"},[a("div",[t._v(t._s(t.spell)+" "),a("span",{staticClass:"split"},[t._v("|")]),t._v(" 共"+t._s(t.stroke)+"笔")]),t._v(" "),a("div",[t._v("繁体: "+t._s(t.trad)+" "),a("span",{staticClass:"split"},[t._v("|")]),t._v(" 火星文: "+t._s(t.spark))]),t._v(" "),a("div",[t._v("笔顺: "+t._s(t.order))]),t._v(" "),a("div",{attrs:{id:"draw-area"}})])],1),t._v(" "),a("div",{staticClass:"start-w"},[a("el-button",{attrs:{type:"primary"},on:{click:t.start}},[t._v("开始 "),a("i",{staticClass:"ei-location-arrow"})])],1),t._v(" "),t._m(1),t._v(" "),t._m(2)])}),i,!1,null,null,null);s.default=r.exports}}]);
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
(window.webpackJsonp=window.webpackJsonp||[]).push([[5],{536:function(t,s,i){},610:function(t,s,i){"use strict";var n=i(536);i.n(n).a},619:function(t,s,i){"use strict";i.r(s);var n={methods:{starGithub:function(){window.open("https://github.com/1011cat/shotCat_doc")}}},a=(i(610),i(21)),c=Object(a.a)(n,(function(){var t=this.$createElement;return(this._self._c||t)("div",{staticClass:"bg",on:{click:this.starGithub}},[this._m(0)])}),[function(){var t=this.$createElement,s=this._self._c||t;return s("div",{staticClass:"word glitch"},[s("div",{staticClass:"flash is-off"},[s("span",{staticClass:"text"},[this._v("给个star!")])])])}],!1,null,null,null);s.default=c.exports}}]);
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
(window.webpackJsonp=window.webpackJsonp||[]).push([[6],{537:function(t,e,n){},611:function(t,e,n){"use strict";var i=n(537);n.n(i).a},624:function(t,e,n){"use strict";n.r(e);var i={functional:!0,props:{type:{type:String,default:"tip"},text:String,vertical:{type:String,default:"top"}},render:function(t,e){var n=e.props,i=e.slots;return t("span",{class:["badge",n.type],style:{verticalAlign:n.vertical}},n.text||i().default)}},r=(n(611),n(21)),a=Object(r.a)(i,void 0,void 0,!1,null,"15b7b770",null);e.default=a.exports}}]);
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
(window.webpackJsonp=window.webpackJsonp||[]).push([[7],{618:function(t,e,s){"use strict";s.r(e);var n=["There's nothing here.","How did we get here?","That's a Four-Oh-Four.","Looks like we've got some broken links."],o={methods:{getMsg:function(){return n[Math.floor(Math.random()*n.length)]}}},i=s(21),h=Object(i.a)(o,(function(){var t=this.$createElement,e=this._self._c||t;return e("div",{staticClass:"theme-container"},[e("div",{staticClass:"theme-default-content"},[e("h1",[this._v("404")]),this._v(" "),e("blockquote",[this._v(this._s(this.getMsg()))]),this._v(" "),e("RouterLink",{attrs:{to:"/"}},[this._v("\n Take me home.\n ")])],1)])}),[],!1,null,null,null);e.default=h.exports}}]);
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
(window.webpackJsonp=window.webpackJsonp||[]).push([[8],{627:function(t,e,n){"use strict";n.r(e);var s=n(21),o=Object(s.a)({},(function(){var t=this.$createElement,e=this._self._c||t;return e("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}},[e("p",[e("home")],1)])}),[],!1,null,null,null);e.default=o.exports}}]);
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
(window.webpackJsonp=window.webpackJsonp||[]).push([[9],{621:function(t,s,e){"use strict";e.r(s);var n=e(21),r=Object(n.a)({},(function(){var t=this.$createElement,s=this._self._c||t;return s("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}},[s("h1",{attrs:{id:"组件说明"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#组件说明"}},[this._v("#")]),this._v(" 组件说明")])])}),[],!1,null,null,null);s.default=r.exports}}]);
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,94 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en-US">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||||
|
<title>1. 介绍 | cnchar</title>
|
||||||
|
<meta name="description" content="功能全面、多端支持的汉字拼音笔画js库">
|
||||||
|
<meta name="generator" content="VuePress 1.4.0">
|
||||||
|
<link rel="icon" href="https://cdn.jsdelivr.net/gh/theajack/cnchar/docs/assets/v1/images/i.ico">
|
||||||
|
|
||||||
|
<link rel="preload" href="/cnchar/assets/css/0.styles.0b7d8c5e.css" as="style"><link rel="preload" href="/cnchar/assets/js/app.6c180d28.js" as="script"><link rel="preload" href="/cnchar/assets/js/2.338d50e2.js" as="script"><link rel="preload" href="/cnchar/assets/js/10.6983a4ff.js" as="script"><link rel="preload" href="/cnchar/assets/js/3.2c7a4c6e.js" as="script"><link rel="prefetch" href="/cnchar/assets/js/11.94c125ca.js"><link rel="prefetch" href="/cnchar/assets/js/12.9efd22de.js"><link rel="prefetch" href="/cnchar/assets/js/13.1d748f12.js"><link rel="prefetch" href="/cnchar/assets/js/14.92555999.js"><link rel="prefetch" href="/cnchar/assets/js/15.5320422e.js"><link rel="prefetch" href="/cnchar/assets/js/16.c77f70e0.js"><link rel="prefetch" href="/cnchar/assets/js/17.01fbc09e.js"><link rel="prefetch" href="/cnchar/assets/js/18.b6c135fb.js"><link rel="prefetch" href="/cnchar/assets/js/19.421f793f.js"><link rel="prefetch" href="/cnchar/assets/js/20.4c918771.js"><link rel="prefetch" href="/cnchar/assets/js/21.8c24635f.js"><link rel="prefetch" href="/cnchar/assets/js/4.803cde81.js"><link rel="prefetch" href="/cnchar/assets/js/5.af5c9155.js"><link rel="prefetch" href="/cnchar/assets/js/6.37ec8c51.js"><link rel="prefetch" href="/cnchar/assets/js/7.576e924c.js"><link rel="prefetch" href="/cnchar/assets/js/8.716a2d5f.js"><link rel="prefetch" href="/cnchar/assets/js/9.5b3a4467.js">
|
||||||
|
<link rel="stylesheet" href="/cnchar/assets/css/0.styles.0b7d8c5e.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/cnchar/" class="home-link router-link-active"><!----> <span class="site-name">cnchar</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/cnchar/" class="nav-link">
|
||||||
|
主页
|
||||||
|
</a></div><div class="nav-item"><a href="/cnchar/guide/" class="nav-link">
|
||||||
|
使用说明
|
||||||
|
</a></div><div class="nav-item"><a href="https://www.github.com/theajack/cnchar" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||||
|
GitHub
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="文档" class="dropdown-title"><span class="title">文档</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/cnchar/doc/cnchar.html" class="nav-link router-link-exact-active router-link-active">
|
||||||
|
cnchar
|
||||||
|
</a></li><li class="dropdown-item"><!----> <a href="/cnchar/doc/poly.html" class="nav-link">
|
||||||
|
cnchar-poly
|
||||||
|
</a></li><li class="dropdown-item"><!----> <a href="/cnchar/doc/order.html" class="nav-link">
|
||||||
|
cnchar-order
|
||||||
|
</a></li><li class="dropdown-item"><!----> <a href="/cnchar/doc/trad.html" class="nav-link">
|
||||||
|
cnchar-trad
|
||||||
|
</a></li><li class="dropdown-item"><!----> <a href="/cnchar/doc/draw.html" class="nav-link">
|
||||||
|
cnchar-draw
|
||||||
|
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="关于作者" class="dropdown-title"><span class="title">关于作者</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://www.github.com/theajack" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||||
|
GitHub地址
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="http://www.gitee.com/theajack" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||||
|
Gitee地址
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="https://blog.csdn.net/yanxiaomu" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||||
|
CSDN账号
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/cnchar/" class="nav-link">
|
||||||
|
主页
|
||||||
|
</a></div><div class="nav-item"><a href="/cnchar/guide/" class="nav-link">
|
||||||
|
使用说明
|
||||||
|
</a></div><div class="nav-item"><a href="https://www.github.com/theajack/cnchar" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||||
|
GitHub
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="文档" class="dropdown-title"><span class="title">文档</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/cnchar/doc/cnchar.html" class="nav-link router-link-exact-active router-link-active">
|
||||||
|
cnchar
|
||||||
|
</a></li><li class="dropdown-item"><!----> <a href="/cnchar/doc/poly.html" class="nav-link">
|
||||||
|
cnchar-poly
|
||||||
|
</a></li><li class="dropdown-item"><!----> <a href="/cnchar/doc/order.html" class="nav-link">
|
||||||
|
cnchar-order
|
||||||
|
</a></li><li class="dropdown-item"><!----> <a href="/cnchar/doc/trad.html" class="nav-link">
|
||||||
|
cnchar-trad
|
||||||
|
</a></li><li class="dropdown-item"><!----> <a href="/cnchar/doc/draw.html" class="nav-link">
|
||||||
|
cnchar-draw
|
||||||
|
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="关于作者" class="dropdown-title"><span class="title">关于作者</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://www.github.com/theajack" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||||
|
GitHub地址
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="http://www.gitee.com/theajack" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||||
|
Gitee地址
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="https://blog.csdn.net/yanxiaomu" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||||
|
CSDN账号
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></div></div> <!----></nav> <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>cnchar文档</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/cnchar/doc/cnchar.html" class="active sidebar-link">cnchar</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/cnchar/doc/cnchar.html#_1-介绍" class="sidebar-link">1. 介绍</a></li><li class="sidebar-sub-header"><a href="/cnchar/doc/cnchar.html#_2-spell-方法" class="sidebar-link">2. spell 方法</a></li><li class="sidebar-sub-header"><a href="/cnchar/doc/cnchar.html#_3-stroke-方法" class="sidebar-link">3. stroke 方法</a></li><li class="sidebar-sub-header"><a href="/cnchar/doc/cnchar.html#_4-通过拼音查询原汉字" class="sidebar-link">4. 通过拼音查询原汉字</a></li><li class="sidebar-sub-header"><a href="/cnchar/doc/cnchar.html#_5-通过笔画数查询原汉字" class="sidebar-link">5. 通过笔画数查询原汉字</a></li><li class="sidebar-sub-header"><a href="/cnchar/doc/cnchar.html#_6-查询拼音详细信息" class="sidebar-link">6. 查询拼音详细信息</a></li><li class="sidebar-sub-header"><a href="/cnchar/doc/cnchar.html#_7-其他api" class="sidebar-link">7. 其他api</a></li></ul></li><li><a href="/cnchar/doc/poly.html" class="sidebar-link">cnchar-poly</a></li><li><a href="/cnchar/doc/order.html" class="sidebar-link">cnchar-order</a></li><li><a href="/cnchar/doc/trad.html" class="sidebar-link">cnchar-trad</a></li><li><a href="/cnchar/doc/draw.html" class="sidebar-link">cnchar-draw</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h2 id="_1-介绍"><a href="#_1-介绍" class="header-anchor">#</a> 1. 介绍</h2> <p>cnchar 库是基本库，主要包含汉字 <code>拼音</code> 和 <code>笔画数</code> 的获取</p> <p>除此之外，还支持 <code>通过拼音查询原汉字</code>, <code>通过笔画数查询原汉字</code>, <code>查询拼音详细信息</code> 等功能</p> <p>ts类型声明：<a href="https://github.com/theajack/cnchar/blob/master/src/main/index.d.ts" target="_blank" rel="noopener noreferrer">cnchar.d.ts<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p> <h2 id="_2-spell-方法"><a href="#_2-spell-方法" class="header-anchor">#</a> 2. spell 方法</h2> <p>spell 方法用户获取汉字拼音，支持 数组分割、首字母，大小写、候选多音字、音调、繁简体功能</p> <h3 id="_2-1-api使用"><a href="#_2-1-api使用" class="header-anchor">#</a> 2.1. api使用</h3> <p>api调用方式如下，所有 arg 参数都是可选的</p> <div><pre><code class="hljs javascript">cnchar.spell(string,arg1,arg2,...);
|
||||||
|
string.spell(arg1,arg2,...); <span class="hljs-comment">// string prototype 调用</span></code></pre></div> <p>以下是几个简单的例子：</p> <p><div class="code-box" data-v-54d15265><div data-v-54d15265><span class="code-title" data-v-54d15265>spell</span> <span class="code-desc" data-v-54d15265></span> <i title="在线运行" class="ei-play code-btn" data-v-54d15265></i> <i title="复制代码" class="ei-copy code-btn" data-v-54d15265></i></div> <pre data-v-54d15265><code class="hljs"></code></pre> <div style="display:none;" data-v-54d15265><div class="output-title" data-v-54d15265>运行结果</div> <div class="output-area" data-v-54d15265><div class="show-toggle" data-v-54d15265><i class="ei-angle-up" data-v-54d15265></i> <span class="show-text" data-v-54d15265>隐藏结果</span></div> <div style="display:;" data-v-54d15265></div></div></div> <div class="powered-by" data-v-54d15265>
|
||||||
|
Powered by <a target="view_window" href="https://github.com/theajack/jsbox" class="jsbox-link" data-v-54d15265><i class="ei-cube-alt" data-v-54d15265></i> JSBox</a></div></div></p> <h3 id="_2-2-参数说明"><a href="#_2-2-参数说明" class="header-anchor">#</a> 2.2. 参数说明</h3> <p>arg 参数信息如下：</p> <table><thead><tr><th style="text-align:center;">参数</th> <th style="text-align:center;">作用</th> <th style="text-align:center;">是否默认</th> <th style="text-align:center;">依赖库</th> <th style="text-align:center;">备注</th></tr></thead> <tbody><tr><td style="text-align:center;">array</td> <td style="text-align:center;">返回数组</td> <td style="text-align:center;">否</td> <td style="text-align:center;">--</td> <td style="text-align:center;">--</td></tr> <tr><td style="text-align:center;">first</td> <td style="text-align:center;">返回拼音首字母</td> <td style="text-align:center;">否</td> <td style="text-align:center;">--</td> <td style="text-align:center;">--</td></tr> <tr><td style="text-align:center;">up</td> <td style="text-align:center;">将结果全部大写</td> <td style="text-align:center;">否</td> <td style="text-align:center;">--</td> <td style="text-align:center;">--</td></tr> <tr><td style="text-align:center;">low</td> <td style="text-align:center;">将结果全部小写</td> <td style="text-align:center;">否</td> <td style="text-align:center;">--</td> <td style="text-align:center;">会被 up 参数覆盖</td></tr> <tr><td style="text-align:center;">poly</td> <td style="text-align:center;">使用候选多音字</td> <td style="text-align:center;">否</td> <td style="text-align:center;">--</td> <td style="text-align:center;">--</td></tr> <tr><td style="text-align:center;">tone</td> <td style="text-align:center;">启用音调</td> <td style="text-align:center;">否</td> <td style="text-align:center;">--</td> <td style="text-align:center;">--</td></tr> <tr><td style="text-align:center;">simple</td> <td style="text-align:center;">是否禁用繁体字的拼音功能</td> <td style="text-align:center;">否</td> <td style="text-align:center;">cnchar-trad</td> <td style="text-align:center;">使用 cnchar-trad 之后，默认对繁体字拼音进行转换，该参数用于禁用繁体字拼音</td></tr></tbody></table> <h2 id="_3-stroke-方法"><a href="#_3-stroke-方法" class="header-anchor">#</a> 3. stroke 方法</h2> <h3 id="_2-1-api使用-2"><a href="#_2-1-api使用-2" class="header-anchor">#</a> 2.1. api使用</h3> <p>api调用方式如下，所有 arg 参数都是可选的</p> <div><pre><code class="hljs javascript">cnchar.stroke(string,arg1,arg2,...);
|
||||||
|
string.stroke(arg1,arg2,...); <span class="hljs-comment">// string prototype 调用</span></code></pre></div> <p>以下是几个简单的例子：</p> <p><div class="code-box" data-v-54d15265><div data-v-54d15265><span class="code-title" data-v-54d15265>stroke</span> <span class="code-desc" data-v-54d15265></span> <i title="在线运行" class="ei-play code-btn" data-v-54d15265></i> <i title="复制代码" class="ei-copy code-btn" data-v-54d15265></i></div> <pre data-v-54d15265><code class="hljs"></code></pre> <div style="display:none;" data-v-54d15265><div class="output-title" data-v-54d15265>运行结果</div> <div class="output-area" data-v-54d15265><div class="show-toggle" data-v-54d15265><i class="ei-angle-up" data-v-54d15265></i> <span class="show-text" data-v-54d15265>隐藏结果</span></div> <div style="display:;" data-v-54d15265></div></div></div> <div class="powered-by" data-v-54d15265>
|
||||||
|
Powered by <a target="view_window" href="https://github.com/theajack/jsbox" class="jsbox-link" data-v-54d15265><i class="ei-cube-alt" data-v-54d15265></i> JSBox</a></div></div></p> <h3 id="_2-2-参数说明-2"><a href="#_2-2-参数说明-2" class="header-anchor">#</a> 2.2. 参数说明</h3> <p>arg 参数信息如下：</p> <table><thead><tr><th style="text-align:center;">参数</th> <th style="text-align:center;">作用</th> <th style="text-align:center;">是否默认</th> <th style="text-align:center;">依赖库</th> <th style="text-align:center;">备注</th></tr></thead> <tbody><tr><td style="text-align:center;">array</td> <td style="text-align:center;">返回数组</td> <td style="text-align:center;">否</td> <td style="text-align:center;">--</td> <td style="text-align:center;">使用 cnchar-order 且启用 order 参数后该参数被忽略</td></tr> <tr><td style="text-align:center;">order</td> <td style="text-align:center;">启用笔画顺序</td> <td style="text-align:center;">否</td> <td style="text-align:center;">cnchar-order</td> <td style="text-align:center;">--</td></tr> <tr><td style="text-align:center;">letter</td> <td style="text-align:center;">使用笔画顺序字母序列</td> <td style="text-align:center;">是</td> <td style="text-align:center;">cnchar-order</td> <td style="text-align:center;">当启用 order 后，该值是默认值</td></tr> <tr><td style="text-align:center;">detail</td> <td style="text-align:center;">使用笔画顺序详情作为返回值，每个汉字对应一个 json</td> <td style="text-align:center;">否</td> <td style="text-align:center;">cnchar-order</td> <td style="text-align:center;">优先级小于 letter</td></tr> <tr><td style="text-align:center;">shape</td> <td style="text-align:center;">使用笔画形状作为返回值</td> <td style="text-align:center;">否</td> <td style="text-align:center;">cnchar-order</td> <td style="text-align:center;">优先级小于 detail</td></tr> <tr><td style="text-align:center;">name</td> <td style="text-align:center;">使用笔画名称作为返回值</td> <td style="text-align:center;">否</td> <td style="text-align:center;">cnchar-order</td> <td style="text-align:center;">优先级小于 shape</td></tr> <tr><td style="text-align:center;">count</td> <td style="text-align:center;">使用笔画数作为返回值</td> <td style="text-align:center;">否</td> <td style="text-align:center;">cnchar-poly</td> <td style="text-align:center;">优先级小于 name</td></tr> <tr><td style="text-align:center;">simple</td> <td style="text-align:center;">是否禁用繁体字的笔画功能</td> <td style="text-align:center;">否</td> <td style="text-align:center;">cnchar-trad</td> <td style="text-align:center;">使用 cnchar-trad 之后，默认对繁体字启用笔画功能，该参数用于禁用繁体字笔画功能</td></tr></tbody></table> <h2 id="_4-通过拼音查询原汉字"><a href="#_4-通过拼音查询原汉字" class="header-anchor">#</a> 4. 通过拼音查询原汉字</h2> <h3 id="_4-1-api使用"><a href="#_4-1-api使用" class="header-anchor">#</a> 4.1 api使用</h3> <p>api调用方式如下，所有 arg 参数都是可选的</p> <div><pre><code class="hljs javascript">cnchar.spellToWord(spell,arg1,arg2,...);</code></pre></div> <p>spell 表示拼音，可以使用音调字母或音调数标方式：</p> <p><strong>例：<code>shàng 等价于 shang4</code></strong></p> <p><strong>ü 可以使用 v 表示，例：<code>lü 等价于 lv</code></strong></p> <p>以下是几个简单的例子：</p> <p><div class="code-box" data-v-54d15265><div data-v-54d15265><span class="code-title" data-v-54d15265>spellToWord</span> <span class="code-desc" data-v-54d15265></span> <i title="在线运行" class="ei-play code-btn" data-v-54d15265></i> <i title="复制代码" class="ei-copy code-btn" data-v-54d15265></i></div> <pre data-v-54d15265><code class="hljs"></code></pre> <div style="display:none;" data-v-54d15265><div class="output-title" data-v-54d15265>运行结果</div> <div class="output-area" data-v-54d15265><div class="show-toggle" data-v-54d15265><i class="ei-angle-up" data-v-54d15265></i> <span class="show-text" data-v-54d15265>隐藏结果</span></div> <div style="display:;" data-v-54d15265></div></div></div> <div class="powered-by" data-v-54d15265>
|
||||||
|
Powered by <a target="view_window" href="https://github.com/theajack/jsbox" class="jsbox-link" data-v-54d15265><i class="ei-cube-alt" data-v-54d15265></i> JSBox</a></div></div></p> <h3 id="_4-2-参数信息"><a href="#_4-2-参数信息" class="header-anchor">#</a> 4.2 参数信息</h3> <p>arg 参数信息如下：</p> <table><thead><tr><th style="text-align:center;">参数</th> <th style="text-align:center;">作用</th> <th style="text-align:center;">是否默认</th> <th style="text-align:center;">依赖库</th> <th style="text-align:center;">备注</th></tr></thead> <tbody><tr><td style="text-align:center;">simple</td> <td style="text-align:center;">仅匹配简体字</td> <td style="text-align:center;">否</td> <td style="text-align:center;">--</td> <td style="text-align:center;">--</td></tr> <tr><td style="text-align:center;">trad</td> <td style="text-align:center;">仅匹配繁体字</td> <td style="text-align:center;">否</td> <td style="text-align:center;">cnchar-trad</td> <td style="text-align:center;">该参数仅在引入了 <code>cnchar-trad</code> 后有效</td></tr> <tr><td style="text-align:center;">poly</td> <td style="text-align:center;">仅匹配多音字</td> <td style="text-align:center;">否</td> <td style="text-align:center;">--</td> <td style="text-align:center;">--</td></tr> <tr><td style="text-align:center;">alltone</td> <td style="text-align:center;">匹配该拼音所有音调的汉字</td> <td style="text-align:center;">否</td> <td style="text-align:center;">--</td> <td style="text-align:center;">没有音调的拼音表示轻声</td></tr> <tr><td style="text-align:center;">array</td> <td style="text-align:center;">返回符合条件的数组，默认返回的是字符串</td> <td style="text-align:center;">否</td> <td style="text-align:center;">--</td> <td style="text-align:center;">--</td></tr></tbody></table> <p>注：<code>simple</code>与<code>trad</code>参数若是都不存在，则当引入<code>cnchar-trad</code>时会同时匹配繁简体，没有引入<code>cnchar-trad</code>时则只匹配简体</p> <h2 id="_5-通过笔画数查询原汉字"><a href="#_5-通过笔画数查询原汉字" class="header-anchor">#</a> 5. 通过笔画数查询原汉字</h2> <h3 id="_5-1-api使用"><a href="#_5-1-api使用" class="header-anchor">#</a> 5.1 api使用</h3> <p>api调用方式如下，count表示笔画数，所有 arg 参数都是可选的</p> <div><pre><code class="hljs javascript">cnchar.strokeToWord(count,arg1,arg2,...);</code></pre></div> <p>以下是几个简单的例子：</p> <p><div class="code-box" data-v-54d15265><div data-v-54d15265><span class="code-title" data-v-54d15265>strokeToWord</span> <span class="code-desc" data-v-54d15265></span> <i title="在线运行" class="ei-play code-btn" data-v-54d15265></i> <i title="复制代码" class="ei-copy code-btn" data-v-54d15265></i></div> <pre data-v-54d15265><code class="hljs"></code></pre> <div style="display:none;" data-v-54d15265><div class="output-title" data-v-54d15265>运行结果</div> <div class="output-area" data-v-54d15265><div class="show-toggle" data-v-54d15265><i class="ei-angle-up" data-v-54d15265></i> <span class="show-text" data-v-54d15265>隐藏结果</span></div> <div style="display:;" data-v-54d15265></div></div></div> <div class="powered-by" data-v-54d15265>
|
||||||
|
Powered by <a target="view_window" href="https://github.com/theajack/jsbox" class="jsbox-link" data-v-54d15265><i class="ei-cube-alt" data-v-54d15265></i> JSBox</a></div></div></p> <h3 id="_5-2-参数信息"><a href="#_5-2-参数信息" class="header-anchor">#</a> 5.2 参数信息</h3> <p>arg 参数信息如下：</p> <table><thead><tr><th style="text-align:center;">参数</th> <th style="text-align:center;">作用</th> <th style="text-align:center;">是否默认</th> <th style="text-align:center;">依赖库</th> <th style="text-align:center;">备注</th></tr></thead> <tbody><tr><td style="text-align:center;">simple</td> <td style="text-align:center;">仅匹配简体字</td> <td style="text-align:center;">否</td> <td style="text-align:center;">--</td> <td style="text-align:center;">--</td></tr> <tr><td style="text-align:center;">trad</td> <td style="text-align:center;">仅匹配繁体字</td> <td style="text-align:center;">否</td> <td style="text-align:center;">cnchar-trad</td> <td style="text-align:center;">该参数仅在引入了 <code>cnchar-trad</code> 后有效</td></tr> <tr><td style="text-align:center;">array</td> <td style="text-align:center;">返回符合条件的数组，默认返回的是字符串</td> <td style="text-align:center;">否</td> <td style="text-align:center;">--</td> <td style="text-align:center;">--</td></tr></tbody></table> <p>注：<code>simple</code>与<code>trad</code>参数若是都不存在，则当引入<code>cnchar-trad</code>时会同时匹配繁简体，没有引入<code>cnchar-trad</code>时则只匹配简体</p> <h2 id="_6-查询拼音详细信息"><a href="#_6-查询拼音详细信息" class="header-anchor">#</a> 6. 查询拼音详细信息</h2> <h3 id="_6-1-api使用"><a href="#_6-1-api使用" class="header-anchor">#</a> 6.1 api使用</h3> <p><code>spellInfo</code> 方法用于查询拼音的详细信息，用法如下：</p> <div><pre><code class="hljs javascript">cnchar.spellInfo(spell);</code></pre></div> <p>该方法返回一个json：</p> <div><pre><code class="hljs json">{
|
||||||
|
<span class="hljs-attr">"spell"</span>: string, <span class="hljs-comment">// 去音调的拼音小写</span>
|
||||||
|
<span class="hljs-attr">"tone"</span>: number, <span class="hljs-comment">// 音调 0-5</span>
|
||||||
|
<span class="hljs-attr">"index"</span>: number, <span class="hljs-comment">// 音调位置</span>
|
||||||
|
<span class="hljs-attr">"initial"</span>: string, <span class="hljs-comment">// 声母</span>
|
||||||
|
<span class="hljs-attr">"final"</span>: string <span class="hljs-comment">// 韵母</span>
|
||||||
|
}</code></pre></div> <p>以下是一个简单的例子：</p> <p><div class="code-box" data-v-54d15265><div data-v-54d15265><span class="code-title" data-v-54d15265>spellInfo</span> <span class="code-desc" data-v-54d15265></span> <i title="在线运行" class="ei-play code-btn" data-v-54d15265></i> <i title="复制代码" class="ei-copy code-btn" data-v-54d15265></i></div> <pre data-v-54d15265><code class="hljs"></code></pre> <div style="display:none;" data-v-54d15265><div class="output-title" data-v-54d15265>运行结果</div> <div class="output-area" data-v-54d15265><div class="show-toggle" data-v-54d15265><i class="ei-angle-up" data-v-54d15265></i> <span class="show-text" data-v-54d15265>隐藏结果</span></div> <div style="display:;" data-v-54d15265></div></div></div> <div class="powered-by" data-v-54d15265>
|
||||||
|
Powered by <a target="view_window" href="https://github.com/theajack/jsbox" class="jsbox-link" data-v-54d15265><i class="ei-cube-alt" data-v-54d15265></i> JSBox</a></div></div></p> <h3 id="_6-2-声母"><a href="#_6-2-声母" class="header-anchor">#</a> 6.2 声母</h3> <p><code>cnchar.spellInfo.initials</code> 方法用于获取所有的声母，用法如下：</p> <p><div class="code-box" data-v-54d15265><div data-v-54d15265><span class="code-title" data-v-54d15265>initials</span> <span class="code-desc" data-v-54d15265></span> <i title="在线运行" class="ei-play code-btn" data-v-54d15265></i> <i title="复制代码" class="ei-copy code-btn" data-v-54d15265></i></div> <pre data-v-54d15265><code class="hljs"></code></pre> <div style="display:none;" data-v-54d15265><div class="output-title" data-v-54d15265>运行结果</div> <div class="output-area" data-v-54d15265><div class="show-toggle" data-v-54d15265><i class="ei-angle-up" data-v-54d15265></i> <span class="show-text" data-v-54d15265>隐藏结果</span></div> <div style="display:;" data-v-54d15265></div></div></div> <div class="powered-by" data-v-54d15265>
|
||||||
|
Powered by <a target="view_window" href="https://github.com/theajack/jsbox" class="jsbox-link" data-v-54d15265><i class="ei-cube-alt" data-v-54d15265></i> JSBox</a></div></div></p> <h3 id="_6-3-音调"><a href="#_6-3-音调" class="header-anchor">#</a> 6.3 音调</h3> <p><code>cnchar.spellInfo.tones</code> 方法用于获取所有的音调，用法如下：</p> <p><div class="code-box" data-v-54d15265><div data-v-54d15265><span class="code-title" data-v-54d15265>tones</span> <span class="code-desc" data-v-54d15265></span> <i title="在线运行" class="ei-play code-btn" data-v-54d15265></i> <i title="复制代码" class="ei-copy code-btn" data-v-54d15265></i></div> <pre data-v-54d15265><code class="hljs"></code></pre> <div style="display:none;" data-v-54d15265><div class="output-title" data-v-54d15265>运行结果</div> <div class="output-area" data-v-54d15265><div class="show-toggle" data-v-54d15265><i class="ei-angle-up" data-v-54d15265></i> <span class="show-text" data-v-54d15265>隐藏结果</span></div> <div style="display:;" data-v-54d15265></div></div></div> <div class="powered-by" data-v-54d15265>
|
||||||
|
Powered by <a target="view_window" href="https://github.com/theajack/jsbox" class="jsbox-link" data-v-54d15265><i class="ei-cube-alt" data-v-54d15265></i> JSBox</a></div></div></p> <p>注：n 的一声使用 * 代替</p> <h2 id="_7-其他api"><a href="#_7-其他api" class="header-anchor">#</a> 7. 其他api</h2> <h3 id="_7-1-use"><a href="#_7-1-use" class="header-anchor">#</a> 7.1 .use()</h3> <p>这个 api 的功能是显式启用 <code>poly</code>、<code>order</code>、<code>trad</code>、<code>draw</code> 四个功能库</p> <div><pre><code class="hljs javascript">cnchar.use(...libs);</code></pre></div> <p>这个启用在非浏览器环境（比如 nodejs 等）中是必须的，使用如下：</p> <div><pre><code class="hljs javascript"><span class="hljs-comment">// 请保证最先引入 cnchar 基础库，其他几个库顺序无所谓</span>
|
||||||
|
<span class="hljs-keyword">var</span> cnchar = <span class="hljs-built_in">require</span>(<span class="hljs-string">'cnchar'</span>);
|
||||||
|
<span class="hljs-keyword">var</span> poly = <span class="hljs-built_in">require</span>(<span class="hljs-string">'cnchar-poly'</span>);
|
||||||
|
<span class="hljs-keyword">var</span> order = <span class="hljs-built_in">require</span>(<span class="hljs-string">'cnchar-order'</span>);
|
||||||
|
<span class="hljs-keyword">var</span> trad = <span class="hljs-built_in">require</span>(<span class="hljs-string">'cnchar-trad'</span>);
|
||||||
|
cnchar.use(poly, order, trad); <span class="hljs-comment">// 参数顺序无关，三个参数可以任意选择</span></code></pre></div> <p>在浏览器环境中则无需调用：</p> <div><pre><code class="hljs javascript"><span class="hljs-comment">// 请保证最先引入 cnchar 基础库，其他几个库顺序无所谓</span>
|
||||||
|
<span class="hljs-keyword">import</span> cnchar <span class="hljs-keyword">from</span> <span class="hljs-string">'cnchar'</span>;
|
||||||
|
<span class="hljs-keyword">import</span> <span class="hljs-string">'cnchar-poly'</span>;
|
||||||
|
<span class="hljs-keyword">import</span> <span class="hljs-string">'cnchar-order'</span>;
|
||||||
|
<span class="hljs-keyword">import</span> <span class="hljs-string">'cnchar-trad'</span>;
|
||||||
|
<span class="hljs-keyword">import</span> <span class="hljs-string">'cnchar-draw'</span>;</code></pre></div> <h3 id="_7-2-type"><a href="#_7-2-type" class="header-anchor">#</a> 7.2 .type</h3> <p>type 对象用户获取当前可用的 <code>spell</code> 、 <code>stroke</code> 、 <code>orderToWord</code> 、<code>spellToWord</code>、<code>strokeToWord</code> 参数类型：</p> <p><div class="code-box" data-v-54d15265><div data-v-54d15265><span class="code-title" data-v-54d15265>type</span> <span class="code-desc" data-v-54d15265></span> <i title="在线运行" class="ei-play code-btn" data-v-54d15265></i> <i title="复制代码" class="ei-copy code-btn" data-v-54d15265></i></div> <pre data-v-54d15265><code class="hljs"></code></pre> <div style="display:none;" data-v-54d15265><div class="output-title" data-v-54d15265>运行结果</div> <div class="output-area" data-v-54d15265><div class="show-toggle" data-v-54d15265><i class="ei-angle-up" data-v-54d15265></i> <span class="show-text" data-v-54d15265>隐藏结果</span></div> <div style="display:;" data-v-54d15265></div></div></div> <div class="powered-by" data-v-54d15265>
|
||||||
|
Powered by <a target="view_window" href="https://github.com/theajack/jsbox" class="jsbox-link" data-v-54d15265><i class="ei-cube-alt" data-v-54d15265></i> JSBox</a></div></div></p> <h3 id="_7-3-check"><a href="#_7-3-check" class="header-anchor">#</a> 7.3 .check</h3> <p>该值是一个 布尔类型，用于控制是否开启参数校验，默认值为 true</p> <p>cnchar带有的参数校验功能能够对 <code>spell</code> 和 <code>stroke</code> 传入的参数进行检查，在控制台显示 <code>无效·</code>，<code>忽略</code>和<code>冗余</code>的参数</p> <div><pre><code class="hljs javascript">cnchar.check = <span class="hljs-literal">false</span>; <span class="hljs-comment">// 关闭参数校验</span></code></pre></div> <h3 id="_7-4-version"><a href="#_7-4-version" class="header-anchor">#</a> 7.4 .version</h3> <p>获取当前版本：</p> <p><div class="code-box" data-v-54d15265><div data-v-54d15265><span class="code-title" data-v-54d15265>version</span> <span class="code-desc" data-v-54d15265></span> <i title="在线运行" class="ei-play code-btn" data-v-54d15265></i> <i title="复制代码" class="ei-copy code-btn" data-v-54d15265></i></div> <pre data-v-54d15265><code class="hljs"></code></pre> <div style="display:none;" data-v-54d15265><div class="output-title" data-v-54d15265>运行结果</div> <div class="output-area" data-v-54d15265><div class="show-toggle" data-v-54d15265><i class="ei-angle-up" data-v-54d15265></i> <span class="show-text" data-v-54d15265>隐藏结果</span></div> <div style="display:;" data-v-54d15265></div></div></div> <div class="powered-by" data-v-54d15265>
|
||||||
|
Powered by <a target="view_window" href="https://github.com/theajack/jsbox" class="jsbox-link" data-v-54d15265><i class="ei-cube-alt" data-v-54d15265></i> JSBox</a></div></div></p> <h3 id="_7-5-plugins"><a href="#_7-5-plugins" class="header-anchor">#</a> 7.5 .plugins</h3> <p>当前使用的功能库列表，最多的情况为 <code>["order", "trad", "poly", "draw"]</code></p> <p><div class="code-box" data-v-54d15265><div data-v-54d15265><span class="code-title" data-v-54d15265>plugins</span> <span class="code-desc" data-v-54d15265></span> <i title="在线运行" class="ei-play code-btn" data-v-54d15265></i> <i title="复制代码" class="ei-copy code-btn" data-v-54d15265></i></div> <pre data-v-54d15265><code class="hljs"></code></pre> <div style="display:none;" data-v-54d15265><div class="output-title" data-v-54d15265>运行结果</div> <div class="output-area" data-v-54d15265><div class="show-toggle" data-v-54d15265><i class="ei-angle-up" data-v-54d15265></i> <span class="show-text" data-v-54d15265>隐藏结果</span></div> <div style="display:;" data-v-54d15265></div></div></div> <div class="powered-by" data-v-54d15265>
|
||||||
|
Powered by <a target="view_window" href="https://github.com/theajack/jsbox" class="jsbox-link" data-v-54d15265><i class="ei-cube-alt" data-v-54d15265></i> JSBox</a></div></div></p></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">最后更新于:</span> <span class="time">4/12/2020, 10:44:57 PM</span></div></footer> <div class="page-nav"><p class="inner"><!----> <span class="next"><a href="/cnchar/doc/poly.html">
|
||||||
|
cnchar-poly
|
||||||
|
</a>
|
||||||
|
→
|
||||||
|
</span></p></div> </main></div><div class="global-ui"><!----><div></div></div></div>
|
||||||
|
<script src="/cnchar/assets/js/app.6c180d28.js" defer></script><script src="/cnchar/assets/js/2.338d50e2.js" defer></script><script src="/cnchar/assets/js/10.6983a4ff.js" defer></script><script src="/cnchar/assets/js/3.2c7a4c6e.js" defer></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,118 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en-US">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||||
|
<title>1. 介绍 | cnchar</title>
|
||||||
|
<meta name="description" content="功能全面、多端支持的汉字拼音笔画js库">
|
||||||
|
<meta name="generator" content="VuePress 1.4.0">
|
||||||
|
<link rel="icon" href="https://cdn.jsdelivr.net/gh/theajack/cnchar/docs/assets/v1/images/i.ico">
|
||||||
|
|
||||||
|
<link rel="preload" href="/cnchar/assets/css/0.styles.0b7d8c5e.css" as="style"><link rel="preload" href="/cnchar/assets/js/app.6c180d28.js" as="script"><link rel="preload" href="/cnchar/assets/js/2.338d50e2.js" as="script"><link rel="preload" href="/cnchar/assets/js/11.94c125ca.js" as="script"><link rel="preload" href="/cnchar/assets/js/3.2c7a4c6e.js" as="script"><link rel="prefetch" href="/cnchar/assets/js/10.6983a4ff.js"><link rel="prefetch" href="/cnchar/assets/js/12.9efd22de.js"><link rel="prefetch" href="/cnchar/assets/js/13.1d748f12.js"><link rel="prefetch" href="/cnchar/assets/js/14.92555999.js"><link rel="prefetch" href="/cnchar/assets/js/15.5320422e.js"><link rel="prefetch" href="/cnchar/assets/js/16.c77f70e0.js"><link rel="prefetch" href="/cnchar/assets/js/17.01fbc09e.js"><link rel="prefetch" href="/cnchar/assets/js/18.b6c135fb.js"><link rel="prefetch" href="/cnchar/assets/js/19.421f793f.js"><link rel="prefetch" href="/cnchar/assets/js/20.4c918771.js"><link rel="prefetch" href="/cnchar/assets/js/21.8c24635f.js"><link rel="prefetch" href="/cnchar/assets/js/4.803cde81.js"><link rel="prefetch" href="/cnchar/assets/js/5.af5c9155.js"><link rel="prefetch" href="/cnchar/assets/js/6.37ec8c51.js"><link rel="prefetch" href="/cnchar/assets/js/7.576e924c.js"><link rel="prefetch" href="/cnchar/assets/js/8.716a2d5f.js"><link rel="prefetch" href="/cnchar/assets/js/9.5b3a4467.js">
|
||||||
|
<link rel="stylesheet" href="/cnchar/assets/css/0.styles.0b7d8c5e.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/cnchar/" class="home-link router-link-active"><!----> <span class="site-name">cnchar</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/cnchar/" class="nav-link">
|
||||||
|
主页
|
||||||
|
</a></div><div class="nav-item"><a href="/cnchar/guide/" class="nav-link">
|
||||||
|
使用说明
|
||||||
|
</a></div><div class="nav-item"><a href="https://www.github.com/theajack/cnchar" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||||
|
GitHub
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="文档" class="dropdown-title"><span class="title">文档</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/cnchar/doc/cnchar.html" class="nav-link">
|
||||||
|
cnchar
|
||||||
|
</a></li><li class="dropdown-item"><!----> <a href="/cnchar/doc/poly.html" class="nav-link">
|
||||||
|
cnchar-poly
|
||||||
|
</a></li><li class="dropdown-item"><!----> <a href="/cnchar/doc/order.html" class="nav-link">
|
||||||
|
cnchar-order
|
||||||
|
</a></li><li class="dropdown-item"><!----> <a href="/cnchar/doc/trad.html" class="nav-link">
|
||||||
|
cnchar-trad
|
||||||
|
</a></li><li class="dropdown-item"><!----> <a href="/cnchar/doc/draw.html" class="nav-link router-link-exact-active router-link-active">
|
||||||
|
cnchar-draw
|
||||||
|
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="关于作者" class="dropdown-title"><span class="title">关于作者</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://www.github.com/theajack" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||||
|
GitHub地址
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="http://www.gitee.com/theajack" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||||
|
Gitee地址
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="https://blog.csdn.net/yanxiaomu" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||||
|
CSDN账号
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/cnchar/" class="nav-link">
|
||||||
|
主页
|
||||||
|
</a></div><div class="nav-item"><a href="/cnchar/guide/" class="nav-link">
|
||||||
|
使用说明
|
||||||
|
</a></div><div class="nav-item"><a href="https://www.github.com/theajack/cnchar" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||||
|
GitHub
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="文档" class="dropdown-title"><span class="title">文档</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/cnchar/doc/cnchar.html" class="nav-link">
|
||||||
|
cnchar
|
||||||
|
</a></li><li class="dropdown-item"><!----> <a href="/cnchar/doc/poly.html" class="nav-link">
|
||||||
|
cnchar-poly
|
||||||
|
</a></li><li class="dropdown-item"><!----> <a href="/cnchar/doc/order.html" class="nav-link">
|
||||||
|
cnchar-order
|
||||||
|
</a></li><li class="dropdown-item"><!----> <a href="/cnchar/doc/trad.html" class="nav-link">
|
||||||
|
cnchar-trad
|
||||||
|
</a></li><li class="dropdown-item"><!----> <a href="/cnchar/doc/draw.html" class="nav-link router-link-exact-active router-link-active">
|
||||||
|
cnchar-draw
|
||||||
|
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="关于作者" class="dropdown-title"><span class="title">关于作者</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://www.github.com/theajack" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||||
|
GitHub地址
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="http://www.gitee.com/theajack" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||||
|
Gitee地址
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="https://blog.csdn.net/yanxiaomu" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||||
|
CSDN账号
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></div></div> <!----></nav> <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>cnchar文档</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/cnchar/doc/cnchar.html" class="sidebar-link">cnchar</a></li><li><a href="/cnchar/doc/poly.html" class="sidebar-link">cnchar-poly</a></li><li><a href="/cnchar/doc/order.html" class="sidebar-link">cnchar-order</a></li><li><a href="/cnchar/doc/trad.html" class="sidebar-link">cnchar-trad</a></li><li><a href="/cnchar/doc/draw.html" class="active sidebar-link">cnchar-draw</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/cnchar/doc/draw.html#_1-介绍" class="sidebar-link">1. 介绍</a></li><li class="sidebar-sub-header"><a href="/cnchar/doc/draw.html#_2-使用" class="sidebar-link">2. 使用</a></li><li class="sidebar-sub-header"><a href="/cnchar/doc/draw.html#_3-常规绘制实例" class="sidebar-link">3. 常规绘制实例</a></li><li class="sidebar-sub-header"><a href="/cnchar/doc/draw.html#_4-笔顺绘制实例" class="sidebar-link">4. 笔顺绘制实例</a></li><li class="sidebar-sub-header"><a href="/cnchar/doc/draw.html#_5-动画绘制模式" class="sidebar-link">5. 动画绘制模式</a></li><li class="sidebar-sub-header"><a href="/cnchar/doc/draw.html#_6-测验模式" class="sidebar-link">6. 测验模式</a></li></ul></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h2 id="_1-介绍"><a href="#_1-介绍" class="header-anchor">#</a> 1. 介绍</h2> <p><code>cnchar-draw</code> 库的汉字绘制功能封装基于 <a href="https://github.com/chanind/hanzi-writer" target="_blank" rel="noopener noreferrer">hanzi-writer<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>, 特此表示感谢！</p> <p><code>cnchar-draw</code> 库是用于支持可视化绘制汉字，有 normal,animation,stroke,test 四种模式可选，该库仅在浏览器环境下可用，且该库支持脱离cnchar使用</p> <p>另外，该库支持繁体字且不依赖 <code>cnahr-trad</code>库</p> <p>draw 的参数比较繁多，首先需要理解的是，draw 分为四种绘制模式：</p> <ul><li>normal: 常规绘制</li> <li>animation: 带有绘制动画，支持连续绘制、同时绘制、循环绘制</li> <li>stroke: 按汉字笔顺单步绘制</li> <li>test: 测试模式，用户可以在容器内绘制汉字，cnchar-draw会检测是否绘制正确</li></ul> <p>具体使用也可以参考<code>cnchar-draw</code>的类型声明文件：<a href="https://github.com/theajack/cnchar/blob/master/src/plugin/draw/index.d.ts" target="_blank" rel="noopener noreferrer">cnchar.draw.d.ts<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p> <p>npm安装</p> <div class="language- extra-class"><pre class="language-text"><code>npm i cnchar-draw
|
||||||
|
</code></pre></div><p>cdn使用</p> <div><pre><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/cnchar-draw/cnchar.draw.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre></div> <p>使用</p> <div><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> cnchar <span class="hljs-keyword">from</span> <span class="hljs-string">'cnchar'</span>;
|
||||||
|
<span class="hljs-keyword">import</span> draw <span class="hljs-keyword">from</span> <span class="hljs-string">'cnchar-draw'</span>;
|
||||||
|
cnchar.use(draw); <span class="hljs-comment">// use 在浏览器环境中非必须</span></code></pre></div> <p>脱离cnchar 独立使用</p> <div><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> draw <span class="hljs-keyword">from</span> <span class="hljs-string">'cnchar-draw'</span>;
|
||||||
|
draw(<span class="hljs-string">'你好'</span>)</code></pre></div> <h2 id="_2-使用"><a href="#_2-使用" class="header-anchor">#</a> 2. 使用</h2> <p>引入cnchar-draw之后，cnchar上会新增一个draw方法，使用方式如下：</p> <div><pre><code class="hljs javascript">cnchar.draw(<span class="hljs-string">'你好'</span>, options); <span class="hljs-comment">// options 为可选参数</span></code></pre></div> <p>以下是 options 的所有可选参数及描述，具体使用可以在 <a href="https://theajack.gitee.io/jsbox?theme=dark&config=https%3A%2F%2Fcdn.jsdelivr.net%2Fgh%2Ftheajack%2Fcnchar%2Fdocs%2Fconfig.js&id=normal-draw" target="_blank" rel="noopener noreferrer">JSBox<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 上自行在线尝试</p> <div><pre><code class="hljs typescript"><span class="hljs-keyword">declare</span> <span class="hljs-keyword">interface</span> DrawOption {
|
||||||
|
el?: <span class="hljs-built_in">string</span> | HTMLElement; <span class="hljs-comment">// 绘制的容器，支持id和dom，若是不填，会在body后append一个dom作为容器</span>
|
||||||
|
<span class="hljs-keyword">type</span>?: DrawType; <span class="hljs-comment">// 绘制模式，默认为normal</span>
|
||||||
|
style?: { <span class="hljs-comment">// 样式类</span>
|
||||||
|
showOutline?: <span class="hljs-built_in">boolean</span>;<span class="hljs-comment">//: true,</span>
|
||||||
|
showCharacter?: <span class="hljs-built_in">boolean</span>;<span class="hljs-comment">//: true,</span>
|
||||||
|
currentColor?: <span class="hljs-built_in">string</span>;<span class="hljs-comment">//: '#b44', // 仅在stroke模式下有效</span>
|
||||||
|
length?: <span class="hljs-built_in">number</span>;<span class="hljs-comment">//: 60,</span>
|
||||||
|
padding?: <span class="hljs-built_in">number</span>;<span class="hljs-comment">//: 5, // 数值, 默认 20。 画布的汉字和边缘之间的填充</span>
|
||||||
|
outlineColor?: <span class="hljs-built_in">string</span>;<span class="hljs-comment">//: '#ddd', // 十六进制字符, 默认 '#DDD'。</span>
|
||||||
|
strokeColor?: <span class="hljs-built_in">string</span>;<span class="hljs-comment">//: '#555', // 十六进制字符, 默认 '#555'。绘制每个笔划的颜色。</span>
|
||||||
|
radicalColor?: <span class="hljs-built_in">string</span>;<span class="hljs-comment">//: null, // 十六进制字符, 默认 null。 如果存在偏旁部首数据，则在笔划中绘制偏旁部首的颜色。 如果没有设置，激光将绘制与其他笔划相同的颜色。</span>
|
||||||
|
strokeFadeDuration?: <span class="hljs-built_in">number</span>; <span class="hljs-comment">//400</span>
|
||||||
|
},
|
||||||
|
line?: { <span class="hljs-comment">// 背景线条类</span>
|
||||||
|
lineStraight?: <span class="hljs-built_in">boolean</span>;<span class="hljs-comment">// : true,</span>
|
||||||
|
lineCross?: <span class="hljs-built_in">boolean</span>;<span class="hljs-comment">// : true,</span>
|
||||||
|
lineWidth?: <span class="hljs-built_in">number</span>;<span class="hljs-comment">// : 1,</span>
|
||||||
|
lineColor?: <span class="hljs-built_in">string</span>;<span class="hljs-comment">// : '#ddd',</span>
|
||||||
|
lineDash?: <span class="hljs-built_in">boolean</span>;<span class="hljs-comment">// : true,</span>
|
||||||
|
border?: <span class="hljs-built_in">boolean</span>;<span class="hljs-comment">// : true,</span>
|
||||||
|
borderWidth?: <span class="hljs-built_in">number</span>;<span class="hljs-comment">// : 1,</span>
|
||||||
|
borderColor?: <span class="hljs-built_in">string</span>;<span class="hljs-comment">// : '#ccc',</span>
|
||||||
|
borderDash?: <span class="hljs-built_in">boolean</span>;<span class="hljs-comment">// : false,</span>
|
||||||
|
},
|
||||||
|
animation?: {
|
||||||
|
strokeAnimationSpeed?: <span class="hljs-built_in">number</span>;<span class="hljs-comment">// : 1, // 数值, 默认 1。 绘制每个笔划的速度必须大于0。增加此数字可以更快地绘制笔划，减少绘制笔划的速度更慢。</span>
|
||||||
|
delayBetweenStrokes?: <span class="hljs-built_in">number</span>;<span class="hljs-comment">// : 1000, // 数值, 默认 1000。 动画进行中每个笔画之间的间隔时间（以毫秒为单位）。</span>
|
||||||
|
delayBetweenLoops?: <span class="hljs-built_in">number</span>;<span class="hljs-comment">// : 200, // 数值, 默认 2000。 循环动画时每个动画循环之间的时间（以毫秒为单位）。</span>
|
||||||
|
autoAnimate?: <span class="hljs-built_in">boolean</span>;<span class="hljs-comment">// : true,</span>
|
||||||
|
animateComplete?: <span class="hljs-built_in">Function</span>;<span class="hljs-comment">// : () => {},</span>
|
||||||
|
stepByStep?: <span class="hljs-built_in">boolean</span>;<span class="hljs-comment">// : true,</span>
|
||||||
|
loopAnimate?: <span class="hljs-built_in">boolean</span>;<span class="hljs-comment">// : false,</span>
|
||||||
|
},
|
||||||
|
test?: {
|
||||||
|
strokeHighlightSpeed?: <span class="hljs-built_in">number</span>;<span class="hljs-comment">// : 20, // 数值, 默认 20。 在测验中给出提示时突出显示每个笔划的速度必须大于0。增加此数字以突出显示更快，减少以突出显示更慢。</span>
|
||||||
|
highlightColor?: <span class="hljs-built_in">number</span>;<span class="hljs-comment">// : '#aaf', // 十六进制字符, 默认 '#AAF'。 用于在测验中突出显示的颜色。</span>
|
||||||
|
drawingColor?: <span class="hljs-built_in">number</span>;<span class="hljs-comment">// : '#333', // 十六进制字符, 默认 '#333'。 测验期间绘制的线条颜色。</span>
|
||||||
|
drawingWidth?: <span class="hljs-built_in">number</span>;<span class="hljs-comment">// : 4, // 数值, 默认 4。 进行测验时绘制的线条宽度。</span>
|
||||||
|
showHintAfterMisses?: <span class="hljs-built_in">number</span>;<span class="hljs-comment">// : 3, // 整数, 默认 3 中风高亮提示之前的未命中数被给予用户。 设置为 false 以禁用。 创建测验时也可以设置此项。</span>
|
||||||
|
highlightOnComplete?: <span class="hljs-built_in">number</span>;<span class="hljs-comment">// : true, // 布尔值, 默认 true。 控制当用户完成绘制整个字符时，测验是否会短暂突出显示字符。 创建测验时也可以设置此项。</span>
|
||||||
|
highlightCompleteColor?: <span class="hljs-built_in">number</span>;<span class="hljs-comment">// : null, // 十六进制字符, 默认 null。 在测验中突出显示字符时使用的颜色。 如果未设置，则将使用highlightColor。 仅当highlightOnComplete为true时才相关。</span>
|
||||||
|
onTestStatus?<span class="hljs-function">(<span class="hljs-params">args: TestStatus</span>):<span class="hljs-params">void</span>;// : <span class="hljs-params">null</span>, // (<span class="hljs-params">{index, status, data}</span>)=></span>{}
|
||||||
|
}
|
||||||
|
};</code></pre></div> <h2 id="_3-常规绘制实例"><a href="#_3-常规绘制实例" class="header-anchor">#</a> 3. 常规绘制实例</h2> <p>绘制模式默认为常规模式 <code>type=normal</code></p> <p><div class="code-box" data-v-54d15265><div data-v-54d15265><span class="code-title" data-v-54d15265>normal-draw</span> <span class="code-desc" data-v-54d15265></span> <i title="在线运行" class="ei-play code-btn" data-v-54d15265></i> <i title="复制代码" class="ei-copy code-btn" data-v-54d15265></i></div> <pre data-v-54d15265><code class="hljs"></code></pre> <div style="display:none;" data-v-54d15265><div class="output-title" data-v-54d15265>运行结果</div> <div class="output-area" data-v-54d15265><div class="show-toggle" data-v-54d15265><i class="ei-angle-up" data-v-54d15265></i> <span class="show-text" data-v-54d15265>隐藏结果</span></div> <div style="display:;" data-v-54d15265></div></div></div> <div class="powered-by" data-v-54d15265>
|
||||||
|
Powered by <a target="view_window" href="https://github.com/theajack/jsbox" class="jsbox-link" data-v-54d15265><i class="ei-cube-alt" data-v-54d15265></i> JSBox</a></div></div></p> <h2 id="_4-笔顺绘制实例"><a href="#_4-笔顺绘制实例" class="header-anchor">#</a> 4. 笔顺绘制实例</h2> <p>当<code>type=stroke</code>时，笔顺模式启用，该模式会单笔绘制汉字的每一个笔划，并且为每一个笔划生成一个绘制块</p> <p><div class="code-box" data-v-54d15265><div data-v-54d15265><span class="code-title" data-v-54d15265>stroke-draw</span> <span class="code-desc" data-v-54d15265></span> <i title="在线运行" class="ei-play code-btn" data-v-54d15265></i> <i title="复制代码" class="ei-copy code-btn" data-v-54d15265></i></div> <pre data-v-54d15265><code class="hljs"></code></pre> <div style="display:none;" data-v-54d15265><div class="output-title" data-v-54d15265>运行结果</div> <div class="output-area" data-v-54d15265><div class="show-toggle" data-v-54d15265><i class="ei-angle-up" data-v-54d15265></i> <span class="show-text" data-v-54d15265>隐藏结果</span></div> <div style="display:;" data-v-54d15265></div></div></div> <div class="powered-by" data-v-54d15265>
|
||||||
|
Powered by <a target="view_window" href="https://github.com/theajack/jsbox" class="jsbox-link" data-v-54d15265><i class="ei-cube-alt" data-v-54d15265></i> JSBox</a></div></div></p> <h2 id="_5-动画绘制模式"><a href="#_5-动画绘制模式" class="header-anchor">#</a> 5. 动画绘制模式</h2> <p>当<code>type=animation</code>时，动画模式启用，该模式会按笔顺用动画绘制每一个笔划</p> <p><div class="code-box" data-v-54d15265><div data-v-54d15265><span class="code-title" data-v-54d15265>animation-draw</span> <span class="code-desc" data-v-54d15265></span> <i title="在线运行" class="ei-play code-btn" data-v-54d15265></i> <i title="复制代码" class="ei-copy code-btn" data-v-54d15265></i></div> <pre data-v-54d15265><code class="hljs"></code></pre> <div style="display:none;" data-v-54d15265><div class="output-title" data-v-54d15265>运行结果</div> <div class="output-area" data-v-54d15265><div class="show-toggle" data-v-54d15265><i class="ei-angle-up" data-v-54d15265></i> <span class="show-text" data-v-54d15265>隐藏结果</span></div> <div style="display:;" data-v-54d15265></div></div></div> <div class="powered-by" data-v-54d15265>
|
||||||
|
Powered by <a target="view_window" href="https://github.com/theajack/jsbox" class="jsbox-link" data-v-54d15265><i class="ei-cube-alt" data-v-54d15265></i> JSBox</a></div></div></p> <h2 id="_6-测验模式"><a href="#_6-测验模式" class="header-anchor">#</a> 6. 测验模式</h2> <p>当<code>type=test</code>时，测验模式启用，该模式用户可以在容器内绘制汉字，cnchar-draw会检测是否绘制正确</p> <p>请用鼠标在绘制出的<strong>测验</strong>两个字上按顺序画上笔画</p> <p><div class="code-box" data-v-54d15265><div data-v-54d15265><span class="code-title" data-v-54d15265>test-draw</span> <span class="code-desc" data-v-54d15265></span> <i title="在线运行" class="ei-play code-btn" data-v-54d15265></i> <i title="复制代码" class="ei-copy code-btn" data-v-54d15265></i></div> <pre data-v-54d15265><code class="hljs"></code></pre> <div style="display:none;" data-v-54d15265><div class="output-title" data-v-54d15265>运行结果</div> <div class="output-area" data-v-54d15265><div class="show-toggle" data-v-54d15265><i class="ei-angle-up" data-v-54d15265></i> <span class="show-text" data-v-54d15265>隐藏结果</span></div> <div style="display:;" data-v-54d15265></div></div></div> <div class="powered-by" data-v-54d15265>
|
||||||
|
Powered by <a target="view_window" href="https://github.com/theajack/jsbox" class="jsbox-link" data-v-54d15265><i class="ei-cube-alt" data-v-54d15265></i> JSBox</a></div></div></p></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">最后更新于:</span> <span class="time">4/12/2020, 10:44:57 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
|
||||||
|
←
|
||||||
|
<a href="/cnchar/doc/trad.html" class="prev">
|
||||||
|
cnchar-trad
|
||||||
|
</a></span> <!----></p></div> </main></div><div class="global-ui"><!----><div></div></div></div>
|
||||||
|
<script src="/cnchar/assets/js/app.6c180d28.js" defer></script><script src="/cnchar/assets/js/2.338d50e2.js" defer></script><script src="/cnchar/assets/js/11.94c125ca.js" defer></script><script src="/cnchar/assets/js/3.2c7a4c6e.js" defer></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,62 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en-US">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||||
|
<title>组件说明 | cnchar</title>
|
||||||
|
<meta name="description" content="功能全面、多端支持的汉字拼音笔画js库">
|
||||||
|
<meta name="generator" content="VuePress 1.4.0">
|
||||||
|
<link rel="icon" href="https://cdn.jsdelivr.net/gh/theajack/cnchar/docs/assets/v1/images/i.ico">
|
||||||
|
|
||||||
|
<link rel="preload" href="/cnchar/assets/css/0.styles.0b7d8c5e.css" as="style"><link rel="preload" href="/cnchar/assets/js/app.6c180d28.js" as="script"><link rel="preload" href="/cnchar/assets/js/2.338d50e2.js" as="script"><link rel="preload" href="/cnchar/assets/js/9.5b3a4467.js" as="script"><link rel="prefetch" href="/cnchar/assets/js/10.6983a4ff.js"><link rel="prefetch" href="/cnchar/assets/js/11.94c125ca.js"><link rel="prefetch" href="/cnchar/assets/js/12.9efd22de.js"><link rel="prefetch" href="/cnchar/assets/js/13.1d748f12.js"><link rel="prefetch" href="/cnchar/assets/js/14.92555999.js"><link rel="prefetch" href="/cnchar/assets/js/15.5320422e.js"><link rel="prefetch" href="/cnchar/assets/js/16.c77f70e0.js"><link rel="prefetch" href="/cnchar/assets/js/17.01fbc09e.js"><link rel="prefetch" href="/cnchar/assets/js/18.b6c135fb.js"><link rel="prefetch" href="/cnchar/assets/js/19.421f793f.js"><link rel="prefetch" href="/cnchar/assets/js/20.4c918771.js"><link rel="prefetch" href="/cnchar/assets/js/21.8c24635f.js"><link rel="prefetch" href="/cnchar/assets/js/3.2c7a4c6e.js"><link rel="prefetch" href="/cnchar/assets/js/4.803cde81.js"><link rel="prefetch" href="/cnchar/assets/js/5.af5c9155.js"><link rel="prefetch" href="/cnchar/assets/js/6.37ec8c51.js"><link rel="prefetch" href="/cnchar/assets/js/7.576e924c.js"><link rel="prefetch" href="/cnchar/assets/js/8.716a2d5f.js">
|
||||||
|
<link rel="stylesheet" href="/cnchar/assets/css/0.styles.0b7d8c5e.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/cnchar/" class="home-link router-link-active"><!----> <span class="site-name">cnchar</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/cnchar/" class="nav-link">
|
||||||
|
主页
|
||||||
|
</a></div><div class="nav-item"><a href="/cnchar/guide/" class="nav-link">
|
||||||
|
使用说明
|
||||||
|
</a></div><div class="nav-item"><a href="https://www.github.com/theajack/cnchar" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||||
|
GitHub
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="文档" class="dropdown-title"><span class="title">文档</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/cnchar/doc/cnchar.html" class="nav-link">
|
||||||
|
cnchar
|
||||||
|
</a></li><li class="dropdown-item"><!----> <a href="/cnchar/doc/poly.html" class="nav-link">
|
||||||
|
cnchar-poly
|
||||||
|
</a></li><li class="dropdown-item"><!----> <a href="/cnchar/doc/order.html" class="nav-link">
|
||||||
|
cnchar-order
|
||||||
|
</a></li><li class="dropdown-item"><!----> <a href="/cnchar/doc/trad.html" class="nav-link">
|
||||||
|
cnchar-trad
|
||||||
|
</a></li><li class="dropdown-item"><!----> <a href="/cnchar/doc/draw.html" class="nav-link">
|
||||||
|
cnchar-draw
|
||||||
|
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="关于作者" class="dropdown-title"><span class="title">关于作者</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://www.github.com/theajack" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||||
|
GitHub地址
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="http://www.gitee.com/theajack" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||||
|
Gitee地址
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="https://blog.csdn.net/yanxiaomu" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||||
|
CSDN账号
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/cnchar/" class="nav-link">
|
||||||
|
主页
|
||||||
|
</a></div><div class="nav-item"><a href="/cnchar/guide/" class="nav-link">
|
||||||
|
使用说明
|
||||||
|
</a></div><div class="nav-item"><a href="https://www.github.com/theajack/cnchar" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||||
|
GitHub
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="文档" class="dropdown-title"><span class="title">文档</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/cnchar/doc/cnchar.html" class="nav-link">
|
||||||
|
cnchar
|
||||||
|
</a></li><li class="dropdown-item"><!----> <a href="/cnchar/doc/poly.html" class="nav-link">
|
||||||
|
cnchar-poly
|
||||||
|
</a></li><li class="dropdown-item"><!----> <a href="/cnchar/doc/order.html" class="nav-link">
|
||||||
|
cnchar-order
|
||||||
|
</a></li><li class="dropdown-item"><!----> <a href="/cnchar/doc/trad.html" class="nav-link">
|
||||||
|
cnchar-trad
|
||||||
|
</a></li><li class="dropdown-item"><!----> <a href="/cnchar/doc/draw.html" class="nav-link">
|
||||||
|
cnchar-draw
|
||||||
|
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="关于作者" class="dropdown-title"><span class="title">关于作者</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://www.github.com/theajack" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||||
|
GitHub地址
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="http://www.gitee.com/theajack" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||||
|
Gitee地址
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="https://blog.csdn.net/yanxiaomu" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||||
|
CSDN账号
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></div></div> <!----></nav> <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>cnchar文档</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/cnchar/doc/cnchar.html" class="sidebar-link">cnchar</a></li><li><a href="/cnchar/doc/poly.html" class="sidebar-link">cnchar-poly</a></li><li><a href="/cnchar/doc/order.html" class="sidebar-link">cnchar-order</a></li><li><a href="/cnchar/doc/trad.html" class="sidebar-link">cnchar-trad</a></li><li><a href="/cnchar/doc/draw.html" class="sidebar-link">cnchar-draw</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="组件说明"><a href="#组件说明" class="header-anchor">#</a> 组件说明</h1></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">最后更新于:</span> <span class="time">4/10/2020, 12:11:14 AM</span></div></footer> <!----> </main></div><div class="global-ui"><!----><div></div></div></div>
|
||||||
|
<script src="/cnchar/assets/js/app.6c180d28.js" defer></script><script src="/cnchar/assets/js/2.338d50e2.js" defer></script><script src="/cnchar/assets/js/9.5b3a4467.js" defer></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,77 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en-US">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||||
|
<title>1. 介绍 | cnchar</title>
|
||||||
|
<meta name="description" content="功能全面、多端支持的汉字拼音笔画js库">
|
||||||
|
<meta name="generator" content="VuePress 1.4.0">
|
||||||
|
<link rel="icon" href="https://cdn.jsdelivr.net/gh/theajack/cnchar/docs/assets/v1/images/i.ico">
|
||||||
|
|
||||||
|
<link rel="preload" href="/cnchar/assets/css/0.styles.0b7d8c5e.css" as="style"><link rel="preload" href="/cnchar/assets/js/app.6c180d28.js" as="script"><link rel="preload" href="/cnchar/assets/js/2.338d50e2.js" as="script"><link rel="preload" href="/cnchar/assets/js/12.9efd22de.js" as="script"><link rel="preload" href="/cnchar/assets/js/3.2c7a4c6e.js" as="script"><link rel="prefetch" href="/cnchar/assets/js/10.6983a4ff.js"><link rel="prefetch" href="/cnchar/assets/js/11.94c125ca.js"><link rel="prefetch" href="/cnchar/assets/js/13.1d748f12.js"><link rel="prefetch" href="/cnchar/assets/js/14.92555999.js"><link rel="prefetch" href="/cnchar/assets/js/15.5320422e.js"><link rel="prefetch" href="/cnchar/assets/js/16.c77f70e0.js"><link rel="prefetch" href="/cnchar/assets/js/17.01fbc09e.js"><link rel="prefetch" href="/cnchar/assets/js/18.b6c135fb.js"><link rel="prefetch" href="/cnchar/assets/js/19.421f793f.js"><link rel="prefetch" href="/cnchar/assets/js/20.4c918771.js"><link rel="prefetch" href="/cnchar/assets/js/21.8c24635f.js"><link rel="prefetch" href="/cnchar/assets/js/4.803cde81.js"><link rel="prefetch" href="/cnchar/assets/js/5.af5c9155.js"><link rel="prefetch" href="/cnchar/assets/js/6.37ec8c51.js"><link rel="prefetch" href="/cnchar/assets/js/7.576e924c.js"><link rel="prefetch" href="/cnchar/assets/js/8.716a2d5f.js"><link rel="prefetch" href="/cnchar/assets/js/9.5b3a4467.js">
|
||||||
|
<link rel="stylesheet" href="/cnchar/assets/css/0.styles.0b7d8c5e.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/cnchar/" class="home-link router-link-active"><!----> <span class="site-name">cnchar</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/cnchar/" class="nav-link">
|
||||||
|
主页
|
||||||
|
</a></div><div class="nav-item"><a href="/cnchar/guide/" class="nav-link">
|
||||||
|
使用说明
|
||||||
|
</a></div><div class="nav-item"><a href="https://www.github.com/theajack/cnchar" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||||
|
GitHub
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="文档" class="dropdown-title"><span class="title">文档</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/cnchar/doc/cnchar.html" class="nav-link">
|
||||||
|
cnchar
|
||||||
|
</a></li><li class="dropdown-item"><!----> <a href="/cnchar/doc/poly.html" class="nav-link">
|
||||||
|
cnchar-poly
|
||||||
|
</a></li><li class="dropdown-item"><!----> <a href="/cnchar/doc/order.html" class="nav-link router-link-exact-active router-link-active">
|
||||||
|
cnchar-order
|
||||||
|
</a></li><li class="dropdown-item"><!----> <a href="/cnchar/doc/trad.html" class="nav-link">
|
||||||
|
cnchar-trad
|
||||||
|
</a></li><li class="dropdown-item"><!----> <a href="/cnchar/doc/draw.html" class="nav-link">
|
||||||
|
cnchar-draw
|
||||||
|
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="关于作者" class="dropdown-title"><span class="title">关于作者</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://www.github.com/theajack" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||||
|
GitHub地址
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="http://www.gitee.com/theajack" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||||
|
Gitee地址
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="https://blog.csdn.net/yanxiaomu" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||||
|
CSDN账号
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/cnchar/" class="nav-link">
|
||||||
|
主页
|
||||||
|
</a></div><div class="nav-item"><a href="/cnchar/guide/" class="nav-link">
|
||||||
|
使用说明
|
||||||
|
</a></div><div class="nav-item"><a href="https://www.github.com/theajack/cnchar" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||||
|
GitHub
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="文档" class="dropdown-title"><span class="title">文档</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/cnchar/doc/cnchar.html" class="nav-link">
|
||||||
|
cnchar
|
||||||
|
</a></li><li class="dropdown-item"><!----> <a href="/cnchar/doc/poly.html" class="nav-link">
|
||||||
|
cnchar-poly
|
||||||
|
</a></li><li class="dropdown-item"><!----> <a href="/cnchar/doc/order.html" class="nav-link router-link-exact-active router-link-active">
|
||||||
|
cnchar-order
|
||||||
|
</a></li><li class="dropdown-item"><!----> <a href="/cnchar/doc/trad.html" class="nav-link">
|
||||||
|
cnchar-trad
|
||||||
|
</a></li><li class="dropdown-item"><!----> <a href="/cnchar/doc/draw.html" class="nav-link">
|
||||||
|
cnchar-draw
|
||||||
|
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="关于作者" class="dropdown-title"><span class="title">关于作者</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://www.github.com/theajack" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||||
|
GitHub地址
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="http://www.gitee.com/theajack" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||||
|
Gitee地址
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="https://blog.csdn.net/yanxiaomu" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||||
|
CSDN账号
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></div></div> <!----></nav> <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>cnchar文档</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/cnchar/doc/cnchar.html" class="sidebar-link">cnchar</a></li><li><a href="/cnchar/doc/poly.html" class="sidebar-link">cnchar-poly</a></li><li><a href="/cnchar/doc/order.html" class="active sidebar-link">cnchar-order</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/cnchar/doc/order.html#_1-介绍" class="sidebar-link">1. 介绍</a></li><li class="sidebar-sub-header"><a href="/cnchar/doc/order.html#_2-stroke参数" class="sidebar-link">2. stroke参数</a></li><li class="sidebar-sub-header"><a href="/cnchar/doc/order.html#_3-实例" class="sidebar-link">3. 实例</a></li><li class="sidebar-sub-header"><a href="/cnchar/doc/order.html#_4-笔画推出原汉字-ordertoword" class="sidebar-link">4. 笔画推出原汉字(orderToWord)</a></li></ul></li><li><a href="/cnchar/doc/trad.html" class="sidebar-link">cnchar-trad</a></li><li><a href="/cnchar/doc/draw.html" class="sidebar-link">cnchar-draw</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h2 id="_1-介绍"><a href="#_1-介绍" class="header-anchor">#</a> 1. 介绍</h2> <p><code>cnchar-order</code> 库是用于支持获取汉字笔顺及其名称、形状，除此之外，该库还提供一个<code>orderToWord</code>方法，可以根据笔画序列推出原汉字，以及提供一个汉字所有笔划的json属性</p> <p>引入该库之后，<code>cnchar.stroke()</code> 方法才会支持 <code>order</code> 等参数</p> <p>npm安装</p> <div class="language- extra-class"><pre class="language-text"><code>npm i cnchar-order
|
||||||
|
</code></pre></div><p>cdn使用</p> <div><pre><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/cnchar-order/cnchar.order.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre></div> <p>使用</p> <div><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> cnchar <span class="hljs-keyword">from</span> <span class="hljs-string">'cnchar'</span>;
|
||||||
|
<span class="hljs-keyword">import</span> order <span class="hljs-keyword">from</span> <span class="hljs-string">'cnchar-order'</span>;
|
||||||
|
cnchar.use(order); <span class="hljs-comment">// use 在浏览器环境中非必须</span></code></pre></div> <h2 id="_2-stroke参数"><a href="#_2-stroke参数" class="header-anchor">#</a> 2. stroke参数</h2> <table><thead><tr><th style="text-align:center;">参数</th> <th style="text-align:center;">作用</th> <th style="text-align:center;">是否默认</th> <th style="text-align:center;">依赖库</th> <th style="text-align:center;">备注</th></tr></thead> <tbody><tr><td style="text-align:center;">array</td> <td style="text-align:center;">返回数组</td> <td style="text-align:center;">否</td> <td style="text-align:center;">--</td> <td style="text-align:center;">使用 cnchar-order 且启用 order 参数后该参数被忽略</td></tr> <tr><td style="text-align:center;">order</td> <td style="text-align:center;">启用笔画顺序</td> <td style="text-align:center;">否</td> <td style="text-align:center;">cnchar-order</td> <td style="text-align:center;">--</td></tr> <tr><td style="text-align:center;">letter</td> <td style="text-align:center;">使用笔画顺序字母序列</td> <td style="text-align:center;">是</td> <td style="text-align:center;">cnchar-order</td> <td style="text-align:center;">当启用 order 后，该值是默认值</td></tr> <tr><td style="text-align:center;">detail</td> <td style="text-align:center;">使用笔画顺序详情作为返回值，每个汉字对应一个 json</td> <td style="text-align:center;">否</td> <td style="text-align:center;">cnchar-order</td> <td style="text-align:center;">优先级小于 letter</td></tr> <tr><td style="text-align:center;">shape</td> <td style="text-align:center;">使用笔画形状作为返回值</td> <td style="text-align:center;">否</td> <td style="text-align:center;">cnchar-order</td> <td style="text-align:center;">优先级小于 detail</td></tr> <tr><td style="text-align:center;">name</td> <td style="text-align:center;">使用笔画名称作为返回值</td> <td style="text-align:center;">否</td> <td style="text-align:center;">cnchar-order</td> <td style="text-align:center;">优先级小于 shape</td></tr> <tr><td style="text-align:center;">count</td> <td style="text-align:center;">使用笔画数作为返回值</td> <td style="text-align:center;">否</td> <td style="text-align:center;">cnchar-poly</td> <td style="text-align:center;">优先级小于 name</td></tr> <tr><td style="text-align:center;">simple</td> <td style="text-align:center;">是否禁用繁体字的笔画功能</td> <td style="text-align:center;">否</td> <td style="text-align:center;">cnchar-trad</td> <td style="text-align:center;">使用 cnchar-trad 之后，默认对繁体字启用笔画功能，该参数用于禁用繁体字笔画功能</td></tr></tbody></table> <p>以上五种模式优先级为 <strong>letter < detail < shape < name < count</strong></p> <h2 id="_3-实例"><a href="#_3-实例" class="header-anchor">#</a> 3. 实例</h2> <p>以下演示几个多音词的例子</p> <p><div class="code-box" data-v-54d15265><div data-v-54d15265><span class="code-title" data-v-54d15265>order</span> <span class="code-desc" data-v-54d15265></span> <i title="在线运行" class="ei-play code-btn" data-v-54d15265></i> <i title="复制代码" class="ei-copy code-btn" data-v-54d15265></i></div> <pre data-v-54d15265><code class="hljs"></code></pre> <div style="display:none;" data-v-54d15265><div class="output-title" data-v-54d15265>运行结果</div> <div class="output-area" data-v-54d15265><div class="show-toggle" data-v-54d15265><i class="ei-angle-up" data-v-54d15265></i> <span class="show-text" data-v-54d15265>隐藏结果</span></div> <div style="display:;" data-v-54d15265></div></div></div> <div class="powered-by" data-v-54d15265>
|
||||||
|
Powered by <a target="view_window" href="https://github.com/theajack/jsbox" class="jsbox-link" data-v-54d15265><i class="ei-cube-alt" data-v-54d15265></i> JSBox</a></div></div></p> <p>笔划形状模式（shape）由于系统原因，某些形状字符在 ios和macos上无法显示</p> <h2 id="_4-笔画推出原汉字-ordertoword"><a href="#_4-笔画推出原汉字-ordertoword" class="header-anchor">#</a> 4. 笔画推出原汉字(orderToWord)</h2> <h3 id="_4-1-使用"><a href="#_4-1-使用" class="header-anchor">#</a> 4.1 使用</h3> <p>当引入 <code>cnchar-order</code> 功能库(版本 2.0.2 及以上)之后，cnchar 就支持了根据笔画名称序列推出原汉字的功能，使用方式如下：</p> <div><pre><code class="hljs javascript">cnchar.orderToWord(orderNames[,...args]);</code></pre></div> <p><code>orderNames</code> 是笔画名称序列, 可以是空格分隔的笔画名称字符串或笔画名称数组</p> <p><code>args</code> 是参数列表，可选值有 <code>['match','matchorder','contain','start','array','simple']</code>, 使用 <code>cnchar.type.orderToWord</code> 可以查看可选值， 详情请见 4.2</p> <p>以下是一个简单的使用实例：</p> <p><div class="code-box" data-v-54d15265><div data-v-54d15265><span class="code-title" data-v-54d15265>orderToWord</span> <span class="code-desc" data-v-54d15265></span> <i title="在线运行" class="ei-play code-btn" data-v-54d15265></i> <i title="复制代码" class="ei-copy code-btn" data-v-54d15265></i></div> <pre data-v-54d15265><code class="hljs"></code></pre> <div style="display:none;" data-v-54d15265><div class="output-title" data-v-54d15265>运行结果</div> <div class="output-area" data-v-54d15265><div class="show-toggle" data-v-54d15265><i class="ei-angle-up" data-v-54d15265></i> <span class="show-text" data-v-54d15265>隐藏结果</span></div> <div style="display:;" data-v-54d15265></div></div></div> <div class="powered-by" data-v-54d15265>
|
||||||
|
Powered by <a target="view_window" href="https://github.com/theajack/jsbox" class="jsbox-link" data-v-54d15265><i class="ei-cube-alt" data-v-54d15265></i> JSBox</a></div></div></p> <h3 id="_4-2-参数详情"><a href="#_4-2-参数详情" class="header-anchor">#</a> 4.2 参数详情</h3> <p>参数调用如下，所有 arg 参数都是可选的</p> <div><pre><code class="hljs javascript">cnchar.orderToWord(orders,arg1,arg2,...);</code></pre></div> <p>arg 参数信息如下：</p> <table><thead><tr><th style="text-align:center;">参数</th> <th style="text-align:center;">作用</th> <th style="text-align:center;">是否默认</th> <th style="text-align:center;">依赖库</th> <th style="text-align:center;">备注</th></tr></thead> <tbody><tr><td style="text-align:center;">match</td> <td style="text-align:center;">匹配含有笔序中所有笔画的汉字</td> <td style="text-align:center;">否</td> <td style="text-align:center;">--</td> <td style="text-align:center;">--</td></tr> <tr><td style="text-align:center;">matchorder</td> <td style="text-align:center;">匹配含有笔序中所有笔画的汉字前先后顺序一致</td> <td style="text-align:center;">否</td> <td style="text-align:center;">--</td> <td style="text-align:center;">--</td></tr> <tr><td style="text-align:center;">contain</td> <td style="text-align:center;">匹配含有该笔序的汉字</td> <td style="text-align:center;">否</td> <td style="text-align:center;">--</td> <td style="text-align:center;">--</td></tr> <tr><td style="text-align:center;">start</td> <td style="text-align:center;">匹配所有以该笔序开头的汉字</td> <td style="text-align:center;">否</td> <td style="text-align:center;">--</td> <td style="text-align:center;">--</td></tr> <tr><td style="text-align:center;">array</td> <td style="text-align:center;">数组分割，默认返回的是字符串</td> <td style="text-align:center;">否</td> <td style="text-align:center;">--</td> <td style="text-align:center;">--</td></tr> <tr><td style="text-align:center;">simple</td> <td style="text-align:center;">只查询简体字</td> <td style="text-align:center;">否</td> <td style="text-align:center;">cnchar-trad</td> <td style="text-align:center;">该参数仅在引入了 <code>cnchar-trad</code> 后有效</td></tr> <tr><td style="text-align:center;">trad</td> <td style="text-align:center;">只查询繁体字</td> <td style="text-align:center;">否</td> <td style="text-align:center;">cnchar-trad</td> <td style="text-align:center;">该参数仅在引入了 <code>cnchar-trad</code> 后有效</td></tr></tbody></table> <p>关于匹配参数，优先级为 <strong>match > matchorder > contain > start > 默认</strong></p> <p>不含有匹配参数时表示使用全匹配，即汉字笔画数与传入的 orders 完全一致</p> <h3 id="_4-3-汉字所有笔划-ordertoword-orders"><a href="#_4-3-汉字所有笔划-ordertoword-orders" class="header-anchor">#</a> 4.3 汉字所有笔划(orderToWord.orders)</h3> <p>可用的笔画名称可以通过以下 api 查看</p> <p>orderNames 只需要传入笔画名称即可，也就是下面 json 数据的 key 值</p> <p><div class="code-box" data-v-54d15265><div data-v-54d15265><span class="code-title" data-v-54d15265>orders</span> <span class="code-desc" data-v-54d15265></span> <i title="在线运行" class="ei-play code-btn" data-v-54d15265></i> <i title="复制代码" class="ei-copy code-btn" data-v-54d15265></i></div> <pre data-v-54d15265><code class="hljs"></code></pre> <div style="display:none;" data-v-54d15265><div class="output-title" data-v-54d15265>运行结果</div> <div class="output-area" data-v-54d15265><div class="show-toggle" data-v-54d15265><i class="ei-angle-up" data-v-54d15265></i> <span class="show-text" data-v-54d15265>隐藏结果</span></div> <div style="display:;" data-v-54d15265></div></div></div> <div class="powered-by" data-v-54d15265>
|
||||||
|
Powered by <a target="view_window" href="https://github.com/theajack/jsbox" class="jsbox-link" data-v-54d15265><i class="ei-cube-alt" data-v-54d15265></i> JSBox</a></div></div></p> <p>注：其中以下五对笔画没有进行区分，使用的是同样的字母表示：
|
||||||
|
<strong>卧钩 = 斜钩</strong>、<strong>横折弯 = 横折折</strong>、<strong>横折折折钩 = 横撇弯钩</strong>、<strong>横撇 = 横钩</strong>、<strong>竖折折 = 竖折撇</strong></p></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">最后更新于:</span> <span class="time">4/12/2020, 10:44:57 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
|
||||||
|
←
|
||||||
|
<a href="/cnchar/doc/poly.html" class="prev">
|
||||||
|
cnchar-poly
|
||||||
|
</a></span> <span class="next"><a href="/cnchar/doc/trad.html">
|
||||||
|
cnchar-trad
|
||||||
|
</a>
|
||||||
|
→
|
||||||
|
</span></p></div> </main></div><div class="global-ui"><!----><div></div></div></div>
|
||||||
|
<script src="/cnchar/assets/js/app.6c180d28.js" defer></script><script src="/cnchar/assets/js/2.338d50e2.js" defer></script><script src="/cnchar/assets/js/12.9efd22de.js" defer></script><script src="/cnchar/assets/js/3.2c7a4c6e.js" defer></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,74 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en-US">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||||
|
<title>1. 介绍 | cnchar</title>
|
||||||
|
<meta name="description" content="功能全面、多端支持的汉字拼音笔画js库">
|
||||||
|
<meta name="generator" content="VuePress 1.4.0">
|
||||||
|
<link rel="icon" href="https://cdn.jsdelivr.net/gh/theajack/cnchar/docs/assets/v1/images/i.ico">
|
||||||
|
|
||||||
|
<link rel="preload" href="/cnchar/assets/css/0.styles.0b7d8c5e.css" as="style"><link rel="preload" href="/cnchar/assets/js/app.6c180d28.js" as="script"><link rel="preload" href="/cnchar/assets/js/2.338d50e2.js" as="script"><link rel="preload" href="/cnchar/assets/js/13.1d748f12.js" as="script"><link rel="preload" href="/cnchar/assets/js/3.2c7a4c6e.js" as="script"><link rel="prefetch" href="/cnchar/assets/js/10.6983a4ff.js"><link rel="prefetch" href="/cnchar/assets/js/11.94c125ca.js"><link rel="prefetch" href="/cnchar/assets/js/12.9efd22de.js"><link rel="prefetch" href="/cnchar/assets/js/14.92555999.js"><link rel="prefetch" href="/cnchar/assets/js/15.5320422e.js"><link rel="prefetch" href="/cnchar/assets/js/16.c77f70e0.js"><link rel="prefetch" href="/cnchar/assets/js/17.01fbc09e.js"><link rel="prefetch" href="/cnchar/assets/js/18.b6c135fb.js"><link rel="prefetch" href="/cnchar/assets/js/19.421f793f.js"><link rel="prefetch" href="/cnchar/assets/js/20.4c918771.js"><link rel="prefetch" href="/cnchar/assets/js/21.8c24635f.js"><link rel="prefetch" href="/cnchar/assets/js/4.803cde81.js"><link rel="prefetch" href="/cnchar/assets/js/5.af5c9155.js"><link rel="prefetch" href="/cnchar/assets/js/6.37ec8c51.js"><link rel="prefetch" href="/cnchar/assets/js/7.576e924c.js"><link rel="prefetch" href="/cnchar/assets/js/8.716a2d5f.js"><link rel="prefetch" href="/cnchar/assets/js/9.5b3a4467.js">
|
||||||
|
<link rel="stylesheet" href="/cnchar/assets/css/0.styles.0b7d8c5e.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/cnchar/" class="home-link router-link-active"><!----> <span class="site-name">cnchar</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/cnchar/" class="nav-link">
|
||||||
|
主页
|
||||||
|
</a></div><div class="nav-item"><a href="/cnchar/guide/" class="nav-link">
|
||||||
|
使用说明
|
||||||
|
</a></div><div class="nav-item"><a href="https://www.github.com/theajack/cnchar" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||||
|
GitHub
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="文档" class="dropdown-title"><span class="title">文档</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/cnchar/doc/cnchar.html" class="nav-link">
|
||||||
|
cnchar
|
||||||
|
</a></li><li class="dropdown-item"><!----> <a href="/cnchar/doc/poly.html" class="nav-link router-link-exact-active router-link-active">
|
||||||
|
cnchar-poly
|
||||||
|
</a></li><li class="dropdown-item"><!----> <a href="/cnchar/doc/order.html" class="nav-link">
|
||||||
|
cnchar-order
|
||||||
|
</a></li><li class="dropdown-item"><!----> <a href="/cnchar/doc/trad.html" class="nav-link">
|
||||||
|
cnchar-trad
|
||||||
|
</a></li><li class="dropdown-item"><!----> <a href="/cnchar/doc/draw.html" class="nav-link">
|
||||||
|
cnchar-draw
|
||||||
|
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="关于作者" class="dropdown-title"><span class="title">关于作者</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://www.github.com/theajack" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||||
|
GitHub地址
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="http://www.gitee.com/theajack" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||||
|
Gitee地址
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="https://blog.csdn.net/yanxiaomu" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||||
|
CSDN账号
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/cnchar/" class="nav-link">
|
||||||
|
主页
|
||||||
|
</a></div><div class="nav-item"><a href="/cnchar/guide/" class="nav-link">
|
||||||
|
使用说明
|
||||||
|
</a></div><div class="nav-item"><a href="https://www.github.com/theajack/cnchar" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||||
|
GitHub
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="文档" class="dropdown-title"><span class="title">文档</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/cnchar/doc/cnchar.html" class="nav-link">
|
||||||
|
cnchar
|
||||||
|
</a></li><li class="dropdown-item"><!----> <a href="/cnchar/doc/poly.html" class="nav-link router-link-exact-active router-link-active">
|
||||||
|
cnchar-poly
|
||||||
|
</a></li><li class="dropdown-item"><!----> <a href="/cnchar/doc/order.html" class="nav-link">
|
||||||
|
cnchar-order
|
||||||
|
</a></li><li class="dropdown-item"><!----> <a href="/cnchar/doc/trad.html" class="nav-link">
|
||||||
|
cnchar-trad
|
||||||
|
</a></li><li class="dropdown-item"><!----> <a href="/cnchar/doc/draw.html" class="nav-link">
|
||||||
|
cnchar-draw
|
||||||
|
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="关于作者" class="dropdown-title"><span class="title">关于作者</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://www.github.com/theajack" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||||
|
GitHub地址
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="http://www.gitee.com/theajack" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||||
|
Gitee地址
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="https://blog.csdn.net/yanxiaomu" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||||
|
CSDN账号
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></div></div> <!----></nav> <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>cnchar文档</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/cnchar/doc/cnchar.html" class="sidebar-link">cnchar</a></li><li><a href="/cnchar/doc/poly.html" class="active sidebar-link">cnchar-poly</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/cnchar/doc/poly.html#_1-介绍" class="sidebar-link">1. 介绍</a></li><li class="sidebar-sub-header"><a href="/cnchar/doc/poly.html#_2-实例" class="sidebar-link">2. 实例</a></li></ul></li><li><a href="/cnchar/doc/order.html" class="sidebar-link">cnchar-order</a></li><li><a href="/cnchar/doc/trad.html" class="sidebar-link">cnchar-trad</a></li><li><a href="/cnchar/doc/draw.html" class="sidebar-link">cnchar-draw</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h2 id="_1-介绍"><a href="#_1-介绍" class="header-anchor">#</a> 1. 介绍</h2> <p><code>cnchar-poly</code> 库是用于支持多音词的库，该库本身并不提供新的api</p> <p>引入该库之后，<code>cnchar.spell()</code> 方法才会支持多音词，否则对于多音字会返回默认读音</p> <p>npm安装</p> <div class="language- extra-class"><pre class="language-text"><code>npm i cnchar-poly
|
||||||
|
</code></pre></div><p>cdn使用</p> <div><pre><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/cnchar-poly/cnchar.poly.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre></div> <p>使用</p> <div><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> cnchar <span class="hljs-keyword">from</span> <span class="hljs-string">'cnchar'</span>;
|
||||||
|
<span class="hljs-keyword">import</span> poly <span class="hljs-keyword">from</span> <span class="hljs-string">'cnchar-poly'</span>;
|
||||||
|
cnchar.use(poly); <span class="hljs-comment">// use 在浏览器环境中非必须</span></code></pre></div> <h2 id="_2-实例"><a href="#_2-实例" class="header-anchor">#</a> 2. 实例</h2> <p>以下演示几个多音词的例子</p> <p><div class="code-box" data-v-54d15265><div data-v-54d15265><span class="code-title" data-v-54d15265>poly</span> <span class="code-desc" data-v-54d15265></span> <i title="在线运行" class="ei-play code-btn" data-v-54d15265></i> <i title="复制代码" class="ei-copy code-btn" data-v-54d15265></i></div> <pre data-v-54d15265><code class="hljs"></code></pre> <div style="display:none;" data-v-54d15265><div class="output-title" data-v-54d15265>运行结果</div> <div class="output-area" data-v-54d15265><div class="show-toggle" data-v-54d15265><i class="ei-angle-up" data-v-54d15265></i> <span class="show-text" data-v-54d15265>隐藏结果</span></div> <div style="display:;" data-v-54d15265></div></div></div> <div class="powered-by" data-v-54d15265>
|
||||||
|
Powered by <a target="view_window" href="https://github.com/theajack/jsbox" class="jsbox-link" data-v-54d15265><i class="ei-cube-alt" data-v-54d15265></i> JSBox</a></div></div></p> <p>由于多音词依赖分词与词库，且cnchar是一个静态的js库，所以可能会有诸多不准确的读音</p> <p>如果遇到不准缺的多音词，欢迎提<a href="https://github.com/theajack/cnchar/issues/new" target="_blank" rel="noopener noreferrer">issue或pr<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">最后更新于:</span> <span class="time">4/12/2020, 10:44:57 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
|
||||||
|
←
|
||||||
|
<a href="/cnchar/doc/cnchar.html" class="prev">
|
||||||
|
cnchar
|
||||||
|
</a></span> <span class="next"><a href="/cnchar/doc/order.html">
|
||||||
|
cnchar-order
|
||||||
|
</a>
|
||||||
|
→
|
||||||
|
</span></p></div> </main></div><div class="global-ui"><!----><div></div></div></div>
|
||||||
|
<script src="/cnchar/assets/js/app.6c180d28.js" defer></script><script src="/cnchar/assets/js/2.338d50e2.js" defer></script><script src="/cnchar/assets/js/13.1d748f12.js" defer></script><script src="/cnchar/assets/js/3.2c7a4c6e.js" defer></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,86 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en-US">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||||
|
<title>1. 介绍 | cnchar</title>
|
||||||
|
<meta name="description" content="功能全面、多端支持的汉字拼音笔画js库">
|
||||||
|
<meta name="generator" content="VuePress 1.4.0">
|
||||||
|
<link rel="icon" href="https://cdn.jsdelivr.net/gh/theajack/cnchar/docs/assets/v1/images/i.ico">
|
||||||
|
|
||||||
|
<link rel="preload" href="/cnchar/assets/css/0.styles.0b7d8c5e.css" as="style"><link rel="preload" href="/cnchar/assets/js/app.6c180d28.js" as="script"><link rel="preload" href="/cnchar/assets/js/2.338d50e2.js" as="script"><link rel="preload" href="/cnchar/assets/js/14.92555999.js" as="script"><link rel="preload" href="/cnchar/assets/js/3.2c7a4c6e.js" as="script"><link rel="prefetch" href="/cnchar/assets/js/10.6983a4ff.js"><link rel="prefetch" href="/cnchar/assets/js/11.94c125ca.js"><link rel="prefetch" href="/cnchar/assets/js/12.9efd22de.js"><link rel="prefetch" href="/cnchar/assets/js/13.1d748f12.js"><link rel="prefetch" href="/cnchar/assets/js/15.5320422e.js"><link rel="prefetch" href="/cnchar/assets/js/16.c77f70e0.js"><link rel="prefetch" href="/cnchar/assets/js/17.01fbc09e.js"><link rel="prefetch" href="/cnchar/assets/js/18.b6c135fb.js"><link rel="prefetch" href="/cnchar/assets/js/19.421f793f.js"><link rel="prefetch" href="/cnchar/assets/js/20.4c918771.js"><link rel="prefetch" href="/cnchar/assets/js/21.8c24635f.js"><link rel="prefetch" href="/cnchar/assets/js/4.803cde81.js"><link rel="prefetch" href="/cnchar/assets/js/5.af5c9155.js"><link rel="prefetch" href="/cnchar/assets/js/6.37ec8c51.js"><link rel="prefetch" href="/cnchar/assets/js/7.576e924c.js"><link rel="prefetch" href="/cnchar/assets/js/8.716a2d5f.js"><link rel="prefetch" href="/cnchar/assets/js/9.5b3a4467.js">
|
||||||
|
<link rel="stylesheet" href="/cnchar/assets/css/0.styles.0b7d8c5e.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/cnchar/" class="home-link router-link-active"><!----> <span class="site-name">cnchar</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/cnchar/" class="nav-link">
|
||||||
|
主页
|
||||||
|
</a></div><div class="nav-item"><a href="/cnchar/guide/" class="nav-link">
|
||||||
|
使用说明
|
||||||
|
</a></div><div class="nav-item"><a href="https://www.github.com/theajack/cnchar" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||||
|
GitHub
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="文档" class="dropdown-title"><span class="title">文档</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/cnchar/doc/cnchar.html" class="nav-link">
|
||||||
|
cnchar
|
||||||
|
</a></li><li class="dropdown-item"><!----> <a href="/cnchar/doc/poly.html" class="nav-link">
|
||||||
|
cnchar-poly
|
||||||
|
</a></li><li class="dropdown-item"><!----> <a href="/cnchar/doc/order.html" class="nav-link">
|
||||||
|
cnchar-order
|
||||||
|
</a></li><li class="dropdown-item"><!----> <a href="/cnchar/doc/trad.html" class="nav-link router-link-exact-active router-link-active">
|
||||||
|
cnchar-trad
|
||||||
|
</a></li><li class="dropdown-item"><!----> <a href="/cnchar/doc/draw.html" class="nav-link">
|
||||||
|
cnchar-draw
|
||||||
|
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="关于作者" class="dropdown-title"><span class="title">关于作者</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://www.github.com/theajack" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||||
|
GitHub地址
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="http://www.gitee.com/theajack" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||||
|
Gitee地址
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="https://blog.csdn.net/yanxiaomu" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||||
|
CSDN账号
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/cnchar/" class="nav-link">
|
||||||
|
主页
|
||||||
|
</a></div><div class="nav-item"><a href="/cnchar/guide/" class="nav-link">
|
||||||
|
使用说明
|
||||||
|
</a></div><div class="nav-item"><a href="https://www.github.com/theajack/cnchar" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||||
|
GitHub
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="文档" class="dropdown-title"><span class="title">文档</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/cnchar/doc/cnchar.html" class="nav-link">
|
||||||
|
cnchar
|
||||||
|
</a></li><li class="dropdown-item"><!----> <a href="/cnchar/doc/poly.html" class="nav-link">
|
||||||
|
cnchar-poly
|
||||||
|
</a></li><li class="dropdown-item"><!----> <a href="/cnchar/doc/order.html" class="nav-link">
|
||||||
|
cnchar-order
|
||||||
|
</a></li><li class="dropdown-item"><!----> <a href="/cnchar/doc/trad.html" class="nav-link router-link-exact-active router-link-active">
|
||||||
|
cnchar-trad
|
||||||
|
</a></li><li class="dropdown-item"><!----> <a href="/cnchar/doc/draw.html" class="nav-link">
|
||||||
|
cnchar-draw
|
||||||
|
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="关于作者" class="dropdown-title"><span class="title">关于作者</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://www.github.com/theajack" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||||
|
GitHub地址
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="http://www.gitee.com/theajack" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||||
|
Gitee地址
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="https://blog.csdn.net/yanxiaomu" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||||
|
CSDN账号
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></div></div> <!----></nav> <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>cnchar文档</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/cnchar/doc/cnchar.html" class="sidebar-link">cnchar</a></li><li><a href="/cnchar/doc/poly.html" class="sidebar-link">cnchar-poly</a></li><li><a href="/cnchar/doc/order.html" class="sidebar-link">cnchar-order</a></li><li><a href="/cnchar/doc/trad.html" class="active sidebar-link">cnchar-trad</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/cnchar/doc/trad.html#_1-介绍" class="sidebar-link">1. 介绍</a></li><li class="sidebar-sub-header"><a href="/cnchar/doc/trad.html#_2-繁体字支持" class="sidebar-link">2. 繁体字支持</a></li><li class="sidebar-sub-header"><a href="/cnchar/doc/trad.html#_3-字体转换-convert" class="sidebar-link">3. 字体转换(convert)</a></li></ul></li><li><a href="/cnchar/doc/draw.html" class="sidebar-link">cnchar-draw</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h2 id="_1-介绍"><a href="#_1-介绍" class="header-anchor">#</a> 1. 介绍</h2> <p><code>cnchar-trad</code> 库是用于繁体字，除此之外，该库还提供繁体、简体、火星文之间的相互转换</p> <p>引入该库之后，cnchar的所有api都支持 <code>simple</code>和<code>trad</code>参数，用于只使用简体或繁体，默认两种字体都使用</p> <p>npm安装</p> <div class="language- extra-class"><pre class="language-text"><code>npm i cnchar-trad
|
||||||
|
</code></pre></div><p>cdn使用</p> <div><pre><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/cnchar-trad/cnchar.trad.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre></div> <p>使用</p> <div><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> cnchar <span class="hljs-keyword">from</span> <span class="hljs-string">'cnchar'</span>;
|
||||||
|
<span class="hljs-keyword">import</span> trad <span class="hljs-keyword">from</span> <span class="hljs-string">'cnchar-trad'</span>;
|
||||||
|
cnchar.use(trad); <span class="hljs-comment">// use 在浏览器环境中非必须</span></code></pre></div> <h2 id="_2-繁体字支持"><a href="#_2-繁体字支持" class="header-anchor">#</a> 2. 繁体字支持</h2> <p>以下演示几个繁体字支持的例子</p> <p><div class="code-box" data-v-54d15265><div data-v-54d15265><span class="code-title" data-v-54d15265>trad</span> <span class="code-desc" data-v-54d15265></span> <i title="在线运行" class="ei-play code-btn" data-v-54d15265></i> <i title="复制代码" class="ei-copy code-btn" data-v-54d15265></i></div> <pre data-v-54d15265><code class="hljs"></code></pre> <div style="display:none;" data-v-54d15265><div class="output-title" data-v-54d15265>运行结果</div> <div class="output-area" data-v-54d15265><div class="show-toggle" data-v-54d15265><i class="ei-angle-up" data-v-54d15265></i> <span class="show-text" data-v-54d15265>隐藏结果</span></div> <div style="display:;" data-v-54d15265></div></div></div> <div class="powered-by" data-v-54d15265>
|
||||||
|
Powered by <a target="view_window" href="https://github.com/theajack/jsbox" class="jsbox-link" data-v-54d15265><i class="ei-cube-alt" data-v-54d15265></i> JSBox</a></div></div></p> <h2 id="_3-字体转换-convert"><a href="#_3-字体转换-convert" class="header-anchor">#</a> 3. 字体转换(convert)</h2> <p>引入 cnchar-trad 库之后，在cnchar上会生成一个 <code>convert</code> 对象，功能是支持字体转换，另外在string.prototype 上也会附加上对应的方法，用法如下：</p> <div><pre><code class="hljs javascript">cnchar.convert.simpleToTrad(string); <span class="hljs-comment">// 简体 => 繁体</span>
|
||||||
|
cnchar.convert.simpleToSpark(string); <span class="hljs-comment">// 简体 => 火星文</span>
|
||||||
|
cnchar.convert.tradToSimple(string); <span class="hljs-comment">// 繁体 => 简体</span>
|
||||||
|
cnchar.convert.tradToSpark(string); <span class="hljs-comment">// 繁体 => 火星文</span>
|
||||||
|
cnchar.convert.sparkToSimple(string); <span class="hljs-comment">// 火星文 => 简体</span>
|
||||||
|
cnchar.convert.sparkToTrad(string); <span class="hljs-comment">// 火星文 => 繁体</span>
|
||||||
|
string.convertSimpleToTrad();
|
||||||
|
string.convertSimpleToSpark();
|
||||||
|
string.convertTradToSimple();
|
||||||
|
string.convertTradToSpark();
|
||||||
|
string.convertSparkToSimple();
|
||||||
|
string.convertSparkToTrad();</code></pre></div> <p>以下是几个实例：</p> <p><div class="code-box" data-v-54d15265><div data-v-54d15265><span class="code-title" data-v-54d15265>convert</span> <span class="code-desc" data-v-54d15265></span> <i title="在线运行" class="ei-play code-btn" data-v-54d15265></i> <i title="复制代码" class="ei-copy code-btn" data-v-54d15265></i></div> <pre data-v-54d15265><code class="hljs"></code></pre> <div style="display:none;" data-v-54d15265><div class="output-title" data-v-54d15265>运行结果</div> <div class="output-area" data-v-54d15265><div class="show-toggle" data-v-54d15265><i class="ei-angle-up" data-v-54d15265></i> <span class="show-text" data-v-54d15265>隐藏结果</span></div> <div style="display:;" data-v-54d15265></div></div></div> <div class="powered-by" data-v-54d15265>
|
||||||
|
Powered by <a target="view_window" href="https://github.com/theajack/jsbox" class="jsbox-link" data-v-54d15265><i class="ei-cube-alt" data-v-54d15265></i> JSBox</a></div></div></p></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">最后更新于:</span> <span class="time">4/12/2020, 10:44:57 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
|
||||||
|
←
|
||||||
|
<a href="/cnchar/doc/order.html" class="prev">
|
||||||
|
cnchar-order
|
||||||
|
</a></span> <span class="next"><a href="/cnchar/doc/draw.html">
|
||||||
|
cnchar-draw
|
||||||
|
</a>
|
||||||
|
→
|
||||||
|
</span></p></div> </main></div><div class="global-ui"><!----><div></div></div></div>
|
||||||
|
<script src="/cnchar/assets/js/app.6c180d28.js" defer></script><script src="/cnchar/assets/js/2.338d50e2.js" defer></script><script src="/cnchar/assets/js/14.92555999.js" defer></script><script src="/cnchar/assets/js/3.2c7a4c6e.js" defer></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,94 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en-US">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||||
|
<title>1. npm安装 | cnchar</title>
|
||||||
|
<meta name="description" content="功能全面、多端支持的汉字拼音笔画js库">
|
||||||
|
<meta name="generator" content="VuePress 1.4.0">
|
||||||
|
<link rel="icon" href="https://cdn.jsdelivr.net/gh/theajack/cnchar/docs/assets/v1/images/i.ico">
|
||||||
|
|
||||||
|
<link rel="preload" href="/cnchar/assets/css/0.styles.0b7d8c5e.css" as="style"><link rel="preload" href="/cnchar/assets/js/app.6c180d28.js" as="script"><link rel="preload" href="/cnchar/assets/js/2.338d50e2.js" as="script"><link rel="preload" href="/cnchar/assets/js/16.c77f70e0.js" as="script"><link rel="preload" href="/cnchar/assets/js/3.2c7a4c6e.js" as="script"><link rel="prefetch" href="/cnchar/assets/js/10.6983a4ff.js"><link rel="prefetch" href="/cnchar/assets/js/11.94c125ca.js"><link rel="prefetch" href="/cnchar/assets/js/12.9efd22de.js"><link rel="prefetch" href="/cnchar/assets/js/13.1d748f12.js"><link rel="prefetch" href="/cnchar/assets/js/14.92555999.js"><link rel="prefetch" href="/cnchar/assets/js/15.5320422e.js"><link rel="prefetch" href="/cnchar/assets/js/17.01fbc09e.js"><link rel="prefetch" href="/cnchar/assets/js/18.b6c135fb.js"><link rel="prefetch" href="/cnchar/assets/js/19.421f793f.js"><link rel="prefetch" href="/cnchar/assets/js/20.4c918771.js"><link rel="prefetch" href="/cnchar/assets/js/21.8c24635f.js"><link rel="prefetch" href="/cnchar/assets/js/4.803cde81.js"><link rel="prefetch" href="/cnchar/assets/js/5.af5c9155.js"><link rel="prefetch" href="/cnchar/assets/js/6.37ec8c51.js"><link rel="prefetch" href="/cnchar/assets/js/7.576e924c.js"><link rel="prefetch" href="/cnchar/assets/js/8.716a2d5f.js"><link rel="prefetch" href="/cnchar/assets/js/9.5b3a4467.js">
|
||||||
|
<link rel="stylesheet" href="/cnchar/assets/css/0.styles.0b7d8c5e.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/cnchar/" class="home-link router-link-active"><!----> <span class="site-name">cnchar</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/cnchar/" class="nav-link">
|
||||||
|
主页
|
||||||
|
</a></div><div class="nav-item"><a href="/cnchar/guide/" class="nav-link router-link-active">
|
||||||
|
使用说明
|
||||||
|
</a></div><div class="nav-item"><a href="https://www.github.com/theajack/cnchar" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||||
|
GitHub
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="文档" class="dropdown-title"><span class="title">文档</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/cnchar/doc/cnchar.html" class="nav-link">
|
||||||
|
cnchar
|
||||||
|
</a></li><li class="dropdown-item"><!----> <a href="/cnchar/doc/poly.html" class="nav-link">
|
||||||
|
cnchar-poly
|
||||||
|
</a></li><li class="dropdown-item"><!----> <a href="/cnchar/doc/order.html" class="nav-link">
|
||||||
|
cnchar-order
|
||||||
|
</a></li><li class="dropdown-item"><!----> <a href="/cnchar/doc/trad.html" class="nav-link">
|
||||||
|
cnchar-trad
|
||||||
|
</a></li><li class="dropdown-item"><!----> <a href="/cnchar/doc/draw.html" class="nav-link">
|
||||||
|
cnchar-draw
|
||||||
|
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="关于作者" class="dropdown-title"><span class="title">关于作者</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://www.github.com/theajack" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||||
|
GitHub地址
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="http://www.gitee.com/theajack" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||||
|
Gitee地址
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="https://blog.csdn.net/yanxiaomu" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||||
|
CSDN账号
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/cnchar/" class="nav-link">
|
||||||
|
主页
|
||||||
|
</a></div><div class="nav-item"><a href="/cnchar/guide/" class="nav-link router-link-active">
|
||||||
|
使用说明
|
||||||
|
</a></div><div class="nav-item"><a href="https://www.github.com/theajack/cnchar" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||||
|
GitHub
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="文档" class="dropdown-title"><span class="title">文档</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/cnchar/doc/cnchar.html" class="nav-link">
|
||||||
|
cnchar
|
||||||
|
</a></li><li class="dropdown-item"><!----> <a href="/cnchar/doc/poly.html" class="nav-link">
|
||||||
|
cnchar-poly
|
||||||
|
</a></li><li class="dropdown-item"><!----> <a href="/cnchar/doc/order.html" class="nav-link">
|
||||||
|
cnchar-order
|
||||||
|
</a></li><li class="dropdown-item"><!----> <a href="/cnchar/doc/trad.html" class="nav-link">
|
||||||
|
cnchar-trad
|
||||||
|
</a></li><li class="dropdown-item"><!----> <a href="/cnchar/doc/draw.html" class="nav-link">
|
||||||
|
cnchar-draw
|
||||||
|
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="关于作者" class="dropdown-title"><span class="title">关于作者</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://www.github.com/theajack" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||||
|
GitHub地址
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="http://www.gitee.com/theajack" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||||
|
Gitee地址
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="https://blog.csdn.net/yanxiaomu" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||||
|
CSDN账号
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></div></div> <!----></nav> <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>使用说明</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/cnchar/guide/" class="sidebar-link">简介</a></li><li><a href="/cnchar/guide/start.html" class="active sidebar-link">快速上手</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/cnchar/guide/start.html#_1-npm安装" class="sidebar-link">1. npm安装</a></li><li class="sidebar-sub-header"><a href="/cnchar/guide/start.html#_2-cdn引用" class="sidebar-link">2. CDN引用</a></li><li class="sidebar-sub-header"><a href="/cnchar/guide/start.html#_3-cnchar-all" class="sidebar-link">3. cnchar-all</a></li><li class="sidebar-sub-header"><a href="/cnchar/guide/start.html#_4-简单使用" class="sidebar-link">4. 简单使用</a></li></ul></li><li><a href="/cnchar/guide/version.html" class="sidebar-link">更新日志</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h2 id="_1-npm安装"><a href="#_1-npm安装" class="header-anchor">#</a> 1. npm安装</h2> <p>cnchar包含了一个基本库和四个功能库，用于实现不同的功能，您可以按需安装其中的功能库，但是 <code>cnchar</code> 这个基础库是必须安装的</p> <p>安装<a href="https://npmjs.com/package/cnchar" target="_blank" rel="noopener noreferrer">主库<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>：</p> <div class="language- extra-class"><pre class="language-text"><code>npm i cnchar
|
||||||
|
</code></pre></div><p>按需安装功能库：</p> <div class="language- extra-class"><pre class="language-text"><code>npm i cnchar-poly cnchar-order cnchar-trad cnchar-draw
|
||||||
|
</code></pre></div><p>浏览器环境中功能库可以直接使用：</p> <div><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> cnchar <span class="hljs-keyword">from</span> <span class="hljs-string">'cnchar'</span>;
|
||||||
|
<span class="hljs-comment">// 以下功能库请按需使用</span>
|
||||||
|
<span class="hljs-keyword">import</span> <span class="hljs-string">'cnchar-poly'</span>;
|
||||||
|
<span class="hljs-keyword">import</span> <span class="hljs-string">'cnchar-order'</span>;
|
||||||
|
<span class="hljs-keyword">import</span> <span class="hljs-string">'cnchar-trad'</span>;
|
||||||
|
<span class="hljs-keyword">import</span> <span class="hljs-string">'cnchar-draw'</span>;</code></pre></div> <p>非浏览器环境中功能库需要使用use方法加载，且不支持 <code>cnchar-draw</code> 库：</p> <div><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> cnchar <span class="hljs-keyword">from</span> <span class="hljs-string">'cnchar'</span>;
|
||||||
|
<span class="hljs-comment">// 以下功能库请按需使用</span>
|
||||||
|
<span class="hljs-keyword">import</span> poly <span class="hljs-keyword">from</span> <span class="hljs-string">'cnchar-poly'</span>;
|
||||||
|
<span class="hljs-keyword">import</span> order <span class="hljs-keyword">from</span> <span class="hljs-string">'cnchar-order'</span>;
|
||||||
|
<span class="hljs-keyword">import</span> trad <span class="hljs-keyword">from</span> <span class="hljs-string">'cnchar-trad'</span>;
|
||||||
|
cnchar.use(poly, order, trad);</code></pre></div> <p>commonjs 模块</p> <div><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> cnchar = <span class="hljs-built_in">require</span>(<span class="hljs-string">'cnchar'</span>);
|
||||||
|
<span class="hljs-comment">// 以下功能库请按需使用</span>
|
||||||
|
<span class="hljs-keyword">var</span> poly = <span class="hljs-built_in">require</span>(<span class="hljs-string">'cnchar-poly'</span>);
|
||||||
|
<span class="hljs-keyword">var</span> order = <span class="hljs-built_in">require</span>(<span class="hljs-string">'cnchar-order'</span>);
|
||||||
|
<span class="hljs-keyword">var</span> trad = <span class="hljs-built_in">require</span>(<span class="hljs-string">'cnchar-trad'</span>);
|
||||||
|
cnchar.use(poly, order, trad);</code></pre></div> <h2 id="_2-cdn引用"><a href="#_2-cdn引用" class="header-anchor">#</a> 2. CDN引用</h2> <p>使用 script 标签使用：</p> <div><pre><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/cnchar/cnchar.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
|
||||||
|
<span class="hljs-comment"><!--以下功能库请按需使用--></span>
|
||||||
|
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/cnchar-poly/cnchar.poly.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
|
||||||
|
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/cnchar-order/cnchar.order.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
|
||||||
|
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/cnchar-trad/cnchar.trad.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
|
||||||
|
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/cnchar-draw/cnchar.draw.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre></div> <h2 id="_3-cnchar-all"><a href="#_3-cnchar-all" class="header-anchor">#</a> 3. cnchar-all</h2> <p>如果您需要使用cnchar及其插件的所有功能，可以通过安装<code>cnchar-all</code>来使用完整功能，这个库引用了上面的五个库</p> <div class="language- extra-class"><pre class="language-text"><code>npm i cnchar-all
|
||||||
|
</code></pre></div><p>commonjs 模块</p> <div><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> cnchar <span class="hljs-keyword">from</span> <span class="hljs-string">'cnchar-all'</span>;</code></pre></div> <p>cdn方式</p> <div><pre><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/cnchar-all/cnchar.all.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre></div> <h2 id="_4-简单使用"><a href="#_4-简单使用" class="header-anchor">#</a> 4. 简单使用</h2> <p>cnchar 具有两个最核心的方法<code>spell</code> 和 <code>stroke</code>，分别用于获取汉字的拼音和笔画数：</p> <p><div class="code-box" data-v-54d15265><div data-v-54d15265><span class="code-title" data-v-54d15265>spell/stroke</span> <span class="code-desc" data-v-54d15265></span> <i title="在线运行" class="ei-play code-btn" data-v-54d15265></i> <i title="复制代码" class="ei-copy code-btn" data-v-54d15265></i></div> <pre data-v-54d15265><code class="hljs"></code></pre> <div style="display:none;" data-v-54d15265><div class="output-title" data-v-54d15265>运行结果</div> <div class="output-area" data-v-54d15265><div class="show-toggle" data-v-54d15265><i class="ei-angle-up" data-v-54d15265></i> <span class="show-text" data-v-54d15265>隐藏结果</span></div> <div style="display:;" data-v-54d15265></div></div></div> <div class="powered-by" data-v-54d15265>
|
||||||
|
Powered by <a target="view_window" href="https://github.com/theajack/jsbox" class="jsbox-link" data-v-54d15265><i class="ei-cube-alt" data-v-54d15265></i> JSBox</a></div></div></p> <p>这只是一个最简单的使用，这两个方法具有很多参数可选，具体请参阅 <a href="">cnchar</a> 部分</p></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">最后更新于:</span> <span class="time">4/12/2020, 10:44:57 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
|
||||||
|
←
|
||||||
|
<a href="/cnchar/guide/" class="prev router-link-active">
|
||||||
|
简介
|
||||||
|
</a></span> <span class="next"><a href="/cnchar/guide/version.html">
|
||||||
|
更新日志
|
||||||
|
</a>
|
||||||
|
→
|
||||||
|
</span></p></div> </main></div><div class="global-ui"><!----><div></div></div></div>
|
||||||
|
<script src="/cnchar/assets/js/app.6c180d28.js" defer></script><script src="/cnchar/assets/js/2.338d50e2.js" defer></script><script src="/cnchar/assets/js/16.c77f70e0.js" defer></script><script src="/cnchar/assets/js/3.2c7a4c6e.js" defer></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,169 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
||||||
|
|
||||||
|
var version = '@2.1.3';
|
||||||
|
var jsbox_config = {
|
||||||
|
libs: {
|
||||||
|
'cnchar': "https://cdn.jsdelivr.net/npm/cnchar".concat(version, "/cnchar.min.js"),
|
||||||
|
'poly': "https://cdn.jsdelivr.net/npm/cnchar-poly".concat(version, "/cnchar.poly.min.js"),
|
||||||
|
'order': "https://cdn.jsdelivr.net/npm/cnchar-order".concat(version, "/cnchar.order.min.js"),
|
||||||
|
'trad': "https://cdn.jsdelivr.net/npm/cnchar-trad".concat(version, "/cnchar.trad.min.js"),
|
||||||
|
'draw': "https://cdn.jsdelivr.net/npm/cnchar-draw".concat(version, "/cnchar.draw.min.js"),
|
||||||
|
'all': "https://cdn.jsdelivr.net/npm/cnchar-all".concat(version, "/cnchar.all.min.js")
|
||||||
|
},
|
||||||
|
codes: {
|
||||||
|
//
|
||||||
|
'easy-use': {
|
||||||
|
code: "let spell = cnchar.spell('\u4F60\u597D');\nlet stroke = cnchar.stroke('\u4F60\u597D');\nconsole.log(spell, stroke);",
|
||||||
|
desc: 'spell和stroke简单演示',
|
||||||
|
dep: ['cnchar']
|
||||||
|
},
|
||||||
|
'spell': {
|
||||||
|
code:
|
||||||
|
/* javascript*/
|
||||||
|
"var spell1 = cnchar.spell(\"\u4F60\u597D\", \"array\", \"tone\", \"poly\"); // \u6570\u7EC4\u5206\u5272\u3001\u5E26\u97F3\u8C03\u3001\u5019\u9009\u591A\u97F3\u5B57\nvar spell2 = cnchar.spell('\u6C49\u5B57\u62FC\u97F3','first', 'low'); // \u9996\u5B57\u6BCD\u5C0F\u5199\nvar spell3 = cnchar.spell('\u9577\u57CE'); // \u652F\u6301\u7E41\u4F53\u5B57\uFF08\u4F9D\u8D56cnchar-trad\u5E93\uFF09\nvar spell4 = cnchar.spell('\u9577\u57CE','simple'); // \u7981\u7528\u7E41\u4F53\u5B57\u62FC\u97F3\nvar spell5 = \"\u4F60\u597D\".spell(); // string prototype \u8C03\u7528\nconsole.log(spell1);\nconsole.log(spell2);\nconsole.log(spell3);\nconsole.log(spell4);\nconsole.log(spell5);",
|
||||||
|
desc: 'spell方法参数演示',
|
||||||
|
dep: ['cnchar', 'trad']
|
||||||
|
},
|
||||||
|
'stroke': {
|
||||||
|
code:
|
||||||
|
/* javascript*/
|
||||||
|
"var stroke1 = cnchar.stroke('\u6C49\u5B57\u7B14\u5212', 'array'); // \u6570\u7EC4\u5206\u5272\nvar stroke2 = cnchar.stroke(\"\u4F60\u597D\", \"order\", \"name\"); // \u6570\u7EC4\u5206\u5272\u3001\u542F\u7528\u7B14\u5212\uFF08\u4F9D\u8D56cnchar-order\u5E93\uFF09\nvar stroke3 = cnchar.stroke('\u9577\u57CE', 'array'); // \u652F\u6301\u7E41\u4F53\u5B57\uFF08\u4F9D\u8D56cnchar-trad\u5E93\uFF09\nvar stroke4 = cnchar.stroke('\u9577\u57CE', 'simple', 'array'); // \u7981\u7528\u7E41\u4F53\u5B57\u7B14\u5212\u6570\nvar stroke5 = \"\u4F60\u597D\".stroke(); // string prototype \u8C03\u7528\nconsole.log(stroke1);\nconsole.log(stroke2);\nconsole.log(stroke3);\nconsole.log(stroke4);\nconsole.log(stroke5);",
|
||||||
|
desc: 'stroke方法参数演示',
|
||||||
|
dep: ['cnchar', 'order', 'trad']
|
||||||
|
},
|
||||||
|
'type': {
|
||||||
|
code:
|
||||||
|
/* javascript*/
|
||||||
|
"var spellArg = cnchar.type.spell;\nvar strokeArg = cnchar.type.stroke;\nvar orderToWordArg = cnchar.type.orderToWord;\nvar spellToWordArg = cnchar.type.spellToWord;\nvar strokeToWordArg = cnchar.type.strokeToWord;\nconsole.log(Object.values(spellArg));\nconsole.log(Object.values(strokeArg));\nconsole.log(Object.values(orderToWordArg));\nconsole.log(Object.values(spellToWordArg));\nconsole.log(Object.values(strokeToWordArg));",
|
||||||
|
dep: ['cnchar', 'order'],
|
||||||
|
desc: '所有可用的参数演示'
|
||||||
|
},
|
||||||
|
'version': {
|
||||||
|
code: "var version = cnchar.version; // string \u7C7B\u578B\nconsole.log(version);",
|
||||||
|
dep: ['cnchar'],
|
||||||
|
desc: '版本号演示'
|
||||||
|
},
|
||||||
|
'plugins': {
|
||||||
|
code: "var plugins = cnchar.plugins; // array \u7C7B\u578B\nconsole.log(plugins);",
|
||||||
|
dep: ['cnchar'],
|
||||||
|
desc: '当前使用的功能库列表'
|
||||||
|
},
|
||||||
|
'spellToWord': {
|
||||||
|
code:
|
||||||
|
/* javascript*/
|
||||||
|
"var word1 = cnchar.spellToWord('sh\xE0ng'); // \u67E5\u8BE2sh\xE0ng\u7684\u6240\u6709\u6C49\u5B57\nvar word2 = cnchar.spellToWord('lv2');// v\u8868\u793A\xFC\uFF0C\u6570\u5B57\u8868\u793A\u97F3\u8C03\nvar word3 = cnchar.spellToWord('sh\xE0ng', 'alltone'); // \u652F\u6301\u6240\u6709\u97F3\u8C03\nvar word4 = cnchar.spellToWord('shang4', 'alltone', 'trad'); // \u53EA\u8FD4\u56DE\u7E41\u4F53\u5B57\nvar word5 = cnchar.spellToWord('lv2', 'simple'); // \u53EA\u8FD4\u56DE\u7B80\u4F53\u5B57\nconsole.log(word1);\nconsole.log(word2);\nconsole.log(word3);\nconsole.log(word4);\nconsole.log(word5);",
|
||||||
|
dep: ['cnchar', 'trad'],
|
||||||
|
desc: '通过拼音查询原汉字'
|
||||||
|
},
|
||||||
|
'strokeToWord': {
|
||||||
|
code:
|
||||||
|
/* javascript*/
|
||||||
|
"var word1 = cnchar.strokeToWord(25); // \u67E5\u8BE225\u753B\u7684\u6240\u6709\u6C49\u5B57\nvar word2 = cnchar.strokeToWord(25, 'simple'); // \u53EA\u8FD4\u56DE\u7B80\u4F53\u5B57\nvar word3 = cnchar.strokeToWord(25, 'trad'); // \u53EA\u8FD4\u56DE\u7E41\u4F53\u5B57\nvar word4 = cnchar.strokeToWord(1, 'array'); // \u6570\u7EC4\u5206\u5272\nconsole.log(word1);\nconsole.log(word2);\nconsole.log(word3);\nconsole.log(word4);",
|
||||||
|
dep: ['cnchar', 'trad'],
|
||||||
|
desc: '通过笔画数查询原汉字'
|
||||||
|
},
|
||||||
|
'spellInfo': {
|
||||||
|
code:
|
||||||
|
/* javascript*/
|
||||||
|
"cnchar.spellInfo('Sh\xE0ng')",
|
||||||
|
dep: ['cnchar'],
|
||||||
|
desc: '查询拼音信息'
|
||||||
|
},
|
||||||
|
'initials': {
|
||||||
|
code:
|
||||||
|
/* javascript*/
|
||||||
|
"var initials = cnchar.spellInfo.initials;\nconsole.log(initials);",
|
||||||
|
dep: ['cnchar'],
|
||||||
|
desc: '获取所有声母'
|
||||||
|
},
|
||||||
|
'tones': {
|
||||||
|
code:
|
||||||
|
/* javascript*/
|
||||||
|
"var tones = cnchar.spellInfo.tones;\nconsole.log(tones);",
|
||||||
|
dep: ['cnchar'],
|
||||||
|
desc: '获取所有音调'
|
||||||
|
},
|
||||||
|
'poly': {
|
||||||
|
code:
|
||||||
|
/* javascript*/
|
||||||
|
"var spell1 = cnchar.spell('\u957F\u5927\u53BB\u957F\u57CE', 'tone', 'array');\nvar spell2 = cnchar.spell('\u559C\u597D\u7F8E\u597D\u7684\u4E8B\u7269', 'tone', 'array');\nconsole.log(spell1);\nconsole.log(spell2);",
|
||||||
|
dep: ['cnchar', 'poly'],
|
||||||
|
desc: '多音词实例'
|
||||||
|
},
|
||||||
|
'order': {
|
||||||
|
code:
|
||||||
|
/* javascript*/
|
||||||
|
"var order1 = cnchar.stroke('\u4F60\u597D', 'order'); // \u9ED8\u8BA4\u6A21\u5F0F\u662F letter\nvar order2 = cnchar.stroke('\u4F60\u597D', 'order', 'detail');\nvar order3 = cnchar.stroke('\u4F60\u597D', 'order', 'shape');\nvar order4 = cnchar.stroke('\u4F60\u597D', 'order', 'name');\nvar order5 = cnchar.stroke('\u4F60\u597D', 'order', 'count');\nconsole.log('\u5B57\u6BCD\u6A21\u5F0F\uFF1A', order1);\nconsole.log('\u8BE6\u60C5\u6A21\u5F0F\uFF1A', order2);\nconsole.log('\u7B14\u5212\u5F62\u72B6\u6A21\u5F0F\uFF1A', order3);\nconsole.log('\u7B14\u5212\u540D\u79F0\u6A21\u5F0F\uFF1A', order4);\nconsole.log('\u7B14\u5212\u6570\u6A21\u5F0F\uFF1A', order5);",
|
||||||
|
dep: ['cnchar', 'order'],
|
||||||
|
desc: '汉字笔顺演示'
|
||||||
|
},
|
||||||
|
'orderToWord': {
|
||||||
|
code:
|
||||||
|
/* javascript*/
|
||||||
|
"var orders = ['\u6A2A', '\u6487', '\u637A'];\nvar char1 = cnchar.orderToWord(orders); // \u9ED8\u8BA4\u4F7F\u7528 \u5168\u5339\u914D\nvar char2 = cnchar.orderToWord(orders, 'array'); // \u6570\u7EC4\u5206\u5272\nvar char3 = cnchar.orderToWord(orders, 'start'); // \u5339\u914D\u5F00\u5934\nvar char4 = cnchar.orderToWord(orders, 'start', 'simple'); // \u53EA\u5339\u914D\u7B80\u4F53\nvar char5 = cnchar.orderToWord(orders, 'start', 'trad'); // \u53EA\u5339\u914D\u7E41\u4F53\nvar char6 = cnchar.orderToWord(orders, 'contain'); // \u5339\u914D\u542B\u6709\u7B14\u5E8F\u4E2D\u6240\u6709\u7B14\u753B\u7684\u6C49\u5B57\nvar char7 = cnchar.orderToWord(orders, 'matchorder'); // \u5339\u914D\u542B\u6709\u7B14\u5E8F\u4E2D\u6240\u6709\u7B14\u753B\u7684\u6C49\u5B57\u4E14\u5148\u540E\u987A\u5E8F\u4E00\u81F4\nvar char8 = cnchar.orderToWord(orders, 'match'); // \u5339\u914D\u542B\u6709\u8BE5\u7B14\u5E8F\u7684\u6C49\u5B57\nconsole.log(char1);\nconsole.log(char2);\nconsole.log(char3);\nconsole.log(char4);\nconsole.log(char5);\nconsole.log(char6);\nconsole.log(char7);\nconsole.log(char8);",
|
||||||
|
dep: ['cnchar', 'order', 'trad'],
|
||||||
|
desc: '汉字笔顺演示'
|
||||||
|
},
|
||||||
|
'orders': {
|
||||||
|
code:
|
||||||
|
/* javascript*/
|
||||||
|
"var orders = cnchar.orderToWord.orders;\nconsole.log(orders);",
|
||||||
|
dep: ['cnchar', 'order'],
|
||||||
|
desc: '汉字所有笔划'
|
||||||
|
},
|
||||||
|
'trad': {
|
||||||
|
code:
|
||||||
|
/* javascript*/
|
||||||
|
"var result1 = cnchar.spell('\u9577\u57CE', 'array');\nvar result2 = cnchar.spell('\u9577\u57CE', 'array', 'simple'); // \u53EA\u67E5\u8BE2\u7B80\u4F53\nvar result3 = cnchar.stroke('\u9577\u57CE', 'array');\nvar result4 = cnchar.stroke('\u9577\u57CE', 'array', 'simple');\nconsole.log(result1);\nconsole.log(result2);\nconsole.log(result3);\nconsole.log(result4);",
|
||||||
|
dep: ['cnchar', 'trad'],
|
||||||
|
desc: '繁体字支持'
|
||||||
|
},
|
||||||
|
'convert': {
|
||||||
|
code:
|
||||||
|
/* javascript*/
|
||||||
|
"var char1 = cnchar.convert.simpleToTrad('\u4E00\u4E2A\u4EBA');// \u7B49\u4EF7\u4E8E '\u4E00\u4E2A\u4EBA'.convertSimpleToTrad()\nvar char2 = cnchar.convert.simpleToSpark('\u4E00\u4E2A\u4EBA');\nvar char3 = cnchar.convert.tradToSimple('\u58F9\u500B\u4EBA');\nvar char4 = cnchar.convert.tradToSpark('\u58F9\u500B\u4EBA');\nvar char5 = cnchar.convert.sparkToSimple('\u2460\u4E2A\u4EBE');\nvar char6 = cnchar.convert.sparkToTrad('\u2460\u4E2A\u4EBE');\nconsole.log(char1);\nconsole.log(char2);\nconsole.log(char3);\nconsole.log(char4);\nconsole.log(char5);\nconsole.log(char6);",
|
||||||
|
dep: ['cnchar', 'trad'],
|
||||||
|
desc: '字体转换实例'
|
||||||
|
},
|
||||||
|
'normal-draw': {
|
||||||
|
lang: 'html',
|
||||||
|
code:
|
||||||
|
/* html*/
|
||||||
|
"<div id='drawNormal'></div>\n<script>\n cnchar.draw('\u4F60\u597D',{\n el: '#drawNormal'\n })\n</script>",
|
||||||
|
dep: ['cnchar', 'draw'],
|
||||||
|
desc: '常规绘制模式示例'
|
||||||
|
},
|
||||||
|
'stroke-draw': {
|
||||||
|
lang: 'html',
|
||||||
|
code:
|
||||||
|
/* html*/
|
||||||
|
"<div id='drawStroke'></div>\n<script>\n cnchar.draw('\u7B14\u987A',{\n el: '#drawStroke',\n type: cnchar.draw.TYPE.STROKE\n })\n</script>",
|
||||||
|
dep: ['cnchar', 'draw'],
|
||||||
|
desc: '笔顺绘制模式示例'
|
||||||
|
},
|
||||||
|
'animation-draw': {
|
||||||
|
lang: 'html',
|
||||||
|
code:
|
||||||
|
/* html*/
|
||||||
|
"<div id='drawAnimation'></div>\n<script>\n cnchar.draw('\u52A8\u753B\u7ED8\u5236',{\n el: '#drawAnimation',\n type: cnchar.draw.TYPE.ANIMATION,\n animation:{\n loopAnimate: true\n }\n })\n</script>",
|
||||||
|
dep: ['cnchar', 'draw'],
|
||||||
|
desc: '动画绘制模式示例'
|
||||||
|
},
|
||||||
|
'test-draw': {
|
||||||
|
lang: 'html',
|
||||||
|
code:
|
||||||
|
/* html*/
|
||||||
|
"<div id='drawTest'></div>\n<script>\n cnchar.draw('\u6D4B\u9A8C',{\n el: '#drawTest',\n type: cnchar.draw.TYPE.TEST\n })\n</script>",
|
||||||
|
dep: ['cnchar', 'draw'],
|
||||||
|
desc: '测验绘制模式示例'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if ((typeof window === "undefined" ? "undefined" : _typeof(window)) === 'object') {
|
||||||
|
window.jsbox_config = jsbox_config;
|
||||||
|
} else {
|
||||||
|
module.exports = jsbox_config;
|
||||||
|
}
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
# 1.0 组件说明
|
|
||||||
|
|
@ -1,66 +0,0 @@
|
||||||
---
|
|
||||||
title: 1.0 Button 按钮
|
|
||||||
---
|
|
||||||
|
|
||||||
<!-- 说明： -->
|
|
||||||
<!-- baseComponent-codeBox 组件即为.vuepress/components/baseComponent/codeBox文件，vuepress会默认把它解析为`baseComponent-codeBox`组件; title为代码示例标题；description为代码示例说明；onlineLink为在线运行配置的网址 -->
|
|
||||||
|
|
||||||
<!-- 同理demo-catButton-type_catButton即为编写的代码示例组件 -->
|
|
||||||
|
|
||||||
<!-- highlight-code为引入的第三方代码高亮组件，里面包裹的就是上面示例组件的代码 -->
|
|
||||||
|
|
||||||
<baseComponent-codeBox title="按钮类型" description="按钮类型通过设置type为primary、success、info、warning、danger、text创建不同样式的按钮，不设置为默认样式。" onlineLink="https://codepen.io/1011cat/pen/KjEOWO">
|
|
||||||
<demo-catButton-type_catButton></demo-catButton-type_catButton>
|
|
||||||
<highlight-code slot="codeText" lang="vue">
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<cat-button text="default"></cat-button>
|
|
||||||
<cat-button text="primary" type="primary"></cat-button>
|
|
||||||
<cat-button text="success" type="success"></cat-button>
|
|
||||||
<cat-button text="info" type="info"></cat-button>
|
|
||||||
<cat-button text="warning" type="warning"></cat-button>
|
|
||||||
<cat-button text="danger" type="danger"></cat-button>
|
|
||||||
<cat-button text="text" type="text"></cat-button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
</highlight-code>
|
|
||||||
</baseComponent-codeBox>
|
|
||||||
|
|
||||||
<!-- 组件的参数表格,这里我没有使用自带的markdown表格，因为太丑，样式不好修改，有时参数描述较少时，不能自动撑满一行，所以自己写了一个组件；titile为表格标题，tableHead为表头，tableBody为具体参数设置，并且支持el-table的table参数 -->
|
|
||||||
<baseComponent-apiTable
|
|
||||||
title="Attributes"
|
|
||||||
:tableBody = "tableBody"
|
|
||||||
:tableHead = "tableHead">
|
|
||||||
</baseComponent-apiTable>
|
|
||||||
|
|
||||||
<!-- 给个star 彩蛋组件 -->
|
|
||||||
<baseComponent-star></baseComponent-star>
|
|
||||||
|
|
||||||
<!-- 第三方评论插件 -->
|
|
||||||
<Vssue title="" />
|
|
||||||
|
|
||||||
<!-- 其实在vuepress里的每个.md其实和.vue很像的，你基本可以按照vue组件模式来写 -->
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
//表头为字符串，写法和md一样，中间以`|`间隔就行
|
|
||||||
tableHead:`参数 | 说明 | 类型 | 可选值 | 默认值`,
|
|
||||||
//表头为数组，其中每一项为字符串，代表每一行要展示的数据，写法也和md一样，中间以`|`间隔就行
|
|
||||||
tableBody: [
|
|
||||||
`size | 尺寸 | String | medium / small / mini | —`,
|
|
||||||
`type | 类型 | string | primary / success / warning / danger / info / text | —`
|
|
||||||
],
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- 和vue一样，也可以设置样式，并且这里style样式只对当前md有效，不需要加上scoped -->
|
|
||||||
<style>
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,66 +0,0 @@
|
||||||
---
|
|
||||||
title: 1.0 Button 按钮
|
|
||||||
---
|
|
||||||
|
|
||||||
<!-- 说明： -->
|
|
||||||
<!-- baseComponent-codeBox 组件即为.vuepress/components/baseComponent/codeBox文件，vuepress会默认把它解析为`baseComponent-codeBox`组件; title为代码示例标题；description为代码示例说明；onlineLink为在线运行配置的网址 -->
|
|
||||||
|
|
||||||
<!-- 同理demo-catButton-type_catButton即为编写的代码示例组件 -->
|
|
||||||
|
|
||||||
<!-- highlight-code为引入的第三方代码高亮组件，里面包裹的就是上面示例组件的代码 -->
|
|
||||||
|
|
||||||
<baseComponent-codeBox title="按钮类型" description="按钮类型通过设置type为primary、success、info、warning、danger、text创建不同样式的按钮，不设置为默认样式。" onlineLink="https://codepen.io/1011cat/pen/KjEOWO">
|
|
||||||
<demo-catButton-type_catButton></demo-catButton-type_catButton>
|
|
||||||
<highlight-code slot="codeText" lang="vue">
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<cat-button text="default"></cat-button>
|
|
||||||
<cat-button text="primary" type="primary"></cat-button>
|
|
||||||
<cat-button text="success" type="success"></cat-button>
|
|
||||||
<cat-button text="info" type="info"></cat-button>
|
|
||||||
<cat-button text="warning" type="warning"></cat-button>
|
|
||||||
<cat-button text="danger" type="danger"></cat-button>
|
|
||||||
<cat-button text="text" type="text"></cat-button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
</highlight-code>
|
|
||||||
</baseComponent-codeBox>
|
|
||||||
|
|
||||||
<!-- 组件的参数表格,这里我没有使用自带的markdown表格，因为太丑，样式不好修改，有时参数描述较少时，不能自动撑满一行，所以自己写了一个组件；titile为表格标题，tableHead为表头，tableBody为具体参数设置，并且支持el-table的table参数 -->
|
|
||||||
<baseComponent-apiTable
|
|
||||||
title="Attributes"
|
|
||||||
:tableBody = "tableBody"
|
|
||||||
:tableHead = "tableHead">
|
|
||||||
</baseComponent-apiTable>
|
|
||||||
|
|
||||||
<!-- 给个star 彩蛋组件 -->
|
|
||||||
<baseComponent-star></baseComponent-star>
|
|
||||||
|
|
||||||
<!-- 第三方评论插件 -->
|
|
||||||
<Vssue title="" />
|
|
||||||
|
|
||||||
<!-- 其实在vuepress里的每个.md其实和.vue很像的，你基本可以按照vue组件模式来写 -->
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
//表头为字符串，写法和md一样，中间以`|`间隔就行
|
|
||||||
tableHead:`参数 | 说明 | 类型 | 可选值 | 默认值`,
|
|
||||||
//表头为数组，其中每一项为字符串，代表每一行要展示的数据，写法也和md一样，中间以`|`间隔就行
|
|
||||||
tableBody: [
|
|
||||||
`size | 尺寸 | String | medium / small / mini | —`,
|
|
||||||
`type | 类型 | string | primary / success / warning / danger / info / text | —`
|
|
||||||
],
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- 和vue一样，也可以设置样式，并且这里style样式只对当前md有效，不需要加上scoped -->
|
|
||||||
<style>
|
|
||||||
</style>
|
|
||||||
|
|
@ -58,7 +58,7 @@ cnchar.draw('你好', options); // options 为可选参数
|
||||||
</highlight-code>
|
</highlight-code>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
以下是 options 的所有可选参数及描述，具体使用请参考下面章节的实例
|
以下是 options 的所有可选参数及描述，具体使用可以在 [JSBox](https://theajack.gitee.io/jsbox?theme=dark&config=https%3A%2F%2Fcdn.jsdelivr.net%2Fgh%2Ftheajack%2Fcnchar%2Fdocs%2Fconfig.js&id=normal-draw) 上自行在线尝试
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<highlight-code lang='typescript'>
|
<highlight-code lang='typescript'>
|
||||||
|
|
@ -121,16 +121,18 @@ declare interface DrawOption {
|
||||||
|
|
||||||
当`type=stroke`时，笔顺模式启用，该模式会单笔绘制汉字的每一个笔划，并且为每一个笔划生成一个绘制块
|
当`type=stroke`时，笔顺模式启用，该模式会单笔绘制汉字的每一个笔划，并且为每一个笔划生成一个绘制块
|
||||||
|
|
||||||
请看一些例子：
|
<codebox id='stroke-draw'></codebox>
|
||||||
|
|
||||||
## 5. 动画绘制模式
|
## 5. 动画绘制模式
|
||||||
|
|
||||||
当`type=animation`时，动画模式启用，该模式会按笔顺用动画绘制每一个笔划
|
当`type=animation`时，动画模式启用，该模式会按笔顺用动画绘制每一个笔划
|
||||||
|
|
||||||
请看一些例子：
|
<codebox id='animation-draw'></codebox>
|
||||||
|
|
||||||
## 6. 测验模式
|
## 6. 测验模式
|
||||||
|
|
||||||
当`type=test`时，测验模式启用，该模式用户可以在容器内绘制汉字，cnchar-draw会检测是否绘制正确
|
当`type=test`时，测验模式启用，该模式用户可以在容器内绘制汉字，cnchar-draw会检测是否绘制正确
|
||||||
|
|
||||||
请看一些例子：
|
请用鼠标在绘制出的**测验**两个字上按顺序画上笔画
|
||||||
|
|
||||||
|
<codebox id='test-draw'></codebox>
|
||||||
|
|
|
||||||
|
|
@ -62,11 +62,6 @@ sidebarDepth: 0 //吐槽：这里设置0无效！只能设置1或2！
|
||||||
| [cnchar-trad](/cnchar/assets/v2/doc/trad) | 繁体字库 | 支持繁体、火星、简体互转，支持繁体拼音笔画多音字全功能 |
|
| [cnchar-trad](/cnchar/assets/v2/doc/trad) | 繁体字库 | 支持繁体、火星、简体互转，支持繁体拼音笔画多音字全功能 |
|
||||||
| [cnchar-draw](/cnchar/assets/v2/doc/draw) | 绘制笔画库 | 支持可视化绘制汉字，有 normal,animation,stroke,test 四种模式可选，该库仅在浏览器环境下可用 |
|
| [cnchar-draw](/cnchar/assets/v2/doc/draw) | 绘制笔画库 | 支持可视化绘制汉字，有 normal,animation,stroke,test 四种模式可选，该库仅在浏览器环境下可用 |
|
||||||
|
|
||||||
<!-- - [Github地址](https://github.com/theajack/cnchar)
|
<star></star>
|
||||||
- [演示地址](https://1011cat.github.io)
|
|
||||||
- [我的个人博客地址：shotcat.com](http://www.shotcat.com)
|
|
||||||
- [我的掘金账户](https://juejin.im/user/59b7940d5188257e82675bc0) -->
|
|
||||||
|
|
||||||
<baseComponent-star></baseComponent-star>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,43 +0,0 @@
|
||||||
其实这些说明，我在代码注释里都有详细说明，但还是想单独提出来啰嗦下~
|
|
||||||
## 组件库引入的路径问题
|
|
||||||
在编写组件库时，我们一般都会默认配置一些路径alias。但是打包后就会出现找不到对应文件的错误。这个时候就需要在`docs/.vuepress/components/config.js`里进行修改。
|
|
||||||
::: tip
|
|
||||||
```js
|
|
||||||
// 很多时候，我们引入自己的组件库，路径是不对的，
|
|
||||||
//这时就需要引入path，并在后面的chainWebpack进行配置
|
|
||||||
const path = require('path')
|
|
||||||
function resolve (dir) {
|
|
||||||
return path.join(__dirname, '../../', dir)
|
|
||||||
}
|
|
||||||
|
|
||||||
// vuepress里修改webpack配置，使用的是chainWebpack进行链式调用
|
|
||||||
// 具体使用可以参考我这个例子和 https://github.com/neutrinojs/webpack-chain/tree/v5
|
|
||||||
chainWebpack: (config, isServer) => {
|
|
||||||
config.resolve.alias
|
|
||||||
.set('@',resolve('src'))
|
|
||||||
}
|
|
||||||
```
|
|
||||||
:::
|
|
||||||
|
|
||||||
## 关于侧边栏的说明
|
|
||||||
由于为了演示，这里就加上了版本1.0和2.0。如果不需要，可以删掉这两个文件夹，将里面的文件放在外面。依然是在`docs/.vuepress/components/config.js`里进行修改即可。
|
|
||||||
|
|
||||||
## vssue配置
|
|
||||||
vssue这个是一个利用github issue的评论插件 具体配置见https://vssue.js.org/zh/ 所以是需要你自己进行`docs/.vuepress/components/config.js`配置。这里演示页面的评论是会加到我自己的项目issue里。
|
|
||||||
|
|
||||||
## 参数api 表格
|
|
||||||
因为自带的markdown表格，样式比较单调，主要是不能自适应，调整表格宽度，当说明较少时，表格是撑不满一整行的。所以就用el-table改进了下。当然为了保证书写的简便性，写法也是基本和markdown的写法一样。
|
|
||||||
::: tip
|
|
||||||
```js
|
|
||||||
//表头为字符串，写法和md一样，中间以`|`间隔就行
|
|
||||||
tableHead:`参数 | 说明 | 类型 | 可选值 | 默认值`,
|
|
||||||
//表格数据为数组，其中每一项为字符串，代表每一行要展示的数据，写法也和md一样，中间以`|`间隔就行
|
|
||||||
tableBody: [
|
|
||||||
`size | 尺寸 | String | medium / small / mini | —`,
|
|
||||||
`type | 类型 | string | primary / success / warning / danger / info / text | —`
|
|
||||||
],
|
|
||||||
```
|
|
||||||
:::
|
|
||||||
|
|
||||||
## star组件说明
|
|
||||||
那个看起来很炫的star组件，是由`https://codepen.io/sanzang/pen/LKvNPd` 代码修改而来。这里表示感谢！~
|
|
||||||
|
|
@ -62,7 +62,16 @@
|
||||||
3. 使用vuepress构建文档，工程化重构文档
|
3. 使用vuepress构建文档，工程化重构文档
|
||||||
4. 使用gulp-markdown-toc
|
4. 使用gulp-markdown-toc
|
||||||
|
|
||||||
## 2.1.1 *doing
|
## 2.1.1
|
||||||
|
1. 修复cnchar-all依赖的bug
|
||||||
|
|
||||||
|
## 2.1.2
|
||||||
1. 增加draw背景色设置
|
1. 增加draw背景色设置
|
||||||
2. 修正几个多音词
|
2. 修正几个多音词
|
||||||
3. 统一 trad 和 simple 参数
|
3. 统一 trad 和 simple 参数
|
||||||
|
4. 移除了一字和三字的繁体（应该是大写不是繁体）
|
||||||
|
|
||||||
|
## 2.1.3
|
||||||
|
1. draw库增加clear参数，表示绘制前是否清空容器
|
||||||
|
2. draw库将backgroundColor参数默认值改为#fff
|
||||||
|
3. draw库将el参数改为支持css选择器或dom
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
292
docs/index.html
292
docs/index.html
|
|
@ -1,240 +1,62 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html lang="en-US">
|
||||||
<head>
|
<head>
|
||||||
<meta charset='utf-8'>
|
<meta charset="utf-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||||
<meta name="keywords" content="汉字,拼音,笔画数">
|
<title>cnchar</title>
|
||||||
<meta name="description" content="获取汉字的拼音和笔画数的js库">
|
<meta name="description" content="功能全面、多端支持的汉字拼音笔画js库">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
<meta name="generator" content="VuePress 1.4.0">
|
||||||
|
<link rel="icon" href="https://cdn.jsdelivr.net/gh/theajack/cnchar/docs/assets/v1/images/i.ico">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=8">
|
|
||||||
|
<link rel="preload" href="/cnchar/assets/css/0.styles.0b7d8c5e.css" as="style"><link rel="preload" href="/cnchar/assets/js/app.6c180d28.js" as="script"><link rel="preload" href="/cnchar/assets/js/2.338d50e2.js" as="script"><link rel="preload" href="/cnchar/assets/js/8.716a2d5f.js" as="script"><link rel="preload" href="/cnchar/assets/js/4.803cde81.js" as="script"><link rel="prefetch" href="/cnchar/assets/js/10.6983a4ff.js"><link rel="prefetch" href="/cnchar/assets/js/11.94c125ca.js"><link rel="prefetch" href="/cnchar/assets/js/12.9efd22de.js"><link rel="prefetch" href="/cnchar/assets/js/13.1d748f12.js"><link rel="prefetch" href="/cnchar/assets/js/14.92555999.js"><link rel="prefetch" href="/cnchar/assets/js/15.5320422e.js"><link rel="prefetch" href="/cnchar/assets/js/16.c77f70e0.js"><link rel="prefetch" href="/cnchar/assets/js/17.01fbc09e.js"><link rel="prefetch" href="/cnchar/assets/js/18.b6c135fb.js"><link rel="prefetch" href="/cnchar/assets/js/19.421f793f.js"><link rel="prefetch" href="/cnchar/assets/js/20.4c918771.js"><link rel="prefetch" href="/cnchar/assets/js/21.8c24635f.js"><link rel="prefetch" href="/cnchar/assets/js/3.2c7a4c6e.js"><link rel="prefetch" href="/cnchar/assets/js/5.af5c9155.js"><link rel="prefetch" href="/cnchar/assets/js/6.37ec8c51.js"><link rel="prefetch" href="/cnchar/assets/js/7.576e924c.js"><link rel="prefetch" href="/cnchar/assets/js/9.5b3a4467.js">
|
||||||
<title>cnchar.js by theajack</title>
|
<link rel="stylesheet" href="/cnchar/assets/css/0.styles.0b7d8c5e.css">
|
||||||
<link rel="icon" href="./assets/v1/images/i.ico" type="image/x-icon" />
|
|
||||||
<link rel="stylesheet" type="text/css" href="./assets/v1/css/index.css" />
|
|
||||||
<link rel="stylesheet" type="text/css" href="./assets/v1/css/use-part.css" />
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<!--header-->
|
<div id="app" data-server-rendered="true"><div class="theme-container no-sidebar"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/cnchar/" class="home-link router-link-exact-active router-link-active"><!----> <span class="site-name">cnchar</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/cnchar/" class="nav-link router-link-exact-active router-link-active">
|
||||||
<div id="header">
|
主页
|
||||||
<div id="title">cnchar.js</div>
|
</a></div><div class="nav-item"><a href="/cnchar/guide/" class="nav-link">
|
||||||
<div id="smallTitle">功能全面、多端支持的汉字繁体字拼音笔画js库</div>
|
使用说明
|
||||||
<a id='viewProjectLink' target="_blank" href="https://github.com/theajack/cnchar">
|
</a></div><div class="nav-item"><a href="https://www.github.com/theajack/cnchar" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||||
<div id="viewProject" class="border-btn">View project on github</div>
|
GitHub
|
||||||
</a>
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="文档" class="dropdown-title"><span class="title">文档</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/cnchar/doc/cnchar.html" class="nav-link">
|
||||||
<div>
|
cnchar
|
||||||
<input placeholder="请输入汉字尝试一下" id='tryInput' value='正在加载cnchar...' readonly class='unloaded' type="text">
|
</a></li><li class="dropdown-item"><!----> <a href="/cnchar/doc/poly.html" class="nav-link">
|
||||||
</div>
|
cnchar-poly
|
||||||
<div id='tryResult'>
|
</a></li><li class="dropdown-item"><!----> <a href="/cnchar/doc/order.html" class="nav-link">
|
||||||
<div id='spell'></div>
|
cnchar-order
|
||||||
<div id='stroke'></div>
|
</a></li><li class="dropdown-item"><!----> <a href="/cnchar/doc/trad.html" class="nav-link">
|
||||||
<div id='trad'></div>
|
cnchar-trad
|
||||||
<div id='spark'></div>
|
</a></li><li class="dropdown-item"><!----> <a href="/cnchar/doc/draw.html" class="nav-link">
|
||||||
<div id='strokeOrder'></div>
|
cnchar-draw
|
||||||
<div id='draw'></div>
|
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="关于作者" class="dropdown-title"><span class="title">关于作者</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://www.github.com/theajack" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||||
</div>
|
GitHub地址
|
||||||
</div>
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="http://www.gitee.com/theajack" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||||
<!-- <div id="usePart" class="bg-gray2 text-black part clearfix">
|
Gitee地址
|
||||||
<div class="part-title">快速使用</div>
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="https://blog.csdn.net/yanxiaomu" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||||
<div id='useList'>
|
CSDN账号
|
||||||
<span class='api-use-item'>汉字<span class="glyphicon glyphicon-arrow-right"></span>拼音</span>
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/cnchar/" class="nav-link router-link-exact-active router-link-active">
|
||||||
<span class='api-use-item'>汉字<span class="glyphicon glyphicon-arrow-right"></span>拼音</span>
|
主页
|
||||||
<span class='api-use-item'>汉字<span class="glyphicon glyphicon-arrow-right"></span>拼音</span>
|
</a></div><div class="nav-item"><a href="/cnchar/guide/" class="nav-link">
|
||||||
<span class='api-use-item'>汉字<span class="glyphicon glyphicon-arrow-right"></span>拼音</span>
|
使用说明
|
||||||
<span class='api-use-item'>汉字<span class="glyphicon glyphicon-arrow-right"></span>拼音</span>
|
</a></div><div class="nav-item"><a href="https://www.github.com/theajack/cnchar" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||||
<span class='api-use-item'>汉字<span class="glyphicon glyphicon-arrow-right"></span>拼音</span>
|
GitHub
|
||||||
<span class='api-use-item'>汉字<span class="glyphicon glyphicon-arrow-right"></span>拼音</span>
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="文档" class="dropdown-title"><span class="title">文档</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/cnchar/doc/cnchar.html" class="nav-link">
|
||||||
<span class='api-use-item'>汉字<span class="glyphicon glyphicon-arrow-right"></span>拼音</span>
|
cnchar
|
||||||
<span class='api-use-item'>汉字<span class="glyphicon glyphicon-arrow-right"></span>拼音</span>
|
</a></li><li class="dropdown-item"><!----> <a href="/cnchar/doc/poly.html" class="nav-link">
|
||||||
<span class='api-use-item'>汉字<span class="glyphicon glyphicon-arrow-right"></span>拼音</span>
|
cnchar-poly
|
||||||
<span class='api-use-item'>汉字<span class="glyphicon glyphicon-arrow-right"></span>拼音</span>
|
</a></li><li class="dropdown-item"><!----> <a href="/cnchar/doc/order.html" class="nav-link">
|
||||||
<span class='api-use-item'>汉字<span class="glyphicon glyphicon-arrow-right"></span>拼音</span>
|
cnchar-order
|
||||||
</div>
|
</a></li><li class="dropdown-item"><!----> <a href="/cnchar/doc/trad.html" class="nav-link">
|
||||||
</div>
|
cnchar-trad
|
||||||
<div id='runAPI'>
|
</a></li><li class="dropdown-item"><!----> <a href="/cnchar/doc/draw.html" class="nav-link">
|
||||||
</div> -->
|
cnchar-draw
|
||||||
<!--intro-->
|
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="关于作者" class="dropdown-title"><span class="title">关于作者</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://www.github.com/theajack" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||||
<div id="introPart" class="bg-gray text-black part clearfix">
|
GitHub地址
|
||||||
<div class="part-title">功能</div>
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="http://www.gitee.com/theajack" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||||
<div class="func-item">
|
Gitee地址
|
||||||
<img class="func-img" src="./assets/v1/images/pin.png" />
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="https://blog.csdn.net/yanxiaomu" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||||
<div class="func-text">拼音|音调</div>
|
CSDN账号
|
||||||
</div>
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></div></div> <!----></nav> <!----> </aside> <main class="page"> <div class="theme-default-content content__default"><p><div class="home-wrapper"><div><img src="/cnchar/assets/img/logo.6cd28633.png" alt srcset class="logo"></div> <div class="title">cnchar</div> <div class="desc">功能全面、多端支持的汉字拼音笔画js库</div> <div class="test"><div class="test-input el-input"><!----><input type="text" autocomplete="off" placeholder="输入一些汉字试试" class="el-input__inner"><!----><!----><!----><!----></div> <div class="show-area" style="display:none;"><div> <span class="split">|</span> 共笔</div> <div>繁体: <span class="split">|</span> 火星文: </div> <div>笔顺: </div> <div id="draw-area"></div></div></div> <div class="start-w"><button type="button" class="el-button el-button--primary"><!----><!----><span>开始 <i class="ei-location-arrow"></i></span></button></div> <div class="feature-w"><div class="f-i"><div class="f-t"><i class="ei-rocket"></i>功能全面</div> <div class="f-des">拼音、笔画数</div> <div class="f-des">多音字词</div> <div class="f-des">繁体字、火星文</div> <div class="f-des">汉字笔顺</div> <div class="f-des">多种模式绘制汉字</div> <div class="f-des">汉字推算</div> <div class="f-des">...</div></div> <div class="f-i"><div class="f-t"><i class="ei-tablet"></i>多端支持</div> <div class="f-des">浏览器</div> <div class="f-des">nodejs</div> <div class="f-des">小程序/小游戏</div> <div class="f-des">ReactNative/Weex/Uniapp/Electron</div> <div class="f-des">webpack</div> <div class="f-des">typescript支持</div> <div class="f-des">...</div></div> <div class="f-i"><div class="f-t"><i class="ei-cubes"></i>按需取用</div> <div class="f-des">功能分包</div> <div class="f-des">体积小巧</div> <div class="f-des">简单易用</div> <div class="f-des">npm</div> <div class="f-des">cdn</div></div></div> <div class="copy-right">MIT Licensed | Copyright © 2020 present <a href="https://www.github.com/theajack" target="view_window">theajack</a></div></div></p></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">最后更新于:</span> <span class="time">4/13/2020, 11:40:47 AM</span></div></footer> <!----> </main></div><div class="global-ui"><!----><div></div></div></div>
|
||||||
<div class="func-item">
|
<script src="/cnchar/assets/js/app.6c180d28.js" defer></script><script src="/cnchar/assets/js/2.338d50e2.js" defer></script><script src="/cnchar/assets/js/8.716a2d5f.js" defer></script><script src="/cnchar/assets/js/4.803cde81.js" defer></script>
|
||||||
<img class="func-img" src="./assets/v1/images/duo.png" />
|
|
||||||
<div class="func-text">多音字|词</div>
|
|
||||||
</div>
|
|
||||||
<div class="func-item">
|
|
||||||
<img class="func-img" src="./assets/v1/images/bi.png" />
|
|
||||||
<div class="func-text">笔画数|笔序</div>
|
|
||||||
</div>
|
|
||||||
<div class="func-item">
|
|
||||||
<img class="func-img" src="./assets/v1/images/fan.png" />
|
|
||||||
<div class="func-text">繁体字|火星文</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!--download-->
|
|
||||||
<div id="downloadPart" class="bg-dark text-white part">
|
|
||||||
<div class="part-title">安装使用</div>
|
|
||||||
<pre class='demo-code'>import cnchar from 'cnchar';
|
|
||||||
'汉字'.spell();
|
|
||||||
'汉字'.stroke();</pre>
|
|
||||||
<pre class='demo-code'><script src="https://cdn.jsdelivr.net/gh/theajack/cnchar/dist/cnchar.latest.min.js"></script>
|
|
||||||
<script>
|
|
||||||
'汉字'.spell();
|
|
||||||
'汉字'.stroke();
|
|
||||||
</script></pre>
|
|
||||||
<!-- <div class="part-title small font-size-bigger">1.script 标签方式引入</div>
|
|
||||||
<div class="part-title small">引用： <script src="https://www.theajack.com/cnchar/cnchar.min.js"></script></div>
|
|
||||||
<div class="part-title small font-size-bigger">2.npm 方式安装</div>
|
|
||||||
<div class="part-title small">安装: npm install cnchar</div>
|
|
||||||
<div class="part-title small">使用: import CnChar from 'cnchar' 或 const CnChar = require('cnchar')</div> -->
|
|
||||||
<!-- <div id="copyBtn" class="border-btn mb-install" onclick="J.open('cnchar.2.0.4.min.js')">复制源码</div> -->
|
|
||||||
<div id="copyBtn" class="border-btn mb-install"
|
|
||||||
onclick="J.open('https://github.com/theajack/cnchar#user-content-cnchar')">点我查看详细</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!--api-->
|
|
||||||
<div id="apiPart" class="bg-gray part clearfix">
|
|
||||||
<div class="part-title text-black relative">简单使用</div>
|
|
||||||
<div class="api-item">
|
|
||||||
<div class="api-item-title">.spell()</div>
|
|
||||||
<div class="api-item-text">获取汉字完整拼音</div>
|
|
||||||
<div class="api-content-wrapper">
|
|
||||||
<div class="api-content clearfix">
|
|
||||||
"测试".spell()
|
|
||||||
<span class="api-content-result" onclick="this.txt('测试'.spell())">查看</span>
|
|
||||||
</div>
|
|
||||||
<div class="api-content clearfix">
|
|
||||||
"测试".spell("up")
|
|
||||||
<span class="api-content-result" onclick="this.txt('测试'.spell('up'))">查看</span>
|
|
||||||
</div>
|
|
||||||
<div class="api-content clearfix">
|
|
||||||
"测试".spell("low")
|
|
||||||
<span class="api-content-result" onclick="this.txt('测试'.spell('low'))">查看</span>
|
|
||||||
</div>
|
|
||||||
<div class="api-content clearfix">
|
|
||||||
"测试".spell("array")
|
|
||||||
<span class="api-content-result" onclick="this.txt('测试'.spell('array'))">查看</span>
|
|
||||||
</div>
|
|
||||||
<div class="api-content clearfix">
|
|
||||||
"测试".spell("array","up")
|
|
||||||
<span class="api-content-result" onclick="this.txt('测试'.spell('array','up'))">查看</span>
|
|
||||||
</div>
|
|
||||||
<div class="api-item-text">非汉字会返回原字符串</div>
|
|
||||||
</div>
|
|
||||||
<div class="api-test-wrapper">
|
|
||||||
<div class="api-item-ltitle">尝试一下</div>
|
|
||||||
<input type="text" class="api-test-input" placeholder="请输入汉字" />
|
|
||||||
<span class="api-test-btn" onclick="this.prev().val(this.prev().val().spell())">获取</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="api-item">
|
|
||||||
<div class="api-item-title">.spell('first')</div>
|
|
||||||
<div class="api-item-text">获取汉字拼音首字母</div>
|
|
||||||
<div class="api-content-wrapper">
|
|
||||||
<div class="api-content clearfix">
|
|
||||||
"测试".spell('first')
|
|
||||||
<span class="api-content-result" onclick="this.txt('测试'.spell('first'))">查看</span>
|
|
||||||
</div>
|
|
||||||
<div class="api-content clearfix">
|
|
||||||
"测试".spell('first','low')
|
|
||||||
<span class="api-content-result" onclick="this.txt('测试'.spell('first','low'))">查看</span>
|
|
||||||
</div>
|
|
||||||
<div class="api-content clearfix">
|
|
||||||
"测试".spell("array",'first',"up")
|
|
||||||
<span class="api-content-result" onclick="this.txt('测试'.spell('array','first','up'))">查看</span>
|
|
||||||
</div>
|
|
||||||
<div style="height:1px"></div>
|
|
||||||
<div class="api-item-text">非汉字会返回原字符串</div>
|
|
||||||
</div>
|
|
||||||
<div class="api-test-wrapper">
|
|
||||||
<div class="api-item-ltitle">尝试一下</div>
|
|
||||||
<input type="text" class="api-test-input" placeholder="请输入汉字" />
|
|
||||||
<span class="api-test-btn" onclick="this.prev().val(this.prev().val().spell('first'))">获取</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="api-item">
|
|
||||||
<div class="api-item-title">.stroke()</div>
|
|
||||||
<div class="api-item-text">获取汉字笔画数</div>
|
|
||||||
|
|
||||||
<div class="api-content-wrapper">
|
|
||||||
<!-- <div class="api-item-ltitle">如何使用</div> -->
|
|
||||||
<div class="api-content clearfix">
|
|
||||||
"测试".stroke()
|
|
||||||
<span class="api-content-result" onclick="this.txt('测试'.stroke())">查看</span>
|
|
||||||
</div>
|
|
||||||
<div class="api-item-text">非汉字会返回原字符串长度</div>
|
|
||||||
</div>
|
|
||||||
<div class="api-test-wrapper">
|
|
||||||
<div class="api-item-ltitle">尝试一下</div>
|
|
||||||
<input type="text" class="api-test-input" placeholder="请输入汉字" />
|
|
||||||
<span class="api-test-btn" onclick="this.prev().val(this.prev().val().stroke())">获取</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!--relate-->
|
|
||||||
<div id="relatePart" class="bg-dark text-white part ">
|
|
||||||
<div class="part-title hassmall">友情链接</div>
|
|
||||||
<div class="part-title small">(欢迎访问)</div>
|
|
||||||
<div id="tjLinks">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!--footer-->
|
|
||||||
<div id="footer" class="bg-black text-white part">
|
|
||||||
<div id="footerLink">
|
|
||||||
<span class="link" onclick="J.open('https://github.com/theajack')">GitHub</span>
|
|
||||||
<span class="split-icon">|</span>
|
|
||||||
<span class="link"
|
|
||||||
onclick="J.open('http://weibo.com/p/1005055304330572/home?from=page_100505&mod=TAB&is_all=1')">Sina
|
|
||||||
Micro-blog</span>
|
|
||||||
<span class="split-icon">|</span>
|
|
||||||
|
|
||||||
<span class="wechat-public d-hide" onclick="this.child(0).fadeToggle()">
|
|
||||||
WeChat Official Accounts
|
|
||||||
<img class="wechat-img" src="./assets/v1/images/wechat_qrcode.jpg" />
|
|
||||||
</span>
|
|
||||||
<span class="split-icon d-hide">|</span>
|
|
||||||
|
|
||||||
Email:theajack@qq.com
|
|
||||||
<span class="split-icon d-hide">|</span>
|
|
||||||
<span class="link d-hide" onclick="J.open('https://www.theajack.com')">theajack.com</span>
|
|
||||||
<div class=" d-show">
|
|
||||||
<span class="wechat-public" onclick="this.child(0).fadeToggle()">
|
|
||||||
WeChat Official Accounts
|
|
||||||
<img class="wechat-img" src="./assets/v1/images/wechat_qrcode.jpg" />
|
|
||||||
</span>
|
|
||||||
<span class="split-icon">|</span>
|
|
||||||
<span class="link" onclick="J.open('https://www.theajack.com')">theajack.com</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="copyright">
|
|
||||||
<span class="glyphicon glyphicon-copyright-mark"></span> <span id='_year'>20xx</span> TheaJack All rights reserved
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<script src="https://cdn.jsdelivr.net/gh/theajack/theajack.github.com/assets/js/jetter.min.js"></script>
|
|
||||||
<script src="./assets/v1/js/index.js"></script>
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/cnchar-all/cnchar.all.min.js" onload='loaded()'></script>
|
|
||||||
<!-- <script src="https://www.theajack.com/cnchar/dist/cnchar.latest.min.js"></script>
|
|
||||||
<script src="https://www.theajack.com/cnchar/dist/cnchar.order.latest.min.js"></script>
|
|
||||||
<script src="https://www.theajack.com/cnchar/dist/cnchar.poly.latest.min.js"></script>
|
|
||||||
<script src="https://www.theajack.com/cnchar/dist/cnchar.trad.latest.min.js" onload='loaded()'></script> -->
|
|
||||||
<script src="./assets/v1/js/run.js"></script>
|
|
||||||
<script src="https://cdn.jsdelivr.net/gh/theajack/theajack.github.com/assets/js/link.js"></script>
|
|
||||||
<script src="https://cdn.jsdelivr.net/gh/theajack/theajack.github.com/assets/js/logo.js"></script>
|
|
||||||
<script src="https://cdn.jsdelivr.net/gh/theajack/theajack.github.com/assets/js/log.js"></script>
|
|
||||||
<!--<script type="text/javascript" name="cnchar.js" src="https://www.theajack.com/assets/js/stat.js"></script>-->
|
|
||||||
<script>
|
|
||||||
var _mtac = {};
|
|
||||||
(function () {
|
|
||||||
var mta = document.createElement("script");
|
|
||||||
mta.src = "//pingjs.qq.com/h5/stats.js?v2.0.4";
|
|
||||||
mta.setAttribute("name", "MTAH5");
|
|
||||||
mta.setAttribute("sid", "500700068");
|
|
||||||
var s = document.getElementsByTagName("script")[0];
|
|
||||||
s.parentNode.insertBefore(mta, s);
|
|
||||||
})();
|
|
||||||
</script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,56 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset='utf-8'>
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
||||||
<meta name="keywords" content="">
|
|
||||||
<meta name="description" content="">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
|
|
||||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
||||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
|
||||||
<meta name="apple-touch-fullscreen" content="yes">
|
|
||||||
<meta content="telephone=no" name="format-detection">
|
|
||||||
<link rel="icon" href="docs/src/image/i.ico" type="image/x-icon"/>
|
|
||||||
<title>Jet--前端轻量级JS框架</title>
|
|
||||||
<link rel="stylesheet" href="docs/assets/css/icon.css">
|
|
||||||
<link rel="stylesheet" href="docs/assets/css/style.css">
|
|
||||||
<link rel="stylesheet" href="docs/assets/css/jui.css">
|
|
||||||
<!-- <link rel="stylesheet" href="compress/jui.min.css"> -->
|
|
||||||
<link rel="stylesheet" id='COMMON_CSS' href="docs/src/css/common.css">
|
|
||||||
<!-- <script type="text/javascript" src='assets/js/preload.js'></script> -->
|
|
||||||
<!-- <script type="text/javascript" src='assets/js/preload.js'></script> -->
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id='JET_ROOT'>
|
|
||||||
<div class='APP_Loading'><i class="j-icon icon-spinner-indicator icon-spin"></i></div>
|
|
||||||
</div>
|
|
||||||
<script type="text/javascript" src="docs/assets/js/jet.main.js"></script>
|
|
||||||
<!-- <script type="text/javascript" src="compress/jet.min.js"></script> -->
|
|
||||||
<!-- <script type="text/javascript" src='assets/js/jet-lib/css-config.js'></script>
|
|
||||||
<script type="text/javascript" src='assets/js/jet-lib/res.js'></script>
|
|
||||||
<script type="text/javascript" src="assets/js/jet-lib/valid.js"></script>
|
|
||||||
<script type="text/javascript" src="assets/js/jet-lib/router.js"></script>
|
|
||||||
<script type="text/javascript" src="assets/js/jet-lib/lang.js"></script>
|
|
||||||
<script type="text/javascript" src="assets/js/jet-lib/module.js"></script>
|
|
||||||
<script type="text/javascript" src='assets/js/jet-lib/babel.js'></script>
|
|
||||||
<script type="text/javascript" src='assets/js/jet-lib/less.js'></script>
|
|
||||||
<script type="text/javascript" src="assets/js/jet-lib/jui.js"></script> -->
|
|
||||||
<!-- <script src="https://www.theajack.com/cnchar/cnchar.min.js"></script> -->
|
|
||||||
<script type="text/javascript" src="docs/src/config.js"></script>
|
|
||||||
|
|
||||||
<!-- <script type="text/javascript" src="assets/js/jet.min.js"></script>
|
|
||||||
<script type="text/javascript" src="assets/js/jui.min.js"></script> -->
|
|
||||||
<!-- <script type="text/javascript" src="assets/js/jet-lib/jet-main.js"></script>
|
|
||||||
<script type="text/javascript" src="assets/js/jet-lib/router.js"></script>
|
|
||||||
<script type="text/javascript" src="assets/js/jet-lib/load.js"></script>
|
|
||||||
<script type="text/javascript" src="assets/js/jet-lib/valid.js"></script>
|
|
||||||
<script type="text/javascript" src="assets/js/jet-lib/lang.js"></script>
|
|
||||||
<script type="text/javascript" src="assets/js/jet-lib/module.js"></script> -->
|
|
||||||
<!-- <script type="text/javascript" src="src/main.js"></script> -->
|
|
||||||
<!-- <script type="text/javascript" src="assets/js/jui/jcode.js"></script> -->
|
|
||||||
<!-- <script type="text/javascript" src="src/js/common.js"></script> -->
|
|
||||||
<!-- <script type="text/javascript" src="src/js/history.js"></script> -->
|
|
||||||
<!-- <script name="Jet_api" src="https://www.theajack.comassets/js/stat.js"></script> -->
|
|
||||||
<!-- <script type="text/javascript" src="src/js/queryApi.js"></script> -->
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,26 +0,0 @@
|
||||||
<template>
|
|
||||||
<el-button :text='text'
|
|
||||||
v-bind='$attrs'
|
|
||||||
v-on='$listeners'>{{text}}</el-button>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'cat-button',
|
|
||||||
|
|
||||||
props: {
|
|
||||||
text: {
|
|
||||||
type: String
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,27 +0,0 @@
|
||||||
import Vue from 'vue';
|
|
||||||
import ElementUI from 'element-ui';
|
|
||||||
import 'element-ui/lib/theme-chalk/index.css';
|
|
||||||
|
|
||||||
import catButton from './components/catButton/catButton';
|
|
||||||
|
|
||||||
const components = [
|
|
||||||
catButton
|
|
||||||
];
|
|
||||||
|
|
||||||
Vue.use(ElementUI);
|
|
||||||
|
|
||||||
const shotCat = {
|
|
||||||
// 必须得有install方法
|
|
||||||
// eslint-disable-next-line no-unused-vars
|
|
||||||
install (Vue, options) {
|
|
||||||
Object.values(components).forEach((component) => {
|
|
||||||
Vue.component(component.name, component);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
if (typeof window !== 'undefined' && window.Vue) {
|
|
||||||
window.Vue.use(shotCat);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default shotCat;
|
|
||||||
|
|
@ -1,7 +1,6 @@
|
||||||
import event from './event';
|
import event from './event';
|
||||||
let jsbox = null;
|
let jsbox = null;
|
||||||
const url = 'https://theajack.gitee.io/jsbox?theme=dark&remind=false';
|
const url = 'https://theajack.gitee.io/jsbox?theme=dark&remind=false';
|
||||||
const config = 'http://localhost:8081/config.js';
|
|
||||||
|
|
||||||
function main () {
|
function main () {
|
||||||
if (jsbox !== null) {
|
if (jsbox !== null) {
|
||||||
|
|
@ -23,6 +22,7 @@ function main () {
|
||||||
function id (_id = '') {
|
function id (_id = '') {
|
||||||
if (jsbox._id !== _id) {
|
if (jsbox._id !== _id) {
|
||||||
jsbox._id = _id;
|
jsbox._id = _id;
|
||||||
|
const config = (location.host.indexOf('localhost') !== -1) ? 'http://localhost:8080/config.js' : 'https://cdn.jsdelivr.net/gh/theajack/cnchar/docs/config.js';
|
||||||
jsbox.url = `${url}&config=${encodeURIComponent(config)}&id=${_id}`;
|
jsbox.url = `${url}&config=${encodeURIComponent(config)}&id=${_id}`;
|
||||||
iframe.src = jsbox.url;
|
iframe.src = jsbox.url;
|
||||||
}
|
}
|
||||||
|
|
@ -43,6 +43,7 @@ function main () {
|
||||||
code,
|
code,
|
||||||
id
|
id
|
||||||
};
|
};
|
||||||
|
return jsbox;
|
||||||
}
|
}
|
||||||
|
|
||||||
function hackConsole () {
|
function hackConsole () {
|
||||||
|
|
@ -119,6 +120,4 @@ function initStyle () {
|
||||||
document.head.appendChild(style);
|
document.head.appendChild(style);
|
||||||
}
|
}
|
||||||
|
|
||||||
main();
|
export default main;
|
||||||
|
|
||||||
export default jsbox;
|
|
||||||
|
|
@ -1,4 +1,47 @@
|
||||||
#vcomments{
|
#vcomments{
|
||||||
|
width: 90%;
|
||||||
max-width: 78%;
|
max-width: 78%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
#vcomments.home-comment{
|
||||||
|
max-width: 1000px;
|
||||||
|
}
|
||||||
|
html,body{
|
||||||
|
font-size: 16px!important;
|
||||||
|
}
|
||||||
|
@media (max-width: 600px){
|
||||||
|
html,body{
|
||||||
|
font-size: 12px!important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1200px){
|
||||||
|
html,body{
|
||||||
|
font-size: 18px!important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 500px){
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width:5px;
|
||||||
|
cursor: pointer;
|
||||||
|
height: 5px;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-button {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-track-piece {
|
||||||
|
background-color:#88888811;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-thumb{
|
||||||
|
background-color:#88888866;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-thumb:hover{
|
||||||
|
background-color:#88888888;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -0,0 +1,240 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset='utf-8'>
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
||||||
|
<meta name="keywords" content="汉字,拼音,笔画数">
|
||||||
|
<meta name="description" content="获取汉字的拼音和笔画数的js库">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||||
|
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=8">
|
||||||
|
|
||||||
|
<title>cnchar.js by theajack</title>
|
||||||
|
<link rel="icon" href="./assets/v1/images/i.ico" type="image/x-icon" />
|
||||||
|
<link rel="stylesheet" type="text/css" href="./assets/v1/css/index.css" />
|
||||||
|
<link rel="stylesheet" type="text/css" href="./assets/v1/css/use-part.css" />
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<!--header-->
|
||||||
|
<div id="header">
|
||||||
|
<div id="title">cnchar.js</div>
|
||||||
|
<div id="smallTitle">功能全面、多端支持的汉字繁体字拼音笔画js库</div>
|
||||||
|
<a id='viewProjectLink' target="_blank" href="https://github.com/theajack/cnchar">
|
||||||
|
<div id="viewProject" class="border-btn">View project on github</div>
|
||||||
|
</a>
|
||||||
|
<div>
|
||||||
|
<input placeholder="请输入汉字尝试一下" id='tryInput' value='正在加载cnchar...' readonly class='unloaded' type="text">
|
||||||
|
</div>
|
||||||
|
<div id='tryResult'>
|
||||||
|
<div id='spell'></div>
|
||||||
|
<div id='stroke'></div>
|
||||||
|
<div id='trad'></div>
|
||||||
|
<div id='spark'></div>
|
||||||
|
<div id='strokeOrder'></div>
|
||||||
|
<div id='draw'></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- <div id="usePart" class="bg-gray2 text-black part clearfix">
|
||||||
|
<div class="part-title">快速使用</div>
|
||||||
|
<div id='useList'>
|
||||||
|
<span class='api-use-item'>汉字<span class="glyphicon glyphicon-arrow-right"></span>拼音</span>
|
||||||
|
<span class='api-use-item'>汉字<span class="glyphicon glyphicon-arrow-right"></span>拼音</span>
|
||||||
|
<span class='api-use-item'>汉字<span class="glyphicon glyphicon-arrow-right"></span>拼音</span>
|
||||||
|
<span class='api-use-item'>汉字<span class="glyphicon glyphicon-arrow-right"></span>拼音</span>
|
||||||
|
<span class='api-use-item'>汉字<span class="glyphicon glyphicon-arrow-right"></span>拼音</span>
|
||||||
|
<span class='api-use-item'>汉字<span class="glyphicon glyphicon-arrow-right"></span>拼音</span>
|
||||||
|
<span class='api-use-item'>汉字<span class="glyphicon glyphicon-arrow-right"></span>拼音</span>
|
||||||
|
<span class='api-use-item'>汉字<span class="glyphicon glyphicon-arrow-right"></span>拼音</span>
|
||||||
|
<span class='api-use-item'>汉字<span class="glyphicon glyphicon-arrow-right"></span>拼音</span>
|
||||||
|
<span class='api-use-item'>汉字<span class="glyphicon glyphicon-arrow-right"></span>拼音</span>
|
||||||
|
<span class='api-use-item'>汉字<span class="glyphicon glyphicon-arrow-right"></span>拼音</span>
|
||||||
|
<span class='api-use-item'>汉字<span class="glyphicon glyphicon-arrow-right"></span>拼音</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id='runAPI'>
|
||||||
|
</div> -->
|
||||||
|
<!--intro-->
|
||||||
|
<div id="introPart" class="bg-gray text-black part clearfix">
|
||||||
|
<div class="part-title">功能</div>
|
||||||
|
<div class="func-item">
|
||||||
|
<img class="func-img" src="./assets/v1/images/pin.png" />
|
||||||
|
<div class="func-text">拼音|音调</div>
|
||||||
|
</div>
|
||||||
|
<div class="func-item">
|
||||||
|
<img class="func-img" src="./assets/v1/images/duo.png" />
|
||||||
|
<div class="func-text">多音字|词</div>
|
||||||
|
</div>
|
||||||
|
<div class="func-item">
|
||||||
|
<img class="func-img" src="./assets/v1/images/bi.png" />
|
||||||
|
<div class="func-text">笔画数|笔序</div>
|
||||||
|
</div>
|
||||||
|
<div class="func-item">
|
||||||
|
<img class="func-img" src="./assets/v1/images/fan.png" />
|
||||||
|
<div class="func-text">繁体字|火星文</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--download-->
|
||||||
|
<div id="downloadPart" class="bg-dark text-white part">
|
||||||
|
<div class="part-title">安装使用</div>
|
||||||
|
<pre class='demo-code'>import cnchar from 'cnchar';
|
||||||
|
'汉字'.spell();
|
||||||
|
'汉字'.stroke();</pre>
|
||||||
|
<pre class='demo-code'><script src="https://cdn.jsdelivr.net/gh/theajack/cnchar/dist/cnchar.latest.min.js"></script>
|
||||||
|
<script>
|
||||||
|
'汉字'.spell();
|
||||||
|
'汉字'.stroke();
|
||||||
|
</script></pre>
|
||||||
|
<!-- <div class="part-title small font-size-bigger">1.script 标签方式引入</div>
|
||||||
|
<div class="part-title small">引用： <script src="https://www.theajack.com/cnchar/cnchar.min.js"></script></div>
|
||||||
|
<div class="part-title small font-size-bigger">2.npm 方式安装</div>
|
||||||
|
<div class="part-title small">安装: npm install cnchar</div>
|
||||||
|
<div class="part-title small">使用: import CnChar from 'cnchar' 或 const CnChar = require('cnchar')</div> -->
|
||||||
|
<!-- <div id="copyBtn" class="border-btn mb-install" onclick="J.open('cnchar.2.0.4.min.js')">复制源码</div> -->
|
||||||
|
<div id="copyBtn" class="border-btn mb-install"
|
||||||
|
onclick="J.open('https://github.com/theajack/cnchar#user-content-cnchar')">点我查看详细</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--api-->
|
||||||
|
<div id="apiPart" class="bg-gray part clearfix">
|
||||||
|
<div class="part-title text-black relative">简单使用</div>
|
||||||
|
<div class="api-item">
|
||||||
|
<div class="api-item-title">.spell()</div>
|
||||||
|
<div class="api-item-text">获取汉字完整拼音</div>
|
||||||
|
<div class="api-content-wrapper">
|
||||||
|
<div class="api-content clearfix">
|
||||||
|
"测试".spell()
|
||||||
|
<span class="api-content-result" onclick="this.txt('测试'.spell())">查看</span>
|
||||||
|
</div>
|
||||||
|
<div class="api-content clearfix">
|
||||||
|
"测试".spell("up")
|
||||||
|
<span class="api-content-result" onclick="this.txt('测试'.spell('up'))">查看</span>
|
||||||
|
</div>
|
||||||
|
<div class="api-content clearfix">
|
||||||
|
"测试".spell("low")
|
||||||
|
<span class="api-content-result" onclick="this.txt('测试'.spell('low'))">查看</span>
|
||||||
|
</div>
|
||||||
|
<div class="api-content clearfix">
|
||||||
|
"测试".spell("array")
|
||||||
|
<span class="api-content-result" onclick="this.txt('测试'.spell('array'))">查看</span>
|
||||||
|
</div>
|
||||||
|
<div class="api-content clearfix">
|
||||||
|
"测试".spell("array","up")
|
||||||
|
<span class="api-content-result" onclick="this.txt('测试'.spell('array','up'))">查看</span>
|
||||||
|
</div>
|
||||||
|
<div class="api-item-text">非汉字会返回原字符串</div>
|
||||||
|
</div>
|
||||||
|
<div class="api-test-wrapper">
|
||||||
|
<div class="api-item-ltitle">尝试一下</div>
|
||||||
|
<input type="text" class="api-test-input" placeholder="请输入汉字" />
|
||||||
|
<span class="api-test-btn" onclick="this.prev().val(this.prev().val().spell())">获取</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="api-item">
|
||||||
|
<div class="api-item-title">.spell('first')</div>
|
||||||
|
<div class="api-item-text">获取汉字拼音首字母</div>
|
||||||
|
<div class="api-content-wrapper">
|
||||||
|
<div class="api-content clearfix">
|
||||||
|
"测试".spell('first')
|
||||||
|
<span class="api-content-result" onclick="this.txt('测试'.spell('first'))">查看</span>
|
||||||
|
</div>
|
||||||
|
<div class="api-content clearfix">
|
||||||
|
"测试".spell('first','low')
|
||||||
|
<span class="api-content-result" onclick="this.txt('测试'.spell('first','low'))">查看</span>
|
||||||
|
</div>
|
||||||
|
<div class="api-content clearfix">
|
||||||
|
"测试".spell("array",'first',"up")
|
||||||
|
<span class="api-content-result" onclick="this.txt('测试'.spell('array','first','up'))">查看</span>
|
||||||
|
</div>
|
||||||
|
<div style="height:1px"></div>
|
||||||
|
<div class="api-item-text">非汉字会返回原字符串</div>
|
||||||
|
</div>
|
||||||
|
<div class="api-test-wrapper">
|
||||||
|
<div class="api-item-ltitle">尝试一下</div>
|
||||||
|
<input type="text" class="api-test-input" placeholder="请输入汉字" />
|
||||||
|
<span class="api-test-btn" onclick="this.prev().val(this.prev().val().spell('first'))">获取</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="api-item">
|
||||||
|
<div class="api-item-title">.stroke()</div>
|
||||||
|
<div class="api-item-text">获取汉字笔画数</div>
|
||||||
|
|
||||||
|
<div class="api-content-wrapper">
|
||||||
|
<!-- <div class="api-item-ltitle">如何使用</div> -->
|
||||||
|
<div class="api-content clearfix">
|
||||||
|
"测试".stroke()
|
||||||
|
<span class="api-content-result" onclick="this.txt('测试'.stroke())">查看</span>
|
||||||
|
</div>
|
||||||
|
<div class="api-item-text">非汉字会返回原字符串长度</div>
|
||||||
|
</div>
|
||||||
|
<div class="api-test-wrapper">
|
||||||
|
<div class="api-item-ltitle">尝试一下</div>
|
||||||
|
<input type="text" class="api-test-input" placeholder="请输入汉字" />
|
||||||
|
<span class="api-test-btn" onclick="this.prev().val(this.prev().val().stroke())">获取</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--relate-->
|
||||||
|
<div id="relatePart" class="bg-dark text-white part ">
|
||||||
|
<div class="part-title hassmall">友情链接</div>
|
||||||
|
<div class="part-title small">(欢迎访问)</div>
|
||||||
|
<div id="tjLinks">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--footer-->
|
||||||
|
<div id="footer" class="bg-black text-white part">
|
||||||
|
<div id="footerLink">
|
||||||
|
<span class="link" onclick="J.open('https://github.com/theajack')">GitHub</span>
|
||||||
|
<span class="split-icon">|</span>
|
||||||
|
<span class="link"
|
||||||
|
onclick="J.open('http://weibo.com/p/1005055304330572/home?from=page_100505&mod=TAB&is_all=1')">Sina
|
||||||
|
Micro-blog</span>
|
||||||
|
<span class="split-icon">|</span>
|
||||||
|
|
||||||
|
<span class="wechat-public d-hide" onclick="this.child(0).fadeToggle()">
|
||||||
|
WeChat Official Accounts
|
||||||
|
<img class="wechat-img" src="./assets/v1/images/wechat_qrcode.jpg" />
|
||||||
|
</span>
|
||||||
|
<span class="split-icon d-hide">|</span>
|
||||||
|
|
||||||
|
Email:theajack@qq.com
|
||||||
|
<span class="split-icon d-hide">|</span>
|
||||||
|
<span class="link d-hide" onclick="J.open('https://www.theajack.com')">theajack.com</span>
|
||||||
|
<div class=" d-show">
|
||||||
|
<span class="wechat-public" onclick="this.child(0).fadeToggle()">
|
||||||
|
WeChat Official Accounts
|
||||||
|
<img class="wechat-img" src="./assets/v1/images/wechat_qrcode.jpg" />
|
||||||
|
</span>
|
||||||
|
<span class="split-icon">|</span>
|
||||||
|
<span class="link" onclick="J.open('https://www.theajack.com')">theajack.com</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="copyright">
|
||||||
|
<span class="glyphicon glyphicon-copyright-mark"></span> <span id='_year'>20xx</span> TheaJack All rights reserved
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/theajack/theajack.github.com/assets/js/jetter.min.js"></script>
|
||||||
|
<script src="./assets/v1/js/index.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/cnchar-all/cnchar.all.min.js" onload='loaded()'></script>
|
||||||
|
<!-- <script src="https://www.theajack.com/cnchar/dist/cnchar.latest.min.js"></script>
|
||||||
|
<script src="https://www.theajack.com/cnchar/dist/cnchar.order.latest.min.js"></script>
|
||||||
|
<script src="https://www.theajack.com/cnchar/dist/cnchar.poly.latest.min.js"></script>
|
||||||
|
<script src="https://www.theajack.com/cnchar/dist/cnchar.trad.latest.min.js" onload='loaded()'></script> -->
|
||||||
|
<script src="./assets/v1/js/run.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/theajack/theajack.github.com/assets/js/link.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/theajack/theajack.github.com/assets/js/logo.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/theajack/theajack.github.com/assets/js/log.js"></script>
|
||||||
|
<!--<script type="text/javascript" name="cnchar.js" src="https://www.theajack.com/assets/js/stat.js"></script>-->
|
||||||
|
<script>
|
||||||
|
var _mtac = {};
|
||||||
|
(function () {
|
||||||
|
var mta = document.createElement("script");
|
||||||
|
mta.src = "//pingjs.qq.com/h5/stats.js?v2.0.4";
|
||||||
|
mta.setAttribute("name", "MTAH5");
|
||||||
|
mta.setAttribute("sid", "500700068");
|
||||||
|
var s = document.getElementsByTagName("script")[0];
|
||||||
|
s.parentNode.insertBefore(mta, s);
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -246,9 +246,11 @@ draw 的参数比较繁多，首先需要理解的是，draw 分为四种绘制
|
||||||
|
|
||||||
```ts
|
```ts
|
||||||
declare interface DrawOption {
|
declare interface DrawOption {
|
||||||
el?: string | HTMLElement; // 绘制的容器，支持id和dom，若是不填，会在body后append一个dom作为容器
|
el?: string | HTMLElement; // 绘制的容器，支持选择器或dom，若是不填，会在body后append一个dom作为容器
|
||||||
type?: DrawType; // 绘制模式，默认为normal
|
type?: DrawType; // 绘制模式，默认为normal
|
||||||
|
clear?: boolean; // 绘制前是否清空容器 默认为true
|
||||||
style?: { // 样式类
|
style?: { // 样式类
|
||||||
|
backgroundColor?: string, // 默认为#fff
|
||||||
showOutline?: boolean;//: true,
|
showOutline?: boolean;//: true,
|
||||||
showCharacter?: boolean;//: true,
|
showCharacter?: boolean;//: true,
|
||||||
currentColor?: string;//: '#b44', // 仅在stroke模式下有效
|
currentColor?: string;//: '#b44', // 仅在stroke模式下有效
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
const gulp = require('gulp');
|
||||||
|
const babel = require('gulp-babel');
|
||||||
|
|
||||||
|
function main () {
|
||||||
|
gulp.src('public/config.js')
|
||||||
|
.pipe(babel({presets: ['@babel/env']}))
|
||||||
|
.pipe(gulp.dest('docs'));
|
||||||
|
}
|
||||||
|
|
||||||
|
main();
|
||||||
|
|
@ -128,6 +128,10 @@ function transEs6ByBabel () {
|
||||||
.pipe(babel({presets: ['@babel/env']}))
|
.pipe(babel({presets: ['@babel/env']}))
|
||||||
.pipe(gulp.dest('npm/trad'));
|
.pipe(gulp.dest('npm/trad'));
|
||||||
|
|
||||||
|
gulp.src('src/plugin/draw/*.js')
|
||||||
|
.pipe(babel({presets: ['@babel/env']}))
|
||||||
|
.pipe(gulp.dest('npm/draw'));
|
||||||
|
|
||||||
// gulp.src('src/plugin/all/*.js')
|
// gulp.src('src/plugin/all/*.js')
|
||||||
// .pipe(babel({presets: ['@babel/env']}))
|
// .pipe(babel({presets: ['@babel/env']}))
|
||||||
// .pipe(gulp.dest('npm/all'));
|
// .pipe(gulp.dest('npm/all'));
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
1. 更新日志链接
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
备忘：
|
||||||
|
|
@ -1,10 +1,9 @@
|
||||||
## Version | 更新日志
|
|
||||||
|
|
||||||
### 1.0（基础版本）
|
## 1.0（基础版本）
|
||||||
1. 获取 **汉字拼音** ，支持首字母、大小写、数组分割
|
1. 获取 **汉字拼音** ，支持首字母、大小写、数组分割
|
||||||
2. 获取 **汉字笔画数**
|
2. 获取 **汉字笔画数**
|
||||||
|
|
||||||
### 2.0 （升级版本）
|
## 2.0 （升级版本）
|
||||||
1. 备选 **多音字** 等功能
|
1. 备选 **多音字** 等功能
|
||||||
2. 支持 **多音词**
|
2. 支持 **多音词**
|
||||||
3. 支持 **拼音音调**
|
3. 支持 **拼音音调**
|
||||||
|
|
@ -15,31 +14,31 @@
|
||||||
8. **多端可用**，可用于 原生浏览器环境、webpack环境、nodejs环境...，几乎支持所有js能运行的环境
|
8. **多端可用**，可用于 原生浏览器环境、webpack环境、nodejs环境...，几乎支持所有js能运行的环境
|
||||||
9. 丰富的配置，按需取用
|
9. 丰富的配置，按需取用
|
||||||
|
|
||||||
### 2.0.2
|
## 2.0.2
|
||||||
1. 添加多音字默认读音字典
|
1. 添加多音字默认读音字典
|
||||||
2. 增加根据笔画数反推导出汉字的功能 orderToWord
|
2. 增加根据笔画数反推导出汉字的功能 orderToWord
|
||||||
3. 修改一些多音字的默认读音
|
3. 修改一些多音字的默认读音
|
||||||
|
|
||||||
### 2.0.3
|
## 2.0.3
|
||||||
1. 去除 origin 参数，多音词模式下使用 poly参数会启用备选多音字功能而禁用多音词功能
|
1. 去除 origin 参数，多音词模式下使用 poly参数会启用备选多音字功能而禁用多音词功能
|
||||||
2. orderToWord 加入繁体字支持，参数修改为 ['all','simple']
|
2. orderToWord 加入繁体字支持，参数修改为 ['all','simple']
|
||||||
3. 增加参数校验中提示可选值
|
3. 增加参数校验中提示可选值
|
||||||
4. 对词库进行一些修改
|
4. 对词库进行一些修改
|
||||||
|
|
||||||
### 2.0.4
|
## 2.0.4
|
||||||
1. 主要扩充了繁体字库
|
1. 主要扩充了繁体字库
|
||||||
2. 修改了 繁体字、简体字、火星体之间的转换方法，只保留了六个转换方法
|
2. 修改了 繁体字、简体字、火星体之间的转换方法，只保留了六个转换方法
|
||||||
|
|
||||||
### 2.0.5 - 2.0.6
|
## 2.0.5 - 2.0.6
|
||||||
1. 加入了 typescript 声明文件 index.d.ts
|
1. 加入了 typescript 声明文件 index.d.ts
|
||||||
2. script 方式引用增加了 latest.min.js 版本
|
2. script 方式引用增加了 latest.min.js 版本
|
||||||
|
|
||||||
### 2.0.7
|
## 2.0.7
|
||||||
1. 加入 eslint 和 commitlint
|
1. 加入 eslint 和 commitlint
|
||||||
2. 使用 gulp-babel 转换源代码到 npm 包，使得即便禁用了对node_module的babel转换，也可以正常使用cnchr
|
2. 使用 gulp-babel 转换源代码到 npm 包，使得即便禁用了对node_module的babel转换，也可以正常使用cnchr
|
||||||
3. 修复了多音字广和厂的默认读音
|
3. 修复了多音字广和厂的默认读音
|
||||||
|
|
||||||
### 2.0.8
|
## 2.0.8
|
||||||
1. 扩充了217个词频高于100的汉字
|
1. 扩充了217个词频高于100的汉字
|
||||||
2. 修改orderToWord.orders 笔画名称的显示，如果某个笔画有两个现在会保留两个名称
|
2. 修改orderToWord.orders 笔画名称的显示，如果某个笔画有两个现在会保留两个名称
|
||||||
3. orderToWord 笔画数组支持使用空格分隔的笔画字符串
|
3. orderToWord 笔画数组支持使用空格分隔的笔画字符串
|
||||||
|
|
@ -50,18 +49,29 @@
|
||||||
7. 加入 cnchar.spellInfo 方法，spellInfo.tones spellInfo.initials属性
|
7. 加入 cnchar.spellInfo 方法，spellInfo.tones spellInfo.initials属性
|
||||||
8. 仓库加入测试目录
|
8. 仓库加入测试目录
|
||||||
|
|
||||||
### 2.0.9
|
## 2.0.9
|
||||||
1. 修复 多音词"致远任重" 中的 重 字拼音错误
|
1. 修复 多音词"致远任重" 中的 重 字拼音错误
|
||||||
2. 增加 齉 字 [nàng 36]
|
2. 增加 齉 字 [nàng 36]
|
||||||
3. 无字默认读音修正
|
3. 无字默认读音修正
|
||||||
4. 修改 13 个多音字的默认读音
|
4. 修改 13 个多音字的默认读音
|
||||||
5. 增加 15 个多音词
|
5. 增加 15 个多音词
|
||||||
|
|
||||||
### 2.1.0
|
## 2.1.0
|
||||||
1. 增加cnchar-draw插件，支持可视化绘制汉字笔画，多种模式可选
|
1. 增加cnchar-draw插件，支持可视化绘制汉字笔画，多种模式可选
|
||||||
2. 将cdn移至npm包中，改变cdn引用方式，删除dist目录
|
2. 将cdn移至npm包中，改变cdn引用方式，删除dist目录
|
||||||
3. 使用vuepress构建文档，工程化重构文档
|
3. 使用vuepress构建文档，工程化重构文档
|
||||||
4. 使用gulp-markdown-toc
|
4. 使用gulp-markdown-toc
|
||||||
|
|
||||||
### 2.1.1 *doing
|
## 2.1.1
|
||||||
1. 增加draw背景色设置
|
1. 修复cnchar-all依赖的bug
|
||||||
|
|
||||||
|
## 2.1.2
|
||||||
|
1. 增加draw背景色设置
|
||||||
|
2. 修正几个多音词
|
||||||
|
3. 统一 trad 和 simple 参数
|
||||||
|
4. 移除了一字和三字的繁体（应该是大写不是繁体）
|
||||||
|
|
||||||
|
## 2.1.3
|
||||||
|
1. draw库增加clear参数，表示绘制前是否清空容器
|
||||||
|
2. draw库将backgroundColor参数默认值改为#fff
|
||||||
|
3. draw库将el参数改为支持css选择器或dom
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -1,11 +1,11 @@
|
||||||
import {Draw} from 'cnchar-draw';
|
import {Draw} from 'cnchar-draw';
|
||||||
// import {Draw} from 'cnchar-draw';
|
// import {Draw} from 'cnchar-draw';
|
||||||
|
|
||||||
declare type spellArg = 'array' | 'low' | 'up' | 'first' | 'poly' | 'tone' | 'simple';
|
declare type spellArg = 'array' | 'low' | 'up' | 'first' | 'poly' | 'tone' | 'simple' | 'trad';
|
||||||
declare type strokeArg = 'letter' | 'shape' | 'count' | 'name' | 'detail' | 'array' | 'order' | 'simple';
|
declare type strokeArg = 'letter' | 'shape' | 'count' | 'name' | 'detail' | 'array' | 'order' | 'simple' | 'trad';
|
||||||
declare type orderToWordArg = 'match' | 'matchorder' | 'contain' | 'start' | 'simple' | 'array';
|
declare type orderToWordArg = 'match' | 'matchorder' | 'contain' | 'start' | 'array' | 'simple' | 'trad';
|
||||||
declare type spellToWordArg = 'simple' | 'trad' | 'poly' | 'alltone' | 'array';
|
declare type spellToWordArg = 'poly' | 'alltone' | 'array' | 'simple' | 'trad';
|
||||||
declare type strokeToWordArg = 'simple' | 'trad' | 'array';
|
declare type strokeToWordArg = 'array' | 'simple' | 'trad';
|
||||||
declare type pluginArg = 'order' | 'trad' | 'poly';
|
declare type pluginArg = 'order' | 'trad' | 'poly';
|
||||||
declare type orderName = '横折折撇' | '竖弯' | '横折' | '撇点' | '横斜钩' | '横' | '捺' | '横折钩' | '竖' | '竖钩' | '点' | '撇' | '撇折' | '竖折撇' | '横折折折钩' | '竖折折钩' | '提' | '弯钩' | '斜钩' | '横折折' | '横撇' | '横折提' | '横折折折' | '竖提' | '竖弯钩'
|
declare type orderName = '横折折撇' | '竖弯' | '横折' | '撇点' | '横斜钩' | '横' | '捺' | '横折钩' | '竖' | '竖钩' | '点' | '撇' | '撇折' | '竖折撇' | '横折折折钩' | '竖折折钩' | '提' | '弯钩' | '斜钩' | '横折折' | '横撇' | '横折提' | '横折折折' | '竖提' | '竖弯钩'
|
||||||
| '竖折折' | '横撇弯钩' | '卧钩' | '横折弯' | '横钩';
|
| '竖折折' | '横撇弯钩' | '卧钩' | '横折弯' | '横钩';
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "cnchar-all",
|
"name": "cnchar-all",
|
||||||
"version": "2.1.1",
|
"version": "2.1.3",
|
||||||
"description": "功能全面、多端支持的汉字拼音笔画js库，支持多音字、繁体字、火星文",
|
"description": "功能全面、多端支持的汉字拼音笔画js库，支持多音字、繁体字、火星文",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"unpkg": "cnchar.all.min.js",
|
"unpkg": "cnchar.all.min.js",
|
||||||
|
|
@ -27,10 +27,10 @@
|
||||||
},
|
},
|
||||||
"homepage": "https://www.theajack.com/cnchar/",
|
"homepage": "https://www.theajack.com/cnchar/",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"cnchar": "^2.1.0",
|
"cnchar": "^2.1.3",
|
||||||
"cnchar-order": "^2.1.0",
|
"cnchar-order": "^2.1.3",
|
||||||
"cnchar-poly": "^2.1.0",
|
"cnchar-poly": "^2.1.3",
|
||||||
"cnchar-trad": "^2.1.0",
|
"cnchar-trad": "^2.1.3",
|
||||||
"cnchar-draw": "^2.1.0"
|
"cnchar-draw": "^2.1.3"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -119,7 +119,7 @@ import cnchar from 'cnchar';
|
||||||
|
|
||||||
### 2.概览
|
### 2.概览
|
||||||
|
|
||||||
考虑到不同的需求，cnchar 的功能被拆分到以下四个库中：
|
考虑到不同的需求，cnchar 的功能被拆分到以下五个库中：
|
||||||
|
|
||||||
| 名称 | 描述 | 功能 |
|
| 名称 | 描述 | 功能 |
|
||||||
| :----------: | :------------------------------: | :--------------------: |
|
| :----------: | :------------------------------: | :--------------------: |
|
||||||
|
|
@ -291,9 +291,11 @@ draw 的参数比较繁多，首先需要理解的是，draw 分为四种绘制
|
||||||
|
|
||||||
```ts
|
```ts
|
||||||
declare interface DrawOption {
|
declare interface DrawOption {
|
||||||
el?: string | HTMLElement; // 绘制的容器，支持id和dom，若是不填，会在body后append一个dom作为容器
|
el?: string | HTMLElement; // 绘制的容器，支持选择器或dom，若是不填，会在body后append一个dom作为容器
|
||||||
type?: DrawType; // 绘制模式，默认为normal
|
type?: DrawType; // 绘制模式，默认为normal
|
||||||
|
clear?: boolean; // 绘制前是否清空容器 默认为true
|
||||||
style?: { // 样式类
|
style?: { // 样式类
|
||||||
|
backgroundColor?: string, // 默认为#fff
|
||||||
showOutline?: boolean;//: true,
|
showOutline?: boolean;//: true,
|
||||||
showCharacter?: boolean;//: true,
|
showCharacter?: boolean;//: true,
|
||||||
currentColor?: string;//: '#b44', // 仅在stroke模式下有效
|
currentColor?: string;//: '#b44', // 仅在stroke模式下有效
|
||||||
|
|
@ -685,10 +687,10 @@ arg 参数信息如下：
|
||||||
|
|
||||||
#### 6.5 strokeToWord 参数
|
#### 6.5 strokeToWord 参数
|
||||||
|
|
||||||
参数调用如下，所有 arg 参数都是可选的
|
参数调用如下，count表示笔画数，所有 arg 参数都是可选的
|
||||||
|
|
||||||
```js
|
```js
|
||||||
cnchar.strokeToWord(spell,arg1,arg2,...);
|
cnchar.strokeToWord(count,arg1,arg2,...);
|
||||||
```
|
```
|
||||||
|
|
||||||
| 参数 | 作用 | 是否默认 | 依赖库 | 备注 |
|
| 参数 | 作用 | 是否默认 | 依赖库 | 备注 |
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -1,11 +1,11 @@
|
||||||
import {Draw} from 'cnchar-draw';
|
import {Draw} from 'cnchar-draw';
|
||||||
// import {Draw} from 'cnchar-draw';
|
// import {Draw} from 'cnchar-draw';
|
||||||
|
|
||||||
declare type spellArg = 'array' | 'low' | 'up' | 'first' | 'poly' | 'tone' | 'simple';
|
declare type spellArg = 'array' | 'low' | 'up' | 'first' | 'poly' | 'tone' | 'simple' | 'trad';
|
||||||
declare type strokeArg = 'letter' | 'shape' | 'count' | 'name' | 'detail' | 'array' | 'order' | 'simple';
|
declare type strokeArg = 'letter' | 'shape' | 'count' | 'name' | 'detail' | 'array' | 'order' | 'simple' | 'trad';
|
||||||
declare type orderToWordArg = 'match' | 'matchorder' | 'contain' | 'start' | 'simple' | 'array';
|
declare type orderToWordArg = 'match' | 'matchorder' | 'contain' | 'start' | 'array' | 'simple' | 'trad';
|
||||||
declare type spellToWordArg = 'simple' | 'trad' | 'poly' | 'alltone' | 'array';
|
declare type spellToWordArg = 'poly' | 'alltone' | 'array' | 'simple' | 'trad';
|
||||||
declare type strokeToWordArg = 'simple' | 'trad' | 'array';
|
declare type strokeToWordArg = 'array' | 'simple' | 'trad';
|
||||||
declare type pluginArg = 'order' | 'trad' | 'poly';
|
declare type pluginArg = 'order' | 'trad' | 'poly';
|
||||||
declare type orderName = '横折折撇' | '竖弯' | '横折' | '撇点' | '横斜钩' | '横' | '捺' | '横折钩' | '竖' | '竖钩' | '点' | '撇' | '撇折' | '竖折撇' | '横折折折钩' | '竖折折钩' | '提' | '弯钩' | '斜钩' | '横折折' | '横撇' | '横折提' | '横折折折' | '竖提' | '竖弯钩'
|
declare type orderName = '横折折撇' | '竖弯' | '横折' | '撇点' | '横斜钩' | '横' | '捺' | '横折钩' | '竖' | '竖钩' | '点' | '撇' | '撇折' | '竖折撇' | '横折折折钩' | '竖折折钩' | '提' | '弯钩' | '斜钩' | '横折折' | '横撇' | '横折提' | '横折折折' | '竖提' | '竖弯钩'
|
||||||
| '竖折折' | '横撇弯钩' | '卧钩' | '横折弯' | '横钩';
|
| '竖折折' | '横撇弯钩' | '卧钩' | '横折弯' | '横钩';
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "cnchar",
|
"name": "cnchar",
|
||||||
"version": "2.1.0",
|
"version": "2.1.3",
|
||||||
"description": "功能全面、多端支持的汉字拼音笔画js库，支持多音字、繁体字、火星文",
|
"description": "功能全面、多端支持的汉字拼音笔画js库，支持多音字、繁体字、火星文",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"scripts": {},
|
"scripts": {},
|
||||||
|
|
|
||||||
|
|
@ -16,5 +16,6 @@
|
||||||
"陶": "táo",
|
"陶": "táo",
|
||||||
"子": "zǐ",
|
"子": "zǐ",
|
||||||
"脯": "fǔ",
|
"脯": "fǔ",
|
||||||
"抹": "mā"
|
"抹": "mā",
|
||||||
|
"食": "shí"
|
||||||
}
|
}
|
||||||
|
|
@ -319,8 +319,9 @@ function checkArgs(type, args, jumpNext) {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
if (_cnchar.plugins.indexOf('trad') === -1 && has(args, 'simple')) {
|
if (_cnchar.plugins.indexOf('trad') === -1) {
|
||||||
ignore.push('simple');
|
if (has(args, 'simple')) ignore.push('simple');
|
||||||
|
if (has(args, 'trad')) ignore.push('trad');
|
||||||
}
|
}
|
||||||
|
|
||||||
if (type === 'spell') {
|
if (type === 'spell') {
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,3 @@
|
||||||
"use strict";
|
"use strict";
|
||||||
|
|
||||||
module.exports = '2.1.0';
|
module.exports = '2.1.3';
|
||||||
|
|
@ -119,7 +119,7 @@ import cnchar from 'cnchar';
|
||||||
|
|
||||||
### 2.概览
|
### 2.概览
|
||||||
|
|
||||||
考虑到不同的需求，cnchar 的功能被拆分到以下四个库中：
|
考虑到不同的需求，cnchar 的功能被拆分到以下五个库中：
|
||||||
|
|
||||||
| 名称 | 描述 | 功能 |
|
| 名称 | 描述 | 功能 |
|
||||||
| :----------: | :------------------------------: | :--------------------: |
|
| :----------: | :------------------------------: | :--------------------: |
|
||||||
|
|
@ -291,9 +291,11 @@ draw 的参数比较繁多，首先需要理解的是，draw 分为四种绘制
|
||||||
|
|
||||||
```ts
|
```ts
|
||||||
declare interface DrawOption {
|
declare interface DrawOption {
|
||||||
el?: string | HTMLElement; // 绘制的容器，支持id和dom，若是不填，会在body后append一个dom作为容器
|
el?: string | HTMLElement; // 绘制的容器，支持选择器或dom，若是不填，会在body后append一个dom作为容器
|
||||||
type?: DrawType; // 绘制模式，默认为normal
|
type?: DrawType; // 绘制模式，默认为normal
|
||||||
|
clear?: boolean; // 绘制前是否清空容器 默认为true
|
||||||
style?: { // 样式类
|
style?: { // 样式类
|
||||||
|
backgroundColor?: string, // 默认为#fff
|
||||||
showOutline?: boolean;//: true,
|
showOutline?: boolean;//: true,
|
||||||
showCharacter?: boolean;//: true,
|
showCharacter?: boolean;//: true,
|
||||||
currentColor?: string;//: '#b44', // 仅在stroke模式下有效
|
currentColor?: string;//: '#b44', // 仅在stroke模式下有效
|
||||||
|
|
@ -685,10 +687,10 @@ arg 参数信息如下：
|
||||||
|
|
||||||
#### 6.5 strokeToWord 参数
|
#### 6.5 strokeToWord 参数
|
||||||
|
|
||||||
参数调用如下，所有 arg 参数都是可选的
|
参数调用如下，count表示笔画数，所有 arg 参数都是可选的
|
||||||
|
|
||||||
```js
|
```js
|
||||||
cnchar.strokeToWord(spell,arg1,arg2,...);
|
cnchar.strokeToWord(count,arg1,arg2,...);
|
||||||
```
|
```
|
||||||
|
|
||||||
| 参数 | 作用 | 是否默认 | 依赖库 | 备注 |
|
| 参数 | 作用 | 是否默认 | 依赖库 | 备注 |
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,123 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
var TYPE = {
|
||||||
|
NORMAL: 'normal',
|
||||||
|
ANIMATION: 'animation',
|
||||||
|
STROKE: 'stroke',
|
||||||
|
TEST: 'test'
|
||||||
|
};
|
||||||
|
var TEST_STATUS = {
|
||||||
|
MISTAKE: 'mistake',
|
||||||
|
CORRECT: 'correct',
|
||||||
|
COMPLETE: 'complete'
|
||||||
|
};
|
||||||
|
var Option = {
|
||||||
|
showOutline: true,
|
||||||
|
showCharacter: true,
|
||||||
|
currentColor: '#b44',
|
||||||
|
clear: true,
|
||||||
|
length: 60,
|
||||||
|
padding: 5,
|
||||||
|
// 数值, 默认 20。 画布的汉字和边缘之间的填充
|
||||||
|
outlineColor: '#ddd',
|
||||||
|
// 十六进制字符, 默认 '#DDD'。
|
||||||
|
backgroundColor: '#fff',
|
||||||
|
strokeColor: '#555',
|
||||||
|
// 十六进制字符, 默认 '#555'。绘制每个笔划的颜色。
|
||||||
|
radicalColor: null,
|
||||||
|
// 十六进制字符, 默认 null。 如果存在偏旁部首数据，则在笔划中绘制偏旁部首的颜色。 如果没有设置，激光将绘制与其他笔划相同的颜色。
|
||||||
|
strokeFadeDuration: 400,
|
||||||
|
// 数值, 默认 400。 调用 writer.show() 和 writer.hide() 时在显示和隐藏笔划之间转换的时间（以毫秒为单位）
|
||||||
|
// 背景line
|
||||||
|
lineStraight: true,
|
||||||
|
lineCross: true,
|
||||||
|
lineWidth: 1,
|
||||||
|
lineColor: '#ddd',
|
||||||
|
lineDash: true,
|
||||||
|
border: true,
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: '#ccc',
|
||||||
|
borderDash: false,
|
||||||
|
// animation
|
||||||
|
strokeAnimationSpeed: 1,
|
||||||
|
// 数值, 默认 1。 绘制每个笔划的速度必须大于0。增加此数字可以更快地绘制笔划，减少绘制笔划的速度更慢。
|
||||||
|
delayBetweenStrokes: 1000,
|
||||||
|
// 数值, 默认 1000。 动画进行中每个笔画之间的间隔时间（以毫秒为单位）。
|
||||||
|
delayBetweenLoops: 200,
|
||||||
|
// 数值, 默认 2000。 循环动画时每个动画循环之间的时间（以毫秒为单位）。
|
||||||
|
autoAnimate: true,
|
||||||
|
animateComplete: function animateComplete() {},
|
||||||
|
stepByStep: true,
|
||||||
|
loopAnimate: false,
|
||||||
|
// charDataLoader: (a) => {console.log(a);}, // 函数。 自定义函数 加载字符数据 。 有关使用的更多信息，请参阅加载字符数据部分。
|
||||||
|
// onLoadCharDataSuccess: null, // 函数。 成功加载字符数据时的回调。 使用已加载的数据调用此函数。 这可以用于实现加载微调器。
|
||||||
|
// onLoadCharDataError: null, // 函数。 字符数据加载失败时的回调。
|
||||||
|
// test
|
||||||
|
strokeHighlightSpeed: 20,
|
||||||
|
// 数值, 默认 20。 在测验中给出提示时突出显示每个笔划的速度必须大于0。增加此数字以突出显示更快，减少以突出显示更慢。
|
||||||
|
highlightColor: '#aaf',
|
||||||
|
// 十六进制字符, 默认 '#AAF'。 用于在测验中突出显示的颜色。
|
||||||
|
drawingColor: '#333',
|
||||||
|
// 十六进制字符, 默认 '#333'。 测验期间绘制的线条颜色。
|
||||||
|
drawingWidth: 4,
|
||||||
|
// 数值, 默认 4。 进行测验时绘制的线条宽度。
|
||||||
|
showHintAfterMisses: 3,
|
||||||
|
// 整数, 默认 3 中风高亮提示之前的未命中数被给予用户。 设置为 false 以禁用。 创建测验时也可以设置此项。
|
||||||
|
highlightOnComplete: true,
|
||||||
|
// 布尔值, 默认 true。 控制当用户完成绘制整个字符时，测验是否会短暂突出显示字符。 创建测验时也可以设置此项。
|
||||||
|
highlightCompleteColor: null,
|
||||||
|
// 十六进制字符, 默认 null。 在测验中突出显示字符时使用的颜色。 如果未设置，则将使用highlightColor。 仅当highlightOnComplete为true时才相关。
|
||||||
|
onTestStatus: null // {index, status, data}
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
function isUd(v) {
|
||||||
|
return typeof v === 'undefined';
|
||||||
|
}
|
||||||
|
|
||||||
|
function merge(type, args) {
|
||||||
|
var json = {};
|
||||||
|
|
||||||
|
for (var key in args) {
|
||||||
|
var arg = args[key];
|
||||||
|
|
||||||
|
for (var k in arg) {
|
||||||
|
if (!isUd(arg[k])) {
|
||||||
|
json[k] = arg[k];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
check(json);
|
||||||
|
json.width = json.length;
|
||||||
|
json.height = json.length;
|
||||||
|
checkTypeDefault(type, args, json);
|
||||||
|
return json;
|
||||||
|
}
|
||||||
|
|
||||||
|
function checkTypeDefault(type, args, json) {
|
||||||
|
if (type === TYPE.ANIMATION) {
|
||||||
|
if (!args.animation || isUd(args.animation.showCharacter)) {
|
||||||
|
json.showCharacter = false;
|
||||||
|
}
|
||||||
|
} else if (type === TYPE.STROKE) {
|
||||||
|
json.showCharacter = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function check(json, attrs) {
|
||||||
|
attrs = attrs || Object.keys(Option);
|
||||||
|
attrs.forEach(function (attr) {
|
||||||
|
if (isUd(json[attr])) {
|
||||||
|
json[attr] = Option[attr];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return json;
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
TYPE: TYPE,
|
||||||
|
Option: Option,
|
||||||
|
merge: merge,
|
||||||
|
TEST_STATUS: TEST_STATUS
|
||||||
|
};
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -26,9 +26,11 @@ declare interface TestStatus {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
declare interface DrawOption {
|
declare interface DrawOption {
|
||||||
el?: string | HTMLElement; // 绘制的容器，支持id和dom，若是不填，会在body后append一个dom作为容器
|
el?: string | HTMLElement; // 绘制的容器，支持选择器或dom，若是不填，会在body后append一个dom作为容器
|
||||||
type?: DrawType; // 绘制模式，默认为normal
|
type?: DrawType; // 绘制模式，默认为normal
|
||||||
|
clear?: boolean; // 绘制前是否清空容器 默认为true
|
||||||
style?: { // 样式类
|
style?: { // 样式类
|
||||||
|
backgroundColor?: string, // 默认为#fff
|
||||||
showOutline?: boolean;//: true,
|
showOutline?: boolean;//: true,
|
||||||
showCharacter?: boolean;//: true,
|
showCharacter?: boolean;//: true,
|
||||||
currentColor?: string;//: '#b44', // 仅在stroke模式下有效
|
currentColor?: string;//: '#b44', // 仅在stroke模式下有效
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,31 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
||||||
|
|
||||||
|
// powerd by hanzi-writer v2.2.2
|
||||||
|
var draw = require('./writer');
|
||||||
|
|
||||||
|
function main(cnchar) {
|
||||||
|
if (cnchar.plugins.indexOf('draw') !== -1) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
cnchar.plugins.push('draw');
|
||||||
|
cnchar.draw = draw;
|
||||||
|
}
|
||||||
|
|
||||||
|
function init(cnchar) {
|
||||||
|
if ((typeof window === "undefined" ? "undefined" : _typeof(window)) === 'object') {
|
||||||
|
window.CncharDraw = draw;
|
||||||
|
}
|
||||||
|
|
||||||
|
if ((typeof window === "undefined" ? "undefined" : _typeof(window)) === 'object' && window.CnChar) {
|
||||||
|
main(window.CnChar);
|
||||||
|
} else if (typeof cnchar !== 'undefined') {
|
||||||
|
main(cnchar);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
draw.init = init;
|
||||||
|
init();
|
||||||
|
module.exports = draw;
|
||||||
|
|
@ -0,0 +1,49 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
/* eslint-disable no-unused-vars */
|
||||||
|
function buildLinesStr(_ref) {
|
||||||
|
var width = _ref.width,
|
||||||
|
lineStraight = _ref.lineStraight,
|
||||||
|
lineCross = _ref.lineCross,
|
||||||
|
lineWidth = _ref.lineWidth,
|
||||||
|
lineColor = _ref.lineColor,
|
||||||
|
lineDash = _ref.lineDash,
|
||||||
|
border = _ref.border,
|
||||||
|
borderWidth = _ref.borderWidth,
|
||||||
|
borderColor = _ref.borderColor,
|
||||||
|
borderDash = _ref.borderDash;
|
||||||
|
var str = '';
|
||||||
|
var attr = '';
|
||||||
|
|
||||||
|
if (lineDash) {
|
||||||
|
attr += 'stroke-dasharray="8"';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (lineWidth > 1) {
|
||||||
|
attr += "stroke-width=\"".concat(lineWidth, "\"");
|
||||||
|
}
|
||||||
|
|
||||||
|
if (lineStraight) {
|
||||||
|
var half = width / 2;
|
||||||
|
str += "<line x1=\"".concat(half, "\" y1=\"0\" x2=\"").concat(half, "\" y2=\"").concat(width, "\" ").concat(attr, " stroke=\"").concat(lineColor, "\" />\n <line x1=\"0\" y1=\"").concat(half, "\" x2=\"").concat(width, "\" y2=\"").concat(half, "\" ").concat(attr, " stroke=\"").concat(lineColor, "\" />");
|
||||||
|
}
|
||||||
|
|
||||||
|
if (lineCross) {
|
||||||
|
str += "<line x1=\"0\" y1=\"0\" x2=\"".concat(width, "\" y2=\"").concat(width, "\" ").concat(attr, " stroke=\"").concat(lineColor, "\" />\n <line x1=\"").concat(width, "\" y1=\"0\" x2=\"0\" y2=\"").concat(width, "\" ").concat(attr, " stroke=\"").concat(lineColor, "\" />");
|
||||||
|
}
|
||||||
|
|
||||||
|
var _border = '';
|
||||||
|
|
||||||
|
if (border) {
|
||||||
|
_border = "".concat(borderWidth, "px ").concat(borderDash ? 'dashed' : 'solid', " ").concat(borderColor);
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
lineHTML: str,
|
||||||
|
border: _border
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
buildLinesStr: buildLinesStr
|
||||||
|
};
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "cnchar-draw",
|
"name": "cnchar-draw",
|
||||||
"version": "2.1.0",
|
"version": "2.1.3",
|
||||||
"description": "功能全面、多端支持的汉字拼音笔画js库，支持多音字、繁体字、火星文",
|
"description": "功能全面、多端支持的汉字拼音笔画js库，支持多音字、繁体字、火星文",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"unpkg": "cnchar.draw.min.js",
|
"unpkg": "cnchar.draw.min.js",
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,70 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
var HanziWriter = require('./hanzi-writer');
|
||||||
|
|
||||||
|
function stroke(writer, cloneSvg) {
|
||||||
|
writer.text.forEach(function (s) {
|
||||||
|
var target = document.createElement('div');
|
||||||
|
writer.el.appendChild(target);
|
||||||
|
HanziWriter.loadCharacterData(s).then(function (charData) {
|
||||||
|
for (var i = 0; i < charData.strokes.length; i++) {
|
||||||
|
renderFanningStrokes({
|
||||||
|
option: writer.option,
|
||||||
|
target: target,
|
||||||
|
strokes: charData.strokes,
|
||||||
|
radStrokes: charData.radStrokes || [],
|
||||||
|
current: i,
|
||||||
|
cloneSvg: cloneSvg,
|
||||||
|
width: writer.option.width
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderFanningStrokes(_ref) {
|
||||||
|
var option = _ref.option,
|
||||||
|
target = _ref.target,
|
||||||
|
strokes = _ref.strokes,
|
||||||
|
radStrokes = _ref.radStrokes,
|
||||||
|
cloneSvg = _ref.cloneSvg,
|
||||||
|
current = _ref.current,
|
||||||
|
width = _ref.width;
|
||||||
|
var radicalColor = radStrokes.length > 0 && option.radicalColor ? option.radicalColor : null;
|
||||||
|
var svg = cloneSvg(option);
|
||||||
|
target.appendChild(svg);
|
||||||
|
var group = document.createElementNS('http://www.w3.org/2000/svg', 'g');
|
||||||
|
var transformData = HanziWriter.getScalingTransform(width, width, option.padding);
|
||||||
|
group.setAttributeNS(null, 'transform', transformData.transform);
|
||||||
|
svg.appendChild(group);
|
||||||
|
|
||||||
|
for (var i = 0; i <= current; i++) {
|
||||||
|
var color = option.strokeColor;
|
||||||
|
|
||||||
|
if (i === current && option.currentColor) {
|
||||||
|
color = option.currentColor;
|
||||||
|
} else if (radicalColor && radStrokes.indexOf(i) !== -1) {
|
||||||
|
color = radicalColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
renderPath(strokes[i], group, color);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (option.showOutline && current + 1 <= strokes.length) {
|
||||||
|
for (var _i = current + 1; _i < strokes.length; _i++) {
|
||||||
|
renderPath(strokes[_i], group, option.outlineColor);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderPath(strokePath, group, color) {
|
||||||
|
var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
|
||||||
|
path.setAttributeNS(null, 'd', strokePath); // style the character paths
|
||||||
|
|
||||||
|
path.style.fill = color;
|
||||||
|
group.appendChild(path);
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
stroke: stroke
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
function isCnChar(word) {
|
||||||
|
var unicode = word.charCodeAt(0);
|
||||||
|
return unicode >= 19968 && unicode <= 40869;
|
||||||
|
}
|
||||||
|
|
||||||
|
function pickCnChar(text) {
|
||||||
|
var v = '';
|
||||||
|
|
||||||
|
for (var i = 0; i < text.length; i++) {
|
||||||
|
if (isCnChar(text[i])) {
|
||||||
|
v += text[i];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return v;
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
isCnChar: isCnChar,
|
||||||
|
pickCnChar: pickCnChar
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,311 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||||
|
|
||||||
|
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
|
||||||
|
|
||||||
|
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
|
||||||
|
|
||||||
|
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
||||||
|
|
||||||
|
var HanziWriter = require('./hanzi-writer');
|
||||||
|
|
||||||
|
var _require = require('./default-option'),
|
||||||
|
TYPE = _require.TYPE,
|
||||||
|
merge = _require.merge,
|
||||||
|
TEST_STATUS = _require.TEST_STATUS;
|
||||||
|
|
||||||
|
var _require2 = require('./util'),
|
||||||
|
pickCnChar = _require2.pickCnChar;
|
||||||
|
|
||||||
|
var _require3 = require('./line'),
|
||||||
|
buildLinesStr = _require3.buildLinesStr;
|
||||||
|
|
||||||
|
var _require4 = require('./stroke'),
|
||||||
|
stroke = _require4.stroke;
|
||||||
|
|
||||||
|
var document = (typeof window === "undefined" ? "undefined" : _typeof(window)) === 'object' ? window.document || null : null;
|
||||||
|
|
||||||
|
var svg = function () {
|
||||||
|
if (!document) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
||||||
|
}();
|
||||||
|
|
||||||
|
var Writer = /*#__PURE__*/function () {
|
||||||
|
function Writer(_ref) {
|
||||||
|
var _ref$el = _ref.el,
|
||||||
|
el = _ref$el === void 0 ? 'cnchar-draw' : _ref$el,
|
||||||
|
_ref$text = _ref.text,
|
||||||
|
text = _ref$text === void 0 ? '' : _ref$text,
|
||||||
|
_ref$clear = _ref.clear,
|
||||||
|
clear = _ref$clear === void 0 ? true : _ref$clear,
|
||||||
|
_ref$type = _ref.type,
|
||||||
|
type = _ref$type === void 0 ? TYPE.NORMAL : _ref$type,
|
||||||
|
_ref$style = _ref.style,
|
||||||
|
style = _ref$style === void 0 ? {} : _ref$style,
|
||||||
|
_ref$line = _ref.line,
|
||||||
|
line = _ref$line === void 0 ? {} : _ref$line,
|
||||||
|
_ref$animation = _ref.animation,
|
||||||
|
animation = _ref$animation === void 0 ? {} : _ref$animation,
|
||||||
|
_ref$stroke = _ref.stroke,
|
||||||
|
stroke = _ref$stroke === void 0 ? {} : _ref$stroke,
|
||||||
|
_ref$test = _ref.test,
|
||||||
|
test = _ref$test === void 0 ? {} : _ref$test;
|
||||||
|
|
||||||
|
_classCallCheck(this, Writer);
|
||||||
|
|
||||||
|
this.type = type;
|
||||||
|
this.writers = [];
|
||||||
|
this.text = text.split('');
|
||||||
|
var opts = {
|
||||||
|
style: style,
|
||||||
|
line: line
|
||||||
|
};
|
||||||
|
|
||||||
|
switch (type) {
|
||||||
|
case TYPE.ANIMATION:
|
||||||
|
opts.animation = animation;
|
||||||
|
break;
|
||||||
|
|
||||||
|
case TYPE.STROKE:
|
||||||
|
opts.stroke = stroke;
|
||||||
|
break;
|
||||||
|
|
||||||
|
case TYPE.TEST:
|
||||||
|
opts.test = test;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.option = merge(type, opts);
|
||||||
|
this.el = typeof el === 'string' ? document.querySelector(el) : el;
|
||||||
|
|
||||||
|
if (this.el && clear) {
|
||||||
|
this.el.innerHTML = '';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!this.el) {
|
||||||
|
this.el = document.createElement('div');
|
||||||
|
document.body.appendChild(this.el);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.init();
|
||||||
|
}
|
||||||
|
|
||||||
|
_createClass(Writer, [{
|
||||||
|
key: "init",
|
||||||
|
value: function init() {
|
||||||
|
var _this = this;
|
||||||
|
|
||||||
|
var _buildLinesStr = buildLinesStr(this.option),
|
||||||
|
lineHTML = _buildLinesStr.lineHTML,
|
||||||
|
border = _buildLinesStr.border;
|
||||||
|
|
||||||
|
svg.setAttribute('width', this.option.width);
|
||||||
|
svg.setAttribute('height', this.option.height);
|
||||||
|
|
||||||
|
if (border) {
|
||||||
|
svg.style.border = border;
|
||||||
|
}
|
||||||
|
|
||||||
|
var cloneSvg = function cloneSvg(option) {
|
||||||
|
var node = svg.cloneNode();
|
||||||
|
|
||||||
|
if (lineHTML) {
|
||||||
|
node.innerHTML = lineHTML;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (option.backgroundColor) {
|
||||||
|
node.style.backgroundColor = option.backgroundColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
return node;
|
||||||
|
};
|
||||||
|
|
||||||
|
if (this.type === TYPE.STROKE) {
|
||||||
|
stroke(this, cloneSvg);
|
||||||
|
} else {
|
||||||
|
this.text.forEach(function (v) {
|
||||||
|
var node = cloneSvg(_this.option);
|
||||||
|
|
||||||
|
_this.writers.push(HanziWriter.create(node, v, _this.option));
|
||||||
|
|
||||||
|
_this.el.appendChild(node);
|
||||||
|
});
|
||||||
|
|
||||||
|
if (this.type === TYPE.ANIMATION) {
|
||||||
|
var isStart = false;
|
||||||
|
|
||||||
|
this.animateStart = function () {
|
||||||
|
if (isStart) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
isStart = true;
|
||||||
|
|
||||||
|
if (_this.option.loopAnimate) {
|
||||||
|
_this.loopAnimate();
|
||||||
|
} else {
|
||||||
|
_this.animate(_this.option.animateComplete);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (this.option.autoAnimate) {
|
||||||
|
this.animateStart();
|
||||||
|
} else {
|
||||||
|
var start = function start() {
|
||||||
|
_this.animateStart();
|
||||||
|
|
||||||
|
_this.el.removeEventListener('click', start, false);
|
||||||
|
};
|
||||||
|
|
||||||
|
this.el.addEventListener('click', start, false);
|
||||||
|
}
|
||||||
|
} else if (this.type === TYPE.TEST) {
|
||||||
|
var opt = function opt() {
|
||||||
|
return {};
|
||||||
|
};
|
||||||
|
|
||||||
|
var fn = this.option.onTestStatus;
|
||||||
|
|
||||||
|
if (typeof fn === 'function') {
|
||||||
|
opt = function opt(index) {
|
||||||
|
return {
|
||||||
|
onMistake: function onMistake(strokeData) {
|
||||||
|
fn({
|
||||||
|
index: index,
|
||||||
|
status: TEST_STATUS.MISTAKE,
|
||||||
|
data: strokeData
|
||||||
|
});
|
||||||
|
},
|
||||||
|
onCorrectStroke: function onCorrectStroke(strokeData) {
|
||||||
|
fn({
|
||||||
|
index: index,
|
||||||
|
status: TEST_STATUS.CORRECT,
|
||||||
|
data: strokeData
|
||||||
|
});
|
||||||
|
},
|
||||||
|
onComplete: function onComplete(summaryData) {
|
||||||
|
fn({
|
||||||
|
index: index,
|
||||||
|
status: TEST_STATUS.COMPLETE,
|
||||||
|
data: summaryData
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
this.writers.forEach(function (writer, index) {
|
||||||
|
writer.quiz(opt(index));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
key: "animate",
|
||||||
|
value: function animate(complete) {
|
||||||
|
var _this2 = this;
|
||||||
|
|
||||||
|
var opt = this.option;
|
||||||
|
|
||||||
|
if (opt.stepByStep) {
|
||||||
|
// 汉字之间连续绘制
|
||||||
|
if (opt.showCharacter === false) {
|
||||||
|
this.writers.forEach(function (writer) {
|
||||||
|
writer.hideCharacter();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
this._animateStep(0, complete);
|
||||||
|
} else {
|
||||||
|
(function () {
|
||||||
|
// 汉字一起绘制，笔画最多的绘制完成才算全部绘制完成
|
||||||
|
var index = 0;
|
||||||
|
|
||||||
|
for (var i = 0; i < _this2.writers.length; i++) {
|
||||||
|
_this2._animateSingle(i, function () {
|
||||||
|
index++;
|
||||||
|
|
||||||
|
if (index === _this2.writers.length) {
|
||||||
|
complete();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
key: "loopAnimate",
|
||||||
|
value: function loopAnimate() {
|
||||||
|
var _this3 = this;
|
||||||
|
|
||||||
|
var opt = this.option;
|
||||||
|
this.animate(function () {
|
||||||
|
opt.animateComplete();
|
||||||
|
setTimeout(function () {
|
||||||
|
_this3.loopAnimate();
|
||||||
|
}, opt.delayBetweenStrokes);
|
||||||
|
});
|
||||||
|
} // animate单个汉字
|
||||||
|
|
||||||
|
}, {
|
||||||
|
key: "_animateSingle",
|
||||||
|
value: function _animateSingle(i, complete) {
|
||||||
|
if (i >= this.writers.length) {
|
||||||
|
complete(true);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.writers[i].animateCharacter({
|
||||||
|
onComplete: function onComplete() {
|
||||||
|
complete(false);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
key: "_animateStep",
|
||||||
|
value: function _animateStep(index, complete) {
|
||||||
|
var _this4 = this;
|
||||||
|
|
||||||
|
this._animateSingle(index, function (end) {
|
||||||
|
if (!end) {
|
||||||
|
setTimeout(function () {
|
||||||
|
_this4._animateStep(index + 1, complete);
|
||||||
|
}, _this4.option.delayBetweenStrokes);
|
||||||
|
} else {
|
||||||
|
complete();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}]);
|
||||||
|
|
||||||
|
return Writer;
|
||||||
|
}(); // eslint-disable-next-line no-unused-vars
|
||||||
|
|
||||||
|
|
||||||
|
function draw() {
|
||||||
|
var text = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
|
||||||
|
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
||||||
|
|
||||||
|
if (typeof window === 'undefined') {
|
||||||
|
console.error('Draw 方法仅支持在浏览器环境下使用');
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
text = pickCnChar(text);
|
||||||
|
|
||||||
|
if (!text) {
|
||||||
|
throw new Error('Draw 方法text必须含有中文');
|
||||||
|
}
|
||||||
|
|
||||||
|
options.text = text;
|
||||||
|
return new Writer(options);
|
||||||
|
}
|
||||||
|
|
||||||
|
;
|
||||||
|
draw.TYPE = TYPE;
|
||||||
|
draw.TEST_STATUS = TEST_STATUS;
|
||||||
|
module.exports = draw;
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -1,11 +1,11 @@
|
||||||
import {Draw} from 'cnchar-draw';
|
import {Draw} from 'cnchar-draw';
|
||||||
// import {Draw} from 'cnchar-draw';
|
// import {Draw} from 'cnchar-draw';
|
||||||
|
|
||||||
declare type spellArg = 'array' | 'low' | 'up' | 'first' | 'poly' | 'tone' | 'simple';
|
declare type spellArg = 'array' | 'low' | 'up' | 'first' | 'poly' | 'tone' | 'simple' | 'trad';
|
||||||
declare type strokeArg = 'letter' | 'shape' | 'count' | 'name' | 'detail' | 'array' | 'order' | 'simple';
|
declare type strokeArg = 'letter' | 'shape' | 'count' | 'name' | 'detail' | 'array' | 'order' | 'simple' | 'trad';
|
||||||
declare type orderToWordArg = 'match' | 'matchorder' | 'contain' | 'start' | 'simple' | 'array';
|
declare type orderToWordArg = 'match' | 'matchorder' | 'contain' | 'start' | 'array' | 'simple' | 'trad';
|
||||||
declare type spellToWordArg = 'simple' | 'trad' | 'poly' | 'alltone' | 'array';
|
declare type spellToWordArg = 'poly' | 'alltone' | 'array' | 'simple' | 'trad';
|
||||||
declare type strokeToWordArg = 'simple' | 'trad' | 'array';
|
declare type strokeToWordArg = 'array' | 'simple' | 'trad';
|
||||||
declare type pluginArg = 'order' | 'trad' | 'poly';
|
declare type pluginArg = 'order' | 'trad' | 'poly';
|
||||||
declare type orderName = '横折折撇' | '竖弯' | '横折' | '撇点' | '横斜钩' | '横' | '捺' | '横折钩' | '竖' | '竖钩' | '点' | '撇' | '撇折' | '竖折撇' | '横折折折钩' | '竖折折钩' | '提' | '弯钩' | '斜钩' | '横折折' | '横撇' | '横折提' | '横折折折' | '竖提' | '竖弯钩'
|
declare type orderName = '横折折撇' | '竖弯' | '横折' | '撇点' | '横斜钩' | '横' | '捺' | '横折钩' | '竖' | '竖钩' | '点' | '撇' | '撇折' | '竖折撇' | '横折折折钩' | '竖折折钩' | '提' | '弯钩' | '斜钩' | '横折折' | '横撇' | '横折提' | '横折折折' | '竖提' | '竖弯钩'
|
||||||
| '竖折折' | '横撇弯钩' | '卧钩' | '横折弯' | '横钩';
|
| '竖折折' | '横撇弯钩' | '卧钩' | '横折弯' | '横钩';
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "hanzi-util-base",
|
"name": "hanzi-util-base",
|
||||||
"version": "2.1.0",
|
"version": "2.1.3",
|
||||||
"description": "功能全面、多端支持的汉字拼音笔画js库，支持多音字、繁体字、火星文",
|
"description": "功能全面、多端支持的汉字拼音笔画js库，支持多音字、繁体字、火星文",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"unpkg": "hanzi.base.min.js",
|
"unpkg": "hanzi.base.min.js",
|
||||||
|
|
@ -27,6 +27,6 @@
|
||||||
},
|
},
|
||||||
"homepage": "https://www.theajack.com/cnchar/",
|
"homepage": "https://www.theajack.com/cnchar/",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"cnchar": "^2.1.0"
|
"cnchar": "^2.1.3"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -1,11 +1,11 @@
|
||||||
import {Draw} from 'cnchar-draw';
|
import {Draw} from 'cnchar-draw';
|
||||||
// import {Draw} from 'cnchar-draw';
|
// import {Draw} from 'cnchar-draw';
|
||||||
|
|
||||||
declare type spellArg = 'array' | 'low' | 'up' | 'first' | 'poly' | 'tone' | 'simple';
|
declare type spellArg = 'array' | 'low' | 'up' | 'first' | 'poly' | 'tone' | 'simple' | 'trad';
|
||||||
declare type strokeArg = 'letter' | 'shape' | 'count' | 'name' | 'detail' | 'array' | 'order' | 'simple';
|
declare type strokeArg = 'letter' | 'shape' | 'count' | 'name' | 'detail' | 'array' | 'order' | 'simple' | 'trad';
|
||||||
declare type orderToWordArg = 'match' | 'matchorder' | 'contain' | 'start' | 'simple' | 'array';
|
declare type orderToWordArg = 'match' | 'matchorder' | 'contain' | 'start' | 'array' | 'simple' | 'trad';
|
||||||
declare type spellToWordArg = 'simple' | 'trad' | 'poly' | 'alltone' | 'array';
|
declare type spellToWordArg = 'poly' | 'alltone' | 'array' | 'simple' | 'trad';
|
||||||
declare type strokeToWordArg = 'simple' | 'trad' | 'array';
|
declare type strokeToWordArg = 'array' | 'simple' | 'trad';
|
||||||
declare type pluginArg = 'order' | 'trad' | 'poly';
|
declare type pluginArg = 'order' | 'trad' | 'poly';
|
||||||
declare type orderName = '横折折撇' | '竖弯' | '横折' | '撇点' | '横斜钩' | '横' | '捺' | '横折钩' | '竖' | '竖钩' | '点' | '撇' | '撇折' | '竖折撇' | '横折折折钩' | '竖折折钩' | '提' | '弯钩' | '斜钩' | '横折折' | '横撇' | '横折提' | '横折折折' | '竖提' | '竖弯钩'
|
declare type orderName = '横折折撇' | '竖弯' | '横折' | '撇点' | '横斜钩' | '横' | '捺' | '横折钩' | '竖' | '竖钩' | '点' | '撇' | '撇折' | '竖折撇' | '横折折折钩' | '竖折折钩' | '提' | '弯钩' | '斜钩' | '横折折' | '横撇' | '横折提' | '横折折折' | '竖提' | '竖弯钩'
|
||||||
| '竖折折' | '横撇弯钩' | '卧钩' | '横折弯' | '横钩';
|
| '竖折折' | '横撇弯钩' | '卧钩' | '横折弯' | '横钩';
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "hanzi-util",
|
"name": "hanzi-util",
|
||||||
"version": "2.1.0",
|
"version": "2.1.3",
|
||||||
"description": "功能全面、多端支持的汉字拼音笔画js库，支持多音字、繁体字、火星文",
|
"description": "功能全面、多端支持的汉字拼音笔画js库，支持多音字、繁体字、火星文",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"unpkg": "hanzi.util.min.js",
|
"unpkg": "hanzi.util.min.js",
|
||||||
|
|
@ -27,6 +27,6 @@
|
||||||
},
|
},
|
||||||
"homepage": "https://www.theajack.com/cnchar/",
|
"homepage": "https://www.theajack.com/cnchar/",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"cnchar-all": "^2.1.0"
|
"cnchar-all": "^2.1.3"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue