zoukankan      html  css  js  c++  java
  • Element Plus CDN引入方式

    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=" 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");
  • 相关阅读:
    第十四周 Leetcode 315. Count of Smaller Numbers After Self(HARD) 主席树
    POJ1050 To the Max 最大子矩阵
    POJ1259 The Picnic 最大空凸包问题 DP
    POJ 3734 Blocks 矩阵递推
    POJ2686 Traveling by Stagecoach 状态压缩DP
    iOS上架ipa上传问题那些事
    深入浅出iOS事件机制
    iOS如何跳到系统设置里的各种设置界面
    坑爹的私有API
    业务层网络请求封装
  • 原文地址:https://www.cnblogs.com/kgdxpr/p/15789089.html
Copyright © 2011-2022 走看看