lxui-uni 0.0.5 → 0.0.7
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/components/lx-tabbar/lx-tabbar.vue +99 -0
- package/components/lx-upload/lx-upload.vue +33 -39
- package/index.ts +12 -14
- package/libs/config/index.ts +13 -1
- package/package.json +1 -1
- package/types/components.d.ts +1 -1
- package/types/index.d.ts +26 -0
- package/types/env.d.ts +0 -28
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
<script lang="ts" setup>
|
|
2
|
+
import { ref, watchEffect } from 'vue';
|
|
3
|
+
|
|
4
|
+
// tabbar选中项name
|
|
5
|
+
const selectTabbarName = ref('home')
|
|
6
|
+
const url = ref('/static/tabbar/')
|
|
7
|
+
|
|
8
|
+
interface menuListInt {
|
|
9
|
+
name: string
|
|
10
|
+
text: string
|
|
11
|
+
pagePath: string
|
|
12
|
+
}
|
|
13
|
+
const props = withDefaults(defineProps<{ menuList: menuListInt[]; current: string; activeColor?: string; defaultColor?: string }>(), {
|
|
14
|
+
menuList: () => [],
|
|
15
|
+
current: '',
|
|
16
|
+
activeColor: '#5c616f',
|
|
17
|
+
defaultColor: '#7d7e80'
|
|
18
|
+
})
|
|
19
|
+
|
|
20
|
+
// tabbar点击事件
|
|
21
|
+
function clickTabbar({ name, pagePath }: menuListInt) {
|
|
22
|
+
if (name === selectTabbarName.value) return
|
|
23
|
+
selectTabbarName.value = name
|
|
24
|
+
uni.goToPage({ url: pagePath || 'pages/index/index', mode: 'reLaunch' })
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
const getImageUrl = (name: string) => `${url.value}${name}${selectTabbarName.value !== name ? '' : '-act'}.png`
|
|
28
|
+
|
|
29
|
+
watchEffect(() => {
|
|
30
|
+
if (props.current !== '') {
|
|
31
|
+
selectTabbarName.value = props.current
|
|
32
|
+
}
|
|
33
|
+
})
|
|
34
|
+
</script>
|
|
35
|
+
<template>
|
|
36
|
+
<view class="main_tabbar flex-center-between">
|
|
37
|
+
<view class="flex column tabbar_item" v-for="item in menuList" :key="item.text" @click="clickTabbar(item)">
|
|
38
|
+
<view :class="{ icon_box: true }">
|
|
39
|
+
<image :src="getImageUrl(item.name)" mode="aspectFit" />
|
|
40
|
+
</view>
|
|
41
|
+
<view class="name" :style="{ color: selectTabbarName === item.name && activeColor ? activeColor : defaultColor }">{{ item.text }}</view>
|
|
42
|
+
</view>
|
|
43
|
+
</view>
|
|
44
|
+
<view class="tabbar_mark" />
|
|
45
|
+
</template>
|
|
46
|
+
|
|
47
|
+
<style scoped lang="scss">
|
|
48
|
+
// 填充高度
|
|
49
|
+
.tabbar_mark {
|
|
50
|
+
/* 兼容 iOS < 11.2 */
|
|
51
|
+
padding-bottom: constant(safe-area-inset-bottom);
|
|
52
|
+
/* 兼容 iOS >= 11.2 */
|
|
53
|
+
padding-bottom: env(safe-area-inset-bottom);
|
|
54
|
+
padding-top: 10rpx;
|
|
55
|
+
height: 100rpx;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.main_tabbar {
|
|
59
|
+
width: 100%;
|
|
60
|
+
box-sizing: border-box;
|
|
61
|
+
padding: 10rpx 40rpx 0;
|
|
62
|
+
background-color: #fff;
|
|
63
|
+
box-shadow: 0 0 16rpx #ddd;
|
|
64
|
+
border-radius: 40rpx 40rpx 0 0;
|
|
65
|
+
/* 兼容 iOS < 11.2 */
|
|
66
|
+
padding-bottom: constant(safe-area-inset-bottom);
|
|
67
|
+
/* 兼容 iOS >= 11.2 */
|
|
68
|
+
padding-bottom: env(safe-area-inset-bottom);
|
|
69
|
+
position: fixed;
|
|
70
|
+
left: 0;
|
|
71
|
+
bottom: 0;
|
|
72
|
+
z-index: 999;
|
|
73
|
+
|
|
74
|
+
.tabbar_item {
|
|
75
|
+
height: 100rpx;
|
|
76
|
+
|
|
77
|
+
@if env(safe-area-inset-bottom) {
|
|
78
|
+
padding-bottom: 0;
|
|
79
|
+
} @else {
|
|
80
|
+
padding-bottom: 10rpx;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.icon_box {
|
|
84
|
+
width: 40rpx;
|
|
85
|
+
height: 40rpx;
|
|
86
|
+
|
|
87
|
+
image {
|
|
88
|
+
width: 100%;
|
|
89
|
+
height: 100%;
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.name {
|
|
94
|
+
margin-top: 6rpx;
|
|
95
|
+
font-size: 26rpx;
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
</style>
|
|
@@ -7,24 +7,29 @@
|
|
|
7
7
|
* @date: 2024-03-08 14:08:27"
|
|
8
8
|
* @version: V1.0.0
|
|
9
9
|
*/
|
|
10
|
+
import { uploadUrl, uploadBaseUrl } from '../../libs/config'
|
|
10
11
|
import { getCurrentInstance, onMounted, ref } from 'vue'
|
|
11
|
-
const baseUrl = import.meta.env.VITE_APP_BASE_URL
|
|
12
|
+
const baseUrl = uploadBaseUrl ? uploadBaseUrl : import.meta.env.VITE_APP_BASE_URL
|
|
13
|
+
console.log(baseUrl, 'baseUrl');
|
|
14
|
+
|
|
12
15
|
const delIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqBAMAAAA37dRoAAAAD1BMVEVHcEz8/Pz7+/v7+/v8/PxqU4qsAAAABHRSTlMAv39Ao+r7HgAAAOxJREFUeJx9U9sRhCAM5GEB55AC0LEAnbkCFOm/phOS5cDX/jism80DohTDDn3sx1k1WChm+IaMQEWbGG9oqtjtGp+wS/rYggvpTuzn4lqcTTzDw2CXgAX5ppxBS34Si3QK4j4rzR8jTppDLVfRwYlypR2zX1Su8S+JptImzezzZ5PYlo42dMYz0bFleSYEth6gxuGBpfpm6OQbbrMdUlPEQXpLUvIQg81EgHjlv3KGWNgPH4OM2/NAMXXPIjh5pCEJyemCFDiw7dPNX15J02bB+vL6pD3Avb7qhw2oaFcvkdCbaxfOjscWOmzhD3EZlfmDEVdKAAAAAElFTkSuQmCC'
|
|
13
16
|
const addIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAAwBAMAAACoMpTzAAAAD1BMVEVHcEzDw8PFxcXExMTExMTLnAMjAAAABHRSTlMAQH+/MHAgfgAAAQlJREFUeJyNlNsZgzAIhYl2AKMOEK0D2OoAGtl/pnqLQDB+5Qn9BeFAAhCsxMM+oG082aJRjsGcYvXFfDLlTdIM8S6psavVjM3bC7uhDu/Ny2TSHNRJ5ll96BtrB2T1kt/slVX0AlTllWakRqeY0zIAD2uHpmCBwMK6U8wsYtfn8+pJxgRyV9KTTTTA1X0J1tMAKcXJCjBMBMmifUmyXrHXxSbJloiNqTidM/uLudAPRHXzXkmXjnTJYz1z+l0dz8GMIWWQls02C46R89uS7hv2ZUdR7IspxXED1nFqz3Ap1Cmlln28uowdkYYQZ4hD++aPgkX2yMYkWpJXwbb9T3fB0x0CYG9tbfYHtAj7ZE5t1ToAAAAASUVORK5CYII='
|
|
14
17
|
interface propsInt {
|
|
15
|
-
width: string // 盒子宽度
|
|
16
|
-
radius: string // 盒子圆角
|
|
17
|
-
spacing: number // 间隔
|
|
18
|
-
rowNum: number // 一行的盒子数
|
|
19
|
-
limit: number // 最多上传个数
|
|
20
18
|
modelValue: string[] | string // 上传的图片
|
|
19
|
+
width?: string // 盒子宽度
|
|
20
|
+
radius?: string // 盒子圆角
|
|
21
|
+
spacing?: number // 间隔
|
|
22
|
+
rowNum?: number // 一行的盒子数
|
|
23
|
+
limit?: number // 最多上传个数
|
|
24
|
+
readOnly?: boolean // 是否只读
|
|
21
25
|
}
|
|
22
26
|
const props = withDefaults(defineProps<propsInt>(), {
|
|
23
27
|
radius: '16rpx',
|
|
24
28
|
spacing: 10,
|
|
25
29
|
rowNum: 3,
|
|
26
30
|
limit: 3,
|
|
27
|
-
modelValue: () => []
|
|
31
|
+
modelValue: () => [],
|
|
32
|
+
readOnly: false
|
|
28
33
|
})
|
|
29
34
|
const emit = defineEmits(['update:modelValue'])
|
|
30
35
|
// 上传
|
|
@@ -36,7 +41,7 @@ const uploadAdd = () => {
|
|
|
36
41
|
success: (chooseImageRes) => {
|
|
37
42
|
const tempFilePaths = chooseImageRes.tempFilePaths
|
|
38
43
|
uni.uploadFile({
|
|
39
|
-
url: baseUrl +
|
|
44
|
+
url: baseUrl + uploadUrl,
|
|
40
45
|
filePath: tempFilePaths[0],
|
|
41
46
|
name: 'file',
|
|
42
47
|
success: (uploadFileRes: any) => {
|
|
@@ -68,7 +73,7 @@ const uploadDel = (index?: number) => {
|
|
|
68
73
|
emit('update:modelValue', '')
|
|
69
74
|
} else {
|
|
70
75
|
// eslint-disable-next-line prettier/prettier, no-extra-semi
|
|
71
|
-
;(props.modelValue as string[]).splice(index as number, 1)
|
|
76
|
+
; (props.modelValue as string[]).splice(index as number, 1)
|
|
72
77
|
emit('update:modelValue', props.modelValue)
|
|
73
78
|
}
|
|
74
79
|
}
|
|
@@ -117,45 +122,31 @@ const previewImage = (urlsList: string[], index?: number) => {
|
|
|
117
122
|
</script>
|
|
118
123
|
<template>
|
|
119
124
|
<view class="lx_upload_box flex-center-start wrap">
|
|
120
|
-
<view
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
:
|
|
124
|
-
|
|
125
|
-
height: boxWidth,
|
|
126
|
-
borderRadius: radius
|
|
127
|
-
}"
|
|
128
|
-
>
|
|
125
|
+
<view v-if="limit === 1 && modelValue" class="upload_item_box" :style="{
|
|
126
|
+
width: boxWidth,
|
|
127
|
+
height: boxWidth,
|
|
128
|
+
borderRadius: radius
|
|
129
|
+
}">
|
|
129
130
|
<image :src="baseUrl + modelValue" mode="aspectFill" @click="previewImage([modelValue as string])"></image>
|
|
130
|
-
<view class="upload_close_icon flex" @click="uploadDel()">
|
|
131
|
+
<view class="upload_close_icon flex" v-if="!readOnly" @click="uploadDel()">
|
|
131
132
|
<image :src="delIcon" mode="aspectFit" />
|
|
132
133
|
</view>
|
|
133
134
|
</view>
|
|
134
|
-
<view
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
:
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
marginRight: (index + 1) % props.rowNum === 0 ? 0 : spacing + 'px',
|
|
142
|
-
marginBottom: spacing + 'px'
|
|
143
|
-
}"
|
|
144
|
-
v-for="(item, index) in modelValue"
|
|
145
|
-
:key="index"
|
|
146
|
-
>
|
|
135
|
+
<view v-else class="upload_item_box" :style="{
|
|
136
|
+
width: boxWidth,
|
|
137
|
+
height: boxWidth,
|
|
138
|
+
borderRadius: radius,
|
|
139
|
+
marginRight: (index + 1) % props.rowNum === 0 ? 0 : spacing + 'px',
|
|
140
|
+
marginBottom: spacing + 'px'
|
|
141
|
+
}" v-for="(item, index) in modelValue" :key="index">
|
|
147
142
|
<image :src="baseUrl + item" mode="aspectFill" @click="previewImage(modelValue as string[], index)"></image>
|
|
148
|
-
<view class="upload_close_icon flex" @click="uploadDel(index)">
|
|
143
|
+
<view class="upload_close_icon flex" v-if="!readOnly" @click="uploadDel(index)">
|
|
149
144
|
<image :src="delIcon" mode="aspectFit" />
|
|
150
145
|
</view>
|
|
151
146
|
</view>
|
|
152
147
|
|
|
153
|
-
<view
|
|
154
|
-
|
|
155
|
-
class="upload_add_box flex"
|
|
156
|
-
@click="uploadAdd"
|
|
157
|
-
:style="{ width: boxWidth, height: boxWidth, borderRadius: radius, marginBottom: spacing + 'px' }"
|
|
158
|
-
>
|
|
148
|
+
<view v-if="modelValue.length < limit && !readOnly" class="upload_add_box flex" @click="uploadAdd"
|
|
149
|
+
:style="{ width: boxWidth, height: boxWidth, borderRadius: radius, marginBottom: spacing + 'px' }">
|
|
159
150
|
<view class="upload_add">
|
|
160
151
|
<image :src="addIcon" mode="aspectFit"></image>
|
|
161
152
|
</view>
|
|
@@ -166,16 +157,19 @@ const previewImage = (urlsList: string[], index?: number) => {
|
|
|
166
157
|
.lx_upload_box {
|
|
167
158
|
.upload_add_box {
|
|
168
159
|
background: rgba(240, 240, 240, 1);
|
|
160
|
+
|
|
169
161
|
.upload_add {
|
|
170
162
|
width: 36rpx;
|
|
171
163
|
height: 36rpx;
|
|
172
164
|
}
|
|
173
165
|
}
|
|
166
|
+
|
|
174
167
|
// 上传的图片
|
|
175
168
|
.upload_item_box {
|
|
176
169
|
overflow: hidden;
|
|
177
170
|
box-sizing: border-box;
|
|
178
171
|
position: relative;
|
|
172
|
+
|
|
179
173
|
.upload_close_icon {
|
|
180
174
|
background-color: rgba($color: #000000, $alpha: 0.3);
|
|
181
175
|
box-shadow: 0 0 8rpx 0 rgba(0, 0, 0, 0.5);
|
package/index.ts
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import type { App } from 'vue'
|
|
2
1
|
import {
|
|
3
2
|
goToPage,
|
|
4
3
|
formatTime,
|
|
@@ -8,16 +7,15 @@ import {
|
|
|
8
7
|
setClipboardData
|
|
9
8
|
} from './libs/util'
|
|
10
9
|
import config from './libs/config'
|
|
11
|
-
import lxHeader from './components/lx-header/lx-header.vue'
|
|
12
|
-
import lxHello from './components/lx-hello/lx-hello.vue'
|
|
13
|
-
import lxImage from './components/lx-image/lx-image.vue'
|
|
14
|
-
import lxList from './components/lx-list/lx-list.vue'
|
|
15
|
-
import lxListState from './components/lx-list-state/lx-list-state.vue'
|
|
16
|
-
import lxOperateBottom from './components/lx-operate-bottom/lx-operate-bottom.vue'
|
|
17
|
-
import lxSubmitBtn from './components/lx-submit-btn/lx-submit-btn.vue'
|
|
18
|
-
import lxUpload from './components/lx-upload/lx-upload.vue'
|
|
19
|
-
|
|
20
|
-
export { lxHello, lxImage, lxHeader, lxList, lxListState, lxOperateBottom, lxSubmitBtn, lxUpload }
|
|
10
|
+
// import lxHeader from './components/lx-header/lx-header.vue'
|
|
11
|
+
// import lxHello from './components/lx-hello/lx-hello.vue'
|
|
12
|
+
// import lxImage from './components/lx-image/lx-image.vue'
|
|
13
|
+
// import lxList from './components/lx-list/lx-list.vue'
|
|
14
|
+
// import lxListState from './components/lx-list-state/lx-list-state.vue'
|
|
15
|
+
// import lxOperateBottom from './components/lx-operate-bottom/lx-operate-bottom.vue'
|
|
16
|
+
// import lxSubmitBtn from './components/lx-submit-btn/lx-submit-btn.vue'
|
|
17
|
+
// import lxUpload from './components/lx-upload/lx-upload.vue'
|
|
18
|
+
// export { lxHello, lxImage, lxHeader, lxList, lxListState, lxOperateBottom, lxSubmitBtn, lxUpload }
|
|
21
19
|
// const coms = [lxHello, lxImage, lxHeader, lxList, lxListState, lxOperateBottom, lxSubmitBtn, lxUpload]
|
|
22
20
|
// export default {
|
|
23
21
|
// install(app: App) {
|
|
@@ -42,8 +40,8 @@ const $util = {
|
|
|
42
40
|
uni.goToPage = goToPage
|
|
43
41
|
uni.$util = $util
|
|
44
42
|
|
|
45
|
-
const install = (
|
|
46
|
-
|
|
47
|
-
|
|
43
|
+
const install = (Vue: any) => {
|
|
44
|
+
Vue.config.globalProperties.$util = $util
|
|
45
|
+
Vue.config.globalProperties.goToPage = goToPage
|
|
48
46
|
}
|
|
49
47
|
export default { install }
|
package/libs/config/index.ts
CHANGED
|
@@ -5,6 +5,18 @@ if (process.env.NODE_ENV === 'development') {
|
|
|
5
5
|
console.log(`\n %c lxui-uni V${version} %c https://blog.csdn.net/qq_51091386/article/details/138125947 \n\n`, 'color: #ffffff; background: #3c9cff; padding:5px 0;', 'color: #3c9cff;background: #ffffff; padding:5px 0;');
|
|
6
6
|
}
|
|
7
7
|
|
|
8
|
+
export let uploadUrl = '/api/v1.Resources/upload'
|
|
9
|
+
export let uploadBaseUrl = ''
|
|
10
|
+
const setConfig = (config: any) => {
|
|
11
|
+
console.log(config)
|
|
12
|
+
if (config?.uploadUrl) {
|
|
13
|
+
uploadUrl = config.uploadUrl
|
|
14
|
+
}
|
|
15
|
+
if (config?.uploadBaseUrl) {
|
|
16
|
+
uploadBaseUrl = config.uploadBaseUrl
|
|
17
|
+
}
|
|
18
|
+
}
|
|
8
19
|
export default {
|
|
9
|
-
version
|
|
20
|
+
version,
|
|
21
|
+
setConfig
|
|
10
22
|
}
|
package/package.json
CHANGED
package/types/components.d.ts
CHANGED
|
@@ -8,7 +8,7 @@ import lxSubmitBtn from '../components/lx-submit-btn/lx-submit-btn.vue'
|
|
|
8
8
|
import lxUpload from '../components/lx-upload/lx-upload.vue'
|
|
9
9
|
|
|
10
10
|
|
|
11
|
-
declare module 'vue' {
|
|
11
|
+
declare module '@vue/runtime-core' {
|
|
12
12
|
export interface GlobalComponents {
|
|
13
13
|
"lx-header": typeof lxHeader,
|
|
14
14
|
"lx-hello": typeof lxHello,
|
package/types/index.d.ts
ADDED
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
/// <reference path="./components.d.ts" />
|
|
2
|
+
declare module 'lxui-uni' {
|
|
3
|
+
export function install(): void //必要
|
|
4
|
+
type pageMode = 'navigateTo' | 'redirectTo' | 'reLaunch' | 'switchTab'
|
|
5
|
+
interface goToPageInt {
|
|
6
|
+
url: string
|
|
7
|
+
mode?: pageMode
|
|
8
|
+
params?: {
|
|
9
|
+
[key: string]: string | number | boolean
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
global {
|
|
14
|
+
interface Uni {
|
|
15
|
+
goToPage({ url, mode, params }: goToPageInt): void;
|
|
16
|
+
$util: {
|
|
17
|
+
formatTime: any,
|
|
18
|
+
debounce: any,
|
|
19
|
+
throttle: any,
|
|
20
|
+
saveImgData: any,
|
|
21
|
+
setClipboardData: any,
|
|
22
|
+
config: any
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
}
|
package/types/env.d.ts
DELETED
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
goToPage,
|
|
3
|
-
formatTime,
|
|
4
|
-
debounce,
|
|
5
|
-
throttle,
|
|
6
|
-
saveImgData,
|
|
7
|
-
setClipboardData
|
|
8
|
-
} from '../libs/util'
|
|
9
|
-
type pageMode = 'navigateTo' | 'redirectTo' | 'reLaunch' | 'switchTab'
|
|
10
|
-
interface goToPageInt {
|
|
11
|
-
url: string
|
|
12
|
-
mode?: pageMode
|
|
13
|
-
params?: {
|
|
14
|
-
[key: string]: string | number | boolean
|
|
15
|
-
}
|
|
16
|
-
}
|
|
17
|
-
interface Uni {
|
|
18
|
-
goToPage({ url, mode, params = {} }: goToPageInt): void;
|
|
19
|
-
$util: {
|
|
20
|
-
goToPage,
|
|
21
|
-
formatTime,
|
|
22
|
-
debounce,
|
|
23
|
-
throttle,
|
|
24
|
-
saveImgData,
|
|
25
|
-
setClipboardData
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
declare const onReachBottom
|