@mingto/mt-ui 1.1.48 → 1.1.49
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.
- package/README.md +209 -209
- package/dist/image/index.d.ts +1 -18
- package/dist/image/src/image.d.ts +0 -7
- package/dist/image/src/image.vue.d.ts +2 -15
- package/dist/index.es.js +5 -37
- package/dist/index.umd.js +5 -37
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,209 +1,209 @@
|
|
|
1
|
-
# @mingto/mt-ui
|
|
2
|
-
|
|
3
|
-
基于 Vue 3 的 UI 组件库,提供业务常用组件、布局组件、反馈组件、上传组件、国际化和工具 Hook。
|
|
4
|
-
|
|
5
|
-
## 安装
|
|
6
|
-
|
|
7
|
-
```bash
|
|
8
|
-
pnpm add @mingto/mt-ui
|
|
9
|
-
```
|
|
10
|
-
|
|
11
|
-
需要项目中已安装 Vue 3,当前 peer dependency 为 `vue@^3.5.13`。
|
|
12
|
-
|
|
13
|
-
## 快速开始
|
|
14
|
-
|
|
15
|
-
### 全量引入
|
|
16
|
-
|
|
17
|
-
```typescript
|
|
18
|
-
import MtUi from '@mingto/mt-ui'
|
|
19
|
-
import { createApp } from 'vue'
|
|
20
|
-
import App from './App.vue'
|
|
21
|
-
|
|
22
|
-
const app = createApp(App)
|
|
23
|
-
|
|
24
|
-
app.use(MtUi)
|
|
25
|
-
app.mount('#app')
|
|
26
|
-
```
|
|
27
|
-
|
|
28
|
-
### 按需引入
|
|
29
|
-
|
|
30
|
-
```typescript
|
|
31
|
-
import { MtButton, MtDialog, MtMessage } from '@mingto/mt-ui'
|
|
32
|
-
import { createApp } from 'vue'
|
|
33
|
-
import App from './App.vue'
|
|
34
|
-
|
|
35
|
-
const app = createApp(App)
|
|
36
|
-
|
|
37
|
-
app.use(MtButton)
|
|
38
|
-
app.use(MtDialog)
|
|
39
|
-
app.use(MtMessage)
|
|
40
|
-
app.mount('#app')
|
|
41
|
-
```
|
|
42
|
-
|
|
43
|
-
### 在 setup 中使用
|
|
44
|
-
|
|
45
|
-
```vue
|
|
46
|
-
<script setup lang="ts">
|
|
47
|
-
import { MtMessage } from '@mingto/mt-ui'
|
|
48
|
-
|
|
49
|
-
function submit() {
|
|
50
|
-
MtMessage.success('操作成功')
|
|
51
|
-
}
|
|
52
|
-
</script>
|
|
53
|
-
|
|
54
|
-
<template>
|
|
55
|
-
<MtButton type="primary" @click="submit">
|
|
56
|
-
提交
|
|
57
|
-
</MtButton>
|
|
58
|
-
</template>
|
|
59
|
-
```
|
|
60
|
-
|
|
61
|
-
## 组件列表
|
|
62
|
-
|
|
63
|
-
### 基础组件
|
|
64
|
-
|
|
65
|
-
| 组件 | 说明 |
|
|
66
|
-
|------|------|
|
|
67
|
-
| `MtButton` | 按钮 |
|
|
68
|
-
| `MtButtonGroup` | 按钮组 |
|
|
69
|
-
| `MtIcon` | 图标 |
|
|
70
|
-
| `MtImage` | 图片 |
|
|
71
|
-
| `MtLoading` | 加载 |
|
|
72
|
-
| `MtBadge` | 徽标 |
|
|
73
|
-
| `MtBacktop` | 回到顶部 |
|
|
74
|
-
|
|
75
|
-
### 展示组件
|
|
76
|
-
|
|
77
|
-
| 组件 | 说明 |
|
|
78
|
-
|------|------|
|
|
79
|
-
| `MtAvatarImage` | 图片头像 |
|
|
80
|
-
| `MtAvatarText` | 文字头像 |
|
|
81
|
-
| `MtEmpty` | 空状态 |
|
|
82
|
-
| `MtFilePreview` | 文件预览 |
|
|
83
|
-
| `MtPopover` | 气泡卡片 |
|
|
84
|
-
| `MtProgress` | 进度条 |
|
|
85
|
-
| `MtQrcode` | 二维码 |
|
|
86
|
-
| `MtTable` | 表格 |
|
|
87
|
-
| `MtTableColumn` | 表格列 |
|
|
88
|
-
| `MtTag` | 标签 |
|
|
89
|
-
| `MtTooltip` | 文字提示 |
|
|
90
|
-
|
|
91
|
-
### 导航组件
|
|
92
|
-
|
|
93
|
-
| 组件 | 说明 |
|
|
94
|
-
|------|------|
|
|
95
|
-
| `MtTabs` | 标签页容器 |
|
|
96
|
-
| `MtTab` | 标签页项 |
|
|
97
|
-
| `MtInfiniteScroll` | 无限滚动 |
|
|
98
|
-
|
|
99
|
-
### 反馈组件
|
|
100
|
-
|
|
101
|
-
| 组件 | 说明 |
|
|
102
|
-
|------|------|
|
|
103
|
-
| `MtDialog` | 对话框 |
|
|
104
|
-
| `MtDialogConfirmLayout` | 对话框确认布局 |
|
|
105
|
-
| `MtMessage` | 消息提示 |
|
|
106
|
-
| `MtOverlay` | 遮罩层 |
|
|
107
|
-
| `MtPoster` | 海报 |
|
|
108
|
-
|
|
109
|
-
### 布局与过渡组件
|
|
110
|
-
|
|
111
|
-
| 组件 | 说明 |
|
|
112
|
-
|------|------|
|
|
113
|
-
| `MtCell` | 单元格 |
|
|
114
|
-
| `MtCellGroup` | 单元格组 |
|
|
115
|
-
| `MtCollapseTransition` | 折叠过渡 |
|
|
116
|
-
| `MtFadeTransition` | 淡入淡出过渡 |
|
|
117
|
-
| `MtTeleport` | 传送门 |
|
|
118
|
-
| `MtConfigProvider` | 全局配置 |
|
|
119
|
-
|
|
120
|
-
### 上传组件
|
|
121
|
-
|
|
122
|
-
| 组件或方法 | 说明 |
|
|
123
|
-
|------------|------|
|
|
124
|
-
| `MtUpload` | 上传组件 |
|
|
125
|
-
| `MtUploadFileListLayout` | 上传文件列表布局 |
|
|
126
|
-
| `MtUploadImageGridLayout` | 上传图片宫格布局 |
|
|
127
|
-
| `MtUploadImageOnlyLayout` | 仅图片上传布局 |
|
|
128
|
-
| `formatUploadFiles` | 格式化上传文件数据 |
|
|
129
|
-
|
|
130
|
-
## 常用示例
|
|
131
|
-
|
|
132
|
-
### 按钮
|
|
133
|
-
|
|
134
|
-
```vue
|
|
135
|
-
<template>
|
|
136
|
-
<MtButton type="primary">
|
|
137
|
-
主要按钮
|
|
138
|
-
</MtButton>
|
|
139
|
-
<MtButton type="success">
|
|
140
|
-
成功按钮
|
|
141
|
-
</MtButton>
|
|
142
|
-
<MtButton type="danger">
|
|
143
|
-
危险按钮
|
|
144
|
-
</MtButton>
|
|
145
|
-
</template>
|
|
146
|
-
```
|
|
147
|
-
|
|
148
|
-
### 对话框
|
|
149
|
-
|
|
150
|
-
```vue
|
|
151
|
-
<template>
|
|
152
|
-
<MtDialog v-model="visible" title="标题">
|
|
153
|
-
<p>对话框内容</p>
|
|
154
|
-
<template #footer>
|
|
155
|
-
<MtButton @click="visible = false">
|
|
156
|
-
取消
|
|
157
|
-
</MtButton>
|
|
158
|
-
<MtButton type="primary" @click="visible = false">
|
|
159
|
-
确定
|
|
160
|
-
</MtButton>
|
|
161
|
-
</template>
|
|
162
|
-
</MtDialog>
|
|
163
|
-
</template>
|
|
164
|
-
```
|
|
165
|
-
|
|
166
|
-
### 消息提示
|
|
167
|
-
|
|
168
|
-
```typescript
|
|
169
|
-
import { MtMessage } from '@mingto/mt-ui'
|
|
170
|
-
|
|
171
|
-
MtMessage.success('操作成功')
|
|
172
|
-
MtMessage.warning('警告提示')
|
|
173
|
-
MtMessage.error('操作失败')
|
|
174
|
-
```
|
|
175
|
-
|
|
176
|
-
### 上传
|
|
177
|
-
|
|
178
|
-
```vue
|
|
179
|
-
<template>
|
|
180
|
-
<MtUpload v-model="fileList" :limit="9">
|
|
181
|
-
<MtButton type="primary">
|
|
182
|
-
点击上传
|
|
183
|
-
</MtButton>
|
|
184
|
-
</MtUpload>
|
|
185
|
-
</template>
|
|
186
|
-
```
|
|
187
|
-
|
|
188
|
-
### 全局配置
|
|
189
|
-
|
|
190
|
-
```vue
|
|
191
|
-
<template>
|
|
192
|
-
<MtConfigProvider :locale="{ lang: 'en' }">
|
|
193
|
-
<App />
|
|
194
|
-
</MtConfigProvider>
|
|
195
|
-
</template>
|
|
196
|
-
```
|
|
197
|
-
|
|
198
|
-
## 其它导出
|
|
199
|
-
|
|
200
|
-
```typescript
|
|
201
|
-
import { iconfontJson } from '@mingto/mt-ui'
|
|
202
|
-
import { useLocale } from '@mingto/mt-ui'
|
|
203
|
-
```
|
|
204
|
-
|
|
205
|
-
包内同时导出 `hooks` 与 `locale` 模块,可按需从主入口导入使用。
|
|
206
|
-
|
|
207
|
-
## 许可证
|
|
208
|
-
|
|
209
|
-
ISC
|
|
1
|
+
# @mingto/mt-ui
|
|
2
|
+
|
|
3
|
+
基于 Vue 3 的 UI 组件库,提供业务常用组件、布局组件、反馈组件、上传组件、国际化和工具 Hook。
|
|
4
|
+
|
|
5
|
+
## 安装
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
pnpm add @mingto/mt-ui
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
需要项目中已安装 Vue 3,当前 peer dependency 为 `vue@^3.5.13`。
|
|
12
|
+
|
|
13
|
+
## 快速开始
|
|
14
|
+
|
|
15
|
+
### 全量引入
|
|
16
|
+
|
|
17
|
+
```typescript
|
|
18
|
+
import MtUi from '@mingto/mt-ui'
|
|
19
|
+
import { createApp } from 'vue'
|
|
20
|
+
import App from './App.vue'
|
|
21
|
+
|
|
22
|
+
const app = createApp(App)
|
|
23
|
+
|
|
24
|
+
app.use(MtUi)
|
|
25
|
+
app.mount('#app')
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
### 按需引入
|
|
29
|
+
|
|
30
|
+
```typescript
|
|
31
|
+
import { MtButton, MtDialog, MtMessage } from '@mingto/mt-ui'
|
|
32
|
+
import { createApp } from 'vue'
|
|
33
|
+
import App from './App.vue'
|
|
34
|
+
|
|
35
|
+
const app = createApp(App)
|
|
36
|
+
|
|
37
|
+
app.use(MtButton)
|
|
38
|
+
app.use(MtDialog)
|
|
39
|
+
app.use(MtMessage)
|
|
40
|
+
app.mount('#app')
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
### 在 setup 中使用
|
|
44
|
+
|
|
45
|
+
```vue
|
|
46
|
+
<script setup lang="ts">
|
|
47
|
+
import { MtMessage } from '@mingto/mt-ui'
|
|
48
|
+
|
|
49
|
+
function submit() {
|
|
50
|
+
MtMessage.success('操作成功')
|
|
51
|
+
}
|
|
52
|
+
</script>
|
|
53
|
+
|
|
54
|
+
<template>
|
|
55
|
+
<MtButton type="primary" @click="submit">
|
|
56
|
+
提交
|
|
57
|
+
</MtButton>
|
|
58
|
+
</template>
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
## 组件列表
|
|
62
|
+
|
|
63
|
+
### 基础组件
|
|
64
|
+
|
|
65
|
+
| 组件 | 说明 |
|
|
66
|
+
|------|------|
|
|
67
|
+
| `MtButton` | 按钮 |
|
|
68
|
+
| `MtButtonGroup` | 按钮组 |
|
|
69
|
+
| `MtIcon` | 图标 |
|
|
70
|
+
| `MtImage` | 图片 |
|
|
71
|
+
| `MtLoading` | 加载 |
|
|
72
|
+
| `MtBadge` | 徽标 |
|
|
73
|
+
| `MtBacktop` | 回到顶部 |
|
|
74
|
+
|
|
75
|
+
### 展示组件
|
|
76
|
+
|
|
77
|
+
| 组件 | 说明 |
|
|
78
|
+
|------|------|
|
|
79
|
+
| `MtAvatarImage` | 图片头像 |
|
|
80
|
+
| `MtAvatarText` | 文字头像 |
|
|
81
|
+
| `MtEmpty` | 空状态 |
|
|
82
|
+
| `MtFilePreview` | 文件预览 |
|
|
83
|
+
| `MtPopover` | 气泡卡片 |
|
|
84
|
+
| `MtProgress` | 进度条 |
|
|
85
|
+
| `MtQrcode` | 二维码 |
|
|
86
|
+
| `MtTable` | 表格 |
|
|
87
|
+
| `MtTableColumn` | 表格列 |
|
|
88
|
+
| `MtTag` | 标签 |
|
|
89
|
+
| `MtTooltip` | 文字提示 |
|
|
90
|
+
|
|
91
|
+
### 导航组件
|
|
92
|
+
|
|
93
|
+
| 组件 | 说明 |
|
|
94
|
+
|------|------|
|
|
95
|
+
| `MtTabs` | 标签页容器 |
|
|
96
|
+
| `MtTab` | 标签页项 |
|
|
97
|
+
| `MtInfiniteScroll` | 无限滚动 |
|
|
98
|
+
|
|
99
|
+
### 反馈组件
|
|
100
|
+
|
|
101
|
+
| 组件 | 说明 |
|
|
102
|
+
|------|------|
|
|
103
|
+
| `MtDialog` | 对话框 |
|
|
104
|
+
| `MtDialogConfirmLayout` | 对话框确认布局 |
|
|
105
|
+
| `MtMessage` | 消息提示 |
|
|
106
|
+
| `MtOverlay` | 遮罩层 |
|
|
107
|
+
| `MtPoster` | 海报 |
|
|
108
|
+
|
|
109
|
+
### 布局与过渡组件
|
|
110
|
+
|
|
111
|
+
| 组件 | 说明 |
|
|
112
|
+
|------|------|
|
|
113
|
+
| `MtCell` | 单元格 |
|
|
114
|
+
| `MtCellGroup` | 单元格组 |
|
|
115
|
+
| `MtCollapseTransition` | 折叠过渡 |
|
|
116
|
+
| `MtFadeTransition` | 淡入淡出过渡 |
|
|
117
|
+
| `MtTeleport` | 传送门 |
|
|
118
|
+
| `MtConfigProvider` | 全局配置 |
|
|
119
|
+
|
|
120
|
+
### 上传组件
|
|
121
|
+
|
|
122
|
+
| 组件或方法 | 说明 |
|
|
123
|
+
|------------|------|
|
|
124
|
+
| `MtUpload` | 上传组件 |
|
|
125
|
+
| `MtUploadFileListLayout` | 上传文件列表布局 |
|
|
126
|
+
| `MtUploadImageGridLayout` | 上传图片宫格布局 |
|
|
127
|
+
| `MtUploadImageOnlyLayout` | 仅图片上传布局 |
|
|
128
|
+
| `formatUploadFiles` | 格式化上传文件数据 |
|
|
129
|
+
|
|
130
|
+
## 常用示例
|
|
131
|
+
|
|
132
|
+
### 按钮
|
|
133
|
+
|
|
134
|
+
```vue
|
|
135
|
+
<template>
|
|
136
|
+
<MtButton type="primary">
|
|
137
|
+
主要按钮
|
|
138
|
+
</MtButton>
|
|
139
|
+
<MtButton type="success">
|
|
140
|
+
成功按钮
|
|
141
|
+
</MtButton>
|
|
142
|
+
<MtButton type="danger">
|
|
143
|
+
危险按钮
|
|
144
|
+
</MtButton>
|
|
145
|
+
</template>
|
|
146
|
+
```
|
|
147
|
+
|
|
148
|
+
### 对话框
|
|
149
|
+
|
|
150
|
+
```vue
|
|
151
|
+
<template>
|
|
152
|
+
<MtDialog v-model="visible" title="标题">
|
|
153
|
+
<p>对话框内容</p>
|
|
154
|
+
<template #footer>
|
|
155
|
+
<MtButton @click="visible = false">
|
|
156
|
+
取消
|
|
157
|
+
</MtButton>
|
|
158
|
+
<MtButton type="primary" @click="visible = false">
|
|
159
|
+
确定
|
|
160
|
+
</MtButton>
|
|
161
|
+
</template>
|
|
162
|
+
</MtDialog>
|
|
163
|
+
</template>
|
|
164
|
+
```
|
|
165
|
+
|
|
166
|
+
### 消息提示
|
|
167
|
+
|
|
168
|
+
```typescript
|
|
169
|
+
import { MtMessage } from '@mingto/mt-ui'
|
|
170
|
+
|
|
171
|
+
MtMessage.success('操作成功')
|
|
172
|
+
MtMessage.warning('警告提示')
|
|
173
|
+
MtMessage.error('操作失败')
|
|
174
|
+
```
|
|
175
|
+
|
|
176
|
+
### 上传
|
|
177
|
+
|
|
178
|
+
```vue
|
|
179
|
+
<template>
|
|
180
|
+
<MtUpload v-model="fileList" :limit="9">
|
|
181
|
+
<MtButton type="primary">
|
|
182
|
+
点击上传
|
|
183
|
+
</MtButton>
|
|
184
|
+
</MtUpload>
|
|
185
|
+
</template>
|
|
186
|
+
```
|
|
187
|
+
|
|
188
|
+
### 全局配置
|
|
189
|
+
|
|
190
|
+
```vue
|
|
191
|
+
<template>
|
|
192
|
+
<MtConfigProvider :locale="{ lang: 'en' }">
|
|
193
|
+
<App />
|
|
194
|
+
</MtConfigProvider>
|
|
195
|
+
</template>
|
|
196
|
+
```
|
|
197
|
+
|
|
198
|
+
## 其它导出
|
|
199
|
+
|
|
200
|
+
```typescript
|
|
201
|
+
import { iconfontJson } from '@mingto/mt-ui'
|
|
202
|
+
import { useLocale } from '@mingto/mt-ui'
|
|
203
|
+
```
|
|
204
|
+
|
|
205
|
+
包内同时导出 `hooks` 与 `locale` 模块,可按需从主入口导入使用。
|
|
206
|
+
|
|
207
|
+
## 许可证
|
|
208
|
+
|
|
209
|
+
ISC
|
package/dist/image/index.d.ts
CHANGED
|
@@ -27,10 +27,6 @@ export declare const MtImage: {
|
|
|
27
27
|
readonly type: BooleanConstructor;
|
|
28
28
|
readonly default: false;
|
|
29
29
|
};
|
|
30
|
-
readonly lazy: {
|
|
31
|
-
readonly type: BooleanConstructor;
|
|
32
|
-
readonly default: false;
|
|
33
|
-
};
|
|
34
30
|
}>> & Readonly<{
|
|
35
31
|
onError?: (() => any) | undefined;
|
|
36
32
|
onLoad?: (() => any) | undefined;
|
|
@@ -44,10 +40,7 @@ export declare const MtImage: {
|
|
|
44
40
|
readonly fit: "none" | "fill" | "contain" | "cover" | "scale-down";
|
|
45
41
|
readonly position: string;
|
|
46
42
|
readonly draggable: boolean;
|
|
47
|
-
|
|
48
|
-
}, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
|
|
49
|
-
imageRef: HTMLDivElement;
|
|
50
|
-
}, HTMLDivElement, import('vue').ComponentProvideOptions, {
|
|
43
|
+
}, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, HTMLDivElement, import('vue').ComponentProvideOptions, {
|
|
51
44
|
P: {};
|
|
52
45
|
B: {};
|
|
53
46
|
D: {};
|
|
@@ -82,10 +75,6 @@ export declare const MtImage: {
|
|
|
82
75
|
readonly type: BooleanConstructor;
|
|
83
76
|
readonly default: false;
|
|
84
77
|
};
|
|
85
|
-
readonly lazy: {
|
|
86
|
-
readonly type: BooleanConstructor;
|
|
87
|
-
readonly default: false;
|
|
88
|
-
};
|
|
89
78
|
}>> & Readonly<{
|
|
90
79
|
onError?: (() => any) | undefined;
|
|
91
80
|
onLoad?: (() => any) | undefined;
|
|
@@ -96,7 +85,6 @@ export declare const MtImage: {
|
|
|
96
85
|
readonly fit: "none" | "fill" | "contain" | "cover" | "scale-down";
|
|
97
86
|
readonly position: string;
|
|
98
87
|
readonly draggable: boolean;
|
|
99
|
-
readonly lazy: boolean;
|
|
100
88
|
}>;
|
|
101
89
|
__isFragment?: never;
|
|
102
90
|
__isTeleport?: never;
|
|
@@ -129,10 +117,6 @@ export declare const MtImage: {
|
|
|
129
117
|
readonly type: BooleanConstructor;
|
|
130
118
|
readonly default: false;
|
|
131
119
|
};
|
|
132
|
-
readonly lazy: {
|
|
133
|
-
readonly type: BooleanConstructor;
|
|
134
|
-
readonly default: false;
|
|
135
|
-
};
|
|
136
120
|
}>> & Readonly<{
|
|
137
121
|
onError?: (() => any) | undefined;
|
|
138
122
|
onLoad?: (() => any) | undefined;
|
|
@@ -146,7 +130,6 @@ export declare const MtImage: {
|
|
|
146
130
|
readonly fit: "none" | "fill" | "contain" | "cover" | "scale-down";
|
|
147
131
|
readonly position: string;
|
|
148
132
|
readonly draggable: boolean;
|
|
149
|
-
readonly lazy: boolean;
|
|
150
133
|
}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
|
|
151
134
|
$slots: Readonly<{
|
|
152
135
|
error?: () => import('vue').VNode[];
|
|
@@ -45,13 +45,6 @@ declare const imageProps: {
|
|
|
45
45
|
readonly type: BooleanConstructor;
|
|
46
46
|
readonly default: false;
|
|
47
47
|
};
|
|
48
|
-
/**
|
|
49
|
-
* 懒加载
|
|
50
|
-
*/
|
|
51
|
-
readonly lazy: {
|
|
52
|
-
readonly type: BooleanConstructor;
|
|
53
|
-
readonly default: false;
|
|
54
|
-
};
|
|
55
48
|
};
|
|
56
49
|
export type ImageProps = ExtractPropTypes<typeof imageProps>;
|
|
57
50
|
export { imageProps };
|
|
@@ -6,9 +6,7 @@ declare function __VLS_template(): {
|
|
|
6
6
|
}> & {
|
|
7
7
|
error?: () => VNode[];
|
|
8
8
|
};
|
|
9
|
-
refs: {
|
|
10
|
-
imageRef: HTMLDivElement;
|
|
11
|
-
};
|
|
9
|
+
refs: {};
|
|
12
10
|
rootEl: HTMLDivElement;
|
|
13
11
|
};
|
|
14
12
|
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
|
|
@@ -40,10 +38,6 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
|
|
|
40
38
|
readonly type: BooleanConstructor;
|
|
41
39
|
readonly default: false;
|
|
42
40
|
};
|
|
43
|
-
readonly lazy: {
|
|
44
|
-
readonly type: BooleanConstructor;
|
|
45
|
-
readonly default: false;
|
|
46
|
-
};
|
|
47
41
|
}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
|
|
48
42
|
error: () => any;
|
|
49
43
|
load: () => any;
|
|
@@ -75,10 +69,6 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
|
|
|
75
69
|
readonly type: BooleanConstructor;
|
|
76
70
|
readonly default: false;
|
|
77
71
|
};
|
|
78
|
-
readonly lazy: {
|
|
79
|
-
readonly type: BooleanConstructor;
|
|
80
|
-
readonly default: false;
|
|
81
|
-
};
|
|
82
72
|
}>> & Readonly<{
|
|
83
73
|
onError?: (() => any) | undefined;
|
|
84
74
|
onLoad?: (() => any) | undefined;
|
|
@@ -89,10 +79,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
|
|
|
89
79
|
readonly fit: "none" | "fill" | "contain" | "cover" | "scale-down";
|
|
90
80
|
readonly position: string;
|
|
91
81
|
readonly draggable: boolean;
|
|
92
|
-
|
|
93
|
-
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
|
|
94
|
-
imageRef: HTMLDivElement;
|
|
95
|
-
}, HTMLDivElement>;
|
|
82
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
|
|
96
83
|
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
|
|
97
84
|
export default _default;
|
|
98
85
|
type __VLS_WithTemplateSlots<T, S> = T & {
|
package/dist/index.es.js
CHANGED
|
@@ -7204,13 +7204,6 @@ var imageProps = {
|
|
|
7204
7204
|
draggable: {
|
|
7205
7205
|
type: Boolean,
|
|
7206
7206
|
default: false
|
|
7207
|
-
},
|
|
7208
|
-
/**
|
|
7209
|
-
* 懒加载
|
|
7210
|
-
*/
|
|
7211
|
-
lazy: {
|
|
7212
|
-
type: Boolean,
|
|
7213
|
-
default: false
|
|
7214
7207
|
}
|
|
7215
7208
|
};
|
|
7216
7209
|
//#endregion
|
|
@@ -7241,8 +7234,6 @@ var MtImage = withInstall$1(/* @__PURE__ */ defineComponent({
|
|
|
7241
7234
|
const hasLoadError = ref(false);
|
|
7242
7235
|
const isLoading = ref(true);
|
|
7243
7236
|
const imageSrc = ref("");
|
|
7244
|
-
const observer = ref(null);
|
|
7245
|
-
const imageRef = ref(null);
|
|
7246
7237
|
function loadImage() {
|
|
7247
7238
|
if (!props.src) {
|
|
7248
7239
|
isLoading.value = false;
|
|
@@ -7263,35 +7254,14 @@ var MtImage = withInstall$1(/* @__PURE__ */ defineComponent({
|
|
|
7263
7254
|
hasLoadError.value = true;
|
|
7264
7255
|
emits("error");
|
|
7265
7256
|
}
|
|
7266
|
-
function initObserver() {
|
|
7267
|
-
if (!imageRef.value) return;
|
|
7268
|
-
observer.value = new IntersectionObserver((entries) => {
|
|
7269
|
-
entries.forEach((entry) => {
|
|
7270
|
-
if (entry.isIntersecting && !isLoading.value) {
|
|
7271
|
-
loadImage();
|
|
7272
|
-
observer.value?.unobserve(imageRef.value);
|
|
7273
|
-
}
|
|
7274
|
-
});
|
|
7275
|
-
}, { threshold: .1 });
|
|
7276
|
-
observer.value.observe(imageRef.value);
|
|
7277
|
-
}
|
|
7278
|
-
function handleImageChange() {
|
|
7279
|
-
if (props.lazy) initObserver();
|
|
7280
|
-
else loadImage();
|
|
7281
|
-
}
|
|
7282
7257
|
watch(() => props.src, () => {
|
|
7283
|
-
|
|
7258
|
+
loadImage();
|
|
7284
7259
|
});
|
|
7285
7260
|
onMounted(() => {
|
|
7286
|
-
|
|
7287
|
-
});
|
|
7288
|
-
onUnmounted(() => {
|
|
7289
|
-
observer.value?.disconnect();
|
|
7261
|
+
loadImage();
|
|
7290
7262
|
});
|
|
7291
7263
|
return (_ctx, _cache) => {
|
|
7292
7264
|
return openBlock(), createElementBlock("div", {
|
|
7293
|
-
ref_key: "imageRef",
|
|
7294
|
-
ref: imageRef,
|
|
7295
7265
|
class: normalizeClass(imageClasses.value),
|
|
7296
7266
|
style: normalizeStyle(imageStyles.value)
|
|
7297
7267
|
}, [
|
|
@@ -10543,7 +10513,7 @@ var MtProgress = withInstall$1(/* @__PURE__ */ defineComponent({
|
|
|
10543
10513
|
});
|
|
10544
10514
|
const progressStyles = computed(() => {
|
|
10545
10515
|
const styles = {};
|
|
10546
|
-
|
|
10516
|
+
styles.height = convertValueToViewportWidth(props.strokeWidth);
|
|
10547
10517
|
return styles;
|
|
10548
10518
|
});
|
|
10549
10519
|
const innerStyles = computed(() => {
|
|
@@ -10556,10 +10526,8 @@ var MtProgress = withInstall$1(/* @__PURE__ */ defineComponent({
|
|
|
10556
10526
|
});
|
|
10557
10527
|
const circleStyles = computed(() => {
|
|
10558
10528
|
const styles = {};
|
|
10559
|
-
|
|
10560
|
-
|
|
10561
|
-
height: convertValueToViewportWidth(props.width)
|
|
10562
|
-
}));
|
|
10529
|
+
styles.width = convertValueToViewportWidth(props.width);
|
|
10530
|
+
styles.height = convertValueToViewportWidth(props.width);
|
|
10563
10531
|
return styles;
|
|
10564
10532
|
});
|
|
10565
10533
|
const content = computed(() => {
|
package/dist/index.umd.js
CHANGED
|
@@ -7235,13 +7235,6 @@
|
|
|
7235
7235
|
draggable: {
|
|
7236
7236
|
type: Boolean,
|
|
7237
7237
|
default: false
|
|
7238
|
-
},
|
|
7239
|
-
/**
|
|
7240
|
-
* 懒加载
|
|
7241
|
-
*/
|
|
7242
|
-
lazy: {
|
|
7243
|
-
type: Boolean,
|
|
7244
|
-
default: false
|
|
7245
7238
|
}
|
|
7246
7239
|
};
|
|
7247
7240
|
//#endregion
|
|
@@ -7272,8 +7265,6 @@
|
|
|
7272
7265
|
const hasLoadError = (0, vue.ref)(false);
|
|
7273
7266
|
const isLoading = (0, vue.ref)(true);
|
|
7274
7267
|
const imageSrc = (0, vue.ref)("");
|
|
7275
|
-
const observer = (0, vue.ref)(null);
|
|
7276
|
-
const imageRef = (0, vue.ref)(null);
|
|
7277
7268
|
function loadImage() {
|
|
7278
7269
|
if (!props.src) {
|
|
7279
7270
|
isLoading.value = false;
|
|
@@ -7294,35 +7285,14 @@
|
|
|
7294
7285
|
hasLoadError.value = true;
|
|
7295
7286
|
emits("error");
|
|
7296
7287
|
}
|
|
7297
|
-
function initObserver() {
|
|
7298
|
-
if (!imageRef.value) return;
|
|
7299
|
-
observer.value = new IntersectionObserver((entries) => {
|
|
7300
|
-
entries.forEach((entry) => {
|
|
7301
|
-
if (entry.isIntersecting && !isLoading.value) {
|
|
7302
|
-
loadImage();
|
|
7303
|
-
observer.value?.unobserve(imageRef.value);
|
|
7304
|
-
}
|
|
7305
|
-
});
|
|
7306
|
-
}, { threshold: .1 });
|
|
7307
|
-
observer.value.observe(imageRef.value);
|
|
7308
|
-
}
|
|
7309
|
-
function handleImageChange() {
|
|
7310
|
-
if (props.lazy) initObserver();
|
|
7311
|
-
else loadImage();
|
|
7312
|
-
}
|
|
7313
7288
|
(0, vue.watch)(() => props.src, () => {
|
|
7314
|
-
|
|
7289
|
+
loadImage();
|
|
7315
7290
|
});
|
|
7316
7291
|
(0, vue.onMounted)(() => {
|
|
7317
|
-
|
|
7318
|
-
});
|
|
7319
|
-
(0, vue.onUnmounted)(() => {
|
|
7320
|
-
observer.value?.disconnect();
|
|
7292
|
+
loadImage();
|
|
7321
7293
|
});
|
|
7322
7294
|
return (_ctx, _cache) => {
|
|
7323
7295
|
return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
|
|
7324
|
-
ref_key: "imageRef",
|
|
7325
|
-
ref: imageRef,
|
|
7326
7296
|
class: (0, vue.normalizeClass)(imageClasses.value),
|
|
7327
7297
|
style: (0, vue.normalizeStyle)(imageStyles.value)
|
|
7328
7298
|
}, [
|
|
@@ -10602,7 +10572,7 @@
|
|
|
10602
10572
|
});
|
|
10603
10573
|
const progressStyles = (0, vue.computed)(() => {
|
|
10604
10574
|
const styles = {};
|
|
10605
|
-
|
|
10575
|
+
styles.height = convertValueToViewportWidth(props.strokeWidth);
|
|
10606
10576
|
return styles;
|
|
10607
10577
|
});
|
|
10608
10578
|
const innerStyles = (0, vue.computed)(() => {
|
|
@@ -10615,10 +10585,8 @@
|
|
|
10615
10585
|
});
|
|
10616
10586
|
const circleStyles = (0, vue.computed)(() => {
|
|
10617
10587
|
const styles = {};
|
|
10618
|
-
|
|
10619
|
-
|
|
10620
|
-
height: convertValueToViewportWidth(props.width)
|
|
10621
|
-
}));
|
|
10588
|
+
styles.width = convertValueToViewportWidth(props.width);
|
|
10589
|
+
styles.height = convertValueToViewportWidth(props.width);
|
|
10622
10590
|
return styles;
|
|
10623
10591
|
});
|
|
10624
10592
|
const content = (0, vue.computed)(() => {
|