增加上传图片组件

src/components/interval.vue

@@ -5,7 +5,7 @@
         <ul class="showimg">
           <template v-for='sd in shufflingData'>
             <li v-if='shufflingId==$index' v-on:mouseover='showPreNext' v-on:mouseout='hiddenPreNext'>
-              <a target="_blank" title="{{sd.title}}" class="img" href="{{sd.href}}"><img alt="{{sd.title}}" v-bind:src="sd.url"/></a>
+              <a target="_blank" title="{{sd.title}}" class="img" href="{{sd.href}}"><img alt="{{sd.title}}" :src="sd.url"/></a>
               <h3><a target="_blank" title="{{sd.title}}" href="{{sd.href}}">{{sd.title}}</a></h3>
             </li>
           </template>
@@ -27,46 +27,45 @@
     components: {
     },
     ready: function () {
-      var _this = this;
-      var timer = setInterval(function () {
+      var _this = this
+      setInterval(function () {
         if (_this.shufflingId >= 0 && _this.shufflingId < _this.shufflingData.length - 1) {
-          _this.shufflingId = parseInt(_this.shufflingId) + 1;
-        }
-        else if (_this.shufflingId == _this.shufflingData.length - 1) {
-          _this.shufflingId = 0;
+          _this.shufflingId = parseInt(_this.shufflingId) + 1 }
+        else if (_this.shufflingId === _this.shufflingData.length - 1) {
+          _this.shufflingId = 0
         }
       }, 5000)
     },
     methods: {
       bulletFunOne: function () {
-        this.shufflingId = 0;
+        this.shufflingId = 0
       },
       bulletFunTwo: function () {
-        this.shufflingId = 1;
+        this.shufflingId = 1
       },
       bulletFunThree: function () {
-        this.shufflingId = 2;
+        this.shufflingId = 2
       },
       showPreNext: function () {
-        this.PreNext = true;
+        this.PreNext = true
       },
       hiddenPreNext: function () {
-        this.PreNext = false;
+        this.PreNext = false
       },
       preFun: function () {
-        var _this = this;
+        var _this = this
         if (_this.shufflingId > 0 && _this.shufflingId < _this.shufflingData.length) {
-          _this.shufflingId = parseInt(_this.shufflingId) - 1;
+          _this.shufflingId = parseInt(_this.shufflingId) - 1
         }
       },
       nextFun: function () {
-        var _this = this;
+        var _this = this
         if (_this.shufflingId >= 0 && _this.shufflingId < _this.shufflingData.length - 1) {
-          _this.shufflingId = parseInt(_this.shufflingId) + 1;
+          _this.shufflingId = parseInt(_this.shufflingId) + 1
         }
       }
     },
-    data() {
+    data () {
       return {
         shufflingData: [{
           title: '',
@@ -83,7 +82,7 @@
           url: './../assets/detail.jpg'
         }],
         shufflingId: 0,
-        PreNext: false,
+        PreNext: false
       }
     }
   }
@@ -202,4 +201,4 @@
   a {
     text-decoration: none;
   }
-</style>
+</style>

src/components/upload.vue

@@ -0,0 +1,47 @@
+<template>
+  <div id="box">
+    <vue-core-image-upload
+      :class="['pure-button','pure-button-primary','js-btn-crop']"
+      :crop="true" :url="url" :extensions="extensions" :text="text"  :input-of-file="inputOfFile" :up-img-src="'http://119.29.0.211:8001' + upImgSrc"
+      :crop-ratio="cropRatio"
+    >
+    </vue-core-image-upload>
+  </div>
+</template>
+<script>
+import vueCoreImageUpload from '@/components/imgUp'
+
+export default {
+  data () {
+    return {
+      upImgSrc: '', // 上传图片后返回的图片地址
+      url: 'http://119.29.0.211:8001/upload_picture/', // 上传图片的接口地址
+      text: '上传图片', // 按钮文本
+      inputOfFile: 'img', // 上传文件的文件名
+      cropRatio: '1:1', // 剪切框的宽高比
+      extensions: 'png,gif,jpeg,jpg' // 上传图片类型
+    }
+  },
+  components: {
+    vueCoreImageUpload
+  },
+  created () {
+    this.imgSrc()
+  },
+  methods: {
+    imgSrc () {
+      console.log(this.upImgSrc)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+#box{
+  width: 200px;
+  height: 100px;
+  margin: 100px auto 0;
+  text-align: center;
+  background: #fff;
+}
+</style>

src/directive.js

@@ -0,0 +1,23 @@
+export const imgUploadObj = {
+    update(val) {
+        this.el.id = val
+        console.log('bind id', this.el.id)
+    }
+}
+
+export const imgUploadPer = {
+    update(val) {
+        let domStyle = this.el.style
+        domStyle.width = val + 'px'
+        domStyle.backgroundColor = `#0${val*2.55}0px`
+    }
+}
+
+export const style = {
+    update(val) {
+        let domStyle = this.el.style
+        for (let key in val) {
+            domStyle[key] = val[key]
+        }
+    }
+}

src/main.js

@@ -11,6 +11,11 @@ import 'vue-awesome/icons'
 import Icon from 'vue-awesome/components/Icon.vue'
 Vue.component('icon', Icon)
 
+import { imgUploadObj, imgUploadPer, style } from './directive'
+Vue.directive('bindimgid', imgUploadObj)
+Vue.directive('binduploadper', imgUploadPer)
+Vue.directive('bdstyle', style)
+
 /* eslint-disable no-new */
 new Vue({
   el: '#app',