34 lines
883 B
Vue
34 lines
883 B
Vue
<template>
|
|
<div class="demo">
|
|
<input v-model="maxHeight" class="field" placeholder="最大高度，如 16rem" />
|
|
<tiptap-view :content="content" :max-height="maxHeight" />
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref } from "vue";
|
|
import { TiptapView } from "timi-tdesign-mobile";
|
|
|
|
const content = `<h2>只读视图</h2>
|
|
<p>与编辑器共用同一套渲染规则，内容超出 <code>maxHeight</code> 时可滚动查看。</p>
|
|
<blockquote><p>适合详情页、审批流等只需要阅读的场景。</p></blockquote>`;
|
|
|
|
const maxHeight = ref("16rem");
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.demo {
|
|
.field {
|
|
width: 100%;
|
|
padding: .375rem .5rem;
|
|
margin-bottom: .75rem;
|
|
box-sizing: border-box;
|
|
font-size: .8125rem;
|
|
border: 1px solid var(--vp-c-divider);
|
|
border-radius: .375rem;
|
|
color: var(--vp-c-text-1);
|
|
background: var(--vp-c-bg);
|
|
}
|
|
}
|
|
</style>
|