Basic Usage

This chapter will detail the basic usage and configuration methods of the Component Designer. The examples will be illustrated through both visual configuration and code implementation approaches.

Data Binding

Based on Vue's data reactivity, you can declaratively render data into the DOM system using concise template syntax in the template. Let's take an example: enter corresponding text in the input box, and dynamically display the text entered in the input box in another element.

Effect Diagram

Visual Configuration Implementation

• Overall configuration

• Configure input box data binding

• Configure displayed text

Code Implementation

In the template, use v-model for two-way data binding, and use {{inputString}} to bind the data defined in the script to the template.

Template

<div style="width:100%;height:100%;position:relative;display:flex;align-items:center;flex-direction:column;gap:10px;padding:42px">
    <input v-model="inputString" style="width:100%"></input>
    <div style="width:100%;height:56px;color:#2708E0;background-color:#FBF9F1;font-size:20px;border-width:1px;border-style:solid;border-color:#333;display:flex;align-items:center;flex-direction:row;gap:10px">
        {{inputString}}
    </div>
    <div style="height:117px;width:100%">
        Enter text in the input box above, the entered text will be bound to the variable inputString and displayed in real-time in the area below.
    </div>
</div>

Script

export default{
    data(){
        return{
            inputString: null
        }
    }
}

Conditional Display

Controlling the display and hiding of elements is also simple. Here's an example of showing and hiding elements based on the size of the input value.

Effect Diagram

Visual Configuration Implementation

• Overall configuration
• Two-way binding for input box
• Conditional display of elements

Code Implementation

Use v-if for conditional judgment to control whether elements are rendered. Use v-show for conditional judgment to control whether elements are displayed.

Note

The Component Designer does not currently support v-else-if and v-else

Template

<div style="position:relative;display:flex;width:100%;height:100%;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;padding:12px">
    <div style="display:flex;width:126px;height:90px;background-color:#F9F7C9;flex-direction:row;align-items:center;justify-content:center;gap:10px;border-width:1px;border-style:solid;border-color:#333" v-if="number>10">
        Display when value is greater than 10
    </div>
    <div style="display:flex;width:126px;height:90px;background-color:#D5F0C1;flex-direction:row;align-items:center;justify-content:center;gap:10px;border-width:1px;border-style:solid;border-color:#333" v-if="number>5">
        Display when value is greater than 5
    </div>
    <div style="display:flex;width:126px;height:90px;background-color:#FFE5E5;flex-direction:row;align-items:center;justify-content:center;gap:10px;border-width:1px;border-style:solid;border-color:#333" v-if="number>1">
        Display when value is greater than 1
    </div>
    <div style="height:30px;border-color:#333;border-style:solid;border-width:1px;width:100%">
        <input v-model="number" type="number" style="width:100%;height:100%;text-align:center"></input>
    </div>
</div>

Script

export default{
    data(){
        return{
            number: 20
        }
    }
}

Loop

Through simple binding actions, we can also loop through a list of data for display.

Effect Diagram

Visual Configuration Implementation

Code Implementation

Implement array looping through v-for

Template

<div style="width:100%;height:100%;position:relative;padding:22px">
    <div style="display:flex;height:30px;flex-direction:column;align-items:center;gap:10px;margin:5px;border-width:1px;border-style:solid;border-color:#333" v-for="(item,idx) in list">
    {{item}} {{idx}}
    </div>
</div>

Script

export default{
    data(){
        return{
            list: ['a', 'b', 'c', 'd']
        }
    }
}

Filters

Filters can be used for some common text formatting. You can use the built-in component Informat Vue Utility Functions or customize your own.

Effect Diagram

Visual Configuration Implementation

• Overall configuration

• Using Informat Vue utility functions, text configuration: {{now | informat-date-format('yyyy-MM-dd HH:mm:ss')}}
• Custom filter, text configuration: {{formatDate(now, "yyyy-MM-dd hh:mm:ss")}}
• formatDate method code snippet:

if (date == null || fmt == null) {
    return null;
}

const dt = new Date(date);

if (Number.isNaN(+dt)) {
    return null;
}

const o = {
    "M+" : dt.getMonth()+1,                 //Month 
    "d+" : dt.getDate(),                    //Day 
    "h+" : dt.getHours(),                   //Hour 
    "m+" : dt.getMinutes(),                 //Minute 
    "s+" : dt.getSeconds(),                 //Second 
    "q+" : Math.floor((dt.getMonth()+3)/3), //Quarter 
    "S" : dt.getMilliseconds()             //Millisecond 
};
if(/(y+)/.test(fmt)) {
    fmt=fmt.replace(RegExp.$1, (dt.getFullYear()+"").substr(4 - RegExp.$1.length));
}
for(var k in o) {
    if(new RegExp("("+ k +")").test(fmt)){
        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
    }
}
return fmt;

Code Implementation

Implement by defining filters in the script

Template

<div style="width:100%;height:100%;position:relative">
    <h1>
    Current Date:
    </h1>
    <div>
        <span>Using Informat Vue utility functions:</span>
        <span>{{now | informat-date-format("yyyy-MM-dd HH:mm:ss")}}</span>
    </div>
    <div style="margin-top:10px">
        <span>Using custom filter:</span>
        <span>{{now | formatDate("yyyy-MM-dd hh:mm:ss")}}</span>
    </div>
</div>

Script

export default{
    data(){
        return{
            now: Date.now()
        }
    },
    filters: {
        formatDate(date, fmt) {
            if (date == null || fmt == null) {
                return null;
            }
            
            const dt = new Date(date);
            
            if (Number.isNaN(+dt)) {
                return null;
            }
            
            const o = { 
                "M+" : dt.getMonth()+1,                 //Month 
                "d+" : dt.getDate(),                    //Day 
                "h+" : dt.getHours(),                   //Hour 
                "m+" : dt.getMinutes(),                 //Minute 
                "s+" : dt.getSeconds(),                 //Second 
                "q+" : Math.floor((dt.getMonth()+3)/3), //Quarter 
                "S" : dt.getMilliseconds()             //Millisecond 
            }; 
            if(/(y+)/.test(fmt)) {
                fmt=fmt.replace(RegExp.$1, (dt.getFullYear()+"").substr(4 - RegExp.$1.length)); 
            }
            for(var k in o) {
                if(new RegExp("("+ k +")").test(fmt)){
                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
                }
            }
            return fmt;
        }
    }
}