欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-15 19:11:29
知识点:需要下载图标库,下载地址:http://www.fontawesome.com.cn/下载之后将css文件:font-awesome.css,导入即可使用图标效果图:1. index.html中的代码 Title

知识点:

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

下载之后将css文件:font-awesome.css,导入即可使用图标

效果图:

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

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

 

本文地址:https://blog.csdn.net/weixin_42289273/article/details/112559429

相关标签: vxe-table