From 97fcc8333ef1648dd82fe2b34ab284cc753600b8 Mon Sep 17 00:00:00 2001
From: haoziqaq <357229046@qq.com>
Date: Wed, 23 Dec 2020 16:40:17 +0800
Subject: [PATCH] =?UTF-8?q?fix(ui/image):=20image=E5=8E=9F=E5=9E=8B?=
 =?UTF-8?q?=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

affects: @varlet/ui
---
 packages/varlet-ui/src/image/Image.vue        | 45 +++++++++++++++++++
 .../src/image/__tests__/index.spec.js         |  7 +++
 packages/varlet-ui/src/image/docs/en_US.md    |  0
 packages/varlet-ui/src/image/docs/zh_CN.md    |  0
 .../varlet-ui/src/image/example/index.vue     | 42 +++++++++++++++++
 packages/varlet-ui/src/image/image.less       |  8 ++++
 packages/varlet-ui/src/image/index.ts         |  8 ++++
 packages/varlet-ui/src/image/props.ts         | 37 +++++++++++++++
 8 files changed, 147 insertions(+)
 create mode 100644 packages/varlet-ui/src/image/Image.vue
 create mode 100644 packages/varlet-ui/src/image/__tests__/index.spec.js
 create mode 100644 packages/varlet-ui/src/image/docs/en_US.md
 create mode 100644 packages/varlet-ui/src/image/docs/zh_CN.md
 create mode 100644 packages/varlet-ui/src/image/example/index.vue
 create mode 100644 packages/varlet-ui/src/image/image.less
 create mode 100644 packages/varlet-ui/src/image/index.ts
 create mode 100644 packages/varlet-ui/src/image/props.ts

