rtvue-lowcode

Rtvue-lowcode is an APP visual drag project based on UNIAPP framework and UVIEW component library development, using MIT open source agreement, suitable for APP, small programs and other projects development, truly out of the box!

We hope you can give us a little star. Every star is very precious to us, and we hope it can motivate our team to finish the project conscientiously.

GItHub address: github.com/GodofOrange…

Animation demo:

Currently the project is under development and the full version has not been released. Project Preview addressProject Preview Address

Project operation and installation

Clone and install it directly

yarn install && yarn serve
Copy the code

Customize component development steps

To prepare for custom component development, you need to clone the RTVUe-Lowcode project locally. Component development is divided into three steps:

  1. Define the components
  2. Draggable component
  3. Configure the component

Define the components

Creating component files

First, define components in the SRC/Components directory. The directory name and file name must be strictly the same. The directory name format is R-component name, and the file name format is r-component name.vue. For example, if the file directory is r-form-input, the file name is r-form-input.vue

Mixing component code

After creating a component, you need to mix rvuecomp inside the component here. The code example is as follows: r-form-input

<script> import {rvuecomp} from '.. /mixins/r-vue-comp' //<---- export default {name: "r-form-input", mixins:[rvuecomp] //<---- </script>Copy the code

In R-vuE-comp, the parameter types required by components are mainly defined. Currently, there are two parameter types planned: Option and compStyle.

Where option represents configuration information for the component, such as the left label of an input box, default values, and so on.

CompStyle represents the CSS of the control container. You can bind style and compStyle together in the root view tag of the control using the :style=’compStyle’ method.

export const rvuecomp = {
    props: {
        option: {
            type: Object,
            require: true,
        },
        compStyle: {
            type: Object,
            require: false,
        },
    },
}
Copy the code

By doing so, you define a new control. Then our task is to put the default data in the components/mixins/default_data js, r – form – input, for example, the default data as shown below:

Const rFormInput = {type: "r-form-input", option: {value: "", label: "normal input", placeholder: placeholder "Please enter the content," BTN: {getCode () = > {}, codeText: 'click'}}, compStyle: {height: "auto", width: "100%", "the font - size" : "24rpx", "background-color": "#fff", "margin-top": "0", "margin-right": "0", "margin-down": "0", "margin-left": "0", } }Copy the code

Once you’ve done that, you’ve defined a component.

Draggable component

Defining tag names

Start by putting the R-component name in the tags array in SRC/Pages/Labels. For example, in r-form-input, the label can be named

{text: "normal input box ", type: "r-form-input"},Copy the code

Drag and drop to load default data

SRC /components/r-vue-edit add case:’ component type ‘selector to methods:{addComp} and add default data to options, for example:

case "r-form-input":
    this.options.splice(index, 0, this.getData(this.rFormInput, this));
    break;
Copy the code

Once you have done this, you can create a draggable component on the screen that can be dragged into the container.

Configure the component

In Pages /sidebar/option-bar/, you need to configure the option page for each component.

The naming format is option-r- component name -bar.vue For example, run option-r-form-input-bar.vue to automatically bind the component to the configuration page.

The directory structure

├ ─ components │ ├ ─ libs │ │ └ ─ CSS │ ├ ─ mixins │ ├ ─ r - * * / / component | ├ ─ pages │ ├ ─ index / / page layout │ ├ ─ labels / / the left can drag bar │ ├ ─ preview / / Preview pages │ ├ ─ SCSS / / style folder If there are larger SCSS put inside │ ├ ─ sidebar configuration / / right column │ │ ├ ─ option - bar / / basic attribute │ │ └ ─ style - bar / / │ └ ─ the test / / test files ├ ─ static │ ├ ─ equip │ ├ ─ the ICONS │ └ ─ jsons / / the default data ├ ─ uni_modules / / uni plug-in │ ├ ─ qiun - data - charts │ │ ├ ─ components │ │ │ ├ ─ qiun - data - charts │ │ │ ├ ─ qiun - error │ │ │ └ ─ qiun - loading │ │ ├ ─ js_sdk │ │ │ └ ─ u - charts │ │ └ ─ static │ │ ├ ─ app - plus │ │ ├ ─ imp (1), ├ ─ imp (2), imp (1), imp (2), imp (2), imp (2), imp (3Copy the code