vue自带方法-简单理解

<!-- 图片 -->

<template>

  <div class="container">

    <p class="top-select">

      图片类型：

      <select class="search-select" v-model="topPicType">

        <option v-for="op in picTypeOptions" :key="op.value" :value="op.value">{{op.name}}</option>

      </select>

    </p>

    <div class="item" v-for="(item,index) in imageLists" :key="index">

      <img class="item-pic" :src="imageUrl" alt>

      <p>图片类型：回执</p>

      <p>录入人：王某墨迹</p>

      <p>录入时间：2019/01/03 18:20:30</p>

      <div>

        <span class="item-span"  @click="showPopup">查看原图</span>

        <span class="item-span" style="float:right" @click="deleteItem(index)">删除图片</span>

      </div>

    </div>

    <div class="item" v-if="imageLists.length < 10">

      <img class="item-pic" :src="imageUrl" @click="uploadImage" alt>

      <p>

        图片类型：

        <select class="search-select" v-model="picType">

          <option v-for="op in picTypeOptions" :key="op.value" :value="op.value">{{op.name}}</option>

        </select>

      </p>

      <p></p>

      <p></p>

      <div>

        <span class="item-span" @click="uploadItem">上传</span>

        <input

          style="display: none"

          type="file"

          name="fileInput"

          id="fileInput"

          accept="image/jpeg, image/jpg, image/png"

          @change="changeImage($event)"

          ref="fileInput"

        >

      </div>

    </div>

    <Modal title="查看原图" v-model="isPopupVisible" :width="width">

      <component :is="updateView" account="parm.userAccount" @close="closePopup"></component>

    </Modal>

  </div>

</template>

<script>

//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）

//例如：import 《组件名称》 from '《组件路径》';

import Modal from "@/components/Modal";

export default {

  //import引入的组件需要注入到对象中才能使用

  components: { Modal },

  data() {

    //这里存放数据

    return {

      width: "50%",

      parm: {},

      isPopupVisible: false,

      updateView: () => import("./banner"),

      picType: "请选择",

      topPicType: "请选择",

      picTypeOptions: [

        { value: "请选择", name: "请选择" },

        { value: "15", name: "出运" },

        { value: "3", name: "到站" },

        { value: "16", name: "派送" },

        { value: "17", name: "完成" }

      ],

      imageLists: [],

      imageUrl:

        "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1560752894&di=45988ade76bb2a9fbae070c6c8190739&src=http://5b0988e595225.cdn.sohucs.com/images/20180116/b353c95957204ac6aa6866bc99e830b9.jpeg"

    };

  },

  //监听属性 类似于data概念

  computed: {},

  //监控data中的数据变化

  watch: {},

  //方法集合

  methods: {

    showPopup() {

      this.isPopupVisible = true;

    },

    closePopup() {

      this.isPopupVisible = false;

    },

    uploadImage() {

      this.$refs.fileInput.click();

    },

    uploadItem() {

      var json = {};

      json.imageUrl = this.imageUrl;

      json.selectItem = this.picType;

      this.imageLists.push(json);

      this.imageUrl =

        "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1560752894&di=45988ade76bb2a9fbae070c6c8190739&src=http://5b0988e595225.cdn.sohucs.com/images/20180116/b353c95957204ac6aa6866bc99e830b9.jpeg";

      this.picType = "请选择";

    },

    deleteItem(index) {

      this.imageLists.splice(index, 1);

    },

    changeImage(e) {

      var file = e.target.files[0];

      if ("image/jpegimage/jpgimage/png".indexOf(file.type) == -1) {

        alert("选择格式错误");

        return;

      }

      var reader = new FileReader();

      var that = this;

      reader.readAsDataURL(file);

      reader.onload = function(e) {

        that.imageUrl = this.result;

      };

    }

  },

  //生命周期 - 创建完成（可以访问当前this实例）

  created() {},

  //生命周期 - 挂载完成（可以访问DOM元素）

  mounted() {},

  beforeCreate() {}, //生命周期 - 创建之前

  beforeMount() {}, //生命周期 - 挂载之前

  beforeUpdate() {}, //生命周期 - 更新之前

  updated() {}, //生命周期 - 更新之后

  beforeDestroy() {}, //生命周期 - 销毁之前

  destroyed() {}, //生命周期 - 销毁完成

  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发

};

</script>

<style scoped>

.container {

  overflow: scroll;

  height: 850px;

}

.item {

  background: white;

  padding: 24px;

  margin-left: 24px;

  margin-top: 24px;

  display: inline-block;

  float: left;

}

.item p {

  margin-top: 16px;

  height: 22px;

  font-size: 16px;

  font-family: PingFangSC-Regular;

  font-weight: 400;

  color: rgba(0, 0, 0, 1);

  line-height: 22px;

}

.item-pic {

  width: 320px;

  height: 320px;

  min-width: 320px;

  min-height: 320px;

  background: rgba(222, 69, 48, 1);

  border-radius: 8px;

  border: 2px solid rgba(0, 60, 141, 1);

  cursor: pointer;

}

.item-span {

  width: 120px;

  height: 32px;

  line-height: 32px;

  background: rgba(255, 255, 255, 1);

  border-radius: 2px;

  border: 1px solid rgba(0, 0, 0, 1);

  font-size: 14px;

  text-align: center;

  display: inline-block;

  cursor: pointer;

}

.search-select {

  height: 32px;

  width: 120px;

  background: rgba(255, 255, 255, 1);

  border-radius: 2px;

  border: none;

  font-size: 14px;

  font-weight: 400;

  color: #000000;

  line-height: 32px;

  padding: 0 5px;

  border: 1px solid rgba(151, 151, 151, 1);

}

.top-select {

  font-size: 16px;

  font-family: PingFangSC-Regular;

  font-weight: 400;

  color: rgba(0, 0, 0, 1);

  line-height: 22px;

  margin-left: 24px;

  margin-top: 24px;

}

</style>

转载于:https://www.cnblogs.com/TRMan/p/11053139.html