add vitepress docs

2026-09-21 16:05:14 +08:00
parent b435bf992e
commit 37cf38fe27
73 changed files with 7003 additions and 802 deletions
@@ -0,0 +1,87 @@
+<template>
+	<div class="demo">
+		<div class="bar">
+			<button type="button" class="btn" @click="readValue" v-text="'读取内容'" />
+			<button type="button" class="btn" @click="openSearch" v-text="'打开查找'" />
+		</div>
+
+		<div class="box">
+			<code-editor
+				ref="editorRef"
+				v-model="code"
+				language="typescript"
+				placeholder="请输入代码"
+				@change="onChange"
+			/>
+		</div>
+
+		<p class="status" v-text="status" />
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+import { CodeEditor } from "timi-tdesign-mobile";
+import type { CodeEditorExpose } from "timi-tdesign-mobile";
+
+const DEMO_CODE = `type DemoUser = {
+	id: string;
+	name: string;
+};
+
+const user: DemoUser = {
+	id: "demo-001",
+	name: "Timi"
+};`;
+
+const code = ref(DEMO_CODE);
+const status = ref("等待操作");
+const editorRef = ref<CodeEditorExpose>();
+
+function onChange(value: string) {
+	status.value = `内容已更新，${value.length} 个字符`;
+}
+
+function readValue() {
+	status.value = `当前共 ${code.value.length} 个字符`;
+}
+
+function openSearch() {
+	editorRef.value?.openSearch(true);
+}
+</script>
+
+<style lang="less" scoped>
+.demo {
+	.bar {
+		display: flex;
+		gap: .5rem;
+		margin-bottom: .75rem;
+	}
+
+	.btn {
+		padding: .25rem .75rem;
+		font-size: .75rem;
+		cursor: pointer;
+		border: 1px solid var(--vp-c-divider);
+		border-radius: .375rem;
+		color: var(--vp-c-text-1);
+		background: var(--vp-c-bg-soft);
+
+		&:hover {
+			color: var(--vp-c-brand-1);
+			border-color: var(--vp-c-brand-1);
+		}
+	}
+
+	.box {
+		height: 18rem;
+	}
+
+	.status {
+		margin: .75rem 0 0;
+		font-size: .75rem;
+		color: var(--vp-c-text-2);
+	}
+}
+</style>