basic.vue

<template>
  <div style="--navbar-height: 0">
    <dk-page-diy ref="diy" style="border: 1px solid #fff" type="min">
      <el-button @click="getJson()">获取json</el-button>
      <el-button @click="setJson()">设置json</el-button>
      <el-button type="primary" @click="save()">保存</el-button>
      <el-button type="danger" @click="diy.clear()">清除</el-button>
      <el-button type="warning" @click="diy.showDiyCloud('home')">云端</el-button>
    </dk-page-diy>
    <!--    {{ test }}-->
    <!--    <DkCubeImageInput v-model="test"></DkCubeImageInput>-->
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref, provide } from 'vue'
import { request } from '@vipl520/utils'
// import DkCubeImageInput from '../src/components/forms/DkCubeImageInput.vue'
//
// const test = ref({})

provide('urlInputData', {
  urlData: [
    {
      title: '多页面',
      type: 'default',
      lists: [
        {
          title: '标题1',
          list: [
            { url: '/pages/user', title: '个人中心' },
            { url: '/pages/index', title: '首页' },
          ],
        },
        {
          title: '标题2',
          list: [
            { url: '/pages/project', title: '项目' },
            { url: '/pages/test', title: '测试' },
          ],
        },
      ],
    },
    {
      title: '项目链接',
      type: 'table',
      // 远程地址
      tableUrl: '/gs_gold/admin.question',
      urlField: 'url',
      pkField: 'id',
      // 地址规则
      urlRule: '/pages/project?id={pkField}',
    },
  ],
  jumpMinApp: true,
})

const diy = ref()

const getJson = () => {
  const config = diy.value.get()
  console.log(JSON.stringify(config))
}

const setJson = () => {
  // const config =
  //   '{"rule":[{"type":"DkMinTitle","props":{"title":"主标题","subtitle":"副标题"},"showStyle":true,"_fc_drag_tag":"DkMinTitle","hidden":false,"display":true},{"type":"DkMinHotArea","props":{"hotData":{"background":"","views":[],"width":500,"height":500},"showMask":false},"showStyle":true,"_fc_drag_tag":"DkMinHotArea","hidden":false,"display":true}],"config":{}}'
  const config =
    '{"rule":[{"type":"DkMinSwiperImage","props":{"swipeList":[{"img":"https://img01.yzcdn.cn/upload_files/2021/07/06/FsivVhWrSJsQWx0GhgOJKS_IOQp_.jpg?imageMogr2/format/jpg/thumbnail/1484x/size-limit/300k!/interlace/1","url":"","title":"默认备注名称1","show":true},{"img":"https://img01.yzcdn.cn/upload_files/2021/07/07/Fm30KtbmHzLJ96USZWFGI8FLQVss.png?imageMogr2/format/jpg/thumbnail/1484x/size-limit/300k!/interlace/1","url":"","title":"默认备注名称2","show":true},{"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}],"height":160,"autoplay":2000},"showStyle":true,"_fc_drag_tag":"DkMinSwiperImage","hidden":false,"display":true},{"type":"DkMinTitle","props":{"title":"主标题","subtitle":"副标题"},"showStyle":true,"fixed":true,"_fc_drag_tag":"DkMinTitle","hidden":false,"display":true},{"type":"DkMinVideo","props":{"videoPath":"","isHeight":false,"isOpenClose":false},"showStyle":true,"_fc_drag_tag":"DkMinVideo","hidden":false,"display":true},{"type":"DkMinTextarea","props":{"textarea":"请随意发挥您的创作..."},"showStyle":true,"_fc_drag_tag":"DkMinTextarea","hidden":false,"display":true}],"config":{"style":{}}}'
  //
  // const config =
  //   '{"rule":[{"type":"DkMinImage","props":{"imageList":[{"title":"新内容","img":"https://cdn.w7.cc/images/2019/03/25/j0C525ySgwApwp1gmIRUdDS6ZXL8lOrbxoiM6JZb.png","show":true,"url":""},{"title":"新内容","img":"https://cdn.w7.cc/images/2019/03/25/j0C525ySgwApwp1gmIRUdDS6ZXL8lOrbxoiM6JZb.png","show":true,"url":""},{"title":"新内容","img":"https://cdn.w7.cc/images/2019/03/25/j0C525ySgwApwp1gmIRUdDS6ZXL8lOrbxoiM6JZb.png","show":true,"url":""}]},"showStyle":true,"_fc_drag_tag":"DkMinImage","hidden":false,"display":true}],"config":{}}'
  diy.value.set(JSON.parse(config))
}
const save = () => {
  const config = diy.value.get()
  console.log(config)
  // /gs_know/admin.config/setValueById?_ajax=1
  return request({
    method: 'post',
    url: '/gs_know/admin.config/setValueById',
    data: { value: config, id: 8 },
  })
}

onMounted(() => {
  // setJson()
  request({
    method: 'post',
    url: '/gs_know/app.config/getConfigById?plaid=57&_ajax=1',
    data: { id: 8 },
  }).then((res) => {
    console.log('res', res)
    diy.value.set(res.data.value)
  })
})
</script>

PageDiy

组件描述组件描述组件描述组件描述组件描述组件描述。

基础用法

基础用法基础用法基础用法基础用法基础用法基础用法。

组件配置

PageDiy Props

属性	说明	类型	默认值
type	参数类型	string	-

PageDiy Events

事件名	说明	参数
click	点击触发的事件	(event: MouseEvent) => void

PageDiy Slots

插槽名	说明
default	自定义默认内容

类型定义

组件导出以下类型定义

import type { PageDiyProps } from '@vipl520/dk-ui'

样式变量

组件提供了下列 CSS 变量，可用于自定义样式。

名称	默认值
--dk-page-diy-background	-