20260817225227

2026-08-17 22:52:27 +08:00
1 parent d3acc7d28f
commit b90ae89b0e
@@ -22,8 +22,8 @@ const multiFormat = ['YYYY年MM月DD日', 'YYYY-MM-DD']
      <p class="eyebrow">Components</p>
      <h2 id="date-title">DatePicker 日期选择</h2>
      <p>
-        format 同时决定选择面板、选择精度和展示格式；valueFormat 仅控制绑定值格式，
-        未设置时自动跟随 format。
+        format 同时决定选择面板、选择精度和展示格式；valueFormat 仅控制绑定值格式， 未设置时自动跟随
+        format。
      </p>
    </div>

@@ -46,7 +46,10 @@ function openDrawer(placement) {
      :placement="drawerPlacement"
      :width="360"
    >
-      <p>抽屉从<strong>{{ drawerPlacement }}</strong>侧滑入，拖动边缘可调整尺寸；点击遮罩、关闭按钮或按 Esc 均可关闭。</p>
+      <p>
+        抽屉从<strong>{{ drawerPlacement }}</strong
+        >侧滑入，拖动边缘可调整尺寸；点击遮罩、关闭按钮或按 Esc 均可关闭。
+      </p>
      <p style="margin-top: 12px">适用于表单填写、详情查看等需要更大空间的场景。</p>
    </Drawer>

@@ -54,7 +57,10 @@ function openDrawer(placement) {
      <template #extra>
        <Button type="link">帮助</Button>
      </template>
-      <p>头部左侧通过 <code>#extra</code> 插槽放入附加操作，底部通过 <code>#footer</code> 插槽放置按钮。</p>
+      <p>
+        头部左侧通过 <code>#extra</code> 插槽放入附加操作，底部通过
+        <code>#footer</code> 插槽放置按钮。
+      </p>
      <template #footer>
        <Button type="outline" @click="drawerCustomOpen = false">取消</Button>
        <Button type="default" @click="drawerCustomOpen = false">确定</Button>
@@ -122,7 +122,12 @@ const contextItems = [

    <p class="demo-label">右键触发</p>
    <div class="demo-panel">
-      <Dropdown :items="contextItems" trigger="contextmenu" placement="bottom-start" @click="onSelect">
+      <Dropdown
+        :items="contextItems"
+        trigger="contextmenu"
+        placement="bottom-start"
+        @click="onSelect"
+      >
        <template #trigger>
          <div class="dropdown-demo-context">在此区域右键</div>
        </template>
@@ -155,7 +155,12 @@ function onPickerReset() {
        @reset="onCustomReset"
      >
        <FormItem name="phone" label="手机号">
-          <Input v-model="customModel.phone" placeholder="请输入 11 位手机号" maxlength="11" allow-clear />
+          <Input
+            v-model="customModel.phone"
+            placeholder="请输入 11 位手机号"
+            maxlength="11"
+            allow-clear
+          />
        </FormItem>
        <FormItem name="code" label="验证码" help="输入短信中的 6 位数字">
          <Input v-model="customModel.code" placeholder="6 位数字" maxlength="6" allow-clear />
@@ -63,7 +63,10 @@ function saveWithFeedback() {
    </div>

    <Modal v-model:open="modalBasicOpen" title="基础模态框" :width="440">
-      <p>这是一个基础模态框。拖动标题栏可移动位置，拖动右下角可调整尺寸；右上角可切换全屏；点击遮罩、关闭按钮或按 Esc 均可关闭。</p>
+      <p>
+        这是一个基础模态框。拖动标题栏可移动位置，拖动右下角可调整尺寸；右上角可切换全屏；点击遮罩、关闭按钮或按
+        Esc 均可关闭。
+      </p>
    </Modal>

    <Modal v-model:open="modalCenteredOpen" title="垂直居中" :width="440" centered>
@@ -134,12 +134,7 @@ onBeforeUnmount(() => {

    <p class="demo-label">自定义字段名（labelKey / valueKey）</p>
    <div class="demo-panel demo-panel-grid">
-      <Select
-        v-model="regionValue"
-        :options="regionOptions"
-        label-key="name"
-        value-key="code"
-      />
+      <Select v-model="regionValue" :options="regionOptions" label-key="name" value-key="code" />
    </div>

    <p class="demo-label">插槽自定义选项</p>
@@ -13,7 +13,6 @@ const tableRows = [
  { name: '组件库', version: '1.2.0', status: '运行中' },
  { name: '主题系统', version: '2.0.0', status: '已停用' },
 ]
-
 </script>

 <template>
@@ -111,7 +110,9 @@ const tableRows = [
        </Spin>
      </div>

-      <p class="spin-hint">同一卡片在未包裹与包裹 Spin（含加载中）两种状态下尺寸一致，内部元素位置不偏移。</p>
+      <p class="spin-hint">
+        同一卡片在未包裹与包裹 Spin（含加载中）两种状态下尺寸一致，内部元素位置不偏移。
+      </p>
    </div>
  </section>
 </template>
@@ -15,7 +15,9 @@ function onSplitterResize(sizes) {
    <div class="section-heading">
      <p class="eyebrow">Components</p>
      <h2 id="splitter-title">Splitter 分割面板</h2>
-      <p>水平或垂直分割容器，拖动分隔条调整各面板尺寸，支持固定尺寸、最小/最大约束与键盘方向键操作。</p>
+      <p>
+        水平或垂直分割容器，拖动分隔条调整各面板尺寸，支持固定尺寸、最小/最大约束与键盘方向键操作。
+      </p>
    </div>

    <p class="demo-label">水平分割（首尾固定，中间自适应）</p>
@@ -19,7 +19,9 @@ const tabsItems = [
    <div class="section-heading">
      <p class="eyebrow">Components</p>
      <h2 id="tabs-title">Tabs 标签页</h2>
-      <p>line 线型标签页，支持 TabPane 插槽与 items 数组两种数据源、左右侧边布局与键盘方向键导航。</p>
+      <p>
+        line 线型标签页，支持 TabPane 插槽与 items 数组两种数据源、左右侧边布局与键盘方向键导航。
+      </p>
    </div>

    <p class="demo-label">基础用法（TabPane 插槽）</p>