Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 5995
Star 90
Fork 162
H
hello uni-app x
提交 4b47ae18 编写于 作者: DCloud-yinjiacheng's avatar DCloud-yinjiacheng
浏览文件
操作

新增rich-text示例

上级 c1adbae8
隐藏空白更改
内联 并排
Showing with 410 addition and 1 deletion
pages.json
浏览文件 @ 4b47ae18
......@@ -55,6 +55,24 @@
"style": {
"navigationBarTitleText": "radio"
}
},
{
"path": "pages/component/rich-text/rich-text",
"style": {
"navigationBarTitleText": "rich-text"
}
},
{
"path": "pages/component/rich-text/rich-text-tags",
"style": {
"navigationBarTitleText": "rich-text-tags"
}
},
{
"path": "pages/component/rich-text/rich-text-complex",
"style": {
"navigationBarTitleText": "rich-text-complex"
}
},
{
"path": "pages/component/checkbox/checkbox",
......
pages/component/rich-text/rich-text-complex.uvue 0 → 100644
浏览文件 @ 4b47ae18
<template>
<!-- #ifdef APP -->
<scroll-view>
<!-- #endif -->
<view>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap uni-common-mt">
<rich-text :nodes="htmlString" @itemclick="itemClick"></rich-text>
</view>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script>
export default {
data() {
return {
title: 'rich-text-complex',
htmlString: '<p><a href="https://www.dcloud.io/hbuilderx.html">HBuilderX</a><br /><h1>HBuilderX，轻巧、极速，极客编辑器</h1><p style="color:red;"><small>HBuilderX，轻巧、极速，极客编辑器 </small><big>HBuilderX，轻巧、极速，极客编辑器</big><strong>HBuilderX，轻巧、极速，极客编辑器 </strong><i>HBuilderX，轻巧、极速，极客编辑器 </i><u>HBuilderX，轻巧、极速，极客编辑器</u><del>HBuilderX，轻巧、极速，极客编辑器</del></p><h2>uni-app x，终极跨平台方案</h2><p style="background-color: yellow;"><small>uni-app x，终极跨平台方案 </small><big>uni-app x，终极跨平台方案 </big><strong>uni-appx，终极跨平台方案 </strong><i>uni-app x，终极跨平台方案 </i><u>uni-app x，终极跨平台方案 </u><del>uni-app x，终极跨平台方案</del></p><h3>uniCloud，js serverless云服务</h3><p style="text-decoration: line-through;"><small>uniCloud，js serverless云服务 </small><big>uniCloud，js serverless云服务</big><strong>uniCloud，js serverless云服务 </strong><i>uniCloud，js serverless云服务 </i><u>uniCloud，js serverless云服务</u><del>uniCloud，js serverless云服务</del></p><h4>uts，大一统语言</h4><p style="text-align: center;"><small>uts，大一统语言 </small><big>uts，大一统语言 </big><strong>uts，大一统语言 </strong><i>uts，大一统语言</i><u>uts，大一统语言 </u><del>uts，大一统语言</del></p><h5>uniMPSdk，让你的App具备小程序能力</h5><h6>uni-admin，开源、现成的全端管理后台</h6><ul><li style="color: red; text-align: left;">uni-app x，终极跨平台方案</li><li style="color: green; text-align: center;">uni-app x，终极跨平台方案</li><li style="color: blue; text-align: right;">uni-app x，终极跨平台方案</li></ul><a href="https://uniapp.dcloud.net.cn">uni-app</a></p>'
}
},
methods: {
itemClick(e : RichTextItemClickEvent) {
console.log(JSON.stringify(e.detail));
}
}
}
</script>
<style>
</style>
\ No newline at end of file
pages/component/rich-text/rich-text-tags.uvue 0 → 100644
浏览文件 @ 4b47ae18
<template>
<!-- #ifdef APP -->
<scroll-view>
<!-- #endif -->
<view>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-title">
<text class="uni-title-text">支持的HTML标签</text>
</view>
<view class="uni-common-mt" v-for="(item,index) in data" :key="index">
<text class="uni-subtitle-text">{{item.name}}</text>
<view style="background:#FFFFFF;">
<rich-text :nodes="item.html" @itemclick="itemClick"></rich-text>
</view>
</view>
</view>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script>
export default {
data() {
return {
title: 'rich-text-tags',
data: [
{
name: '<br/>',
html: [
{
name: 'br',
children: [
{
type: 'text',
text: 'hello uni-app x'
}
]
},
{
name: 'br'
}
] as Array<UTSJSONObject>
},
{
name: '<p/>',
html: [
{
name: 'p',
attrs: {
style: 'text-align: center; text-decoration: line-through;'
},
children: [
{
type: 'text',
text: 'hello uni-app x'
}
]
},
{
name: 'p',
attrs: {
style: 'background-color: green; color: red;'
},
children: [
{
type: 'text',
text: 'hello uni-app x'
}
]
}
] as Array<UTSJSONObject>
},
{
name: '<ul/> <li/>',
html: [
{
name: 'ul',
children: [
{
name: 'li',
attrs: {
style: 'text-decoration: line-through; text-align: center;'
},
children: [
{
type: 'text',
text: 'hello uni-app x'
}
]
},
{
name: 'li',
attrs: {
style: 'color: red; background-color: green; text-align: center;'
},
children: [
{
type: 'text',
text: 'hello uni-app x'
}
]
}
],
}
] as Array<UTSJSONObject>
},
{
name: '<span/>',
html: [
{
name: 'span',
attrs: {
style: 'color: red; background-color: green; text-decoration: line-through;'
},
children: [
{
type: 'text',
text: 'hello uni-app x'
}
]
}
] as Array<UTSJSONObject>
},
{
name: '<strong/>',
html: [
{
name: 'strong',
children: [
{
type: 'text',
text: 'hello uni-app x'
}
]
}
] as Array<UTSJSONObject>
},
{
name: '<i/>',
html: [
{
name: 'i',
children: [
{
type: 'text',
text: 'hello uni-app x'
}
]
}
] as Array<UTSJSONObject>
},
{
name: '<big/>',
html: [
{
name: 'big',
children: [
{
type: 'text',
text: 'hello uni-app x'
}
]
}
] as Array<UTSJSONObject>
},
{
name: '<small/>',
html: [
{
name: 'small',
children: [
{
type: 'text',
text: 'hello uni-app x'
}
]
}
] as Array<UTSJSONObject>
},
{
name: '<a/>',
html: [
{
name: 'a',
attrs: {
href: 'https://www.baidu.com'
},
children: [
{
type: 'text',
text: '百度'
}
]
}
] as Array<UTSJSONObject>
},
{
name: '<u/>',
html: [
{
name: 'u',
children: [
{
type: 'text',
text: 'hello uni-app x'
}
]
}
] as Array<UTSJSONObject>
},
{
name: '<del/>',
html: [
{
name: 'del',
children: [
{
type: 'text',
text: 'hello uni-app x'
}
]
}
] as Array<UTSJSONObject>
},
{
name: '<h1/> <h2/> <h3/> <h4/> <h5/> <h6/>',
html: [
{
name: 'h1',
children: [
{
type: 'text',
text: 'hello uni-app x'
}
]
},
{
name: 'h2',
children: [
{
type: 'text',
text: 'hello uni-app x'
}
]
},
{
name: 'h3',
children: [
{
type: 'text',
text: 'hello uni-app x'
}
]
},
{
name: 'h4',
children: [
{
type: 'text',
text: 'hello uni-app x'
}
]
},
{
name: 'h5',
children: [
{
type: 'text',
text: 'hello uni-app x'
}
]
},
{
name: 'h6',
children: [
{
type: 'text',
text: 'hello uni-app x'
}
]
}
] as Array<UTSJSONObject>
},
{
name: '<img/>',
html: [
{
name: 'img',
attrs: {
src: 'https://web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png',
width: '100px',
height: '100px'
}
}
] as Array<UTSJSONObject>
}
] as Array<TagInfo>
}
},
methods: {
itemClick(e : RichTextItemClickEvent) {
console.log(JSON.stringify(e.detail));
}
}
}
type TagInfo = {
name : string,
html : Array<UTSJSONObject>
}
</script>
<style>
</style>
\ No newline at end of file
pages/component/rich-text/rich-text.uvue 0 → 100644
浏览文件 @ 4b47ae18
<template>
<view>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-btn-v">
<button type="primary" @tap="singleTag">rich-text渲染单个HTML标签示例</button>
</view>
<view class="uni-btn-v">
<button type="primary" @tap="complexTags">rich-text渲染复杂HTML示例</button>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'rich-text'
}
},
methods: {
singleTag() {
uni.navigateTo({
url: '/pages/component/rich-text/rich-text-tags'
});
},
complexTags() {
uni.navigateTo({
url: '/pages/component/rich-text/rich-text-complex'
});
}
}
}
</script>
<style>
</style>
\ No newline at end of file
pages/tabBar/component.uvue
浏览文件 @ 4b47ae18
......@@ -110,7 +110,7 @@ export default {
},
{
name: 'rich-text',
enable: false,
enable: true,
},
{
name: 'progress',
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或