lxui-uni 0.0.2

package/index.ts

@@ -0,0 +1,12 @@
+import type { App } from 'vue'
+import lxHello from './lib/lx-hello.vue'
+import lxImage from './lib/lx-image.vue'
+export { lxHello, lxImage }
+const coms = [lxHello,lxImage]
+export default {
+    install(app: App){
+        coms.forEach((commponent) => {
+            app.component(commponent.name as string, commponent)
+        })
+    }
+}

package/lib/lx-hello.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+defineProps<{
+  msg: string
+}>()
+</script>
+
+<template>
+  <div class="greetings">
+    <h1 class="green">{{ msg }}</h1>
+  </div>
+</template>
+
+<style scoped>
+h1 {
+  font-weight: 500;
+  font-size: 2.6rem;
+  position: relative;
+  top: -10px;
+}
+</style>

package/lib/lx-image.vue

@@ -0,0 +1,82 @@
+<template>
+    <view class="images" :style="isCorrect ? correctStyle : errorStyle">
+        <image :src="url || defaultPic" @error="handleImageError" :mode="mode" />
+    </view>
+</template>
+
+<script setup lang="ts">
+import { computed, reactive, ref, watchEffect } from 'vue';
+
+/*
+ * @description: 图片组件
+ * @fileName: ex-image.vue
+ * @params  src : 图片路径
+ * @params  mode : 图片模式  默认:aspectFill
+ * @params  width : 宽  默认:80rpx
+ * @params  height : 高  默认:80rpx
+ * @params  type : 区分分页和icon类型  默认:list
+ * @author: ckl
+ * @date: 2023-12-18"
+ * @version: V1.0.0
+ */
+const props = withDefaults(
+    defineProps<{
+        src: string
+        mode?: string
+        width?: number | string
+        height?: number | string
+        type: 'list' | 'icon'
+        radius?: string
+    }>(),
+    {
+        src: '',
+        mode: 'aspectFill',
+        width: '200rpx',
+        height: '200rpx',
+        type: 'list'
+    }
+)
+
+const url = ref(props.src)
+
+const isCorrect = ref(true)
+
+const correctStyle = reactive({
+    width: props.width,
+    height: props.height,
+    borderRadius: props.radius,
+    overflow: 'hidden'
+})
+
+const errorStyle = reactive({
+    width: props.width,
+    height: props.height,
+    padding: '14rpx',
+    backgroundColor: '#dedede',
+    borderRadius: '4px'
+})
+
+const defaultPic = computed(() => {
+    return `/static/${props.type === 'list' ? 'nomore' : 'defauIcon'}.png`
+})
+
+const handleImageError = () => {
+    if (props.type !== 'list') {
+        isCorrect.value = false
+    }
+    url.value = defaultPic.value
+}
+
+watchEffect(() => {
+    url.value = props.src
+})
+</script>
+
+<style scoped lang="scss">
+.iamges {
+    image {
+        width: 100%;
+        height: 100%;
+    }
+}
+</style>

package/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "lxui-uni",
+  "version": "0.0.2",
+  "description": "快速构建页面",
+  "author": "2399270194@qq.com",
+  "license": "MIT",
+  "keywords": [
+    "uview",
+    "ui",
+    "uni-app",
+    "lxui-uni"
+  ]
+}