vue实现按钮的相关功能

最新推荐文章于 2024-05-25 16:04:51 发布

lylovexz

最新推荐文章于 2024-05-25 16:04:51 发布

阅读量312

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/lylovexz/article/details/108322640

版权

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>    <style>        * {            margin: 0;            padding: 0;            list-style: none;        }        .btn {            margin: 30px auto;            font-size: 20px;            border: none;            border-radius: 3px;            outline: none;            width: 100px;            height: 35px;            color: #999;            cursor: pointer;            text-align: center;            /* border: 1px solid #ccc; */        }        .btn.warn {            background: orange;            color: #fff;        }        .btn.success {            background: green;            color: #fff;        }        .btn.primary {            background: blue;            color: #fff;        }        .btn.error {            background: red;            color: #fff;        }         .btn.small {          width: 60px;          height: 25px;          font-size: 14px;        }        .btn.middle {          width: 120px;          height: 50px;          font-size: 20px;        }               .btn.large {          width: 200px;          height: 50px;          font-size: 25px;        }    </style></head><body>    <!-- <slot></slot>    //    插槽 -->    <div id="app">        <btn type='warn' size="samll">登录</btn>        <btn type='success' size="middle">登录</btn>        <btn type='primary' size="large">登录</btn>        <btn type='error'>登录</btn>        <!-- <button class="btn warn">登录</button>   <button class="btn error">登录</button>   <button class="btn primary">登录</button>   <button class="btn success">登录</button> -->    </div>    <script>        Vue.component('btn', {            props:{                type:{                    type:String,                },              size:{                  size:String              }            },            data() {                return {                    c:{                        warn:this.type==='warn',                        error:this.type==='error',                        primary:this.type==='primary',                        success:this.type==='success',                        small:this.size==='small',                        middle:this.size==='middle',                        large:this.size==='large',                                         },                                 }            },            methods: {                       handleClick(e){                           this.$emit('click',e)                       }                   },            template:                ` <button class="btn" :class="c" @click="handleClick">                   <slot></slot>                             </button>                `        })        let vm = new Vue({            el: "#app",            data() {                return {                }            },            methods: {            },        })    </script></body></html>

作者：lylovexz
链接：https://juejin.im/post/6844904186912440328
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。