Vue中的vxe-table教程14-图标、按钮、单选框组、复选框组、开关按钮的使用

知识点：需要下载图标库，下载地址：http://www.fontawesome.com.cn/下载之后将css文件：font-awesome.css，导入即可使用图标效果图：1. index.html中的代码<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>

专职

8524人浏览 · 2021-01-13 13:21:39

专职 · 2021-01-13 13:21:39 发布

知识点：

需要下载图标库，下载地址：http://www.fontawesome.com.cn/

下载之后第一步：将font-awesome.css文件放到vue项目的static目录下新建的css文件夹内，html页面中导入该css文件

第二步：将fonts文件夹放到vue项目目录下的static目录下即可

效果图：

1. index.html中的代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdn.jsdelivr.net/npm/xe-utils"></script>
    <script src="https://cdn.jsdelivr.net/npm/vxe-table"></script>
    <!--    使用图表需引入图表对应的css文件即可使用-->
    <!--    下载地址：http://www.fontawesome.com.cn/-->
    <link rel="stylesheet" href="./css/font-awesome.css">
    <!-- 使用 cdn 引用方式需要注意是否锁定版本，默认指向最新版本 -->
</head>

<body>
<div id="app">
    <template>
        <div style="padding: 0 20px 0 50px">
            <h3>1. 图标</h3>
            <div>
                <i class="vxe-icon--upload"></i>&nbsp;&nbsp;&nbsp;
                <i class="vxe-icon--download"></i>&nbsp;&nbsp;&nbsp;
                <i class="vxe-icon--print"></i>&nbsp;&nbsp;&nbsp;
                <i class="vxe-icon--search"></i>
            </div>
            <h3>2. 按钮</h3>
            <div>
                <p>
                    <vxe-button transfer>
                        <template v-slot>技术栈</template>
                        <template v-slot:dropdowns>
                            <vxe-button status="success" type="text">python</vxe-button>
                            <vxe-button type="text">mysql</vxe-button>
                            <vxe-button type="text">django</vxe-button>
                        </template>
                    </vxe-button>
                    <vxe-button status="danger" transfer placement="top">
                        <template v-slot>后端框架</template>
                        <template v-slot:dropdowns>
                            <vxe-button type="text">django</vxe-button>
                            <vxe-button type="text" status="info">flask</vxe-button>
                            <vxe-button type="text">tornado</vxe-button>
                        </template>
                    </vxe-button>
                    <vxe-button icon="fa fa-plus" circle></vxe-button>
                    <vxe-button loading circle></vxe-button>
                    <vxe-button status="danger" icon="fa fa-refresh" circle></vxe-button>
                    <vxe-button status="primary" icon="fa fa-save" circle></vxe-button>
                    <vxe-button status="success" icon="fa fa-check" circle></vxe-button>
                    <vxe-button status="info" icon="fa fa-info" circle></vxe-button>
                    <vxe-button status="warning" icon="fa fa-warning" circle></vxe-button>
                    <vxe-button status="danger" icon="fa fa-trash-o" circle></vxe-button>
                </p>
                <p>
                    <vxe-button icon="fa fa-plus">默认图标颜色</vxe-button>
                    <vxe-button status="primary" icon="fa fa-save">主要图标颜色</vxe-button>
                    <vxe-button status="success" icon="fa fa-check">成功图标颜色</vxe-button>
                    <vxe-button status="info" icon="fa fa-info">信息图标颜色</vxe-button>
                    <vxe-button status="warning" icon="fa fa-warning">警告图标颜色</vxe-button>
                    <vxe-button status="danger" icon="fa fa-trash-o">危险图标颜色</vxe-button>
                </p>
            </div>
            <h3>3. 单选框组</h3>
            <div>
                <vxe-radio-group>
                    <vxe-radio label="1" content="HTML" checked="checked"></vxe-radio>
                    <vxe-radio label="2" content="CSS"></vxe-radio>
                    <vxe-radio label="3" content="Javascript"></vxe-radio>
                    <vxe-radio label="4" content="SASS" disabled></vxe-radio>
                    <vxe-radio label="5" content="LESS"></vxe-radio>
                </vxe-radio-group>
            </div>
            <h3>4. 复选框组</h3>
            <div>
                <vxe-checkbox-group>
                    <vxe-checkbox label="1" content="HTML"></vxe-checkbox>
                    <vxe-checkbox label="2" content="CSS"></vxe-checkbox>
                    <vxe-checkbox label="3" content="Javascript" disabled></vxe-checkbox>
                    <vxe-checkbox label="4" content="SASS"></vxe-checkbox>
                    <vxe-checkbox label="5" content="LESS"></vxe-checkbox>
                </vxe-checkbox-group>
            </div>
            <h3>5. 开关按钮</h3>
            <div>
                <vxe-switch v-model="value5" open-label="开" close-label="关"></vxe-switch>
                <vxe-switch v-model="value6" open-label="是" close-label="否"></vxe-switch>

                <vxe-switch v-model="value6" open-icon="fa fa-check" close-icon="fa fa-close"></vxe-switch>
                <vxe-switch v-model="value5" open-label="开" close-label="关"
                            open-icon="fa fa-bell" close-icon="fa fa-bell-slash"></vxe-switch>
                <vxe-switch v-model="value5" open-label="开" close-label="关"
                            class="my-switch1"></vxe-switch>
                <vxe-switch v-model="value6" open-label="开" close-label="关"
                            class="my-switch2"></vxe-switch>
                <vxe-switch v-model="value5" open-label="ON" close-label="OFF" class="my-switch3"></vxe-switch>
            </div>
        </div>
    </template>
</div>
</body>

<script src="./js/main.js"></script>
<link rel="stylesheet" href="./css/main.css">
</html>

2. main.css代码

@import url("https://cdn.jsdelivr.net/npm/vxe-table/lib/style.css");

.vxe-textarea--inner {
    line-height: inherit;
}

3. main.js代码

var Main = {
    data() {
        return {
            value5: true,
            value6: false,
            tableData: [],
        }
    },
};

var app = new Vue(Main).$mount('#app');

华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