# tel-highlight

> TelHighlight 把手机号码转换为数据结构，在 Vue、React、小程序 等任意前端框架渲染，使号码显示中带有高亮部分。

Latest version **0.0.1** (published 2022-03-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install tel-highlight
pnpm add tel-highlight
yarn add tel-highlight
bun add tel-highlight
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2022-03-11 |
| First published | 2022-03-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 9.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | guangzan |
| Maintainers | guangzan |
| Keywords | tel, highlight, 手机号, 高亮 |

## Links

- npm: https://www.npmjs.com/package/tel-highlight
- Repository: https://github.com/guangzan/tel-highlight
- Issues: https://github.com/guangzan/tel-highlight/issues
- npm.io page: https://npm.io/package/tel-highlight

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^3.2.31

## Alternatives

- [@oh-my-pi/pi-natives](https://npm.io/package/@oh-my-pi/pi-natives.md) — 51.8K weekly downloads
- [@capgo/capacitor-light-sensor](https://npm.io/package/@capgo/capacitor-light-sensor.md) — 3.0K weekly downloads
- [@heyhuynhgiabuu/pi-diff](https://npm.io/package/@heyhuynhgiabuu/pi-diff.md) — 492 weekly downloads
- [@lotsa/verdant-lang-asm](https://npm.io/package/@lotsa/verdant-lang-asm.md) — 38 weekly downloads
- [new-era-syntax](https://npm.io/package/new-era-syntax.md) — 20 weekly downloads

## Recent versions

- 0.0.1 (latest) — 2022-03-11

## README

# 手机号码高亮

TelHighlight 把手机号码转换为数据结构，在 Vue、React、小程序 等任意前端框架渲染，使号码显示中带有高亮部分。

![GitHub](https://img.shields.io/github/license/guangzan/tel-highlight)

## 浏览器支持

TelHighlight 支持所有现代浏览器以及 IE9+。

## 安装

如果你使用 NPM 包管理器，可以通过如下命令安装：

```bash
npm i tel-highlight
```

or

```bash
yarn add tel-highlight
```

or

```bash
pnpm add tel-highlight
```

直接使用，[下载 tel-highlight.iife.js](https://github.com/guangzan/tel-highlight/blob/main/dist/index.iife.js) 并引入即可：

```html
<script src="path/to/tel-highlight.iife.js"></script>
```

在小程序中使用，可以通过 NPM 安装或下载并引入。

## 使用

以 Vue 为例：

```html
<script lang="ts" setup>
  import { telHighlight } from 'tel-highlight'
  const telData = telHighlight({ tel: 12345678910, highlight: 5678 })
</script>

<template>
  <div>
    <span
      v-for="(item, index) in telData"
      :key="index"
      :class="{ highlight: item.isHighlight }"
      >{{ item.num }}</span
    >
  </div>
</template>

<style scoped>
  .highlight {
    color: red;
  }
</style>
```

## API

### options.tel

- 描述：手机号码
- 默认值：`undefined`
- 是否必需：是
- 类型：`string | number`

### options.highlight

- 描述：号码中高亮部分
- 默认值：`""`
- 是否必需：否
- 类型：`string | number`

### options.separat

- 描述：是否将号码按照 3,4,4 格式分割
- 默认值：`false`
- 是否必需：否
- 类型：`boolean`

### options.separator

- 描述：分割符，options.separat 为 true 时生效
- 默认值：`" "`
- 是否必需：否
- 类型：`string`

---
_Source: https://npm.io/package/tel-highlight · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._