feat: 底部操作栏增加重置 icon; 支持底部操作栏插槽

AnaniZhu · Feb 15, 2020 · c59b9d3 · c59b9d3
1 parent 1d37d06
commit c59b9d3
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 6 deletions.
diff --git a/examples/pages/Example.vue b/examples/pages/Example.vue
@@ -54,6 +54,18 @@
         :class="['s-img', index > 1 ? `img${index}` : '']"
         style="width: 100px; height: 100px; margin-right: 10px;">
     </image-preview>
+    <h3 class="mb16">自定义底部操作栏</h3>
+    <image-preview>
+      <img
+        v-for="(img, index) in imageUrls"
+        :key="index"
+        :src="img"
+        class="img"
+        style="width: 100px; height: 100px; margin-right: 10px;">
+      <span slot="operate">
+        <button>自定义按钮</button>
+      </span>
+    </image-preview>
   </div>
 </template>
 <script>

diff --git a/src/ImagePreview.vue b/src/ImagePreview.vue
@@ -24,11 +24,16 @@
         <div class="arrow arrow-prev hover-icon" @click="updatePosition(-1)"><i class="iconfont icon-shangyizhang" /></div>
         <div class="arrow arrow-next hover-icon" @click="updatePosition(1)"><i class="iconfont icon-xiayizhang" /></div>
         <div class="operate-area">
-          <i class="iconfont icon-actionicon hover-icon" @click="increaseScale" />
-          <i class="iconfont icon-suoxiao hover-icon" @click="decreaseScale" />
-          <div class="divide" />
-          <i class="iconfont icon-xuanzhuan hover-icon" @click="rotateAngle -= innerAngle" />
-          <i class="iconfont icon-xuanzhuan-r hover-icon" @click="rotateAngle += innerAngle" />
+          <slot v-if="$slots.operate" name="operate" />
+          <template v-else>
+            <i class="iconfont icon-actionicon hover-icon" @click="increaseScale" />
+            <i class="iconfont icon-suoxiao hover-icon" @click="decreaseScale" />
+            <div class="divide" />
+            <i class="iconfont icon-xuanzhuan hover-icon" @click="rotateAngle -= innerAngle" />
+            <i class="iconfont icon-xuanzhuan-r hover-icon" @click="rotateAngle += innerAngle" />
+            <div class="divide" />
+            <i class="iconfont icon-zhongzhi hover-icon" @click="reset" />
+          </template>
         </div>
         <transition name="fade">
           <div
@@ -428,7 +433,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import url('//at.alicdn.com/t/font_1239600_z1ho2s724n.css');
+@import url('//at.alicdn.com/t/font_1239600_7r0qv8bues.css');
 
 .fade-in-enter-active,
 .fade-in-leave-active {