更新记录

1.0.1（2025-10-29） 下载此版本

注意安装插件后，请重新在本地运行项目

  1. 修复导入插件后UI问题
  2. 修复导入插件合并pages注册路由问题
  3. 修复其它部分BUG

1.0.0（2025-10-29） 下载此版本

无

平台兼容性

uni-app(4.76)

Vue2 Vue3 Chrome Safari app-vue app-nvue Android iOS 鸿蒙
√ √ √ √ √ √ √ √ √
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 快应用-华为 快应用-联盟
√ √ √ √ √ √ √ √ √ √ √

ccm-vdd 可视化拖拽 所见即所得

测试版本，测试好后更新为正式版

1.本插件只适合在本地开发调试环境中使用，不要发布到正式项目中。

2.支持自定义的组件，在组件的vue文件同级添加config.json配置文件即可（无需修改原有组件的任何代码）。本地项目安装此插件的系统会自动识别

3.支持插件市场所有组件，如2中说的添加config.json即可，插件市场支持兼容CCM-VDD的无需手动添加（已经自带配置），系统自动识别

4.支持在拖拽页面设置页面的数据，函数方法，生命周期调用等基本设置

5.支持将最后拖拽好的页面，保存为本地项目页面。

欢迎各位开发者一起使用，共同打造一个方便便捷的可视化拖拽工具，助力自己能够向搭积木一样快速设计应用。

快速使用

插件市场安装时选择本地项目，安装过程中会出现合并插件的拖拽系统路由地址，完成后在本地项目运行，按照路由地址直接浏览器访问即可打开。

默认地址：http://localhost:5173/#/uni_modules/ccm-vdd/pages/ccmvdd/ccmvdd

目前插件市场支持本系统的插件较少，我们会尽快为大家开发并日常维护本插件系统，您也可以根据下方的简单文档一起制作

组件config.json配置选项说明

场景（一）

在需要将自己本地的组件让可视化拖拽系统识别，这个配置项是不可避免的。也可以将配置好的组件/插件发布到插件市场让大家一起使用

场景（二）

将现有项目或将来项目需要用的所有组件全部统一让ccm-vdd识别，便于快速设计应用或者将此系统交给简单培训过的其它成员可视化操作设计应用。

说明

1. components 目录符合uniapp官方要求（例如下方案例）

  • components
    • test
      • test.vue
      • congif.json（额外添加的配置，用于ccm-vdd识别，非必须）
    • 其它组件

      2. uni_modules 目录符合uniapp官方要求（例如下方案例）

  • uni_modules
    • ccm-test
      • components
        • ccm-test
          • ccm-test.vue
          • config.json（额外添加的配置，用于ccm-vdd识别，非必须）
      • changelog.md
      • package.json
      • readme.md
    • 其它插件

config.json配置描述说明（以上方的uni_modules插件为例）

参数 默认值 必选 说明
type component √ 固定值
is ccm-test √ 名称与组件名称保持一致
name 测试插件 √ 插件中文名称，用来在拖拽组件列表中显示
icon svg代码 √ 插件图标 用来在拖拽组件列表中显示（这里的svg，请删除默认的width\height\fill属性，并字符串转义）
lib 自定义分类 √ 用来在拖拽列表中按照分类显示
data object:{} √ 配置拖拽系统的控制面板数据
data['body'] object:[] √ 控制面板的内容数据
data['style'] object:[] × 控制面板的样式数据
data['readme'] < p >使用说明< /p > |√ 控制面板的使用说明，这里仅支持html格式
data['body'] 与 data['style']参数 值 说明
title 文字 控件显示的标题
type textarea 控件类型 支持：textarea，input，input-color，select，margin-padding
value 默认的内容 控件显示的默认内容
slot true 是否将默认值插入到插槽中，注意组件有插槽时添加
prop text 绑定的属性名称，这里的text为组件提供的props Key
options [{"title": "渐变速度 1s 很快","value": "1s"},{"title": "渐变速度 2s 快","value": "2s"},{"title": "渐变速度 3s 缓慢","value": "3s"}] type为 select 时需要传的一个数据对象
dynamicData {"status": false,"bindDataKey": null} 动态数据绑定，当需要动态数据时请添加此字段，参数默认
注意 type="margin-padding" 时，value不在是字符串，需要传入 {"margin": ["0px","0px","0px","0px"],"padding": ["0px","0px","0px","0px"]} 对象作为值，组件中需要接收这个对象进行使用

例子（以插件市场的ccm-xgtxt为例）

组件代码

<template>
    <view :style="{
        '--color': color2,
        '--color1': color1,
        '--time': time,
        'margin': marginPadding.margin.join(' '),
        'padding': marginPadding.padding.join(' '),
        'background-color': backgroundColor
    }">
        <text class="text">
            <slot></slot>
        </text>
    </view>

</template>

<script>
    export default {
        name: "scc-tgtext",
        props: {
            color1: {
                type: String,
                default: '#57dd57'
            },
            color2: {
                type: String,
                default: '#f60'
            },
            time: {
                type: String,
                default: '1s'
            },
            marginPadding: {
                type: Object,
                default: {
                    "margin": ["0px", "0px", "0px", "0px"],
                    "padding": ["0px", "0px", "0px", "0px"]
                }
            },
            backgroundColor: {
                type: String,
                default: '#fff'
            }
        },
        data() {
            return {

            };
        }
    }
</script>

