admin_home/src/views/template/public/editBtn.vue

<template>
    <div class="templateEditBtnBox" @click="openEditWindow" v-if="this.$store.state.template.previewStatus==false">
        <i class="el-icon-setting"></i>
    </div>
</template>

<script>
export default {
    props: {
        id: {
            type:Number,
            default:0
        },
        dataSort: {
            type:Number,
            default:0
        },
        sort:{
            type:Number,
            default:0
        },
        type:{//组件类型 1=新闻 2=广告 
            type:Number,
            default:0
        },
        size:{
            type:Number,
            default:0
        },
        sizeImg:{
            type:Number,
            default:0
        },
        y: {
            type:Number,
            default:0
        }
    },
    data() {
        return {
        
        };
    },
    methods: {
        openEditWindow(){
            let data = {
                id:this.id,
                dataSort:this.dataSort,
                sort:this.sort,
                type:this.type,
                size:this.size,
                sizeImg:this.sizeImg,
                y:this.y
            }
            console.log(data);
            //小助手
            this.$store.commit('template/setEditWindowStatus',data);
            //设置组件回显数据
            this.$store.commit('template/setComponentViewData',data);
            //   //获取全部导航
            //   this.$store.dispatch('template/getWebsiteCategory',{pageSize:1000});
        }
    },
    mounted() {
        
    },
};
</script>

<style scoped lang="less">
    .templateEditBtnBox {
        position: absolute;
        top: 0;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        margin: 5px;
        color: #666;
        border: 2px dashed #999;
        border-radius: 8px;
        background-color: #fff1cc;
        width: 38px;
        height: 38px;
        line-height: 38px;
        text-align: center;
        font-size: 30px;
        transition: all 0.3s;
        z-index: 999;
        &:hover {
            color: #333;
        }
    }
</style>