lxui-uni 0.0.2 → 0.0.3
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-header/lx-header.vue +250 -0
- package/{lib → components/lx-hello}/lx-hello.vue +5 -0
- package/components/lx-image/index.ts +3 -0
- package/components/lx-image/lx-image.vue +102 -0
- package/components/lx-list/lx-list.vue +162 -0
- package/components/lx-list-state/lx-list-state.vue +92 -0
- package/components/lx-operate-bottom/lx-operate-bottom.vue +107 -0
- package/components/lx-submit-btn/lx-submit-btn.vue +61 -0
- package/components/lx-upload/lx-upload.vue +192 -0
- package/index.ts +11 -4
- package/package.json +2 -2
- package/theme.scss +228 -0
- package/types/components.d.ts +23 -0
- package/util/index.ts +294 -0
- package/util/useListLoadClass.ts +143 -0
- package/vite.config.ts +1 -0
- package/lib/lx-image.vue +0 -82
package/lib/lx-image.vue
DELETED
|
@@ -1,82 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<view class="images" :style="isCorrect ? correctStyle : errorStyle">
|
|
3
|
-
<image :src="url || defaultPic" @error="handleImageError" :mode="mode" />
|
|
4
|
-
</view>
|
|
5
|
-
</template>
|
|
6
|
-
|
|
7
|
-
<script setup lang="ts">
|
|
8
|
-
import { computed, reactive, ref, watchEffect } from 'vue';
|
|
9
|
-
|
|
10
|
-
/*
|
|
11
|
-
* @description: 图片组件
|
|
12
|
-
* @fileName: ex-image.vue
|
|
13
|
-
* @params src : 图片路径
|
|
14
|
-
* @params mode : 图片模式 默认:aspectFill
|
|
15
|
-
* @params width : 宽 默认:80rpx
|
|
16
|
-
* @params height : 高 默认:80rpx
|
|
17
|
-
* @params type : 区分分页和icon类型 默认:list
|
|
18
|
-
* @author: ckl
|
|
19
|
-
* @date: 2023-12-18"
|
|
20
|
-
* @version: V1.0.0
|
|
21
|
-
*/
|
|
22
|
-
const props = withDefaults(
|
|
23
|
-
defineProps<{
|
|
24
|
-
src: string
|
|
25
|
-
mode?: string
|
|
26
|
-
width?: number | string
|
|
27
|
-
height?: number | string
|
|
28
|
-
type: 'list' | 'icon'
|
|
29
|
-
radius?: string
|
|
30
|
-
}>(),
|
|
31
|
-
{
|
|
32
|
-
src: '',
|
|
33
|
-
mode: 'aspectFill',
|
|
34
|
-
width: '200rpx',
|
|
35
|
-
height: '200rpx',
|
|
36
|
-
type: 'list'
|
|
37
|
-
}
|
|
38
|
-
)
|
|
39
|
-
|
|
40
|
-
const url = ref(props.src)
|
|
41
|
-
|
|
42
|
-
const isCorrect = ref(true)
|
|
43
|
-
|
|
44
|
-
const correctStyle = reactive({
|
|
45
|
-
width: props.width,
|
|
46
|
-
height: props.height,
|
|
47
|
-
borderRadius: props.radius,
|
|
48
|
-
overflow: 'hidden'
|
|
49
|
-
})
|
|
50
|
-
|
|
51
|
-
const errorStyle = reactive({
|
|
52
|
-
width: props.width,
|
|
53
|
-
height: props.height,
|
|
54
|
-
padding: '14rpx',
|
|
55
|
-
backgroundColor: '#dedede',
|
|
56
|
-
borderRadius: '4px'
|
|
57
|
-
})
|
|
58
|
-
|
|
59
|
-
const defaultPic = computed(() => {
|
|
60
|
-
return `/static/${props.type === 'list' ? 'nomore' : 'defauIcon'}.png`
|
|
61
|
-
})
|
|
62
|
-
|
|
63
|
-
const handleImageError = () => {
|
|
64
|
-
if (props.type !== 'list') {
|
|
65
|
-
isCorrect.value = false
|
|
66
|
-
}
|
|
67
|
-
url.value = defaultPic.value
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
watchEffect(() => {
|
|
71
|
-
url.value = props.src
|
|
72
|
-
})
|
|
73
|
-
</script>
|
|
74
|
-
|
|
75
|
-
<style scoped lang="scss">
|
|
76
|
-
.iamges {
|
|
77
|
-
image {
|
|
78
|
-
width: 100%;
|
|
79
|
-
height: 100%;
|
|
80
|
-
}
|
|
81
|
-
}
|
|
82
|
-
</style>
|