console
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>demo</title>
<link rel="stylesheet" href="https://unpkg.com/view-ui-plus@1.3.13/dist/styles/viewuiplus.css">
<style>
[v-cloak] {
display: none !important;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<div style="height: 300px;width:200px;position: relative;overflow-y: scroll;border: 2px solid red">
<Space direction="vertical">
<Card style="width:100%" v-for="item in list">
<div>
<Image :src="item" fit="cover" width="100" height="56" alt="" lazy
referrerpolicy="no-referrer"></Image>
</div>
</Card>
</Space>
</div>
</div>
<script src="https://unpkg.com/vue@3.3.4/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/view-ui-plus@1.3.13"></script>
<script>
const app = Vue.createApp({
data() {
return {
list: [
"https://i0.hdslb.com/bfs/live/new_room_cover/6cefe8d52544fa7cd2693005ac857c5796700b52.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/cc92c94d9815a8bcf9ff7a5ffc33a988e920824c.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/3d22fceed40408fdbf01dafbcae0e979603ecaea.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/061506e8a627b75029aed464d2b73fee792a2dad.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/5c3045c4c4c712ab6c4445c84afe186806b8f743.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/f305eb7310a35608b421e26767ced54745d810d2.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/09ee7b8e4b4d719248eb23fd98aed8ef92c7e969.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/8b8290bd4f4e15849dc2e08f6763a22485690fc1.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/2de16be090036ecd496f812933f75477480b471a.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/3e38b55a616e499cfa4221682523caccafff3330.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/ba297315d03c59ec1703d6f7ec36718df207ad07.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/625b0056fee3d2c9e74ddebd25705c93101f48a9.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/078da6121e119a05613b0119830754914398e9f8.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/8381cbbc23b13305e5a7d4abf0b571a11e5e4011.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/a99d11527b635664608baea428432cd2d01d0073.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/8ab434141dce1661599b2f443f3d48afc2850f96.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/d79f14277ec29f66d35258c780ea100ec3cc35d6.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/90fc262b5c2e06a23d1bac183d13fc99fb9ee837.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/f4bba65e7d45be17c33256ef3cc478c8f6c4ed03.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/058b37287004cf63b93ac665e4ae1d8f2352eadb.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/d6a02ef399d863f6bdba0edc051bdec7b91e007a.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/d8980ad273bc42c68878f3cea6f0af6d429a1fc8.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/761aae972402715cf48b79636dccaec457d49050.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/6cefe8d52544fa7cd2693005ac857c5796700b52.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/f7fc58f3c7b6b766985a841058eabf06abd0fbcf.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/9a53cddbcc6bc6b0127d57924eb77a34e0d4817d.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/8730a4b2a722f26246253bfa80dea17d115881d2.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/af170f6754d802f097fc9091508af62f72b8b002.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/bda687e80a3c47e73174c329f18b27138ed96a92.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/2fc4473a0aaf7ed941ea800d21824b751d3459af.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/53a41b27e548784254ff55704559ab9e1460f6ad.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/26653ffdea40190b7d71e5c7e6fb86879bd6f29c.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/0d7767a506d217b2a382d47e4ff76b8204ba0cac.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/8757a46e1b02b7360fac2a8ea7df02a791ad77d0.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/3b41cba5dd08b0ffbd6ce0662fe4fd93348a880e.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/928edb4003b5d4191f6044889a2922ecc33a7464.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/c7ea07abdfb3648d9f3e504e5f32eedaca2e0d19.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/f9a8ee0ed8fb43bcac93be40e6310236cf5cc40f.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/d5add3585e7e7366d68086b363940ba163110ff8.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/de4c33c0617584050cfb65f6d7182201b02db8d9.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/4ac7b01fe5648035123fdeddd6099f5ed2e4029b.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/ae8ba19fa2c075c38e0bc9d94402a8d50e949cd1.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/c6986f38078e67543268f254fc138a85ba9a8e31.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/7802813e39cf0386676b89e9edad3294f0de76bf.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/85872e76019daaf39cc5129f652a251189a33b0a.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/a659c6d5a178f8c9b58d7db6f1b2e2bfbc315ca1.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/0bd78e75baef5e0d87a4b441d72b075a8450744f.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/c0277e9fce5165c4f66f5322558f060dee476f85.jpg",
"https://i0.hdslb.com/bfs/live/user_cover/2cea8dd9b48eb5b266e9378a85582ab32f89f690.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/6bfd3cfbc1c831fbb48f9c9aca3ebc7a7391f85d.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/50b04e8daaff36224961725254cb6cb29284a4f5.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/d1d5d26ce375d8609cf398efe7ab615921e11530.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/34f10258d9c686d4d0852157ed68d42c0d420562.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/d2fb89fc68eb2cf2174873680046077e78e257df.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/a833f05f4d5b3465de5b209a2dd7c53233a08944.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/3851b92af1e2c3abb4c744cb8a797cffedd10508.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/3124328c1ed1b968de5e084f31cb279bdd5fb3de.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/26007a92f27b7d22e78a61839c8a2e9627878d46.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/842dd089262b50e616ac5ab45f9bdde76c3ccadb.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/028c385c25091b4951f939b48393ef508b421906.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/32ba3821bef795de0540bd2e1d487cf9e99b9fea.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/6951933b085c18bae806622b39db2a30e76c6ca5.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/db7143701ba61bb16f86d4c1f4c36ab220dd961e.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/ca87fdd62689329d8758037cd7071747b5bc5274.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/f9aed6caa1629512b5120022bbb7377738129b4a.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/47376239ac3b6319ab7eb6ed4598b8e37f7ee8a4.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/1ff71adb01cd5b669a90952e3a029ace15af7a22.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/4c42206ccafde9ab1a8eb8ce8941fa5f50ea2631.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/979d07618442c6d5a05dcf2737212e1913770034.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/f1057274175aabe41d6f1cb2be3e4c7ed35954e4.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/0efa1a2ca1b6f501eec8185fd27c35938712e44c.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/fca49f3cf30cdbc13b83b0014f4d760ccb27be5c.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/36a3e48cacf0039d0084d88ca2ad05a89a7840de.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/cc35bd0d1af64d95b525777cb51df64286c122d6.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/c2ded5b0d157bb3b426fd6f8904c9e4dedfddbaf.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/6467b1836c5c0eeacc92dcd41a17789cb629123b.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/980e02e41b3f8c60cdd88bb91b808b6def20d52e.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/051c5cf0186580f42863ae9733ac32905cd794ad.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/5de18f5550b91d753dda668cbcc08cdafabf665b.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/b2246778293724541feb4c003685146c47709342.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/198e25385fec7d57c9fc023a8d986a94df8b6676.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/80f1db17f607790a779f1e0b4d6ddc96513aae01.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/730d9e36caf3d802538af8873b4f1a11eb2b97d7.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/3af5771bf1d27a20c4ca88c7b222f913309f3a0a.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/346ccc08b3245133a60f221f02ad814afd80b58c.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/22b6dc9ff00d90f4a5283312972eeb4f484ec485.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/7c99b9b6c658fca3f485dcfd5715c4152e812b39.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/b9936ceea9a13d8094e3f6fd0d0e27c7a18ebc25.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/2a712579667a7ef3f286404461ac1e9c1b986cb1.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/f65bfe34e6fd2e2b1fe6e43f6f5d2560db8722e1.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/91d5a2ebc842e6a66be0a4799d9bf4254e3daf99.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/95d264b69e77a12bbad8578b36b5c94f96212366.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/8feaea6351175790156ae1da564391af2e545799.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/4b2d08231ec332836101eca18fe1b1577ed34daf.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/d519338ba35e40d9d5d47f4e58afc2294d23c420.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/e96031ea84ab5293c6a2647570325489f7fc6ef4.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/61d6721d4d53186235658493055f7c79084a0493.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/84e8b9b8d2c88a99ae248f910b4e4e8ae2c01e6f.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/88071eae5ac6a3bbf7f2724f8db319d303b1963e.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/cda037a56c3c40a459122177a3165c7074e37a76.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/e97f64bc4ab5894ac2655ee0a38b9b0f647bb1a5.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/eb0695ab3e1490af28c3e3213a019e2362f4759c.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/fd7e0892a82dea363d07f32310f75a6caa0a8ae7.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/1983e2756e410056b4f0a1d61fbbf5a66407a343.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/261c9571daf9e2d8bc27837a3c31ec95824e1662.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/e9077d01fa13f7d11709b16fe11a9018353bcbaa.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/98a97fd808c0d237ad8020993f3c50568fba7026.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/ef7ebfa02a87537863c2448fb1a1466c0c3f592d.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/4cfec6d6c0c74a8ed03f937833f5579c60ece934.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/0e017ac765ddf2122186153151dac9f98043a830.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/caea53c2261b1c06106485facc6d6706ed21cbc5.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/89bcebd06716e4ac1300858baba0e2ea4c2187ad.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/77b01d884cba877f65e17c2c74f3808a9b18431b.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/fd1da909b9e9c5907950e058c4294da89c658c8a.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/d6e60c8ca273e89d55221eeab466607f878009b0.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/265943161ea1367b667d3d24642ecc9e274003ab.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/010b3ea012aa702c98251b23c23af0ab0e123fda.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/9ddfb1084a52796140db15684e2a1367b1fc78b6.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/7bd3eeee31c94c0894b78183e48dc0b7044a3de0.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/4b6d95525a41c5775e80b366303948016abe7770.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/f77ee877f5fe893153c585eb5358ab73faff4291.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/56e51c7af7d56dc26891fd48e2f30dc76b29b230.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/8230ef0460f17a2f3a851d2eee8d68dd7863f95e.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/1eb074d798a6b6dc14099e0fd5892ded71874812.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/f342d74ef7f4367ecb1faa40316f52396d61e51f.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/214c5a9a9fbcf8c3b5116979aed2b1e643744d8a.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/9148e85d982c436141e23e819450551a0cac5215.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/f6611d822e10157963c142cfb3aaaccd0c6151ea.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/73ece587f6ee1db8a23b6fb816ee221b1371f461.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/7a1aedd710c8cded1db830d67cbdac80956d16ce.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/67fb9a1f53ad2e002e9dcc474251875680711527.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/08e24356f33e95b36157555a36e2408b6b319eba.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/88defd2062c490d2641157a850b25e9b21cb99a5.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/890245bf19c2d97655a003e0a8df9add618805b7.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/d30aadc001996b79ae36fb9a6ca02b560c0e379f.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/3d3bce4272dc718b5c86e99df1640d08c5551bcc.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/4ec7ed3816c88afed2f4411ccdea05ab1ce7040b.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/19da167a250b6d8086329bcdae8467d101c3905c.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/84566d8e7c1825f7bc9456ec84b8155aad2380ce.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/71c3b5a3b665d3ccabad86ba67d31f104e67e80d.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/a2cf24000c5d80ae9c8ee89cfc3f5ce45765a8fc.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/4dce44eeeeabcede967d621740701326352bc41b.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/d72cc838e3038523a64852177ef9f3afa16e4a4b.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/9c72afe37c89e92e7220735c9e1e50d30a650e62.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/8a9e7ac4bdb723fa6a59f30db85c0de41202dc0c.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/783d2cd551ada7f6804ecfe0772365ea1133ad12.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/e507abba3a0669f25cfd95e44f39b65bf35ed3a5.jpg",
"https://i0.hdslb.com/bfs/live/new_room_cover/f0ef007ab37c28419eac6cd478b28a58e83e1bab.jpg"
]
}
}
})
app.use(ViewUIPlus);
app.mount("#app");
</script>
</body>
</html>