Vue 带你封装一个 button

作为一个后端程序员偶尔搞搞前端,对我自己来说是打开新的领域,提高自己的竞争力,说实话搞前端和搞后端的思维方式是完全不同的,注重点也是非常不同的,话说今天宝宝我农历生日哈哈哈哈,开心就写几篇放纵一下。

使用 Vue-cli 创建一个 HelloWorld 项目即可作为起始脚手架。

创建一个 ShowButton.vue 的组件

<template>
  <div>
    <h1>封装一个 button</h1>
    <div v-if="value === 1">
      <button @click="buttonClick()">button1</button>
    </div>
    <div v-else-if="value === 2">
      <button @click="buttonClick()">button2</button>
    </div>
    <div v-else>
      <button @click="buttonClick()">button3</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "ShowButton",
  data() {
    return {
      value: 2
    };
  },
  methods: {
    buttonClick() {
      console.log("value" + this.value);
    }
  }
};
</script>

<style>
</style>

这里用了vue 里的 v-if 表达式做逻辑判断,但是如果有 10 个按钮,那么就需要写 10 个 判断,而且如果该组件还将被别的页面引用到,那就得还得复制一遍。代码一点也不优雅呀。

我们借助于 VUE 给我们提供的 render 函数解决这个问题。
新建一个 Button.vue

<script>
export default {
    props:{
        type:{
            type:String,
            default:'normal'
        },
        text:{
            type:String,
            default:'button'
        }
    },
    render(h){
        /**
         * h 是 createElement 的另一个名称, 接受 2 个参数,具体可看 vue 文档
         * 1 - 元素
         * 2 - 选项
         */
        return h('button',{
            class:{
                btn: true,
                'btn-success': this.type === 'success',
                'btn-danger': this.type === 'danger',
                'btn-warning': this.type === 'warning',
                'btn-normal': this.type === 'normal'
            },
            domProps:{
                innerText: this.text || '默认'
            },
            on:{
                click: this.handleClick
            }
        })
    },
    methods:{
        handleClick(){
            this.$emit('myClick')
        }
    }
}
</script>

<style scoped>
.btn{
    width: 100px;
    height:40px;
    line-height:40px;
    border:0px;
    border-radius:5px;
    color:#ffff;
}
.btn-success{
    background:#2ecc71;
}
.btn-danger{
    background:#e74c3c;
}
.btn-warning{
    background:#f39c12;
}
.btn-normal{
    background:#bdc3c7;
}

</style>

ShowButton.vue 内使用

<template>
  <div>
    <h1>封装一个 button</h1>
    <!-- <div v-if="value === 1">
      <button @click="buttonClick()">button1</button>
    </div>
    <div v-else-if="value === 2">
      <button @click="buttonClick()">button2</button>
    </div>
    <div v-else>
      <button @click="buttonClick()">button3</button>
    </div> -->
     <Button type='success' text='button1' @myClick="buttonClick()"></Button>
  </div>
</template>

<script>
import Button from "./Button.vue";
export default {
  name: "ShowButton",
  data() {
    return {
      value: 2
    };
  },
  components: {
    Button
  },
  methods: {
    buttonClick() {
      console.log("value" + this.value);
    }
  }
};
</script>

<style>
</style>

在这里插入图片描述

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值