代码:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>example</title> <!-- 复制于文件:https://unpkg.com/[email protected]/dist/vue.global.js --> <script src="/vue3/vue.global.prod.js"></script> <!-- 复制于文件:https://unpkg.com/[email protected]/dist/index.css --> <link href="/element-plus_2.7.6/index.css"> <!-- 复制于文件:https://unpkg.com/[email protected]/dist/index.full.js --> <script src="/element-plus_2.7.6/index.js"></script> <!-- 复制于文件:https://unpkg.com/@element-plus/[email protected]/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>
标签:const,示例,text,app,component,element,html,Action From: https://www.cnblogs.com/jsper/p/18302677