静态html vue3 element-plus 示例页面

代码：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>example</title>

        <!-- 复制于文件：https://unpkg.com/vue@3.4.31/dist/vue.global.js -->
        <script src="/vue3/vue.global.prod.js"></script>

        <!-- 复制于文件：https://unpkg.com/element-plus@2.7.6/dist/index.css -->
        <link href="/element-plus_2.7.6/index.css">

        <!-- 复制于文件：https://unpkg.com/element-plus@2.7.6/dist/index.full.js -->
        <script src="/element-plus_2.7.6/index.js"></script>

        <!-- 复制于文件：https://unpkg.com/@element-plus/icons-vue@2.3.1/dist/index.iife.min.js -->
        <script src="/element-plus_2.7.6/icon.js"></script>

        <style>
            /* 防止element某些组件在获得焦点时显示粗大黑边框 */
            .el-tooltip__trigger:focus {
                outline: none;
            }
        </style>
    </head>
    <body>
        <h3>这是一个vu3、element-plus的例子页面</h3>
        <hr>
        <div id="app">
            <el-button type="primary" @click="sayHello">say hello</el-button>
            <h2>{{ text }}</h2>

            <div>
                <el-dropdown>
                    <span class="el-dropdown-link">
                      Dropdown List<el-icon class="el-icon--right"><arrow-down /></el-icon>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item icon="Plus">Action 1</el-dropdown-item>
                            <el-dropdown-item icon="CirclePlusFilled">
                                Action 2
                            </el-dropdown-item>
                            <el-dropdown-item icon="CirclePlus">Action 3</el-dropdown-item>
                            <el-dropdown-item icon="Check">Action 4</el-dropdown-item>
                            <el-dropdown-item icon="CircleCheck">Action 5</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </div>
        <script>
            const { createApp, ref, onMounted } = Vue
            const app = createApp({
                setup() {
                    const text = ref('')
                    const sayHello = () => {
                        text.value = 'Hello world!'
                    }
                    return { sayHello, text }
                }
            })
            app.use(ElementPlus)
            for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
                app.component(key, component)
            }
            app.mount('#app')
        </script>
    </body>
</html>

 

posted @ 2024-07-15 10:36  jsper  阅读(63)  评论(0)  编辑  收藏  举报