保存图片

src/views/demo/index.vue

 <template>
     <transition name="fade">
         <article>
-            demo
+            <div contenteditable="true" ref="edit" class="contenteditable"></div>
+            <ul class="imgList">
+                <li v-for="(item,ind) in imgList" :key="ind"><img @click="EventClick(item)" :src="item" /></li>
+            </ul>
         </article>
     </transition>
 </template>
-<style scoped>
-    
+<style scoped lang="less">
+.contenteditable{ height:200px; border:#ccc solid 1px; width:400px}
+.imgList {
+    li{
+        display: inline-block; padding:3px;border:#ccc solid 1px;border-left:none;
+        &:first-child{border:#ccc solid 1px}
+     }
+}
 </style>
 <script>
 import {mapActions,mapMutations} from "vuex";
 
 export default {
+    data(){
+        return {
+            imgList:[
+                "image/img1.png",
+                "image/img2.png",
+                "image/img3.png",
+                "image/img4.png",
+                "image/img5.png"
+            ]
+        }
+    },
     created(){
-      
+       this.init();
+    },
+    methods:{
+        init(){
+            
+
+        },
+        EventClick(src){
+            let el = this.$refs.edit;
+                debugger
+        }
     }
 }
 </script>
\ No newline at end of file