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,导入即可使用图标
效果图:
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>
<i class="vxe-icon--download"></i>
<i class="vxe-icon--print"></i>
<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
上一篇: 组件:组件、方法和指令导出