<style lang="scss" scoped>
    @keyframes masked-animation {
        0% {
            background-position: 0 0;
            /*background-position 属性设置背景图像的起始位置。*/
        }

        100% {
            background-position: -100% 0;
        }
    }

    @-webkit-keyframes masked-animation {
        0% {
            background-position: 0 0;
        }

        100% {
            background-position: -100% 0;
        }
    }

    .text {

        /*渐变背景，此处为能无缝拼接的渐变 即0~100%*/
        /*linear-gradient(线性渐变)*/
        background-image: -webkit-linear-gradient(135deg, var(--color), var(--color1) 30%, var(--color) 60%, var(--color1) 90%, var(--color));
        color: transparent;
        /*文字填充色为透明*/

        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
        /* background-clip 规定背景的绘制区域：*/
        /*背景剪裁为文字，相当于用背景填充文字 CSS3新属性*/

        -webkit-background-size: 200% 100%;
        /*背景图片向水平方向扩大一倍，这样background-position才有移动与变化的空间*/
        background-size: 200% 100%;
        /* 动画 */
        -webkit-animation: masked-animation var(--time) infinite linear;
    }
</style>

组件的config.json配置文件


{
    "type": "component",
    "is": "ccm-xgtxt",
    "name": "炫光文字",
    "icon": "<svg t=\"1761417721705\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M729.088 444.928h-435.2c-15.872 0-27.648 12.288-27.648 27.648v150.528c0 15.872 12.288 27.648 27.648 27.648 15.36 0 27.648-12.288 27.648-27.648v-122.368h162.304v412.672h-116.736c-15.872 0-27.648 12.288-27.648 27.648 0 15.872 12.288 27.648 27.648 27.648h289.28c15.872 0 27.648-12.288 27.648-27.648 0-15.872-12.288-27.648-27.648-27.648h-116.736v-412.672h162.304v122.368c0 15.872 12.288 27.648 27.648 27.648 15.36 0 27.648-12.288 27.648-27.648v-150.528c0-14.848-12.8-27.648-28.16-27.648zM213.504 549.376h-144.896c-14.336 0-25.6-11.264-25.6-25.6s11.264-25.6 25.6-25.6h144.896c14.336 0 25.6 11.264 25.6 25.6s-11.264 25.6-25.6 25.6zM955.392 549.376h-144.896c-14.336 0-25.6-11.264-25.6-25.6s11.264-25.6 25.6-25.6h144.896c14.336 0 25.6 11.264 25.6 25.6s-11.264 25.6-25.6 25.6zM512 250.88c-14.336 0-25.6-11.264-25.6-25.6v-144.896c0-14.336 11.264-25.6 25.6-25.6s25.6 11.264 25.6 25.6v144.896c0 14.336-11.264 25.6-25.6 25.6zM301.056 338.944c-6.656 0-13.312-2.56-17.92-7.68l-102.4-102.4c-10.24-10.24-10.24-26.112 0-36.352s26.112-10.24 36.352 0l102.4 102.4c10.24 10.24 10.24 26.112 0 36.352-5.632 5.12-11.776 7.68-18.432 7.68zM722.432 338.944c-6.656 0-13.312-2.56-17.92-7.68-10.24-10.24-10.24-26.112 0-36.352l102.4-102.4c10.24-10.24 26.112-10.24 36.352 0s10.24 26.112 0 36.352l-102.4 102.4c-5.632 5.12-11.776 7.68-18.432 7.68z\" p-id=\"9305\"></path></svg>",
    "lib": "文字效果",
    "data": {
        "body": [{
                "title": "文字",
                "type": "textarea",
                "value": "炫光文字 特效",
                "slot": true,
                "dynamicData": {
                    "status": false,
                    "bindDataKey": null
                }
            },
            {
                "title": "渐变色1",
                "type": "input-color",
                "value": "#00f4ff",
                "prop": "color1",
                "dynamicData": {
                    "status": false,
                    "bindDataKey": null
                }
            },
            {
                "title": "渐变色2",
                "type": "input-color",
                "value": "#ec43fd",
                "prop": "color2",
                "dynamicData": {
                    "status": false,
                    "bindDataKey": null
                }
            },
            {
                "title": "渐变动画速度",
                "type": "select",
                "value": "1s",
                "prop": "time",
                "options": [{
                        "title": "渐变速度 1s 很快",
                        "value": "1s"
                    },
                    {
                        "title": "渐变速度 2s 快",
                        "value": "2s"
                    },
                    {
                        "title": "渐变速度 3s 缓慢",
                        "value": "3s"
                    }
                ],
                "dynamicData": {
                    "status": false,
                    "bindDataKey": null
                }
            }
        ],
        "style": [{
                "title": "边距",
                "type": "margin-padding",
                "value": {
                    "margin": [
                        "0px",
                        "0px",
                        "0px",
                        "0px"
                    ],
                    "padding": [
                        "0px",
                        "0px",
                        "0px",
                        "0px"
                    ]
                },
                "prop": "marginPadding"
            },
            {
                "title": "背景色",
                "type": "input-color",
                "value": "#fff",
                "prop": "backgroundColor"
            }
        ],
        "readme": "<p>炫彩文字组件，用于显示文字。</p><p>使用方法：</p><ol><li>颜色代码支持任何类型的颜色代码，例如：#00f4ff、rgb(0, 244, 255)、hsl(180, 100%, 50%)等。</li><li>动画速度：1s 很快，2s 快，3s 缓慢。支持自定义动画速度。单位：秒（s）/毫秒（ms）例如：500ms / 0.5s 等。</li></ol>"
    }
}

ccm-vdd 控制台面板显示的效果

欢迎各位开发者共同使用

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

无

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

许可协议

MIT协议
评论列表 撰写评论 向官方投诉
加载更多...