按钮样式
代码如下
#hq-list
<!--
* @Description:
* @Version: 1.0
* @Autor: in hengqi by mengze
* @Date: 2020-09-12 17:23:53
* @LastEditors: in hengqi by mengze
* @LastEditTime: 2020-09-12 17:27:31
-->
<template>
<div class="hq-list">
<h2>自定义组件列表</h2>
<ul>
<li v-for="(item, index) in dataList" :key="index">
<a @click.prevent="click(item)">{{ item }}</a>
</li>
</ul>
</div>
</template>
<script>
let context = require.context("../views", false, /\.vue$/);
const routerNameList = [];
context.keys().forEach(key => {
routerNameList.push(key.substr(5, key.length - 14));
});
export default {
name: "",
data() {
return {
dataList: routerNameList
};
},
methods: {
click(pathName) {
if (this.$route.name === pathName) {
return;
}
this.$router.push({
name: pathName
});
}
}
};
</script>
<style lang="less" scoped>
h2 {
text-align: center;
margin-bottom: 30px;
font-size: 24px;
}
li {
list-style: none;
}
a {
display: block;
height: 50px;
line-height: 50px;
border-bottom: 1px solid #eee;
cursor: pointer;
font-size: 18px;
color: rgba(0, 0, 0, 0.7);
padding-left: 30px;
}
a:hover {
color: rgba(0, 0, 0, 1);
background-color: #f5f5f5;
}
</style>
#hq-button
<!--
* @Description:
* @Version: 1.0
* @Autor: in hengqi by mengze
* @Date: 2020-09-12 15:43:40
* @LastEditors: in hengqi by mengze
* @LastEditTime: 2020-09-16 13:09:59
-->
<template>
<button
class="hq-base-button"
:class="data.class"
:style="data.style"
disabled="isDisabled"
@click.prevent="buttonDidClicked"
>
<i class="iconfont" v-if="data.icon"></i> {{ data.name }}
</button>
</template>
<script>
export default {
name: "",
props: {
data: {
type: Object
}
},
data() {
return {
isDisabled: false
};
},
mounted() {
if (this.data.class) {
let res = this.data.class.match(/\bdisabled\b/);
if (res) {
this.isDisabled = true;
}
}
},
methods: {
buttonDidClicked(...params) {
if (typeof this.data.method === "function") {
this.data.method(...params);
}
}
}
};
</script>
<style lang="less" scoped>
.hq-base-button {
outline: none;
user-select: none;
display: inline-block;
padding: 0px 20px;
height: 40px;
line-height: 40px;
text-align: center;
display: inline-block;
border: 1px solid #eee;
border-radius: 6px;
color: #333;
cursor: pointer;
position: relative;
font-size: 14px;
box-sizing: border-box;
&.round {
border-radius: 20px;
}
&.circle {
width: 40px;
height: 40px;
border-radius: 20px;
}
&:hover {
border: 1px solid #b3d8ff;
color: #409eff;
background-color: #ecf5ff;
}
}
.hq-base-button.primary {
border: none;
background-color: #409eff;
color: #fff;
&:hover {
border: none;
&:before {
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(255, 255, 255, 0.3);
}
}
}
.hq-base-button.success {
border: none;
color: #fff;
background-color: #85ce61;
&:hover {
border: none;
&:before {
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(255, 255, 255, 0.3);
}
}
}
.hq-base-button.info {
border: none;
color: #fff;
background-color: #a6a9ad;
&:hover {
border: none;
&:before {
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(255, 255, 255, 0.3);
}
}
}
.hq-base-button.warning {
border: none;
color: #fff;
background-color: #e6a23c;
&:hover {
border: none;
&:before {
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(255, 255, 255, 0.3);
}
}
}
.hq-base-button.danger {
border: none;
background-color: #f56c6c;
color: #fff;
&:hover {
border: none;
&:before {
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(255, 255, 255, 0.3);
}
}
}
.plain {
&:hover {
border: 1px solid #409eff;
color: #409eff;
background-color: #ecf5ff;
&:before {
display: none;
}
}
}
.plain.primary {
border: 1px solid #b3d8ff;
color: #409eff;
background-color: #ecf5ff;
&:hover {
border: 1px solid transparent;
background-color: #409eff;
color: #fff;
&:before {
display: none;
}
}
}
.plain.success {
border: 1px solid #c2e7b0;
color: #85ce61;
background-color: #f0f9eb;
&:hover {
border: 1px solid transparent;
background-color: #85ce61;
color: #fff;
&:before {
display: none;
}
}
}
.plain.info {
border: 1px solid #d3d4d6;
color: #a6a9ad;
background-color: #f4f4f5;
&:hover {
border: 1px solid transparent;
background-color: #a6a9ad;
color: #fff;
&:before {
display: none;
}
}
}
.plain.warning {
border: 1px solid #f5dab1;
color: #e6a23c;
background-color: #fdf6ec;
&:hover {
border: 1px solid transparent;
background-color: #e6a23c;
color: #fff;
&:before {
display: none;
}
}
}
.plain.danger {
border: 1px solid #fbc4c4;
color: #f56c6c;
background-color: #fef0f0;
&:hover {
border: 1px solid transparent;
background-color: #f56c6c;
color: #fff;
&:before {
display: none;
}
}
}
.big {
height: 44px;
line-height: 44px;
padding: 0 26px;
font-size: 16px;
&.round {
border-radius: 22px;
}
&.circle {
width: 44px;
height: 44px;
padding: 0;
border-radius: 22px;
}
}
.medium {
height: 40px;
line-height: 40px;
padding: 0 16px;
font-size: 14px;
&.round {
border-radius: 20px;
}
&.circle {
width: 40px;
height: 40px;
padding: 0;
border-radius: 20px;
}
}
.small {
height: 36px;
line-height: 36px;
padding: 0 10px;
font-size: 13px;
&.round {
border-radius: 42px;
}
&.circle {
width: 36px;
height: 36px;
padding: 0;
border-radius: 18px;
}
}
.mini {
height: 28px;
line-height: 28px;
padding: 0 8px;
font-size: 12px;
&.round {
border-radius: 14px;
}
&.circle {
width: 28px;
height: 28px;
padding: 0;
border-radius: 14px;
}
}
.disabled {
background-color: #f7f7f7 !important;
border: 1px solid #dddee1 !important;
color: #bbbec4 !important;
cursor: no-drop;
&:before {
content: "";
display: none !important;
}
}
</style>