85 lines
1.9 KiB
Vue
85 lines
1.9 KiB
Vue
<template>
|
||
<ciy-header ref="header" title="ciy-markdown组件"></ciy-header>
|
||
<view>
|
||
<view class="ciy-card">
|
||
<view class="title">MarkDown显示</view>
|
||
<view class="content">
|
||
<view class="tip">
|
||
支持主标题，二三四级标题自动编号。<br />
|
||
支持图片、音频、视频。<br />
|
||
＜开头，支持原始HTML。<br />
|
||
**加粗**、`强调`。<br />
|
||
#标题、@内容c/r对齐。<br />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="ciy-hr"></view>
|
||
<ciy-markdown :md="md"></ciy-markdown>
|
||
<view class="ciy-hr"></view>
|
||
<view class="px4 py2">文本内容：</view>
|
||
<view style="padding:0 2em 1em 1em;">
|
||
<ciy-textarea v-model="md"></ciy-textarea>
|
||
</view>
|
||
|
||
<view class="ciy-card">
|
||
<view class="title">属性</view>
|
||
<view class="content">
|
||
<view class="prp">md</view>
|
||
<view class="tip">
|
||
Markdown内容。<br/>
|
||
[MD]开头。<br/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-card">
|
||
<view class="title">方法</view>
|
||
<view class="content">
|
||
无
|
||
</view>
|
||
</view>
|
||
<view class="ciy-card">
|
||
<view class="title">事件</view>
|
||
<view class="content">
|
||
无
|
||
</view>
|
||
</view>
|
||
<view class="hr"></view>
|
||
</view>
|
||
</template>
|
||
|
||
<style scoped>
|
||
@import '@/pages/demo/zdemo.css';
|
||
</style>
|
||
|
||
<script>
|
||
import zmixin from '@/pages/demo/zmixin.js';
|
||
export default {
|
||
mixins: [zmixin],
|
||
data() {
|
||
return {
|
||
md: `[MD]
|
||
#C标题
|
||
内容
|
||
##标题
|
||
**加粗内容**内容内容内容内容\`内容\`内容内容内容内容内容内容内容内容内容内容。
|
||
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容。
|
||
###标题
|
||
<text style="color:#ff0000">自定义HTML</text>
|
||
####图片
|
||
!/img/face.png
|
||
####音乐
|
||
!/img/music1.mp3
|
||
####视频
|
||
!/img/video1.mp4
|
||
####小标题
|
||
@c居中显示
|
||
###标题
|
||
@r右侧显示
|
||
`,
|
||
}
|
||
},
|
||
onLoad() {},
|
||
methods: {}
|
||
}
|
||
</script> |