这个项目能做什么
# vue-dompurify-html
`vue-dompurify-html` 是一个 Vue.js 指令，为内置的 `v-html` 指令提供了安全的替代方案。它利用 DOMPurify 库在渲染 HTML 内容之前对其进行清理，有助于防止跨站脚本（XSS）漏洞。
## 特性
- **安全的 HTML 渲染**：在插入 DOM 之前，自动使用 DOMPurify 清理 HTML 字符串。
- **直接替换**：可在 Vue 2 和 Vue 3 项目中直接替代 `v-html`。
- **可配置**：支持自定义 DOMPurify 配置选项，以定制清理规则。
- **TypeScript 支持**：包含 TypeScript 类型定义，提供更好的开发体验。
## 安装
通过 npm 或 yarn 安装该包：
```bash
npm install vue-dompurify-html
# 或
yarn add vue-dompurify-html
```
## 用法
### Vue 3
在应用入口文件中全局注册该指令：
```javascript
import { createApp } from 'vue'
import App from './App.vue'
import VueDOMPurifyHTML from 'vue-dompurify-html'
const app = createApp(App)
app.use(VueDOMPurifyHTML)
app.mount('#app')
```
然后在模板中使用它：
```html
<template>
<div v-dompurify-html="htmlContent"></div>
</template>
```
### Vue 2
对于 Vue 2，导入该包并将其注册为插件：
```javascript
import Vue from 'vue'
import VueDOMPurifyHTML from 'vue-dompurify-html'
Vue.use(VueDOMPurifyHTML)
```
## 配置
你可以直接将 DOMPurify 配置选项传递给该指令：
```html
<div v-dompurify-html="{ content: htmlContent, options: { USE_PROFILES: { html: true } } }"></div>
```
或者，你可以在注册插件时设置全局默认值：
```javascript
app.use(VueDOMPurifyHTML, {
default: {
USE_PROFILES: { html: true }
}
})
```
## 许可证
本项目基于 MIT 许可证授权。详情请参阅 [LICENSE](LICENSE) 文件。
## 贡献
欢迎贡献！在提交拉取请求之前，请阅读[贡献指南](CONTRIBUTING.md)。
## 致谢
本包的灵感来源于在 Vue 应用中更安全地渲染 HTML 的需求，并建立在 DOMPurify 团队的出色工作之上。
评论
0 评分人数达到10人后显示
登录后参与讨论。