xt-element-ui 2.0.3 → 2.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (31) hide show
  1. package/docs/components/base/xt-bar.md +1 -1
  2. package/docs/components/base/xt-map-provider.md +2 -0
  3. package/docs/components/base/xt-map.md +21 -10
  4. package/docs/components/base/xt-page.md +4 -2
  5. package/docs/components/base/xt-scroll-arrow.md +5 -2
  6. package/docs/components/base/xt-step-price.md +2 -1
  7. package/docs/components/base/xt-upload.md +1 -1
  8. package/lib/index.common.js +15096 -12067
  9. package/lib/index.css +1 -1
  10. package/lib/index.umd.js +15101 -12072
  11. package/lib/index.umd.min.js +11 -11
  12. package/package.json +2 -2
  13. package/src/components/xt-badge/index.vue +19 -9
  14. package/src/components/xt-chart/XtBar.vue +33 -10
  15. package/src/components/xt-chart/XtLine.vue +33 -1
  16. package/src/components/xt-chart/XtMulti.vue +35 -1
  17. package/src/components/xt-chart/XtPie.vue +31 -1
  18. package/src/components/xt-chart/pieList.vue +0 -1
  19. package/src/components/xt-chart/theme/dark.js +26 -9
  20. package/src/components/xt-chart/theme/white.js +9 -0
  21. package/src/components/xt-chart/utils.js +59 -0
  22. package/src/components/xt-config-provider/index.vue +5 -1
  23. package/src/components/xt-date-picker/index.vue +8 -8
  24. package/src/components/xt-page/index.vue +1 -1
  25. package/src/components/xt-scroll-arrow/index.vue +72 -1
  26. package/src/components/xt-select-tree/index.vue +0 -7
  27. package/src/components/xt-step-price/index.vue +4 -2
  28. package/src/components/xt-step-price-item/index.vue +2 -1
  29. package/src/components/xt-upload/index.vue +5 -8
  30. package/src/index.js +23 -2
  31. package/src/components/xt-card-item/index copy.vue +0 -93
@@ -7,7 +7,7 @@
7
7
  ::: demo 基本用法
8
8
  ```vue
9
9
  <template>
10
- <XtBar :chart-data="chartData" />
10
+ <XtBar :chart-data="chartData" width="600px" height="400px" />
11
11
  </template>
12
12
 
13
13
  <script>
@@ -4,6 +4,7 @@
4
4
 
5
5
  使用 `XtMapProvider` 统一配置项目中所有地图,无需在每个 `<XtMap>` 上重复写密钥:
6
6
 
7
+ ::: demo 全局配置(推荐)
7
8
  ```vue
8
9
  <template>
9
10
  <XtMapProvider
@@ -21,3 +22,4 @@
21
22
  </XtMapProvider>
22
23
  </template>
23
24
  ```
25
+ :::
@@ -53,13 +53,14 @@ export default {
53
53
 
54
54
  使用 `XtMapProvider` 统一配置项目中所有地图,无需在每个 `<XtMap>` 上重复写密钥:
55
55
 
56
+ ::: demo 基本用法
56
57
  ```vue
57
58
  <template>
58
59
  <XtMapProvider
59
60
  provider="amap"
60
- api-key="你的高德密钥"
61
- security-js-code="你的安全密钥"
62
- theme="light"
61
+ api-key="AMAP_KEY"
62
+ security-js-code="AMAP_SECURITY_CODE"
63
+ theme="dark"
63
64
  >
64
65
  <div style="width: 100%; height: 500px;">
65
66
  <XtMap :center="[116.397428, 39.90923]" :zoom="11" />
