# chris-mpvue-wxparse

> 基于mpVue-waParse的改造

Latest version **0.0.1** (published 2019-09-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install chris-mpvue-wxparse
pnpm add chris-mpvue-wxparse
yarn add chris-mpvue-wxparse
bun add chris-mpvue-wxparse
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2019-09-23 |
| First published | 2019-09-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 81 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | chris |
| Maintainers | chris_wei |
| Keywords | mpvue, wxparse, wxapp |

## Links

- npm: https://www.npmjs.com/package/chris-mpvue-wxparse
- Repository: https://gitee.com/chenweihome/chris-mpvue-wxparse
- npm.io page: https://npm.io/package/chris-mpvue-wxparse

## Recent versions

- 0.0.1 (latest) — 2019-09-23

## README

# mpvue-wxParse 适用于 Mpvue 的微信小程序富文本解析组件

> 支持 Html、Markdown 转 Wxml 可视化，修改自: [mpvue-wxparse](https://github.com/F-loat/mpvue-wxParse)

## 调整优化
* 修复图片太多卡顿的问题
* 修改没有数据时的默认提示

## 属性

| 名称              | 类型           | 默认值        | 描述               |
| -----------------|--------------- | ------------- | ----------------  |
| loading          | Boolean        | false         | 数据加载状态       |
| className        | String         | —             | 自定义 class 名称  |
| content          | String         | —             | 渲染内容           |
| noData           | String         | 数据不能为空   | 空数据时的渲染展示  |
| startHandler     | Function       | 见源码         | 自定义 parser 函数 |
| endHandler       | Function       | null          | 自定义 parser 函数 |
| charsHandler     | Function       | null          | 自定义 parser 函数 |
| imageProp        | Object         | 见下文        | 图片相关参数        |

### 自定义 parser 函数具体介绍

* 传入的参数为当前节点 `node` 对象及解析结果 `results` 对象，例如 `startHandler(node, results)`
* 无需返回值，通过对传入的参数直接操作来完成需要的改动
* 自定义函数会在原解析函数处理之后执行

### imageProp 对象具体属性

| 名称              | 类型           | 默认值        | 描述                |
| -----------------|--------------- | ------------- | ------------------ |
| mode             | String         | 'aspectFit'   | 图片裁剪、缩放的模式 |
| padding          | Number         | 0             | 图片内边距          |
| lazyLoad         | Boolean        | false         | 图片懒加载          |
| domain           | String         | ''            | 图片服务域名        |

## 事件

| 名称             | 参数              | 描述              |
| -----------------|----------------- | ----------------  |
| preview          | 图片地址，原始事件 | 预览图片时触发     |
| navigate         | 链接地址，原始事件 | 点击链接时触发     |

## 基本使用方法

* 安装

``` bash
npm i mpvue-wxparse
```

* 使用

``` vue
<template>
  <div>
    <wxParse :content="article" @preview="preview" @navigate="navigate" />
  </div>
</template>

<script>
import wxParse from 'chris-mpvue-wxparse'

export default {
  components: {
    wxParse
  },
  data () {
    return {
      article: '<div>我是HTML代码</div>'
    }
  },
  methods: {
    preview(src, e) {
      // do something
    },
    navigate(href, e) {
      // do something
    }
  }
}
</script>
```

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