u

code/g3soft-libs/docs/examples/rich-text/readonly.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+// readonly 可聚焦可复制但不可编辑；disabled 整体灰化不可交互
+import { ref } from 'vue'
+import { G3RichText, G3Segmented, G3Space } from '@g3soft/ui'
+
+const mode = ref<'normal' | 'readonly' | 'disabled'>('readonly')
+const html = ref('<p>这是一段<strong>只读</strong>的内容，可以选中复制，但不能编辑。</p>')
+
+const options = [
+  { label: '只读', value: 'readonly' },
+  { label: '禁用', value: 'disabled' },
+  { label: '正常', value: 'normal' },
+]
+</script>
+
+<template>
+  <G3Space vertical :size="12" style="display: flex">
+    <G3Segmented v-model="mode" :options="options" />
+
+    <G3RichText
+      v-model="html"
+      :readonly="mode === 'readonly'"
+      :disabled="mode === 'disabled'"
+    />
+  </G3Space>
+</template>