dawpf / vue-components-button

vue-components-button组件

vue-components-button

项目运行

yarn add
yarn serve

说明

src / components / button / index.vue 中定义 Button 组件：

<template>
  <button class="container_button" @click="btnClick" :style="getStyle()">
    <slot></slot>
  </button>
</template>

<script>
export default {
  props: {
    buttonstyle: {
      type: String,
      default: ''
    }
  },
  methods: {
    btnClick() {
      // 触发外部引入的按钮点击事件
      this.$emit('click')
    },
    getStyle() {
      // 返回自定义的样式
      // return 'background-color:red'
      return this.buttonstyle
    }
  }
}
</script>

<style lang="less" scoped>
.container_button {
  text-rendering: auto;
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  text-indent: 0px;
  box-shadow: none;
  text-shadow: none;
  display: inline-block;
  text-align: center;
  align-items: flex-start;
  border: none;

  margin: 0em;
  font: 400 13.3333px Arial;
  padding: 1px 6px;
  border-width: 2px;
  border-radius: 10px;
  border-image: initial;
}
</style>

在 home.vue 页面中使用

<template>
  <div class="home">
    <img class="img" alt="Vue logo" src="../assets/logo.png" />
    <h1>这是h1</h1>
    <span style="margin-right:20px">这是span1</span>
    <Button @click="btnClcik" class="btnstyle">按钮</Button>
    <span style="border:1px solid #000;margin-left:20px">这是span2</span>
  </div>
</template>

<script>
import Button from '@c/button/index.vue'
export default {
  name: 'Home',
  components: { Button },
  methods: {
    btnClcik() {
      console.log('父组件里面点击了按钮方法')
    }
  }
}
</script>


<style lang="less" scoped>
.img {
  display: block;
  margin: 0 auto;
}
.btnstyle {
  width: 200px;
  height: 200px;
  // background-image: url('../assets/logo.png');
  border: 1px solid #000;
  font-size: 20px;
}
</style>

样式

可以通过在 home.vue 中引入的 Button 组件添加 类名 来控制按钮的大小颜色等样式，也可以在 Button 总添加属性 buttonstyle="background-color:green" 来控制 Button 的样式

方法

可以通过在 home.vue 中引入的 Button 组件添加事件 click 来定义点击按钮之后触发的事件