button按钮组件常用样式代码+效果展示
detail.vue
<template>
<view>
<!-- <view>
<text>无敌季卡拉诺在学习</text>
</view>
<view>
<text selectable>无敌季卡拉诺在学习</text>//selectable长按可选
</view>
<view>
<text selectable space="ensp">无敌季 卡拉诺在学习</text>//空格所占大小 space
</view> -->
<view class="box2" hover-class="box2-active">
<view class="box" hover-class="box-active" hover-stop-propagation :hover-stay-time="2000">我是无敌季卡拉诺</view><!-- //hover-class按下去的样式hover-stop-propagation停止冒泡,:可以"取数字" -->
</view>
<button>开始</button>
<button size="mini">开始</button>
<button type="primary" plain>开始</button><!-- //plain镂空 //disable禁用-->
<button disabled>开始</button>
<button loading>开始</button>
</view>
</template>
<script>
</script>
<style>
.box{
width: 100px;
height: 100px;
background: #4CD964;
}
.box-active{
background:#007AFF;
}
.box2{
width: 200px;
height: 200px;
background: #F0AD4E;
}
.box2-active{
width: 200px;
height: 200px;
background:#3F536E;
}
</style>
效果如下: