手动实现一个公共vue组件

最新推荐文章于 2022-04-15 12:17:52 发布

weixin_34144450

最新推荐文章于 2022-04-15 12:17:52 发布

阅读量57

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/WhiteHorseIsNotHorse/p/7133343.html

本文介绍了一个自定义的iOS风格Switch Button组件实现。该组件通过Vue.js进行开发，并使用了SCSS样式来完成动画效果和状态变化。代码示例中详细展示了如何通过点击事件改变开关的状态并触发回调。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现了一个iphone上常见的siwtchbutton组件按钮，废话少说直接看代码

<template lang="html">
    <div class="button_switch" :class="{change_to_open: open}">
        <div class="circel_button" :class="{trans_to_right: open}" @click="changeType"></div>
    </div>
</template>
<script type="text/ecmascript-6">
    export default{
        name: 'switchbutton',
        props: ['open'],
        methods: {
            changeType() {
                console.log(this.newMsgRemind);
                console.log(this.open);
                let code = this.open ? 1 : 0;
                this.$emit('changeType', code);
                // this.$store.commit(types.SET_CURRENT_CHANNEL_SESSION_NEW_MSG_REMIND, code);
                // console.log(this.open);
                // this.$api.ModifyNewMsgRemindConfig(this.$store.getters.currentChannelId, code);
            }
        }
    };
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    .button_switch {
        background-color: #fff;
        display: flex;
        justify-content: center;
        border-radius: 100px;
        border: 2px solid #E5E5E5;
        width: 40px;
        height: 28px;
        position: relative;
        /*top: -5px;*/
        box-sizing: border-box;
        .circel_button{
            transition: all .3s;
            position: absolute;
            z-index: 1;
            top: 2px;
            left:1px;
            width: 20px;
            height: 20px;
            background: #FFFFFF;
            box-shadow: 0 0 4px 0 rgba(0,0,0,0.20);
            border-radius: 50%;
            cursor: pointer;
        }
        .trans_to_right{
            transform: translateX(13px);
        }
    }
    .change_to_open{
        background: #4DD865;
    }
</style>

转载于:https://www.cnblogs.com/WhiteHorseIsNotHorse/p/7133343.html