【前端笔记】HTML 纯文件整理使用 Vue3 + element-plus + 字节cdn

匠心笔记

已于 2024-06-20 17:09:36 修改

阅读量882

点赞数 4

文章标签：前端笔记 html

于 2023-07-11 17:11:52 首次发布

本文链接：https://blog.csdn.net/lelertop/article/details/131664711

版权

HTML 纯文件整理使用 Vue3 + element-plus + 字节cdn

收藏下,方便用的到时,来此复制下.

本来打算尝试做成组件版的,但是尝试了几种方案都没成功,有知道如何做的,有空帮忙评论区里告知下,谢谢.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 纯文件 整理 使用 Vue3 + element-plus + 字节cdn </title>
    <link href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/element-plus/2.0.4/index.min.css" type="text/css"
        rel="stylesheet" />
    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/3.2.31/vue.global.min.js"
        type="application/javascript"></script>

    <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/element-plus/2.0.4/index.full.min.js"
        type="application/javascript"></script>
    <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/element-plus/2.0.4/locale/zh-cn.min.js"
        type="application/javascript"></script>
    <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/axios/0.26.0/axios.min.js"
        type="application/javascript"></script>
    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/qs/6.10.3/qs.min.js"
        type="application/javascript"></script>
    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/echarts/5.3.0/echarts.min.js"
        type="application/javascript"></script>
</head>
<style>
    .flex-grow {
        flex-grow: 1;
    }
</style>

<body>
    <div id="app">
        <div>
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :ellipsis="false"
                @select="handleSelect">
                <el-menu-item index="0">清风徐来</el-menu-item>
                <div class="flex-grow"></div>
                <el-menu-item index="1">Processing Center</el-menu-item>
                <el-sub-menu index="2">
                    <template #title>Workspace</template>
                    <el-menu-item index="2-1">item one</el-menu-item>
                    <el-menu-item index="2-2">item two</el-menu-item>
                    <el-menu-item index="2-3">item three</el-menu-item>
                    <el-sub-menu index="2-4">
                        <template #title>item four</template>
                        <el-menu-item index="2-4-1">item one</el-menu-item>
                        <el-menu-item index="2-4-2">item two</el-menu-item>
                        <el-menu-item index="2-4-3">item three</el-menu-item>
                    </el-sub-menu>
                </el-sub-menu>
            </el-menu>


            <el-button @click="show">我是 show</el-button>
            <el-button @click="open2">我是 open2</el-button>

            <el-date-picker v-model="value1" type="datetime" placeholder="请选择日期"
                format="YYYY/MM/DD HH:mm:ss"></el-date-picker>
        </div>

    </div>
    <script>
        const vue = Vue
        const createApp = Vue.createApp
        const ref = Vue.ref
        const el = ElementPlus
        const ElMessage = el.ElMessage

        const APP = {
            setup() {
                const open2 = () => {
                    ElMessage({
                        message: 'Congrats, this is a success message.',
                        type: 'success',
                    })
                }
                const show = () => {
                    ElMessage({
                        message: 'Im show.',
                        type: 'success',
                    })
                }
                const value1 = ref('')


                const activeIndex = ref('1')
                const handleSelect = (key, keyPath) => {
                    console.log(key, keyPath)
                }

                return {
                    show,
                    open2,

                    activeIndex,
                    handleSelect,

                    value1
                }
            }
        }

        const app = createApp(APP)
        app.use(ElementPlus, {
            locale: ElementPlusLocaleZhCn,
        })
        app.mount('#app')
    </script>
</body>


</script>
</body>

</html>

特别注意

如果出现组件样式无法正常显示, 比如 el-radio-group 的选项的样式,
组件代码:

 <el-radio-group v-model="radio3" size="small">
      <el-radio-button label="test1" value="test1" />
      <el-radio-button label="test2" value="test2" disabled />
</el-radio-group>

改为标准标签试下:

 <el-radio-group v-model="radio3" size="small">
      <el-radio-button label="test1" value="test1"></el-radio-button>
      <el-radio-button label="test2" value="test2" disabled /></el-radio-button>
</el-radio-group>