xt-element-ui 1.3.2 → 1.3.4

package/docs/components/extend/ex-upload.md

@@ -1,134 +1,134 @@
-## ExUpload 图片上传
-
-基于 ElementUI `el-upload` 封装，支持图片上传、预览、删除，以及多图管理。
-
-## 基础用法
-
-设置 `action` 为上传接口路径，`base-url` 为图片基础地址，`v-model` 绑定逗号分隔的图片路径字符串：
-
-::: demo 图片上传基础示例
-```vue
-<template>
-  <ex-upload
-    v-model="imgList"
-    action="/api/upload"
-    base-url="https://example.com"
-  />
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      imgList: ''
-    }
-  }
-}
-</script>
-```
-:::
-
-## 多图上传
-
-设置 `multiple` 开启多图上传，通过 `limit` 限制最多上传数量：
-
-::: demo 多图上传示例
-```vue
-<template>
-  <ex-upload
-    v-model="imgList"
-    action="/api/upload"
-    base-url="https://example.com"
-    multiple
-    :limit="5"
-  />
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      imgList: ''
-    }
-  }
-}
-</script>
-```
-:::
-
-## 图片大小
-
-通过 `size` 属性设置显示尺寸：
-
-::: demo 图片尺寸示例
-```vue
-<template>
-  <div>
-    <ex-upload v-model="img" action="/api/upload" base-url="https://example.com" />
-    <div style="margin-top: 20px">
-      <ex-upload v-model="img" action="/api/upload" base-url="https://example.com" size="big" />
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      img: ''
-    }
-  }
-}
-</script>
-```
-:::
-
-## 禁用状态
-
-`disabled` 属性可禁用上传和删除功能：
-
-::: demo 禁用上传示例
-```vue
-<template>
-  <ex-upload
-    v-model="img"
-    action="/api/upload"
-    base-url="https://example.com"
-    disabled
-  />
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      img: 'demo.jpg'
-    }
-  }
-}
-</script>
-```
-:::
-
-## Attributes
-
-| 参数 | 说明 | 类型 | 可选值 | 默认值 |
-|------|------|------|--------|--------|
-| src | 当前图片列表，以英文逗号分隔（v-model） | string | — | '' |
-| action | 上传接口路径，与 base-url 拼接 | string | — | '' |
-| base-url | 图片基础地址（服务端域名） | string | — | '' |
-| multiple | 是否支持多选 | boolean | — | false |
-| limit | 最多上传数量 | number | — | 5 |
-| accept | 允许的文件类型 | string | — | .jpg,.jpeg,.png |
-| auto-upload | 是否在选取文件后立即上传 | boolean | — | true |
-| disabled | 是否禁用 | boolean | — | false |
-| size | 图片展示尺寸 | string | big | — |
-| data | 上传时附带的额外参数 | object | — | {} |
-| all-file-list | 用于图库预览的图片列表 | array | — | — |
-| before-emit-data | 对上传结果进行处理的回调函数，返回 `false` 代表上传失败 | function(res, file, type) | — | (内部函数) |
-
-## Events
-
-| 事件名 | 说明 | 回调参数 |
-|--------|------|----------|
-| change | 图片列表变化时触发 | 以英文逗号分隔的图片路径字符串 |
+## ExUpload 图片上传
+
+基于 ElementUI `el-upload` 封装，支持图片上传、预览、删除，以及多图管理。
+
+## 基础用法
+
+设置 `action` 为上传接口路径，`base-url` 为图片基础地址，`v-model` 绑定逗号分隔的图片路径字符串：
+
+::: demo 图片上传基础示例
+```vue
+<template>
+  <ex-upload
+    v-model="imgList"
+    action="/api/upload"
+    base-url="https://example.com"
+  />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      imgList: ''
+    }
+  }
+}
+</script>
+```
+:::
+
+## 多图上传
+
+设置 `multiple` 开启多图上传，通过 `limit` 限制最多上传数量：
+
+::: demo 多图上传示例
+```vue
+<template>
+  <ex-upload
+    v-model="imgList"
+    action="/api/upload"
+    base-url="https://example.com"
+    multiple
+    :limit="5"
+  />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      imgList: ''
+    }
+  }
+}
+</script>
+```
+:::
+
+## 图片大小
+
+通过 `size` 属性设置显示尺寸：
+
+::: demo 图片尺寸示例
+```vue
+<template>
+  <div>
+    <ex-upload v-model="img" action="/api/upload" base-url="https://example.com" />
+    <div style="margin-top: 20px">
+      <ex-upload v-model="img" action="/api/upload" base-url="https://example.com" size="big" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      img: ''
+    }
+  }
+}
+</script>
+```
+:::
+
+## 禁用状态
+
+`disabled` 属性可禁用上传和删除功能：
+
+::: demo 禁用上传示例
+```vue
+<template>
+  <ex-upload
+    v-model="img"
+    action="/api/upload"
+    base-url="https://example.com"
+    disabled
+  />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      img: 'demo.jpg'
+    }
+  }
+}
+</script>
+```
+:::
+
+## Attributes
+
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |
+|------|------|------|--------|--------|
+| src | 当前图片列表，以英文逗号分隔（v-model） | string | — | '' |
+| action | 上传接口路径，与 base-url 拼接 | string | — | '' |
+| base-url | 图片基础地址（服务端域名） | string | — | '' |
+| multiple | 是否支持多选 | boolean | — | false |
+| limit | 最多上传数量 | number | — | 5 |
+| accept | 允许的文件类型 | string | — | .jpg,.jpeg,.png |
+| auto-upload | 是否在选取文件后立即上传 | boolean | — | true |
+| disabled | 是否禁用 | boolean | — | false |
+| size | 图片展示尺寸 | string | big | — |
+| data | 上传时附带的额外参数 | object | — | {} |
+| all-file-list | 用于图库预览的图片列表 | array | — | — |
+| before-emit-data | 对上传结果进行处理的回调函数，返回 `false` 代表上传失败 | function(res, file, type) | — | (内部函数) |
+
+## Events
+
+| 事件名 | 说明 | 回调参数 |
+|--------|------|----------|
+| change | 图片列表变化时触发 | 以英文逗号分隔的图片路径字符串 |

