index.vue 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142
  1. <template>
  2. <uni-shadow-root class="vant-empty-index"><view class="custom-class van-empty">
  3. <view class="van-empty__image">
  4. <slot name="image"></slot>
  5. </view>
  6. <view class="van-empty__image">
  7. <image v-if="image" class="van-empty__image__img" :src="computed.imageUrl(image)"></image>
  8. </view>
  9. <view class="van-empty__description">
  10. <slot name="description"></slot>
  11. </view>
  12. <view class="van-empty__description">
  13. {{ description }}
  14. </view>
  15. <view class="van-empty__bottom">
  16. <slot></slot>
  17. </view>
  18. </view></uni-shadow-root>
  19. </template>
  20. <wxs src="../wxs/utils.wxs" module="utils"></wxs><wxs src="./index.wxs" module="computed"></wxs>
  21. <script>
  22. global['__wxVueOptions'] = {components:{}}
  23. global['__wxRoute'] = 'vant/empty/index'
  24. import { VantComponent } from '../common/component';
  25. VantComponent({
  26. props: {
  27. description: String,
  28. image: {
  29. type: String,
  30. value: 'default',
  31. },
  32. },
  33. });
  34. export default global['__wxComponents']['vant/empty/index']
  35. </script>
  36. <style platform="mp-weixin">
  37. @import '../common/index.css';.van-empty{align-items:center;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;padding:32rpx 0}.van-empty__image{height:var(--image-height, 160px);width:var(--image-width, 160px)}.van-empty__image:empty{display:none}.van-empty__image__img{height:100%;width:100%}.van-empty__image:not(:empty)+.van-empty__image{display:none}.van-empty__description{color:#969799;font-size:28rpx;line-height:40rpx;margin-top:32rpx;padding:0 30rpx}.van-empty__description:empty,.van-empty__description:not(:empty)+.van-empty__description{display:none}.van-empty__bottom{margin-top:24px}
  38. </style>