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

 

posted @ 2022-01-11 16:59  缤纷世界  阅读(1599)  评论(0)  编辑  收藏  举报