原生按钮封装

1.button.vue

<template>
	<button class="yh-button" :disabled="disabled" @click="onClick($event)">
		<slot></slot>
	</button>
</template>
<script>
 export default {
   name: 'Button',
   data() {
		 return {
     }
	 },
	 props:["disabled"],
	 methods : {
		 onClick(e) {
			 e.preventDefault();
			 e.stopPropagation();
			 this.$emit('click', e);
		 }
   },
	 created () {
	 },
	 mounted () {
	 }
 }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.yh-button {
	line-height: 1;
    height:36px;
    white-space: nowrap;
    cursor: pointer;
    background: #fff;
    border: 1px solid $primary-color;
	border-radius:2px;	
    color: $primary-color;
    -webkit-appearance: none;
    text-align: center;
    box-sizing: border-box;
    outline: none;
    margin: 0;
    font-weight: 500;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    padding: 8px 20px;
    font-size: 14px;	
}

.yh-button:active {
	border-color:$border-hl-color;
}
 </style>

最后

以上就是悦耳故事为你收集整理的原生按钮封装的全部内容，希望文章能够帮你解决原生按钮封装所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。