index.vue 1001 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. <template>
  2. <div>
  3. <van-image :width="width" :height="height" :src="src" @click="onClickShow" />
  4. <van-overlay :show="show" @click="onClickHide">
  5. <div class="imgsty">
  6. <van-image :src="src" />
  7. </div>
  8. </van-overlay>
  9. </div>
  10. <!-- <van-overlay :show="false">
  11. <view class="wrapper">
  12. <van-image :width="width" :height="height" :src="src" />
  13. </view>
  14. </van-overlay> -->
  15. </template>
  16. <script>
  17. export default {
  18. props: {
  19. width: {
  20. type: String,
  21. default: '100'
  22. },
  23. height: {
  24. type: String,
  25. default: '100'
  26. },
  27. src: {
  28. type: String,
  29. default: 'https://img.yzcdn.cn/vant/cat.jpeg'
  30. }
  31. },
  32. name: 'SocAppIndex',
  33. data() {
  34. return {
  35. show: false
  36. }
  37. },
  38. mounted() {},
  39. methods: {
  40. onClickShow() {
  41. this.show = true
  42. },
  43. onClickHide() {
  44. this.show = false
  45. }
  46. }
  47. }
  48. </script>
  49. <style lang="scss" scoped>
  50. .imgsty{
  51. position:absolute;
  52. top: 28%;
  53. }
  54. </style>