按照官方文档的代码运行后大的图片不缩放，el-skeleton #16487

startjava · 2024-04-12T06:08:57Z

startjava
Apr 12, 2024

https://element-plus.org/zh-CN/component/skeleton.html#%E6%B8%B2%E6%9F%93%E5%A4%9A%E6%9D%A1%E6%95%B0%E6%8D%AE

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="module" src="6_渲染多条数据.js"></script>
    </head>
    <body>
        <div id="mydiv1">
            <el-space direction="vertical" alignment="flex-start">
                <el-button @click="setLoading">Click me to reload</el-button>
                <el-skeleton style="width: 240px" :loading="loading" animated :count="4">
                    <template #template>
                        <el-skeleton-item variant="image" style="width: 400px; height: 267px"></el-skeleton-item>
                        <div style="padding: 14px">
                            <el-skeleton-item variant="h3" style="width: 50%"></el-skeleton-item>
                            <div
                                    style="
              display: flex;
              align-items: center;
              justify-items: space-between;
              margin-top: 16px;
              height: 16px;
            "
                            >
                                <el-skeleton-item variant="text" style="margin-right: 16px"></el-skeleton-item>
                                <el-skeleton-item variant="text" style="width: 30%"></el-skeleton-item>
                            </div>
                        </div>
                    </template>
                    <template #default>
                        <el-card
                                v-for="item in lists"
                                :key="item.name"
                                :body-style="{ padding: '0px', marginBottom: '1px' }"
                        >
                            <img :src="item.imgUrl" class="image multi-content"/>
                            <div style="padding: 14px">
                                <span>{{ item.name }}</span>
                                <div class="bottom card-header">
                                    <div class="time">{{ currentDate }}</div>
                                    <el-button text class="button">Operation button</el-button>
                                </div>
                            </div>
                        </el-card>
                    </template>
                </el-skeleton>
            </el-space>
        </div>
    </body>
</html>

import {createApp, reactive, ref, onMounted} from 'vue'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp({
    setup() {

        const loading = ref(true)
        const lists = ref([])
        const currentDate = new Date().toDateString()

        const setLoading = () => {
            loading.value = true
            setTimeout(() => {
                loading.value = false
            }, 2000)
        }

        onMounted(() => {
            loading.value = false
            lists.value = [
                {
                    imgUrl:
                        'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
                    name: 'Deer',
                },
                {
                    imgUrl:
                        'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
                    name: 'Horse',
                },
                {
                    imgUrl:
                        'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
                    name: 'Mountain Lion',
                },
                {
                    imgUrl:
                        'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
                    name: 'Mountain Lion',
                }
            ]
        })

        return {loading, lists, currentDate, setLoading}
    }
});
app.use(ElementPlus)
app.mount("#mydiv1");

代码完全是照搬的，几乎一模一样。

官方运行效果：

我的运行效果：

右边2个狮子没有缩放。

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

按照官方文档的代码运行后大的图片不缩放，el-skeleton #16487

{{title}}

Replies: 0 comments

Select a reply

按照官方文档的代码运行后大的图片不缩放，el-skeleton #16487

startjava Apr 12, 2024

Replies: 0 comments

startjava
Apr 12, 2024