first commit

金壶/appV1/components/an-image/.pydio

@@ -0,0 +1 @@
+dd780889-969c-48f8-a35b-abdce780a21d

金壶/appV1/components/an-image/README.md

@@ -0,0 +1,44 @@
+### AnImage 蚁点（Andot）媒体图片组件 使用说明
+
+> Introducation 介绍
+
+为什么要做这个插件呢，官网已经有<imgae></image>标签了？
+因为太烂了，不符合业务需求呀，如果一个列表，并且列表中如果没有图片，
+找一个默认图片，你有什么办法吗，反正我是木有了，可能需求也比较特殊吧！
+如果你有，请在评论中说出来，感谢您！
+
+> 这个就是符合我们HTML中的写法
+
+> 废话不多说，马上使用
+
+> 引入组件：
+
+```
+import anImage from '@/components/an-image/an-image'
+
+export default {
+	components:{
+		anImage
+	},
+}
+```
+
+> 使用组件
+
+```
+<an-image :src="'https://andot.org/'+name+'.jpg'" alt="https://andot.org/images/default.png"></an-image>
+```
+
+> 属性
+
+属性名 | 类型 | 默认值 | 说明 | 平台差异说明 
+-|-|-
+src | String | '' | 图片地址 | 无
+alt | String | '' | 如果图片无法加载，则默认显示图片地址 | 无
+mode | String | 'scaleToFill' | 图片裁剪、缩放的模式 | 无
+width | Number | 70 | 图片宽度，单位：小于1( 0.2 => 20% )则为百分比，大于1( 20=>20px )为px | 无
+height | Number | 90 | 图片高度，单位：小于1( 0.2 => 20% )则为百分比，大于1( 20=>20px )为px | 无
+
+
+> 有大家可能问我为什么，我的标签前面都有一个an， 因为工作室为Andot Studio， 所以使用an， 蚁点（Andot）
+网站：https://andot.org

金壶/appV1/components/an-image/an-image.vue

@@ -0,0 +1,44 @@
+<template>
+	<image :src="url" :mode="mode" @error="imgError" class="h-100 w-100"></image>
+</template>
+
+<script>
+	export default {
+		props: {
+			src: {
+				type: String,
+				default: ''
+			},
+			alt: {
+				type: String,
+				default: ''
+			},
+			mode: {
+				type: String,
+				default: ''
+			},
+			width: {
+				type: Number,
+				default: 70
+			},
+			height: {
+				type: Number,
+				default: 90
+			}
+		},
+		data() {
+			return {
+				url: this.src
+			};
+		},
+		methods: {
+			imgError(){
+				this.url = this.alt;
+			},
+		}
+	}
+</script>
+
+<style>
+
+</style>