Vue custom encapsulated button component

The custom encapsulation code of the vue button component is for your reference. The specific content is as follows

Encapsulate the button component button.vue

<template>
  <button class="button ellipsis" :class="[size,type]">
    <slot />
  </button>
</template>
<script>
export default {
  name: 'Button',
  props: {
    size: {
      type: String,
      default: 'middle'
    },
    type: {
      type: String,
      default: 'default'
    }
  }
}
</script>
<style scoped lang="less">
.button {
  appearance: none;
  border: none;
  outline: none;
  background: #fff;
  text-align: center;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
}
.large {
  width: 240px;
  height: 50px;
  font-size: 16px;
}
.middle {
  width: 180px;
  height: 50px;
  font-size: 16px;
}
.small {
  width: 100px;
  height: 32px;
  font-size: 14px;  
}
.mini {
  width: 60px;
  height: 32px;
  font-size: 14px;  
}
.default {
  border-color: #e4e4e4;
  color: #666;
}
.primary {
  border-color: #27BA9B;
  background: #27BA9B;;
  color: #fff;
}
.plain {
  border-color:#27BA9B;
  color:#27BA9B;;
  background: lighten(#27BA9B;,50%);
}
.gray {
  border-color: #ccc;
  background: #ccc;;
  color: #fff;
}
</style>

Use of package components

<Button type="primary" style="margin-top:20px;">Custom button name</Button>
<Button type="primary" style="margin-top:20px;">Add to Cart</Button>

Achieve results

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

Detailed explanation of the event of triggering child components by clicking buttons in parent components in Vue
Vue click button to dynamically create and delete component functions
Vue implements the custom component function of password display and hide buttons
Vue form validation button event is triggered by the parent component
Vue click button to realize dynamic mounting of subcomponents
Vue ripple button component production
Vue develops a sample code of a button component
Modify the state instance code of the input box after clicking the button in the vue component

<<: Difference between MySQL btree index and hash index

>>: Complete steps to solve 403 forbidden in Nginx