uniapp-dyckui 4.1.5 → 4.1.6
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 +7 -80
- package/dist/assets/style.css +154 -154
- package/dist/index.cjs +5 -5
- package/dist/index.cjs.map +1 -1
- package/dist/index.mjs +5 -5
- package/dist/index.mjs.map +1 -1
- package/package.json +222 -215
package/README.md
CHANGED
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
由 `uniapp` + `Vue3` + `Ts` + `Vite5` + `UnoCss` + `wot-ui` + `z-paging` 构成，
|
|
2
2
|
|
|
3
|
-
## 📦 内置组件库
|
|
4
3
|
|
|
5
|
-
`unibest` 内置了一套完整的组件库，包含多种常用组件，可直接在项目中使用：
|
|
6
4
|
|
|
7
5
|
### 基础组件
|
|
8
6
|
- **Button**：按钮组件，支持多种样式和状态
|
|
@@ -32,102 +30,31 @@
|
|
|
32
30
|
```typescript
|
|
33
31
|
import { createApp } from 'vue'
|
|
34
32
|
import App from './App.vue'
|
|
35
|
-
import
|
|
33
|
+
import uniappDyckui from 'uniapp-dyckui'
|
|
34
|
+
import 'uniapp-dyckui/style' // 引用CSS文件
|
|
36
35
|
|
|
37
36
|
const app = createApp(App)
|
|
38
37
|
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
app.component(name, component)
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
app.mount('#app')
|
|
38
|
+
app.component('SButton', uniappDyckui.Button)
|
|
39
|
+
app.component('SToast', uniappDyckui.Toast)
|
|
40
|
+
...
|
|
47
41
|
```
|
|
48
42
|
|
|
49
|
-
###
|
|
43
|
+
### 组件使用示例
|
|
50
44
|
|
|
51
45
|
在需要使用的页面或组件中局部引入：
|
|
52
46
|
|
|
53
47
|
```vue
|
|
54
48
|
<script setup lang="ts">
|
|
55
|
-
import { Button, Toast } from '@/components/MyComs'
|
|
56
49
|
|
|
57
|
-
const handleClick = () => {
|
|
58
|
-
Toast('按钮被点击了')
|
|
59
|
-
}
|
|
60
50
|
</script>
|
|
61
51
|
|
|
62
52
|
<template>
|
|
63
|
-
<
|
|
53
|
+
<s-button>主要按钮</s-button>
|
|
64
54
|
</template>
|
|
65
55
|
```
|
|
66
56
|
|
|
67
57
|
### 组件使用示例
|
|
68
|
-
|
|
69
|
-
#### Button 组件
|
|
70
|
-
```vue
|
|
71
|
-
<Button type="primary">主要按钮</Button>
|
|
72
|
-
<Button type="success">成功按钮</Button>
|
|
73
|
-
<Button type="warning">警告按钮</Button>
|
|
74
|
-
<Button type="danger">危险按钮</Button>
|
|
75
|
-
```
|
|
76
|
-
|
|
77
|
-
#### Dialog 组件
|
|
78
|
-
```vue
|
|
79
|
-
<script setup lang="ts">
|
|
80
|
-
import { Dialog } from '@/components/MyComs'
|
|
81
|
-
|
|
82
|
-
const showDialog = () => {
|
|
83
|
-
Dialog({
|
|
84
|
-
title: '提示',
|
|
85
|
-
content: '确定要执行此操作吗？',
|
|
86
|
-
confirmText: '确定',
|
|
87
|
-
cancelText: '取消',
|
|
88
|
-
onConfirm: () => {
|
|
89
|
-
console.log('用户点击了确定')
|
|
90
|
-
},
|
|
91
|
-
onCancel: () => {
|
|
92
|
-
console.log('用户点击了取消')
|
|
93
|
-
}
|
|
94
|
-
})
|
|
95
|
-
}
|
|
96
|
-
</script>
|
|
97
|
-
|
|
98
|
-
<template>
|
|
99
|
-
<Button @click="showDialog">显示对话框</Button>
|
|
100
|
-
</template>
|
|
101
|
-
```
|
|
102
|
-
|
|
103
|
-
#### PullRefresh 组件
|
|
104
|
-
```vue
|
|
105
|
-
<script setup lang="ts">
|
|
106
|
-
import { PullRefresh } from '@/components/MyComs'
|
|
107
|
-
|
|
108
|
-
const onRefresh = async () => {
|
|
109
|
-
// 模拟网络请求
|
|
110
|
-
await new Promise(resolve => setTimeout(resolve, 1500))
|
|
111
|
-
console.log('刷新完成')
|
|
112
|
-
}
|
|
113
|
-
</script>
|
|
114
|
-
|
|
115
|
-
<template>
|
|
116
|
-
<PullRefresh @refresh="onRefresh">
|
|
117
|
-
<div class="content">
|
|
118
|
-
<!-- 页面内容 -->
|
|
119
|
-
</div>
|
|
120
|
-
</PullRefresh>
|
|
121
|
-
</template>
|
|
122
|
-
```
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
<p align="center">
|
|
126
|
-
<a href="https://unibest.tech/" target="_blank">📖 文档地址(new)</a>
|
|
127
|
-
<span style="margin:0 10px;">|</span>
|
|
128
|
-
<a href="https://unibest-tech.github.io/hello-unibest" target="_blank">📱 DEMO 地址</a>
|
|
129
|
-
</p>
|
|
130
|
-
|
|
131
58
|
---
|
|
132
59
|
|
|
133
60
|
|