parent
d7407ea60a
commit
b712735c7c
@ -0,0 +1,77 @@
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||
<script src="https://unpkg.com/vue@3"></script>
|
||||
|
||||
<!-- import CSS -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
|
||||
<!-- import JavaScript -->
|
||||
<script src="https://unpkg.com/element-plus"></script>
|
||||
<title>Element Plus demo</title>
|
||||
<style>
|
||||
.icon-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, 115px);
|
||||
justify-content: space-evenly;
|
||||
max-height: 70vh;
|
||||
}
|
||||
|
||||
.icon-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 42px;
|
||||
padding: 20px 30px;
|
||||
cursor: pointer;
|
||||
transition: all .2s;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app">
|
||||
<div class="icon-list">
|
||||
<div v-for="item in iconsList" :key="item" class="icon-item" @click="adsfa(item)">
|
||||
<component :is="item" style="width: 20px;"></component>
|
||||
<span>{{item}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://unpkg.com/@element-plus/icons-vue"></script>
|
||||
<script>
|
||||
const App = {
|
||||
data() {
|
||||
return {
|
||||
message: "Hello Element Plus",
|
||||
|
||||
iconsList: []
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
||||
this.iconsList.push(key);
|
||||
// app.component(key, component)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
adsfa(item) {
|
||||
console.log(item);
|
||||
},
|
||||
|
||||
},
|
||||
};
|
||||
const app = Vue.createApp(App);
|
||||
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
||||
app.component(key, component)
|
||||
}
|
||||
app.use(ElementPlus);
|
||||
app.mount("#app");
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
@ -0,0 +1,38 @@
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||
<script src="https://unpkg.com/vue@3"></script>
|
||||
<!-- import CSS -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
|
||||
<!-- import JavaScript -->
|
||||
<script src="https://unpkg.com/element-plus"></script>
|
||||
<title>Element Plus demo</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app">
|
||||
<el-button @click="aaa">{{ message }}</el-button>
|
||||
</div>
|
||||
<script>
|
||||
const App = {
|
||||
data() {
|
||||
return {
|
||||
message: "Hello Element Plus",
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
aaa() {
|
||||
console.log("aaa");
|
||||
},
|
||||
|
||||
},
|
||||
};
|
||||
const app = Vue.createApp(App);
|
||||
app.use(ElementPlus);
|
||||
app.mount("#app");
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
Loading…
Reference in new issue