PageDiy DIY组件

<template>
    <div>
        <DkPageDiy ref="diyRef" class="page_diy" :loading="loading">
            <template #handle>
                <el-button type="primary" icon="el-icon-view" round size="mini" @click="previewFc">预 览</el-button>
                <el-button type="primary" icon="el-icon-folder-checked" round size="mini" @click="handleSave()">保存</el-button>
                <el-button type="danger" icon="el-icon-delete" round size="mini" @click="clearDragRule">清 空</el-button>
            </template>
        </DkPageDiy>
    </div>
</template>

<script>
    export default {
        name: 'DiyPage',
        components: {
        },
        props: {
            value: {
                default: '',
                type: String
            }
        },
        data() {
            return {
                plaid: 14,
                menu: [],
                loading: true
            }
        },
        computed: {},
        mounted() {
            this.handleDiyInit()
        },
        methods: {
            previewFc() {
                this.$refs.diyRef.previewFc()
            },
            handleSave() {
                var diyData = {
                    config: this.$refs.diyRef.getPageConfig(),
                    rule: this.$refs.diyRef.getRule(),
                    float_rule: []
                }
                console.log(JSON.stringify(diyData))
                    this.$message.success("保存成功")
            },
            clearDragRule() {
                this.$refs.diyRef.clearDragRule()
            },
            handleDiyInit() {
                setTimeout(() => {
                    this.loading = false
                    var config = {"config":{"show_dashed":0},"rule":[{"type":"dk-nav-bar","props":{"title":"标题","leftText":"返回","rightText":"首页","leftArrow":true,"border":false,"fixed":false,"placeholder":false},"showStyle":true,"fixed":true,"_fc_drag_tag":"dk-nav-bar","hidden":false,"display":true,"setting":{"shadow":"0px 0px 5px #000","shadow_type":"0"}},{"type":"dk-notice-bar","props":{"text":"在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准","leftIcon":"volume-o","delay":0,"speed":60},"showStyle":true,"_fc_drag_tag":"dk-notice-bar","hidden":false,"display":true},{"type":"DkSwipe","props":{"swipeList":[{"img":"https://img01.yzcdn.cn/upload_files/2021/07/01/Fj19dCrgsMyTYdrr89b9iheMVFZU.png?imageMogr2/format/jpg/thumbnail/1484x/size-limit/300k!/interlace/1","url":"","title":"默认备注名称3","show":true}],"autoplay":2000},"showStyle":true,"_fc_drag_tag":"DkSwipe","hidden":false,"display":true},{"type":"DkGridCellList","props":{"gridCellList":[{"img":"https://cdn.w7.cc/images/2019/03/25/j0C525ySgwApwp1gmIRUdDS6ZXL8lOrbxoiM6JZb.png","url":"","title":"抖加","show":true},{"img":"https://cdn.w7.cc/images/2019/05/05/ZtGCY6FSJrKiTuUI5QUypwmNkrYnzQeomSzxBFTG.png","url":"","title":"活码","show":true},{"img":"https://cdn.w7.cc/images/2018/06/23/Qz4xGLTdUFddn8pLUhfZ6MxrxdL5tlUI1wlyyAKd.png","url":"","title":"拓客","show":true}],"imgTextGutter":20},"showStyle":true,"_fc_drag_tag":"DkGridCellList","hidden":false,"display":true},{"type":"vanRow","props":{"justify":"start","align":"center","type":"flex"},"children":[{"type":"vanCol","props":{"span":12,"offset":0},"children":[{"type":"dk-textarea","props":{"textarea":"<p>栅格里面的富文本</p>"},"showStyle":true,"_fc_drag_tag":"dk-textarea","hidden":false,"display":true}],"showStyle":true,"_fc_drag_tag":"col","hidden":false,"display":true},{"type":"vanCol","props":{"span":12,"offset":0},"children":[{"type":"dk-textarea","props":{"textarea":"<p>栅格里面的富文本</p>"},"showStyle":true,"_fc_drag_tag":"dk-textarea","hidden":false,"display":true}],"showStyle":true,"_fc_drag_tag":"col","hidden":false,"display":true}],"showStyle":true,"_fc_drag_tag":"row","hidden":false,"display":true},{"type":"dk-music","props":{"musicPath":"","isOpenClose":false,"loop":true,"imgUrl":"https://dkyx-1251560393.cos.ap-chengdu.myqcloud.com/uploads/20230224/9a3ff7c7ebfc7382ed8eebdcdd710faf.png","iconType":"image","rotation":"changeRight"},"fixed":true,"showStyle":true,"_fc_drag_tag":"dk-music","setting":{"top":"","right":"","bottom":"","left":"","position":"right-top","margin":"40px","shadow":"0px 4px 5px rgba(231, 0, 0, 0.49)","shadow_type":"1"},"hidden":false,"display":true},{"type":"DkTabbar","props":{"tabBars":[{"title":"首页","icon":"home-o","url":"#"},{"title":"热门","icon":"fire-o","url":"#"},{"title":"购物车","icon":"cart-o","url":"#"},{"title":"我的","icon":"user-o","url":"#"}]},"fixed":true,"showStyle":true,"_fc_drag_tag":"DkTabbar","setting":{"position":"center-down"},"hidden":false,"display":true}],"float_rule":[]}
                    this.$refs.diyRef.setAllConfig(config)
                }, 1000)
            }
        }
    }
</script>

<style lang="scss">
    .page_diy {
        margin: 0;
    }
    ._fc-l ._fc-l-title{
        margin: 18px 0 5px!important;
    }
</style>

Expand Copy Copy