HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
<link rel="shortcut icon" href="#" />
<!-- 导入样式 -->
<!-- <link rel="stylesheet" href="./cdn/dist/index.css" /> -->
<link rel="stylesheet" href="./cdn/theme-chalk/index.css" />
</head>
<body>
<div id="app">
<div>{{message}}</div>
<div>
<el-button type="primary">Primary</el-button>
</div>
<div>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
</el-table>
</div>
<div>
<el-pagination v-model:currentPage="currentPage1" :page-size="100" layout="total, prev, pager, next"
:total="1000" @size-change="handleSizeChange" @current-change="handleCurrentChange">
</el-pagination>
</div>
<div>
<el-steps :active="active" finish-status="success">
<el-step title="Step 1"></el-step>
<el-step title="Step 2"></el-step>
<el-step title="Step 3"></el-step>
</el-steps>
<el-button style="margin-top: 12px" @click="next">Next step</el-button>
</div>
<div>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="User" name="first">User</el-tab-pane>
<el-tab-pane label="Config" name="second">Config</el-tab-pane>
<el-tab-pane label="Role" name="third">Role</el-tab-pane>
<el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
</el-tabs>
</div>
<div>
<el-row class="tac">
<el-col :span="4">
<h5 class="mb-2">Default colors</h5>
<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
<el-sub-menu index="1">
<template #title>
<el-icon>
<location />
</el-icon>
<span>Navigator One</span>
</template>
<el-menu-item-group title="Group One">
<el-menu-item index="1-1">item one</el-menu-item>
<el-menu-item index="1-2">item one</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="Group Two">
<el-menu-item index="1-3">item three</el-menu-item>
</el-menu-item-group>
<el-sub-menu index="1-4">
<template #title>item four</template>
<el-menu-item index="1-4-1">item one</el-menu-item>
</el-sub-menu>
</el-sub-menu>
<el-menu-item index="2">
<el-icon>
<icon-menu />
</el-icon>
<span>Navigator Two</span>
</el-menu-item>
<el-menu-item index="3" disabled>
<el-icon>
<document />
</el-icon>
<span>Navigator Three</span>
</el-menu-item>
<el-menu-item index="4">
<el-icon>
<setting />
</el-icon>
<span>Navigator Four</span>
</el-menu-item>
</el-menu>
</el-col>
</el-row>
</div>
<div>
<el-empty description="description"></el-empty>
</div>
<div id="myDiv"></div>
</div>
<!-- 导入 Vue 3 -->
<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/3.2.6/vue.global.prod.min.js"></script>
<!-- 导入组件库 -->
<script src="./cdn/dist/index.full.min.js"></script>
<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
<!-- 自定义js -->
<script src="./test27.js" type="module"></script>
</body>
</html>
JS
import zhCn from './cdn/es/locale/lang/zh-cn.mjs';
const App = {
data() {
return {
message: "Hello Element Plus",
tableData: [{
date: '2022-01-01',
name: '张小三',
address: '吉林省长春市二道区 1 号'
}, {
date: '2022-01-02',
name: '李小四',
address: '吉林省长春市二道区 2 号'
}, {
date: '2022-01-03',
name: '王小五',
address: '吉林省长春市二道区 3 号'
}, {
date: '2022-01-04',
name: '赵小六',
address: '吉林省长春市二道区 4 号'
}],
active: 0,
activeName: 'first'
};
},
methods: {
next() {
if (this.active++ > 2) this.active = 0
},
handleClick(tab, event) {
console.log(tab.props);
console.log(event);
console.log($("#myDiv"));
}
}
};
const app = Vue.createApp(App);
app.use(ElementPlus, {
locale: zhCn
});
app.mount("#app");