zoukankan      html  css  js  c++  java
  • 像elementui一样封装自定义按钮

    <template>
        <div>
           <button @click.prevent="coverHandler" class="btn-btn" type="button"  :disabled="disFlag"  :class="{disablecss:disFlag==true}"
           :style="{limitw,height: limith, backgroundColor:btnbg }" >
             <i v-if="showicon" :class="icon" ></i>
           {{btnValue}}
            
           </button>
        </div>
    </template>
    
    <script>
        export default {
            data(){
                return{
    
                }
            },
            methods:{
                coverHandler(){
                    this.$emit('click')
                }
            },
            props:{
                icon:{
                    type:String,
                    default:"el-icon-loading"
                },
                showicon:{
                    type:Boolean,
                    default:false,
                },
                disFlag:{
                    type:Boolean,
                    default:false,
                },
                btnValue:{
                    type:String,
                    default:"下一步"
                },
                limitw:{
                    type:String,
                    default:"320px"
                },
                limith:{
                    type:String,
                    default:"50px"
                },
                btnbg:{
                    type:String,
                    default:"#007AFF"
                }
            }
        }
    </script>
    
    <style lang="less" scoped>
    .btn-btn{
        border: none;
        outline: none;
        border-radius: 4px;
        color: #fff;
    }
    .btn-btn:focus{
        border: none;
    }
    .disablecss{
        opacity: 0.6 !important;
        background: #007aff !important;
    }
    </style>
    
    
      <login-input @click="next()"  :disFlag="backbtnFalg" class="next-btn"></login-input>
    
    作者:明月人倚楼
    出处:https://www.cnblogs.com/IwishIcould/

    想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!

    如果觉得这篇文章对你有小小的帮助的话,记得在右下角点个“推荐”哦,或者关注博主,在此感谢!

    万水千山总是情,打赏5毛买辣条行不行,所以如果你心情还比较高兴,也是可以扫码打赏博主(っ•̀ω•́)っ✎⁾⁾!

    想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!

    支付宝
    微信
    本文版权归作者所有,欢迎转载,未经作者同意须保留此段声明,在文章页面明显位置给出原文连接
    如果文中有什么错误,欢迎指出。以免更多的人被误导。
  • 相关阅读:
    iOS7以上自定义一个navigationController,并沿用系统的侧滑返回效果
    判断一个日期是否再某个日期范围内object-c 范例
    统计软件简介
    大学生对vivo手机的看法
    第二次作业,制作调查问卷
    作业一:数据软件系统的介绍及spss的操作简介
    Android WebView
    Android ListView
    ARM和x86
    android shape和selector
  • 原文地址:https://www.cnblogs.com/IwishIcould/p/13903310.html
Copyright © 2011-2022 走看看