diff --git a/packages/varlet-ui/src/image/Image.vue b/packages/varlet-ui/src/image/Image.vue
new file mode 100644
index 00000000000..44cb253af0a
--- /dev/null
+++ b/packages/varlet-ui/src/image/Image.vue
@@ -0,0 +1,45 @@
+<template>
+  <div
+    class="var-image var--box"
+    v-ripple="{ disabled: !ripple }"
+    :style="{
+      'border-radius': radius
+    }"
+  >
+    <img
+      class="var-image__image"
+      v-bind="$attrs"
+      :alt="alt"
+      :lazy-error="error"
+      :lazy-loading="loading"
+      :style="{
+        'width': width,
+        'height': height,
+        'object-fit': fit
+      }"
+      v-lazy="src"
+    >
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { props } from './props'
+import Ripple from '../ripple'
+import Lazy from '../lazy'
+
+export default defineComponent({
+  name: 'VarImage',
+  directives: {
+    Lazy,
+    Ripple
+  },
+  inheritAttrs: false,
+  props
+})
+</script>
+
+<style lang="less">
+@import "./image";
+</style>
+
diff --git a/packages/varlet-ui/src/image/__tests__/index.spec.js b/packages/varlet-ui/src/image/__tests__/index.spec.js
new file mode 100644
index 00000000000..30cde2af518
--- /dev/null
+++ b/packages/varlet-ui/src/image/__tests__/index.spec.js
@@ -0,0 +1,7 @@
+const Image = require('../../../cjs/image').default
+const { render } = require('@testing-library/vue')
+
+test('test image', async () => {
+  const wrapper = render(Image)
+  console.log(wrapper)
+})
diff --git a/packages/varlet-ui/src/image/docs/en_US.md b/packages/varlet-ui/src/image/docs/en_US.md
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/packages/varlet-ui/src/image/docs/zh_CN.md b/packages/varlet-ui/src/image/docs/zh_CN.md
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/packages/varlet-ui/src/image/example/index.vue b/packages/varlet-ui/src/image/example/index.vue
new file mode 100644
index 00000000000..514b883c048
--- /dev/null
+++ b/packages/varlet-ui/src/image/example/index.vue
@@ -0,0 +1,42 @@
+<template>
+  <var-button @click="set">set</var-button>
+  <var-image width="200px" height="200px" fit="cover" src="https://ddtask.oss-cn-shanghai.aliyuncs.com/ddtask/201208ysl/images/1606982343202.jpg?Expires=1608703112&OSSAccessKeyId=TMP.3Kj8QoTDYVpdcwERRbtMRUh7wkoZvgG25VLcqMaqzYFdcqECUoupXbaFYu36z8tcVvCgwHxUo2RF1xdB46MJpNesxSzKsv&Signature=tmLF4Y65KgbR%2FeUXdZTGSMArxIo%3D&versionId=CAEQFBiBgMDNormesRciIGU5YmQ5MWQwZjZhZTQxNGY5Nzk5YjM1ZDRhY2Q0NzYw&response-content-type=application%2Foctet-stream"/>
+  <var-image width="200px" height="200px" fit="cover" error="https://cn.vuejs.org/images/logo.png" src="https://asdadsaas.com"></var-image>
+  <var-image width="200px" height="200px" fit="cover" error="https://cn.vuejs.org/images/logo.png" src="https://asdadsaas.com"></var-image>
+  <var-image width="200px" height="200px" fit="cover" :src="src"></var-image>
+  <var-image width="200px" height="200px" fit="cover" radius="50%" error="https://cn.vuejs.org/images/logo.png" src="https://asdadsaas.com" :ripple="true"></var-image>
+  <var-image width="200px" height="400px" fit="cover" radius="50%" error="https://cn.vuejs.org/images/logo.png" src="https://asdadsaas.com" :ripple="true"></var-image>
+  <var-image width="200px" height="200px" fit="cover" radius="50%" error="https://cn.vuejs.org/images/logo.png" src="https://asdadsaas.com" :ripple="true"></var-image>
+  <var-image width="200px" height="400px" fit="cover" error="https://cn.vuejs.org/images/logo.png" src="https://asdadsaas.com" :ripple="true"></var-image>
+
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, Ref } from 'vue'
+import Button from '../../button'
+import Image from '..'
+
+export default defineComponent({
+  name: 'ImageExample',
+  components: {
+    [Image.name]: Image,
+    [Button.name]: Button
+  },
+  setup() {
+    const src: Ref<string> = ref('https://asdadsaas.com')
+
+    return {
+      src,
+      set() {
+        src.value = 'https://cn.vuejs.org/images/logo.png'
+      }
+    }
+  }
+})
+</script>
+
+<style scoped>
+.example {
+  background: antiquewhite;
+}
+</style>
diff --git a/packages/varlet-ui/src/image/image.less b/packages/varlet-ui/src/image/image.less
new file mode 100644
index 00000000000..ce5b8061551
--- /dev/null
+++ b/packages/varlet-ui/src/image/image.less
@@ -0,0 +1,8 @@
+.var-image {
+  display: inline-block;
+  overflow: hidden;
+
+  &__image {
+    display: block;
+  }
+}
diff --git a/packages/varlet-ui/src/image/index.ts b/packages/varlet-ui/src/image/index.ts
new file mode 100644
index 00000000000..9b340d80264
--- /dev/null
+++ b/packages/varlet-ui/src/image/index.ts
@@ -0,0 +1,8 @@
+import { App } from 'vue'
+import Image from './Image.vue'
+
+Image.install = function(app: App) {
+  app.component(Image.name, Image)
+}
+
+export default Image
diff --git a/packages/varlet-ui/src/image/props.ts b/packages/varlet-ui/src/image/props.ts
new file mode 100644
index 00000000000..e7d2260058e
--- /dev/null
+++ b/packages/varlet-ui/src/image/props.ts
@@ -0,0 +1,37 @@
+function fitValidator(fit: string) {
+  return ['fill', 'contain', 'cover', 'none', 'scale-down'].includes(fit)
+}
+
+export const props = {
+  src: {
+    type: String
+  },
+  fit: {
+    type: String,
+    validator: fitValidator,
+    default: 'fill'
+  },
+  alt: {
+    type: String
+  },
+  width: {
+    type: String
+  },
+  height: {
+    type: String
+  },
+  radius: {
+    type: String,
+    default: '0'
+  },
+  error: {
+    type: String
+  },
+  loading: {
+    type: String
+  },
+  ripple: {
+    type: Boolean,
+    default: false
+  }
+}