rich-text
富文本。
| 属性 | 类型 | 默认值 | 说明 | 版本 |
|---|---|---|---|---|
nodes | array/string | [] | 节点列表/HTML string |
nodes
| 属性 | 说明 | 类型 | 必填 | 备注 |
|---|---|---|---|---|
| name | 标签名 | string | 是 | 支持部分受信任的 HTML 节点 |
| attrs | 属性 | object | 否 | 支持部分受信任的属性，遵循 Pascal 命名法 |
| children | 子节点列表 | array | 否 | 结构和 nodes 一致 |
文本节点：type = text
| 属性 | 说明 | 类型 | 必填 | 备注 |
|---|---|---|---|---|
| text | 文本 | string | 是 |
受信任的HTML节点及属性
全局支持class和style属性，不支持id属性。
| 节点 | 属性 |
|---|---|
| a | |
| abbr | |
| b | |
| blockquote | |
| br | |
| code | |
| col | span width |
| colgroup | span width |
| dd | |
| del | |
| div | |
| dl | |
| dt | |
| em | |
| fieldset | |
| h1 | |
| h2 | |
| h3 | |
| h4 | |
| h5 | |
| h6 | |
| hr | |
| i | |
| img | alt src height width |
| ins | |
| label | |
| legend | |
| li | |
| ol | start type |
| p | |
| q | |
| span | |
| strong | |
| sub | |
| sup | |
| table | width |
| tbody | |
| td | colspan height rowspan width |
| tfoot | |
| th | colspan height rowspan width |
| thead | |
| tr | |
| ul |
示例代码
<template>
<rich-text :nodes="nodes" @click="tap"></rich-text>
</template>
<script>
export default {
data() {
return {
nodes: [{
name: 'div',
attrs: {
class: 'div_class',
style: 'line-height: 60px; color: red;'
},
children: [{
type: 'text',
text: 'Hello World!'
}]
}]
};
},
methods: {
tap() {
console.log('tap');
}
}
};
</script>
<style scoped>
</style>