vue一些基础组件封装

测试组件占位

阿谁发的很舒服阿大放送发阿斯顿发大水发a

asdfasdf

asdf

Dialog 弹框组件

效果图：

dialog组件

<template>
    <transition name="slide-down">
        <div class="ta-dialog__wrapper" v-if="isShow">
            <div class="ta-dialog">
                <div class="ta-dialog__header">
                    <span>{{ title }}</span>
                    <i class="ios-close-empty" @click="handleCancel()">x</i>
                </div>
                <div class="ta-dialog__body">
                    <slot></slot>
                </div>
                <div class="ta-dialog__footer">
                    <button @click="handleCancel()">取消</button>
                    <button @click="handleOk()">确定</button>
                </div>
            </div>
        </div>
    </transition>
</template>
<script>
export default {
    name:'Dialog',
    props:{
        title:{
            type:String,
            default:'标题'
        },
        isShow:{
            type:Boolean,
            default:false
        },
    },
    methods:{
        handleCancel(){
            this.$emit('cancel')
        },
        handleOk(){
            this.$emit('ok')
        }
    }
}
</script>
<style scoped lang="scss">
.ta-dialog__wrapper {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    .ta-dialog {
        padding: 16px;
        width: 300px;
        min-height: 100px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 8px;
        background-color: #fff;
        display: flex;
        flex-direction: column;
        .ta-dialog__header {
            font-size: 16px;
            display: flex;
            justify-content: space-between;
        }
        .ta-dialog__body {
            flex: 1;
        }
        .ta-dialog__footer {
            display: flex;
            justify-content: flex-end;
            height: 50px;
            align-items: center;
            button {
                width: 70px;
                height: 40px;
                border: none;
                border-radius: 4px;
            }
            button:nth-child(1) {
                background-color: #fff;
                color: #606266;
                border: 1px solid #dcdfe6;
                margin-left: 16px;
            }
            button:nth-child(2) {
                background-color: #409eff;
                color: #fff;
                margin-left: 16px;
            }
            & button:nth-child(1):hover{
                color: #409eff;
                border: 1px solid #409eff;
                background-color: #ccc;
            }
            & button:nth-child(2):hover{
                background: #66b1ff;
                border-color: #66b1ff;
                color: #fff;
            }
        }
    }
}
.slide-down-enter-active {
  animation: dialog-enter ease .3s;
}

.slide-down-leave-active {
  animation: dialog-leave ease .5s;
}

@keyframes dialog-enter {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes dialog-leave {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(-20px);
  }
}
</style>

在父组件里使用：

<template>
    <div>
        商品详情页面
        <div @click="openMask">打开弹窗</div>
        <my-dialog 
            title="提示" 
            :isShow="isShow"
            @ok="handleOk" 
            @cancel="handleCancel">
            <p>这是一段自定义信息</p>
        </my-dialog>
    </div>
</template>
<script>
import myDialog from '../../../components/dialog/dialog'
    export default {
        name: "goods-details",
        components: {
            myDialog
        },
        data(){
            return {
                isShow:false,
            }
        },
        methods:{
            handleOk(){
                this.isShow = false
            },
            handleCancel(){
                 this.isShow = false
            },
            openMask(){
                this.isShow = true
            }
        }
    }
</script>

<style scoped>

</style>