组件封装之button

组件封装之button

这篇文章主要是用来简单分析一下element中的button组件是如何封装的，以及我们如何封装一个属于自己的button组件！

首先，我们来看看button.vue文件中是怎么定义的？

效果：

​ type传一个值，显示不同的背景色，显然，我们是通过type传过来的值，来设置不同的类名。所以结构，初步应该是如下这样的

<template>
  <button :class="tclass"><slot></slot></button>
</template>
<script>
export default {
  name: "tButton",
};
</script>
<script setup>
import { computed, defineProps } from "vue";
const props = defineProps({
  type: {
    type: String,
    default: "default",
  },
});
const tclass = computed(() => {
  return ["t-button", `t-button-${props.type}`];
});
</script>
<style lang="scss" scoped>
button {
  outline: none;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 12px 24px;
  border-radius: 4px;
}

.t-button-primary {
  background-color: #409eff;
}
.t-button-success {
  background-color: #67c23a;
}
.t-button-warning {
  background-color: #e6a23c;
}
.t-button-danger {
  background-color: #f56c6c;
}
</style>

效果图如下：

接下来看看，如何是按钮为禁用状态：

​ 首先我们要知道的是，禁用状态的css为disabled。传过来disabled属性，实际上是传过来一个boolean值。那么我们还是像以前一样接受：

<template>
  <button :class="tclass" :disabled="disabled"><slot></slot></button>
</template>
<script>
export default {
  name: "tButton",
};
</script>
<script setup>
import { computed, defineProps } from "vue";
const props = defineProps({
  type: {
    type: String,
    default: "default",
  },
  disabled: {
    type: Boolean,
    default: "false",
  },
});
const tclass = computed(() => {
  return ["t-button", `t-button-${props.type}`];
});
</script>
<style lang="scss" scoped>
button {
  outline: none;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 12px 24px;
  border-radius: 4px;
  font-size: 18px;
}

.t-button-primary {
  background-color: #409eff;
}
.t-button-success {
  background-color: #67c23a;
}
.t-button-warning {
  background-color: #e6a23c;
}
.t-button-danger {
  background-color: #f56c6c;
  cursor: not-allowed;
}
</style>

有一个重要的属性：cursor:not-allowed。如果我们不添加这个属性，虽然按钮是被禁用了，但依然还可以在上面设置点击事件，这样的话，按钮禁用就没啥意义了!

其它属性，思路也是类似这样！！！！