基础用法

该章节将详介绍组件设计器的基础用法和配置方式，示例将会通过可视化配置和代码实现两种方式来分别阐述实现路径

数据绑定

基于Vue的数据响应式，在模板中可以通过简洁的模板语法来声明式地将数据渲染进 DOM 的系统。下面通过一个例子来举例：在输入框输入对应的文本，在另外一个元素动态显示输入框输入的文本

效果图

可视化配置实现

• 整体配置

• 配置输入框数据绑定

• 配置显示的文本

代码实现

在模板中通过v-model进行数据的双向绑定，使用{{inputString}}将脚本定义的数据绑定到模板中

模板

<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%">
        在上方的输入框中输入文字，输入的文字会绑定到变量 inputString 上，并即时显示在下方的区域中
    </div>
</div>

脚本

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

条件显示

控制元素的显示隐藏也很简单，以下是一个通过输入值的大小，显示隐藏元素的示例。

效果图

可视化配置实现

• 整体配置
• 输入框双向绑定
• 元素条件显示

代码实现

通过v-if进行条件判断，控制元素的是否渲染 通过v-show进行条件判断，控制元素的是否显示

模板

<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">
        数值大于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">
        数值大于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">
        数值大于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>

脚本

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

循环

通过简单绑定的绑定动作，我们还可以对一个列表数据进行循环显示。

效果图

可视化配置实现

代码实现

通过v-for实现数组的循环

模板

<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>

脚本

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

过滤器（filter）

过滤器可被用于一些常见的文本格式化，你可以使用内置的组件织信Vue工具函数集，也可以自定义。

效果图

可视化配置实现

• 整体配置
• 使用织信Vue工具函数，文字配置：{{now | informat-date-format('yyyy-MM-dd HH:mm:ss')}}
• 自定义过滤器，文字配置：{{formatDate(now, "yyyy-MM-dd hh:mm:ss")}}
• formatDate方法代码片段：

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

const dt = new Date(date);

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

const o = {
    "M+" : dt.getMonth()+1,                 //月份 
    "d+" : dt.getDate(),                    //日 
    "h+" : dt.getHours(),                   //小时 
    "m+" : dt.getMinutes(),                 //分 
    "s+" : dt.getSeconds(),                 //秒 
    "q+" : Math.floor((dt.getMonth()+3)/3), //季度 
    "S" : dt.getMilliseconds()             //毫秒 
};
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;

代码实现

通过在脚本中定义filters实现

模板

<div style="width:100%;height:100%;position:relative">
    <h1>
    当前日期：
    </h1>
    <div>
        <span>使用织信Vue工具函数：</span>
        <span>{{now | informat-date-format("yyyy-MM-dd HH:mm:ss")}}</span>
    </div>
    <div style="margin-top:10px">
        <span>自定义过滤器：</span>
        <span>{{now | formatDate("yyyy-MM-dd hh:mm:ss")}}</span>
    </div>
</div>

脚本

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,                 //月份 
                "d+" : dt.getDate(),                    //日 
                "h+" : dt.getHours(),                   //小时 
                "m+" : dt.getMinutes(),                 //分 
                "s+" : dt.getSeconds(),                 //秒 
                "q+" : Math.floor((dt.getMonth()+3)/3), //季度 
                "S" : dt.getMilliseconds()             //毫秒 
            }; 
            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;
        }
    }
}