NN2022100801/addons/web/node_modules/vue-awesome-mui/app/components/examples/buttons.vue

<template>
	<div>
		<header class="mui-bar mui-bar-nav">
			<router-link to="/index" class="mui-icon mui-icon-left-nav mui-pull-left"></router-link>
			<h1 class="mui-title">普通按钮</h1>
		</header>
		<div class="mui-content">
			<div class="mui-content-padded">
				<h5>有底色按钮：</h5>
				<button type="button" class="mui-btn">
					默认
				</button>
				<div class="mui-btn mui-btn-primary">
					蓝色
				</div>
				<span class="mui-btn mui-btn-success">
					绿色
				</span>
				<button type="button" class="mui-btn mui-btn-warning">
					黄色
				</button>
				<button type="button" class="mui-btn mui-btn-danger">
					红色
				</button>
				<button type="button" class="mui-btn mui-btn-royal">
					紫色
				</button>

				<h5 style="margin-top: 10px;">无底色按钮（使用父元素的背景色）：</h5>
				<button type="button" class="mui-btn mui-btn-outlined">
					默认
				</button>
				<button type="button" class="mui-btn mui-btn-primary mui-btn-outlined">
					操作
				</button>
				<button type="button" class="mui-btn mui-btn-success mui-btn-outlined">
					成功
				</button>
				<button type="button" class="mui-btn mui-btn-warning mui-btn-outlined">
					警告
				</button>
				<button type="button" class="mui-btn mui-btn-danger mui-btn-outlined">
					危险
				</button>
				<button type="button" class="mui-btn mui-btn-royal mui-btn-outlined">
					高贵
				</button>
				<h5 style="margin-top: 15px;">链接按钮：</h5>
				<button type="button" class="mui-btn mui-btn-link">
					添加
				</button>
				<h5 style="margin-top: 10px;">默认input标签样式：</h5>
				<input type="button" value="type=button" />
				<input type="reset" value="type=reset" />
				<input type="submit" value="type=submit" />
				<h5 style="margin-top: 10px;">默认button标签样式：</h5>
				<button type="button">按钮</button>

			</div>
		</div>
	</div>
</template>
<script>
	export default {
		mounted() {
			mui.init({
				swipeBack: true //启用右滑关闭功能
			});
		}
	}
</script>
<style scoped>
	input,
	button,
	.mui-btn {
		margin-top: 10px;
		margin-left: 10px;
	}
</style>