一种文旅产业在线交易平台专用的前端组件库的制作方法

1.本发明涉及计算机b/s架构技术领域，尤其是涉及一种文旅产业在线交易平台专用的前端组件库。


背景技术：

2.近年来随着前端技术的不断发展，web界面的功能越来越丰富，基于javascript实现的前端组件库也发展起来，前端单页应用项目目前有一些可选的开源组件库，如element、ant design of react等，element是一套为开发者、设计师和产品经理准备的基于vue 2.0的桌面端组件库，ant design of react(简称antd)是基于ant design设计体系的react ui组件库，主要用于研发企业级中后台产品。
3.但是，现有的这些组件库所能提供的组件的定制性有限，且主要用于研发企业级中后台产品，这些组件库往往只能提供通用的、简单的组件，在细化到具体行业时，难以满足各个行业的个性化需要。就文旅产业在线交易平台的设计而言，现有的组件没有以服务游客为中心，难以实现针对文旅产业平台特定用户需求。


技术实现要素：

4.本发明的目的就是为了克服上述现有技术存在的缺陷而提供一种文旅产业在线交易平台专用的前端组件库，基于该前端组件库进行文旅产业在线交易平台的页面设计时，能够提高显示和交互的丰富性。
5.本发明的目的可以通过以下技术方案来实现：
6.一种文旅产业在线交易平台专用的前端组件库，包括组件配置模块和多个可视化组件，各个可视化组件的属性通过配置文件进行设置，组件配置模块基于各个可视化组件的配置文件读取配置信息以对可视化组件进行实例化，所述可视化组件包括按钮组件、图标组件、自动完成组件、多选框组件、日期选择框组件、单选框组件、选择器组件、日历组件、警告提示组件、对话框组件和进度条组件。
7.进一步的，所述组件配置模块为各个可视化组件与前端web网页提供统一的接口服务从可视化组件的配置文件中读取配置信息，用于实例化相应的可视化组件，组件管理模块也是各个可视化组件之间的接口，使得各个可视化组件能够配合使用。
8.进一步的，所述按钮组件的标签名为button，用于标记操作命令、响应用户鼠标点击行为、触发对应的业务逻辑，按钮组件在配置文件中待设置的属性包括：设置按钮宽度为其父宽度的选项；设置危险按钮样式；设置按钮失效状态样式；设置点击按钮跳转的地址以及链接打开的方式；设置按钮类型样式，包括主要按钮、次要按钮、默认按钮、链接按钮；设置按钮载入状态样式；
9.所述警告提示组件的标签名为alert，用于静态展示具有不同样式的提示性信息，警告提示组件在配置文件中待设置的属性包括：设置是否占用一整行；设置是否显示边框；设置是否显示箭头以及箭头位置，所述箭头位置包括上侧、上左、上右、下测、下左、下右、左
测、左上、左下、右侧、右上和右下；设置警告提示的类型，包括成功、信息、帮助、警告和错误；
10.所述进度条组件的标签名为progress，用于显示操作执行的进度与状态，进度条组件在在配置文件中待设置的属性包括：设置百分比值；设置是否显示进度数值；设置进度条线的宽度；设置类型，包括线型和圆环形；
11.按钮组件或警告提示组件或进度条组件在配置文件中不同的属性设置通过vue.js的渲染函数中的分支判断生成不同的html(hyper text markup language，超级文本标记语言)的dom(document object model，文档对象模型)节点结构与类属性，每个类属性均有与之对应的css(cascading style sheets，层叠样式表)样式，特定的dom与对应的css相结合，从而显示出各种样式形态。
12.进一步的，所述图标组件的标签名为icon，用于展示语义化的矢量图形，图标组件在配置文件中待设置的属性包括：是否有旋转动画；
13.所述图标组件包括多个文旅产业的专用图标，图标组件提供了一套文旅产业平台常用的图标集合，每个图标均由矢量图形svg(scalable vector graphics，可缩放的矢量图形)标签代码构成，引用某个图标组件时，所述图标组件内部则会将其svg标签代码嵌入到对应位置的html的dom结构中，从而显示出该图标组件的图标图像。
14.进一步的，所述自动完成组件的标签名为autocomplete，用于自动补全用户输入信息，自动完成组件在配置文件中待设置的属性包括：失去焦点时，是否自动选中当前高亮选项；设置是否禁用；获取自动完成菜单内容；设置输入框有内容时获得焦点，是否显示选项；设置输入框提示文本；
15.自动完成组件的实施流程如下：
16.a1、开始，页面中显示空白输入框，鼠标点击输入框，触发输入框获得焦点事件；
17.a2、输入框获得焦点事件内部执行：在组件方法中执行打开下拉菜单方法，使用基于http(hypertext transfer protocol，超文本传输协议)协议的网络请求从后台服务器处获取热门数据，并把获取到的数据存储在预定义的hotdata(热门数据)对象内，例如["热门文本1","热门文本2"]；
[0018]
a3、在浏览器本地缓存中查找是否含有历史数据，如有则执行步骤a4，如无则执行步骤a5；
[0019]
a4、将历史数据存储在预定义的historydata(历史数据)对象内，例如["历史文本1","历史文本2"]，利用vue.js(渐进式javascript框架)的双向绑定技术将historydata对象内的历史数据与预设置的历史数据显示模板相绑定，从而在网页上显示出格式化的历史数据文本；
[0020]
a5、利用vue.js的双向绑定技术将hotdata对象内的数据与预设置的热门数据显示模板相绑定，从而在网页上显示出格式化的热门数据文本；
[0021]
a6、键盘输入文本，触发输入框文本改变事件；
[0022]
a7、输入框文本改变事件内部执行：获取输入的文本内容，并将输入的文本内容的数据结构转化成后台接口所需要的格式，通过http请求将格式转换后的文本内容发送给后台接口，等待后台接口返回数据；
[0023]
a8、将显示的历史数据文本与热门数据文本隐藏；后台接口返回对应的列表数据，
将列表数据取出并存放在预定义的listdata(列表数据)对象内，例如["列表文本1","列表文本2"]，利用vue.js的双向绑定技术将listdata对象内的列表数据与预设置的列表数据显示模板相绑定，从而在网页上显示出格式化的由多个列表项组成的列表数据文本；
[0024]
a9、鼠标点击显示出的列表项，触发列表项选择事件；
[0025]
a10、列表项选择事件内部执行：将鼠标点击选中的列表项作为历史数据保存到浏览器本地缓存中，如果浏览器本地缓存中数据较多，则会删除保持时间最早的历史数据；将显示的列表数据文本隐藏，将鼠标点击选中的列表项中的数据取出，将数据结构转化成文本并显示在输入框中；
[0026]
a11、完成。
[0027]
进一步的，所述多选框组件的标签名为checkbox，用于表示两种状态之间的切换，多选框组件在配置文件中待设置的属性包括：设置当前多选框是否选中；设置复选框是否失效状态；设置复选框标签显示文本内容；
[0028]
多选框组件内部使用一个标志变量f1存储当前多选框是否被选择，所述标志变量f1存储“是”或“否”这两种状态，一旦发生触发标志变量改变事件，则改变标志变量f1的状态，进而引发vue.js双向绑定从而重新渲染多选框组件的显示，从而切换显示多选框的选中状态，所述触发标志变量改变事件为鼠标点击或键盘空格或回车键按钮。
[0029]
进一步的，所述日期选择框组件的标签名为datepicker，用于日期格式文本的快捷输入，日期选择框组件在配置文件中待设置的属性包括：设置日期格式；设置选择器类型，包含：单日期选择、日期区间选择；设置同时显示的月份个数；
[0030]
日期选择框组件的实施流程如下：
[0031]
b1、开始，页面中显示日期输入框，单日期选择状态显示1个日期输入框，日期区间选择状态显示2个日期输入框(开始日期与结束日期)；
[0032]
b1、开始，页面中显示日期输入框，单日期选择状态显示1个日期输入框，日期区间选择状态显示2个日期输入框；
[0033]
b2、鼠标点击日期输入框，日期输入框获取到焦点，触发焦点事件；
[0034]
b3、基于配置文件中设置的同时显示的月份个数进行月份显示，为每个月份生成一个月份面板，针对每一个月份面板，生成7*6的二维数组；
[0035]
b4、如果日期输入框中有日期，则以日期输入框中的日期所在月份为起点，如果日期输入框中没有日期，则以当前日期所在月份为起点，在各个月份面板中依次填充各个月份的日期，填充时日期与星期对齐(依据月份不同，可能为：1～31,1～30,1～29,1～28)；
[0036]
b5、获取节假日数据，遍历每一个月份面板中的日期，将日期的数字文本替换为节假日名称；
[0037]
b6、如果在日期区间选择状态下且触发焦点事件的为第二个日期输入框，则执行步骤b7，否则，执行步骤b8；
[0038]
b7、判断第一个日期输入框是否已经输入开始日期，若为是，则将月份面板中早于开始日期的所有日期均设为禁用，不能被选中显示在第二个日期输入框中，执行步骤b8，若为否，直接执行步骤b8；
[0039]
b8、鼠标点击某个日期，将日期所对应的年月日按设置的日期格式(如2021-02-01)显示在日期输入框中；
[0040]
b9、如果在日期区间选择状态下且两个日期输入框中均包含日期，则执行步骤b10，否则，执行步骤b11；
[0041]
b10、判断第二个日期输入框的结束日期是否早于第一个日期输入框的开始日期，若早于，则将结束日期设置为与开始日期相同，执行步骤b11，否则，直接执行步骤b11；
[0042]
b11、完成。
[0043]
进一步的，所述单选框组件的标签名为radio，用于在多个备选项中选择单个选项，单选框组件在配置文件中待设置的属性包括：设置禁用组件；设置显示文本内容；
[0044]
单选框组件内部使用一个标志变量f2存储当前单选框是否被选择，所述标志变量f2存储“是”或“否”这两种状态，一旦发生触发标志变量改变事件，则改变标志变量f2的状态，在一个单选框的标志变量f2值变为“是”后，同组的其他单选框的标志变量f2值均变为“否”，进而引发vue.js双向绑定从而重新渲染单选框组件的显示，从而切换显示单选框的选中状态，所述触发标志变量改变事件为鼠标点击或键盘空格或回车键按钮。
[0045]
进一步的，所述选择器组件的标签名为select，用于在多个备选项中选择单个选项或多个选项，选择器组件在配置文件中待设置的属性包括：设置选择器是否禁用状态；设置选择器是否为多选；设置选择器默认显示文字；设置选择器当前选中的条目；
[0046]
选择器组件的实施流程如下：
[0047]
获取选择器组件的选项数据，利用vue.js双向绑定功能将选项数据与预设置的选项内容模板绑定以生成选项列表，并在选择器组件内部使用selected变量存储被选中的选项，单选情况下selected变量使用字符串类型存储，多选情况下selected变量使用字符串数组存储，使用vue.js将selected变量双向绑定到预设置的选项内容模板，使用vue.js的条件渲染功能，将被选中的选项生成特殊的类型属性，与预定义的css结合显示出高亮选中的样式；
[0048]
鼠标点击选项时，单选的情况下直接将selected变量赋值为当前点击选中的选项的字符串内容，多选的情况下，将当前点击选中的选项的字符串与字符串数组类型的selected变量遍历对比，如果字符串数组中已经存在当前点击选中的选项的字符串，则将当前点击选中的选项的字符串自字符串数组中移除，否则，将当前点击选中的选项的字符串加入到字符串数组中。
[0049]
对于通过vue.js双向绑定的数据，一旦改变数据本身，与其绑定的模板也将会根据最新的数据重新渲染，从而显示当前选中项目的视图。
[0050]
进一步的，所述日历组件的标签名为calendar，用于展示日期相关的数据，包括价格日历、日程计划和节假日；
[0051]
日历组件的实施流程如下：
[0052]
c1、开始，页面中显示日历边框；
[0053]
c2、判断当前时间是否处于上半月，如是，显示当前月份网格，从后台接口获取当前月份数据并显示，如否，显示当前月份及下一个月份的月份网格，隐藏当前月份的上半月份网格，隐藏下一个月份的下半月份网格，从后台接口获取当前月份及下一个月份数据并显示；
[0054]
c3、完成。
[0055]
进一步的，所述对话框组件的标签名为modal，用于在页面保持状态下在页面中打
开一个浮层，显示对应的操作，需要用户处理事务、又不希望打开新页面以至于打断当前工作状态时即处于页面保持状态，对话框组件在配置文件中待设置的属性包括：设置取消按钮属性、文本、按钮类型；设置是否显示遮罩层；设置确认按钮属性、文本、按钮类型；设置标题文本内容；设置宽度；
[0056]
对话框组件内部使用一个标志变量f3存储当前对话框是否被打开，所述标志变量f3存储“是”或“否”这两种状态，并使用vue.js将标志变量f3双向绑定在对话框组件的条件渲染属性上，当标志变量f3设置为“是”时，vue.js会通知浏览器显示对话框组件，否则隐藏对话框组件；对话框组件所需显示的内容使用vue.js的插槽功能在对话框组件的配置文件中进行设置，当对话框组件显示时，插槽中的内容也会一同被vue.js进行渲染并显示。
[0057]
与现有技术相比，本发明通过对文旅产业在线交易平台专有功能的调研与分析归类，设计出低耦合的可满足其特定功能需求的各类可视化组件。并通过配置文件对可视化组件的属性、样式进行个性化配置，可使网站的整体结构更加清晰，同时前端组件与网站后台之间通过接口联系，可以随时编辑显示的内容，提高了网站的可维护性。前端组件针对文旅产业在线交易平台定制的功能契合度高，可提高相关网站开发人员的工作效率。
附图说明
[0058]
图1为本发明的自动完成组件的实施流程图；
[0059]
图2为element中的input输入框和antd中的autocomplete自动完成组件示意图；
[0060]
图3为本发明的自动完成组件示意图；
[0061]
图4为本发明的日期选择框组件的实施流程图；
[0062]
图5为element中的datepicker日期选择器示意图；
[0063]
图6为antd中的datepicker日期选择框示意图；
[0064]
图7为本发明的日期选择框组件示意图；
[0065]
图8为本发明的日历组件的实施流程图；
[0066]
图9为element中的calendar日历示意图；
[0067]
图10为antd中的calendar日历示意图；
[0068]
图11为本发明的日历组件示意图；
[0069]
图12为本发明的带有休假日信息的日历组件示意图；
[0070]
图13为element和antd中的alert警告示意图；
[0071]
图14为本发明的警告提示组件的箭头位置示意图；
[0072]
图15为本发明的警告提示组件的示意图。
具体实施方式
[0073]
下面结合附图和具体实施例对本发明进行详细说明。本实施例以本发明技术方案为前提进行实施，给出了详细的实施方式和具体的操作过程，但本发明的保护范围不限于下述的实施例。
[0074]
实施例1：
[0075]
一种文旅产业在线交易平台专用的前端组件库，包括组件配置模块和多个可视化组件，各个可视化组件的属性通过配置文件进行设置，组件配置模块基于各个可视化组件
的配置文件读取配置信息以对可视化组件进行实例化，可视化组件包括按钮组件、图标组件、自动完成组件、多选框组件、日期选择框组件、单选框组件、选择器组件、日历组件、警告提示组件、对话框组件和进度条组件。
[0076]
其中，组件配置模块为各个可视化组件与前端web网页提供统一的接口服务从可视化组件的配置文件中读取配置信息，用于实例化相应的可视化组件，组件管理模块也是各个可视化组件之间的接口，使得各个可视化组件能够配合使用。
[0077]
下面对各个可视化组件进行说明：
[0078]
(1)按钮组件button
[0079]
按钮组件的标签名为button，用于标记操作命令、响应用户鼠标点击行为、触发对应的业务逻辑，网站编码人员对此组件属性通过配置文件进行设置，包括：设置按钮宽度为其父宽度的选项；设置危险按钮样式；设置按钮失效状态样式；设置点击按钮跳转的地址以及链接打开的方式；设置按钮类型样式，包括主要按钮、次要按钮、默认按钮、链接按钮；设置按钮载入状态样式；
[0080]
按钮组件在配置文件中不同的属性设置通过vue.js的渲染函数中的分支判断生成不同的html(hyper text markup language，超级文本标记语言)的dom(document object model，文档对象模型)节点结构与类属性，每个类属性均有与之对应的css(cascading style sheets，层叠样式表)样式，特定的dom与对应的css相结合，从而显示出各种按钮的样式形态。
[0081]
(2)图标组件icon
[0082]
图标组件的标签名为icon，用于展示语义化的矢量图形，网站编码人员对此组件属性通过配置文件进行设置，包括：是否有旋转动画；
[0083]
图标组件包括多个文旅产业的专用图标，图标组件提供了一套文旅产业平台常用的图标集合，每个图标均由矢量图形svg(scalable vector graphics，可缩放的矢量图形)标签代码构成，引用某个图标组件时，图标组件内部则会将其svg标签代码嵌入到对应位置的html的dom结构中，从而显示出该图标组件的图标图像。
[0084]
(3)自动完成组件autocomplete
[0085]
自动完成组件的标签名为autocomplete，用于自动补全用户输入信息，网站编码人员对此组件属性通过配置文件进行设置，包括：失去焦点时，是否自动选中当前高亮选项；设置是否禁用；获取自动完成菜单内容；设置输入框有内容时获得焦点，是否显示选项；设置输入框提示文本；
[0086]
如图1所示，自动完成组件的实施流程如下：
[0087]
a1、如图3所示，开始，页面中显示空白输入框，鼠标点击输入框，触发输入框获得焦点事件；
[0088]
a2、输入框获得焦点事件内部执行：在组件方法中执行打开下拉菜单方法，使用基于http(hypertext transfer protocol，超文本传输协议)协议的网络请求从后台服务器处获取热门数据，并把获取到的数据存储在预定义的hotdata热门数据对象内，例如["热门文本1","热门文本2"]；
[0089]
a3、在浏览器本地缓存中查找是否含有历史数据，如有则执行步骤a4，如无则执行步骤a5；
[0090]
a4、将历史数据存储在预定义的historydata历史数据对象内，例如["历史文本1","历史文本2"]，利用vue.js(渐进式javascript框架)的双向绑定技术将historydata对象内的历史数据与预设置的历史数据显示模板相绑定，从而在网页上显示出格式化的历史数据文本；
[0091]
a5、利用vue.js的双向绑定技术将hotdata对象内的数据与预设置的热门数据显示模板相绑定，从而在网页上显示出格式化的热门数据文本；
[0092]
a6、如图3所示，键盘输入文本，触发输入框文本改变事件；
[0093]
a7、输入框文本改变事件内部执行：获取输入的文本内容，并将输入的文本内容的数据结构转化成后台接口所需要的格式，通过http请求将格式转换后的文本内容发送给后台接口，等待后台接口返回数据；
[0094]
a8、将显示的历史数据文本与热门数据文本隐藏；后台接口返回对应的列表数据，将列表数据取出并存放在预定义的listdata列表数据对象内，例如["列表文本1","列表文本2"]，利用vue.js的双向绑定技术将listdata对象内的列表数据与预设置的列表数据显示模板相绑定，从而在网页上显示出格式化的由多个列表项组成的列表数据文本；
[0095]
a9、鼠标点击显示出的列表项，触发列表项选择事件；
[0096]
a10、列表项选择事件内部执行：将鼠标点击选中的列表项作为历史数据保存到浏览器本地缓存中，如果浏览器本地缓存中数据较多，则会删除保持时间最早的历史数据；将显示的列表数据文本隐藏，将鼠标点击选中的列表项中的数据取出，将数据结构转化成文本并显示在输入框中；
[0097]
a11、完成。
[0098]
ant design of react中的autocomplete自动完成示意图以及element中的input输入框如图2所示，本技术的自动完成组件如图3所示，本技术除了包含现有通用组件库对应组件的基本功能完成用户输入补全之外，还能方便的定制热门选项界面。用户使用鼠标点击自动完成组件后，在未有文本输入的情况下，首先展示热门选项界面，用户输入内容后以下拉菜单的方式展示相关内容(即列表数据)，热门选项界面完全支持自定义，图示中即为在文旅产业在线交易平台场景下显示热门城市的快速选择界面，此界面与用户输入内容后的自动补全下拉菜单相辅相成，提升用户输入体验。
[0099]
在文旅产业在线交易平台场景下，本技术的自动完成组件用于大量数据列表的输入过程中的自动补全，还可定制热门选项界面，在其中展示历史选择，热门选择等特定信息，改善选择体验，提供了适用于文旅产业的特色化功能。
[0100]
(4)多选框组件checkbox
[0101]
多选框组件的标签名为checkbox，用于表示两种状态之间的切换，网站编码人员对此组件属性通过配置文件进行设置，包括：设置当前多选框是否选中；设置复选框是否失效状态；设置复选框标签显示文本内容；
[0102]
多选框组件内部使用一个标志变量f1存储当前多选框是否被选择，标志变量f1存储“是”或“否”这两种状态，一旦发生触发标志变量改变事件，则改变标志变量f1的状态，进而引发vue.js双向绑定从而重新渲染多选框组件的显示，从而切换显示多选框的选中状态，触发标志变量改变事件为鼠标点击或键盘空格或回车键按钮。
[0103]
(5)日期选择框组件datepicker
[0104]
日期选择框组件的标签名为datepicker，用于日期格式文本的快捷输入，网站编码人员对此组件属性通过配置文件进行设置，包括：设置日期格式；设置选择器类型，包含：单日期选择、日期区间选择；设置同时显示的月份个数；
[0105]
如图4所示，日期选择框组件的实施流程如下：
[0106]
b1、开始，页面中显示日期输入框，单日期选择状态显示1个日期输入框，日期区间选择状态显示2个日期输入框，分别为开始日期与结束日期；
[0107]
b1、开始，页面中显示日期输入框，单日期选择状态显示1个日期输入框，日期区间选择状态显示2个日期输入框；
[0108]
b2、鼠标点击日期输入框，日期输入框获取到焦点，触发焦点事件；
[0109]
b3、基于配置文件中设置的同时显示的月份个数进行月份显示，如图7所示，同时显示4个月份，为每个月份生成一个月份面板，针对每一个月份面板，生成7*6的二维数组；
[0110]
b4、如果日期输入框中有日期，则以日期输入框中的日期所在月份为起点，如果日期输入框中没有日期，则以当前日期所在月份为起点，在各个月份面板中依次填充各个月份的日期，填充时日期与星期对齐，依据月份不同，可能为：1～31,1～30,1～29,1～28；
[0111]
b5、获取节假日数据，遍历每一个月份面板中的日期，将日期的数字文本替换为节假日名称；
[0112]
b6、如果在日期区间选择状态下且触发焦点事件的为第二个日期输入框，则执行步骤b7，否则，执行步骤b8；
[0113]
b7、判断第一个日期输入框是否已经输入开始日期，若为是，则将月份面板中早于开始日期的所有日期均设为禁用，不能被选中显示在第二个日期输入框中，执行步骤b8，若为否，直接执行步骤b8；
[0114]
b8、鼠标点击某个日期，将日期所对应的年月日按设置的日期格式(如2021-02-01)显示在日期输入框中；
[0115]
b9、如果在日期区间选择状态下且两个日期输入框中均包含日期，则执行步骤b10，否则，执行步骤b11；
[0116]
b10、判断第二个日期输入框的结束日期是否早于第一个日期输入框的开始日期，若早于，则将结束日期设置为与开始日期相同，执行步骤b11，否则，直接执行步骤b11；
[0117]
b11、完成。
[0118]
element中的datepicker日期选择器如图5所示，ant design of react中的datepicker日期选择框如图6所示，本技术的日期选择框组件如图7所示，除了支持现有通用组件的日期选择、日期区间选择外，还支持配置显示节假日信息，上图即为文旅产业在线交易平台场景下常见的含节假日展示的日期选择框，日期选择框亦可以配置同时展示的月份数量，如图7即为配置同时展示4个月的日期。
[0119]
在文旅产业在线交易平台场景下，本技术的日期选择框组件用于选择关键日期，默认显示法定节假日，其还支持配置显示月份数量，得以灵活的根据需求进行显示，在空间足够时，显示较多的月份，减少用户切换月份次数，提升显示跨月区间数据的可读性。
[0120]
(6)单选框组件radio
[0121]
单选框组件的标签名为radio，用于在多个备选项中选择单个选项，网站编码人员对此组件属性通过配置文件进行设置，包括：设置禁用组件；设置显示文本内容；
[0122]
单选框组件内部使用一个标志变量f2存储当前单选框是否被选择，标志变量f2存储“是”或“否”这两种状态，一旦发生触发标志变量改变事件，则改变标志变量f2的状态，在一个单选框的标志变量f2值变为“是”后，同组的其他单选框的标志变量f2值均变为“否”，进而引发vue.js双向绑定从而重新渲染单选框组件的显示，从而切换显示单选框的选中状态，触发标志变量改变事件为鼠标点击或键盘空格或回车键按钮。
[0123]
(7)选择器组件select
[0124]
选择器组件的标签名为select，用于在多个备选项中选择单个选项或多个选项，网站编码人员对此组件属性通过配置文件进行设置，包括：设置选择器是否禁用状态；设置选择器是否为多选；设置选择器默认显示文字；设置选择器当前选中的条目；
[0125]
选择器组件的实施流程如下：
[0126]
获取选择器组件的选项数据，利用vue.js双向绑定功能将选项数据与预设置的选项内容模板绑定以生成选项列表，并在选择器组件内部使用selected变量存储被选中的选项，单选情况下selected变量使用字符串类型存储，多选情况下selected变量使用字符串数组存储，使用vue.js将selected变量双向绑定到预设置的选项内容模板，使用vue.js的条件渲染功能，将被选中的选项生成特殊的类型属性，与预定义的css结合显示出高亮选中的样式；
[0127]
鼠标点击选项时，单选的情况下直接将selected变量赋值为当前点击选中的选项的字符串内容，多选的情况下，将当前点击选中的选项的字符串与字符串数组类型的selected变量遍历对比，如果字符串数组中已经存在当前点击选中的选项的字符串，则将当前点击选中的选项的字符串自字符串数组中移除，否则，将当前点击选中的选项的字符串加入到字符串数组中。
[0128]
对于通过vue.js双向绑定的数据，一旦改变数据本身，与其绑定的模板也将会根据最新的数据重新渲染，从而显示当前选中项目的视图。
[0129]
(8)日历组件calendar
[0130]
日历组件的标签名为calendar，用于展示日期相关的数据，包括价格日历、日程计划和节假日；
[0131]
如图8所示，日历组件的实施流程如下：
[0132]
c1、开始，页面中显示日历边框；
[0133]
c2、判断当前时间是否处于上半月，如是，显示当前月份网格，从后台接口获取当前月份数据并显示，如否，显示当前月份及下一个月份的月份网格，隐藏当前月份的上半月份网格，隐藏下一个月份的下半月份网格，从后台接口获取当前月份及下一个月份数据并显示；
[0134]
c3、完成。
[0135]
element中的calendar日历如图9所示，ant design of react中的calendar日历如图10所示，本技术的日历组件如图11所示，除了支持通用日历组件的基本的日历功能外，还能够在当前月份的日期为下半月时，同时展示当前月份下半月与下个月的上半月的数据，图11为文旅产业交易平台场景下的一个例子，首屏数据分离展示可避免展示过多的上半月过期数据，充分利用首屏空间展示有效数据。
[0136]
文旅产业与节假日、休息日息息相关，考虑休假日后的日历组件如图12所示。
[0137]
在文旅产业在线交易平台场景下，本技术的日历组件用于展示日期相关的数据，其可以配置在当前时间为下半月时，同时展示当前月份的下半月与下一月份的上半月的数据，避免显示过期数据并节省空间。
[0138]
(9)警告提示组件alert
[0139]
警告提示组件的标签名为alert，用于静态展示具有不同样式的提示性信息，网站编码人员对此组件属性通过配置文件进行设置，包括：设置是否占用一整行；设置是否显示边框；设置是否显示箭头以及箭头位置，如图14所示，箭头位置包括上侧、上左、上右、下测、下左、下右、左测、左上、左下、右侧、右上和右下；设置警告提示的类型，包括成功、信息、帮助、警告和错误；
[0140]
警告提示组件的实现方式与按钮组件相同，警告提示组件在配置文件中不同的属性设置通过vue.js的渲染函数中的分支判断生成不同的html(hyper text markup language，超级文本标记语言)的dom(document object model，文档对象模型)节点结构与类属性，每个类属性均有与之对应的css(cascading style sheets，层叠样式表)样式，特定的dom与对应的css相结合，从而显示出各种样式形态。
[0141]
图13为element中的alert警告和ant design of react中的alert警告提示，图14为本技术的箭头位置示意图，图15为在登录界面显示警告提示的示意图；除了支持现有通用组件的基本功能(如图标、多种样式、可关闭)外，本技术还支持可配置的12个方向的小箭头显示，图14即为文旅产业交易平台场景下含箭头的警告提示的例子，使用箭头指向输入框可以引导用户进行对应的操作。
[0142]
(10)对话框组件modal
[0143]
对话框组件的标签名为modal，用于在页面保持状态下在页面中打开一个浮层，显示对应的操作，需要用户处理事务、又不希望打开新页面以至于打断当前工作状态时即处于页面保持状态，网站编码人员对此组件属性通过配置文件进行设置，包括：设置取消按钮属性、文本、按钮类型；设置是否显示遮罩层；设置确认按钮属性、文本、按钮类型；设置标题文本内容；设置宽度；
[0144]
对话框组件内部使用一个标志变量f3存储当前对话框是否被打开，标志变量f3存储“是”或“否”这两种状态，并使用vue.js将标志变量f3双向绑定在对话框组件的条件渲染属性上，当标志变量f3设置为“是”时，vue.js会通知浏览器显示对话框组件，否则隐藏对话框组件；对话框组件所需显示的内容使用vue.js的插槽功能在对话框组件的配置文件中进行设置，当对话框组件显示时，插槽中的内容也会一同被vue.js进行渲染并显示。
[0145]
(11)进度条组件progress
[0146]
进度条组件的标签名为progress，用于显示操作执行的进度与状态，网站编码人员对此组件属性通过配置文件进行设置，包括：设置百分比值；设置是否显示进度数值；设置进度条线的宽度；设置类型，包括线型和圆环形；
[0147]
进度条组件的实现方式与按钮组件相同，进度条组件在配置文件中不同的属性设置通过vue.js的渲染函数中的分支判断生成不同的html(hyper text markup language，超级文本标记语言)的dom(document object model，文档对象模型)节点结构与类属性，每个类属性均有与之对应的css(cascading style sheets，层叠样式表)样式，特定的dom与对应的css相结合，从而显示出各种样式形态。
[0148]
本发明设计了针对文旅产业在线交易平台的专用组件库，其中，自动完成组件增加了定制热门选项界面，商家或服务提供者可以定制吸引用户的热门选项，用户能够以热门选项为参考，用户体验也得到了提高；日期选择框组件可以同时显示多个月份，内置了节假日显示，用户进行日期选择时更加方便；日历组件可以自适应调整显示的月份数量，当前日期为上半月时，显示本月的日历，当前日期为下半月时，显示本月的下半月日历以及下一个月份的上半月日历，充分利用首屏空间展示有效数据。
[0149]
以上详细描述了本发明的较佳具体实施例。应当理解，本领域的普通技术人员无需创造性劳动就可以根据本发明的构思作出诸多修改和变化。因此，凡本技术领域中技术人员依本发明的构思在现有技术的基础上通过逻辑分析、推理或者有限的实验可以得到的技术方案，皆应在由权利要求书所确定的保护范围内。