HorSwiperLight

Introduction

Note that this component depends on @zebra-ui/swiper, please install it yourself.

import PressHorSwiperLight from '@tencent/press-plus/press-hor-swiper-light/press-hor-swiper-light';

export default {
   components: {
     PressHorSwiperLight,
   }
}

Code Demo

Basic usage

<PressHorSwiperLight
   v-if="showDialog"
   :list="list"
   @close="close"
   @share="share"
/>

const MOCK_LIST = [
   {
     video: '',
     avatar: 'https://dummyimage.com/40x40',
     name: 'Awesome! Five consecutive masterpieces',
     time: '2022-11-12 23:20',
     source: 'WeChat battle report',
   }, {
     video: '',
     avatar: 'https://dummyimage.com/40x40',
     name: 'Awesome! Five consecutive masterpieces',
     time: '2022-11-12 23:20',
     source: 'WeChat battle report',
   }, {
     video: '',
     avatar: 'https://dummyimage.com/40x40',
     name: 'Awesome! Five consecutive masterpieces',
     time: '2022-11-12 23:20',
     source: 'WeChat battle report',
   },
];

export default {
   data() {
     return {
       list: MOCK_LIST,
       showDialog: true,
     }
   },
   methods: {
     close() {
       this.showDialog = false;
     },
     share() {
       this.onGTip('[share]');
     },
   }
}

API

Props

Parameters	Description	Type	Default value
list	data list	array	-

Events

Event name	Description	Parameters
share	Click to share	-
close	Click to close	-

list type

type IList = Array<{
   video: string;
   avatar: string;
   name: string;
   time: string;
   source?: string;
}>