feat: 添加 rich-text 页面
parent
eab1fcb65c
commit
539b92bd12
3
app.json
3
app.json
|
@ -23,7 +23,8 @@
|
||||||
"pages/component/picker-view/picker-view",
|
"pages/component/picker-view/picker-view",
|
||||||
"pages/component/input/input",
|
"pages/component/input/input",
|
||||||
"pages/component/textarea/textarea",
|
"pages/component/textarea/textarea",
|
||||||
"pages/component/form/form"
|
"pages/component/form/form",
|
||||||
|
"pages/component/rich-text/rich-text"
|
||||||
],
|
],
|
||||||
"window": {
|
"window": {
|
||||||
"backgroundTextStyle": "light",
|
"backgroundTextStyle": "light",
|
||||||
|
|
|
@ -17,7 +17,7 @@ Page({
|
||||||
id: 'content',
|
id: 'content',
|
||||||
name: '基础内容',
|
name: '基础内容',
|
||||||
open: false,
|
open: false,
|
||||||
pages: ['text', 'icon', 'progress']
|
pages: ['text', 'icon', 'rich-text', 'progress']
|
||||||
}, {
|
}, {
|
||||||
id: 'form',
|
id: 'form',
|
||||||
name: '表单组件',
|
name: '表单组件',
|
||||||
|
|
|
@ -0,0 +1,70 @@
|
||||||
|
const htmlSnip =
|
||||||
|
`<div class="div_class">
|
||||||
|
<h1>Title</h1>
|
||||||
|
<p class="p">
|
||||||
|
Life is <i>like</i> a box of
|
||||||
|
<b> chocolates</b>.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
|
||||||
|
const nodeSnip =
|
||||||
|
`Page({
|
||||||
|
data: {
|
||||||
|
nodes: [{
|
||||||
|
name: 'div',
|
||||||
|
attrs: {
|
||||||
|
class: 'div_class',
|
||||||
|
style: 'line-height: 60px; color: red;'
|
||||||
|
},
|
||||||
|
children: [{
|
||||||
|
type: 'text',
|
||||||
|
text: 'You never know what you're gonna get.'
|
||||||
|
}]
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
`
|
||||||
|
|
||||||
|
Page({
|
||||||
|
onShareAppMessage() {
|
||||||
|
return {
|
||||||
|
title: 'rich-text',
|
||||||
|
path: 'page/component/pages/rich-text/rich-text'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
data: {
|
||||||
|
htmlSnip,
|
||||||
|
nodeSnip,
|
||||||
|
renderedByHtml: false,
|
||||||
|
renderedByNode: false,
|
||||||
|
nodes: [{
|
||||||
|
name: 'div',
|
||||||
|
attrs: {
|
||||||
|
class: 'div_class',
|
||||||
|
style: 'line-height: 60px; color: #1AAD19;'
|
||||||
|
},
|
||||||
|
children: [{
|
||||||
|
type: 'text',
|
||||||
|
text: 'You never know what you\'re gonna get.'
|
||||||
|
}]
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
renderHtml() {
|
||||||
|
this.setData({
|
||||||
|
renderedByHtml: true
|
||||||
|
})
|
||||||
|
},
|
||||||
|
renderNode() {
|
||||||
|
this.setData({
|
||||||
|
renderedByNode: true
|
||||||
|
})
|
||||||
|
},
|
||||||
|
enterCode(e) {
|
||||||
|
console.log(e.detail.value)
|
||||||
|
this.setData({
|
||||||
|
htmlSnip: e.detail.value
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
|
@ -0,0 +1,3 @@
|
||||||
|
{
|
||||||
|
"navigationBarTitleText": "rich-text"
|
||||||
|
}
|
|
@ -0,0 +1,26 @@
|
||||||
|
<view class="container">
|
||||||
|
<view class="page-body">
|
||||||
|
<view class="page-section">
|
||||||
|
<view class="page-section-title">通过HTML String渲染</view>
|
||||||
|
<view class="page-content">
|
||||||
|
<scroll-view scroll-y>{{htmlSnip}}</scroll-view>
|
||||||
|
<button style="margin: 30rpx 0" type="primary" bindtap="renderHtml">渲染HTML</button>
|
||||||
|
<block wx:if="{{renderedByHtml}}">
|
||||||
|
<rich-text nodes="{{htmlSnip}}"></rich-text>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="page-section">
|
||||||
|
<view class="page-section-title">通过节点渲染</view>
|
||||||
|
<view class="page-content">
|
||||||
|
<scroll-view scroll-y>{{nodeSnip}}</scroll-view>
|
||||||
|
<button style="margin: 30rpx 0" type="primary" bindtap="renderNode">渲染Node</button>
|
||||||
|
<block wx:if="{{renderedByNode}}">
|
||||||
|
<rich-text nodes="{{nodes}}"></rich-text>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
|
@ -0,0 +1 @@
|
||||||
|
/* pages/component/rich-text/rich-text.wxss */
|
Loading…
Reference in New Issue