You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

79 lines
2.1 KiB

4 years ago
<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>