vue 组件封装按钮button 支持点击按钮带阴影效果和Loading加载效果

最新推荐文章于 2024-08-02 16:29:51 发布

A-fish

最新推荐文章于 2024-08-02 16:29:51 发布

阅读量7.5k

点赞数

分类专栏： vue与weex CSS3 mint-ui 文章标签：按钮button vue组件封装带loading效果

本文链接：https://blog.csdn.net/sally18/article/details/90603771

版权

一，子组件shadowButton

<template>
    <!-- 此组件支持自定义按钮文字和自定义按钮图片 -->
    <button :style="{backgroundColor:btnBgc,color:btnColor,width:width,height:height,fontSize:fontSize,boxShadow:boxShadow}" @click="handleClick" class="rytBtn">
        <label class="btnText"><slot></slot></label>
    </button>
</template>

<script>
     export default {
           name:'shadowButton',
           props:{
               btnBgc:{
                   type:String,
                   default:'pink'
               },
               btnColor:{
                   type:String,
                   default:'#fff'
               },
               width:{
                   type:String,
                   default:'200px'
               },
               height:{
                   type:String,
                   default:'44px