day07

1.vant-swiper-previewImage
2.单向数据流
3.双向数据绑定
4.实现类似于vant-ui的模态框
5.动态路由 router-link跳转
6.动态组件和 keep-alive

一、vant-swiper-previewImage

<van-swipe :autoplay="false">
      <van-swipe-item v-for="(item, index) in images" @click="onChange(index)" :key="index">
        <img :src="item.imgUrl" />
      </van-swipe-item>
</van-swipe>

<script>
import { ImagePreview } from "vant";
import localData from "@/data/data.js";
export default {
  data() {
    return {
      images: localData
    };
  },
  methods: {
    onChange(index) {
      const instance = ImagePreview({
        images: this.urls,
        asyncClose: true,
        startPosition: index
      });
      setTimeout(() => {
        instance.close();
      }, 1000);
    }
  },
  computed: {
    urls() {
      return this.images.map(item => item.imgUrl);
    }
  }
};
</script>

//data.js
var localData = [
    { imgUrl: "http://img1.qunarzz.com/sight/p0/1501/10/1012e4a2c398409c.water.jpg_350x240_56977146.jpg", id: 1000 },
    { imgUrl: "http://img1.qunarzz.com/sight/p0/201405/27/94685f45252d4f782f6545a7586e9daa.jpg_350x240_bfb5f7e5.jpg", id: 1001 },
    { imgUrl: "http://img1.qunarzz.com/sight/p0/201405/27/94685f45252d4f782f6545a7586e9daa.jpg_350x240_bfb5f7e5.jpg", id: 1002 },
    { imgUrl: "http://img1.qunarzz.com/sight/p0/201301/14/c14bcd857b804ca393835fbb.jpg_350x240_d84595e3.jpg", id: 1234 },
    { imgUrl: "http://img1.qunarzz.com/sight/p0/1509/fb/4bd1b1c83f5bc033ff36093b91294021.water.jpg_350x240_feb831ff.jpg", id: 1115 },
    { imgUrl: "http://img1.qunarzz.com/sight/p0/1412/5c/b921bad6734a811e28c2c8f7a22f83ba.water.jpg_350x240_874af7bd.jpg", id: 1116 },
]
export default localData;