package/docs/components/utils/size.md

@@ -1,148 +1,148 @@
-## 字体大小配置
-
-## 概述
-
-通过工具函数可以全局设置组件的字体大小，支持三种预设尺寸：`small`、`medium`、`large`。
-
-## 方法说明
-
-### setSize(size)
-
-设置全局字体大小。
-
-| 参数 | 类型 | 必填 | 说明 |
-|------|------|------|------|
-| `size` | String | 是 | 字体大小：`small`、`medium`、`large` |
-
-```vue
-<template>
-  <div>
-    <XtButton @click="setSmall">小号字体</XtButton>
-    <XtButton @click="setMedium">中号字体</XtButton>
-    <XtButton @click="setLarge">大号字体</XtButton>
-  </div>
-</template>
-
-<script>
-import { setSize } from 'xt-element-ui'
-
-export default {
-  methods: {
-    setSmall() {
-      setSize('small')
-    },
-    setMedium() {
-      setSize('medium')
-    },
-    setLarge() {
-      setSize('large')
-    }
-  }
-}
-</script>
-```
-
-### getSize()
-
-获取当前字体大小配置。
-
-```vue
-<template>
-  <div>
-    <XtText>当前字体大小：{{ currentSize }}</XtText>
-  </div>
-</template>
-
-<script>
-import { getSize } from 'xt-element-ui'
-
-export default {
-  computed: {
-    currentSize() {
-      return getSize()
-    }
-  }
-}
-</script>
-```
-
-## 字体大小对照表
-
-| 尺寸 | 说明 |
-|------|------|
-| `small` | 小号字体，默认值 |
-| `medium` | 中号字体 |
-| `large` | 大号字体，适合大屏展示 |
-
-## 使用示例
-
-### 在组件安装时配置
-
-```javascript
-import XtElementUI from 'xt-element-ui'
-
-Vue.use(XtElementUI, {
-  size: 'large'  // 全局设置大号字体
-})
-```
-
-### 动态切换字体大小
-
-```vue
-<template>
-  <div>
-    <XtFlexBox content="center" style="gap: 16px; margin-bottom: 16px;">
-      <XtButton 
-        v-for="size in sizes" 
-        :key="size"
-        :type="currentSize === size ? 'primary' : ''"
-        @click="changeSize(size)"
-      >
-        {{ sizeLabels[size] }}
-      </XtButton>
-    </XtFlexBox>
-    
-    <XtCard>
-      <XtCardItem title="当前尺寸">
-        <XtText type="primary" bold>{{ currentSize }}</XtText>
-      </XtCardItem>
-      <XtCardItem title="示例文本">
-        <XtText>这是一段示例文本，用于展示字体大小效果。</XtText>
-      </XtCardItem>
-    </XtCard>
-  </div>
-</template>
-
-<script>
-import { setSize, getSize } from 'xt-element-ui'
-
-export default {
-  data() {
-    return {
-      sizes: ['small', 'medium', 'large'],
-      sizeLabels: {
-        small: '小号',
-        medium: '中号',
-        large: '大号'
-      }
-    }
-  },
-  computed: {
-    currentSize() {
-      return getSize()
-    }
-  },
-  methods: {
-    changeSize(size) {
-      setSize(size)
-    }
-  }
-}
-</script>
-```
-
-## 注意事项
-
-1. 字体大小设置会影响所有使用组件库样式的元素
-2. 设置后会在 `html` 标签上添加 `data-size` 属性
+## 字体大小配置
+
+## 概述
+
+通过工具函数可以全局设置组件的字体大小，支持三种预设尺寸：`small`、`medium`、`large`。
+
+## 方法说明
+
+### setSize(size)
+
+设置全局字体大小。
+
+| 参数 | 类型 | 必填 | 说明 |
+|------|------|------|------|
+| `size` | String | 是 | 字体大小：`small`、`medium`、`large` |
+
+```vue
+<template>
+  <div>
+    <XtButton @click="setSmall">小号字体</XtButton>
+    <XtButton @click="setMedium">中号字体</XtButton>
+    <XtButton @click="setLarge">大号字体</XtButton>
+  </div>
+</template>
+
+<script>
+import { setSize } from 'xt-element-ui'
+
+export default {
+  methods: {
+    setSmall() {
+      setSize('small')
+    },
+    setMedium() {
+      setSize('medium')
+    },
+    setLarge() {
+      setSize('large')
+    }
+  }
+}
+</script>
+```
+
+### getSize()
+
+获取当前字体大小配置。
+
+```vue
+<template>
+  <div>
+    <XtText>当前字体大小：{{ currentSize }}</XtText>
+  </div>
+</template>
+
+<script>
+import { getSize } from 'xt-element-ui'
+
+export default {
+  computed: {
+    currentSize() {
+      return getSize()
+    }
+  }
+}
+</script>
+```
+
+## 字体大小对照表
+
+| 尺寸 | 说明 |
+|------|------|
+| `small` | 小号字体，默认值 |
+| `medium` | 中号字体 |
+| `large` | 大号字体，适合大屏展示 |
+
+## 使用示例
+
+### 在组件安装时配置
+
+```javascript
+import XtElementUI from 'xt-element-ui'
+
+Vue.use(XtElementUI, {
+  size: 'large'  // 全局设置大号字体
+})
+```
+
+### 动态切换字体大小
+
+```vue
+<template>
+  <div>
+    <XtFlexBox content="center" style="gap: 16px; margin-bottom: 16px;">
+      <XtButton 
+        v-for="size in sizes" 
+        :key="size"
+        :type="currentSize === size ? 'primary' : ''"
+        @click="changeSize(size)"
+      >
+        {{ sizeLabels[size] }}
+      </XtButton>
+    </XtFlexBox>
+    
+    <XtCard>
+      <XtCardItem title="当前尺寸">
+        <XtText type="primary" bold>{{ currentSize }}</XtText>
+      </XtCardItem>
+      <XtCardItem title="示例文本">
+        <XtText>这是一段示例文本，用于展示字体大小效果。</XtText>
+      </XtCardItem>
+    </XtCard>
+  </div>
+</template>
+
+<script>
+import { setSize, getSize } from 'xt-element-ui'
+
+export default {
+  data() {
+    return {
+      sizes: ['small', 'medium', 'large'],
+      sizeLabels: {
+        small: '小号',
+        medium: '中号',
+        large: '大号'
+      }
+    }
+  },
+  computed: {
+    currentSize() {
+      return getSize()
+    }
+  },
+  methods: {
+    changeSize(size) {
+      setSize(size)
+    }
+  }
+}
+</script>
+```
+
+## 注意事项
+
+1. 字体大小设置会影响所有使用组件库样式的元素
+2. 设置后会在 `html` 标签上添加 `data-size` 属性
 3. 需要配合对应的 CSS 样式才能生效