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");