@@ -70,6 +71,7 @@ export default {
70
71
  </XtMapProvider>
71
72
  </template>
72
73
  ```
74
+ :::
73
75
 
74
76
  或通过 `Vue.prototype.$xt` 方式配置(入口文件):
75
77
 
@@ -92,18 +94,20 @@ setMapTheme('dark')
92
94
 
93
95
  #### 高德地图(推荐)
94
96
 
97
+ ::: demo
95
98
  ```vue
96
99
  <XtMap
97
100
  provider="amap"
98
- api-key="AMAP_KEY"
99
- security-js-code="AMAP_SECURITY_CODE"
101
+ api-key="4a32fafb17f9e5236c4bb5f2e538d43b"
102
+ security-js-code="50f302bf821cda57f798308236e7f8e2"
100
103
  :center="[116.397428, 39.90923]"
101
104
  :zoom="11"
102
105
  />
103
106
  ```
107
+ :::
104
108
 
105
109
  #### 天地图
106
-
110
+ ::: demo 天地图
107
111
  ```vue
108
112
  <XtMap
109
113
  provider="tianditu"
@@ -112,9 +116,10 @@ setMapTheme('dark')
112
116
  :zoom="11"
113
117
  />
114
118
  ```
119
+ :::
115
120
 
116
121
  #### 百度地图
117
-
122
+ ::: demo 百度地图
118
123
  ```vue
119
124
  <XtMap
120
125
  provider="baidu"
@@ -123,9 +128,10 @@ setMapTheme('dark')
123
128
  :zoom="11"
124
129
  />
125
130
  ```
131
+ :::
126
132
 
127
133
  ### 暗黑主题
128
-
134
+ ::: demo 暗黑主题
129
135
  ```vue
130
136
  <template>
131
137
  <div style="width: 100%; height: 500px;">
@@ -139,11 +145,12 @@ setMapTheme('dark')
139
145
  </div>
140
146
  </template>
141
147
  ```
148
+ :::
142
149
 
143
150
  高德地图原生支持 dark 主题样式;天地图、百度地图通过 CSS 滤镜实现近似效果。
144
151
 
145
152
  ### 地图类型切换
146
-
153
+ ::: demo 地图类型切换
147
154
  ```vue
148
155
  <template>
149
156
  <div>
@@ -176,9 +183,10 @@ export default {
176
183
  }
177
184
  </script>
178
185
  ```
186
+ :::
179
187
 
180
188
  ### 通过 ref 调用实例方法
181
-
189
+ ::: demo 通过 ref 调用实例方法
182
190
  ```vue
183
191
  <template>
184
192
  <div>
@@ -228,11 +236,13 @@ export default {
228
236
  }
229
237
  </script>
230
238
  ```
239
+ :::
231
240
 
232
241
  ### 自定义 API URL
233
242
 
234
243
  如需使用自建代理或反向代理(例如解决密钥暴露问题),可通过 `api-url` 覆盖:
235
244
 
245
+ ::: demo 自定义 API URL
236
246
  ```vue
237
247
  <XtMap
238
248
  provider="amap"
@@ -241,6 +251,7 @@ export default {
241
251
  :zoom="11"
242
252
  />
243
253
  ```
254
+ :::
244
255
 
245
256
  ---
246
257
 
@@ -71,8 +71,10 @@ export default {
71
71
  ::: demo 仅主内容
72
72
  ```vue
73
73
  <template>
74
- <XtPage :show-header="false" :show-footer="false">
75
- <template #default>仅主内容区域</template>
74
+ <XtPage :show-header="false" :show-footer="false" style="height: 600px;">
75
+ <template #default="{ tableHeight }">
76
+ <div class="multiline-box" :style="{ height: tableHeight+'px' }">自适应容器</div>
77
+ </template>
76
78
  </XtPage>
77
79
  </template>
78
80
  ```
@@ -103,9 +103,9 @@
103
103
  <template>
104
104
  <div>
105
105
  <el-button @click="addItem" style="margin-bottom: 12px;">添加项目</el-button>
106
- <XtScrollArrow :width="300">
106
+ <XtScrollArrow ref="arrow" :width="300" :appendMode="true">
107
107
  <div style="display: flex; gap: 12px; padding: 8px;">
108
- <div v-for="item in items" :key="item.id" style="width: 80px; height: 60px; background: #f5f7fa; border-radius: 8px; display: flex; align-items: center; justify-content: center;">
108
+ <div v-for="item in items" :key="item.id" style="width: 80px; height: 60px; background: #f5f7fa; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
109
109
  {{ item.name }}
110
110
  </div>
111
111
  </div>
@@ -131,6 +131,9 @@ export default {
131
131
  addItem() {
132
132
  this.count++
133
133
  this.items.push({ id: this.count, name: `项目 ${this.count}` })
134
+ // this.$nextTick(() => {
135
+ // this.$refs.arrow.scrollToEnd()
136
+ // })
134
137
  }
135
138
  }
136
139
  }
@@ -121,7 +121,8 @@ export default {
121
121
  | `fieldKeys` | Object | `{ min: 'min', max: 'max', price: 'price' }` | 字段名映射,支持自定义字段名 |
122
122
  | `limit` | Number | `0` | 阶梯数量上限,<=0 表示不限制 |
123
123
  | `step` | Number | `10` | 阶梯增量,新增时自动填充下一级的 min 值 |
124
- | `disabled` | Boolean | `false` | 是否禁用所有操作 |
124
+ | `disabled` | Boolean | `false` | 是否禁用所有操作 |
125
+ | `allowNegative` | Boolean | `false` | 是否允许输入负数价格和下限 |
125
126
  | `tip` | String | `'区间左闭右闭 [min, max],最后一级为 [min, +∞),保证连续且不重叠。'` | 底部提示文本 |
126
127
  | `defaultFirst` | Boolean | `true` | 空数组时是否自动生成默认阶梯 |
127
128
 
@@ -70,7 +70,7 @@ export default {
70
70
  export default {
71
71
  data() {
72
72
  return {
73
- imageSrc: 'path/to/image.jpg'
73
+ imageSrc: ''
74
74
  }
75
75
  }
76
76
  }