CN111273984A - 一种数值控件的扩展方法、存储介质及终端设备 - Google Patents
一种数值控件的扩展方法、存储介质及终端设备 Download PDFInfo
- Publication number
- CN111273984A CN111273984A CN202010064943.6A CN202010064943A CN111273984A CN 111273984 A CN111273984 A CN 111273984A CN 202010064943 A CN202010064943 A CN 202010064943A CN 111273984 A CN111273984 A CN 111273984A
- Authority
- CN
- China
- Prior art keywords
- numerical control
- data
- numerical
- displayed
- extending
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 44
- 230000000694 effects Effects 0.000 claims description 14
- 238000004806 packaging method and process Methods 0.000 claims description 3
- 238000010586 diagram Methods 0.000 description 6
- 238000004891 communication Methods 0.000 description 4
- 230000006870 function Effects 0.000 description 3
- 230000008569 process Effects 0.000 description 2
- 230000008859 change Effects 0.000 description 1
- 239000003086 colorant Substances 0.000 description 1
- 230000007812 deficiency Effects 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 230000001151 other effect Effects 0.000 description 1
- 238000012545 processing Methods 0.000 description 1
- 238000009877 rendering Methods 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
- 230000001052 transient effect Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/36—Software reuse
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本发明公开了一种数值控件的扩展方法、存储介质及终端设备，其包括：当接收到数据展示指令时，获取待展示的数据；根据预先封装好的数值控件来显示所述待展示的数据。本发明通过预先封装好的数值控件，从而可以根据待展示的数据来灵活的为数值控件配置各种样式，以及文字和数值的位置关系，这样，不仅满足了项目的需求，还给用户带来更好的使用体验。
Description
技术领域
本发明涉及计算机技术领域，特别涉及一种数值控件的扩展方法、存储介质及终端设备。
背景技术
目前，在前端界面显示上，对于显示数值以及对应名称的组件都有非常多，但都是对其进行多重引用，这样，对于不同的显示方式又必须重新设置新的样式或者开发新的组件，不能做到同一控件的复用。而且，vue框架默认显示数值的控件无法设置显示效果以及样式，也不能设置显示文字和数字的位置关系，从而系统默认的数值控件不能灵活的为数值控件配置各种样式，以及文字和数值的位置关系等，这样，不仅无法满足项目的需求，还给用户带来不好的使用体验。
因而现有技术还有待改进和提高。
发明内容
本发明要解决的技术问题在于，针对现有技术的不足，提供一种数值控件的扩展方法、存储介质及终端设备，以解决现有技术中数值控件显示不美观、且不能灵活改变样式等的问题。
为了解决上述技术问题，本发明所采用的技术方案如下：
一种数值控件的扩展方法，其包括：
当接收到数据展示指令时，获取待展示的数据；
根据预先封装好的数值控件来显示所述待展示的数据。
所述的数值控件的扩展方法，其中，所述的当接收到数据展示指令时，获取待展示的数据之前还包括：
预先通过VUE框架对可复用的公共组件进行封装，得到封装好的数值控件。
所述的数值控件的扩展方法，其中，所述的预先通过VUE框架对可复用的公共组件进行封装，得到封装好的数值控件具体为：
预先通过VUE框架对可复用的公共组件进行封装，并在控件中写一个空的slot，得到封装好的数值控件。
所述的数值控件的扩展方法，其中，所述的待展示的数据至少包括名称以及数值。
所述的数值控件的扩展方法，其中，所述的待展示的数据还包括位置关系，其中，所述位置关系为名称和数值的位置信息。
所述的数值控件的扩展方法，其中，所述的根据预先封装好的数值控件来显示所述待展示的数据具体包括：
获取所述待展示的数据包含的名称、数值以及位置关系；
根据预先封装好的数值控件以及位置关系来显示所述名称和数值。
所述的数值控件的扩展方法，其中，所述的封装好的数值控件配置有多种样式。
所述的数值控件的扩展方法，其中，所述的待展示的数据还包括图片的路径，所述图片的路径用于显示数值控件的显示效果。
一种计算机可读存储介质，其中，所述计算机可读存储介质存储有一个或者多个程序，所述一个或者多个程序可被一个或者多个处理器执行，以实现如上意一项所述的数值控件的扩展方法中的步骤。
一种终端设备，其特征在于，包括：处理器和存储器;所述存储器上存储有可被所述处理器执行的计算机可读程序；所述处理器执行所述计算机可读程序时实现如上任意一项所述的数值控件的扩展方法中的步骤。
有益效果：与现有技术相比，本发明提供了一种数值控件的扩展方法、存储介质及终端设备，其包括：当接收到数据展示指令时，获取待展示的数据；根据预先封装好的数值控件来显示所述待展示的数据。本发明通过预先封装好的数值控件，从而可以根据待展示的数据来灵活的为数值控件配置各种样式，以及文字和数值的位置关系，这样，不仅满足了项目的需求，还给用户带来更好的使用体验。
附图说明
图1为本发明提供的数值控件的扩展方法的流程图。
图2为本发明提供的数值控件的效果图。
图3为本发明提供的数值控件的扩展方法中步骤S200的流程图。
图4为本发明提供的终端设备较佳实施例的结构原理图。
具体实施方式
本发明提供一种数值控件的扩展方法、存储介质及终端设备，为使本发明的目的、技术方案及效果更加清楚、明确，以下参照附图并举实施例对本发明进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本发明，并不用于限定本发明。
本技术领域技术人员可以理解，除非特意声明，这里使用的单数形式“一”、“一个”、“所述”和“该”也可包括复数形式。应该进一步理解的是，本发明的说明书中使用的措辞“包括”是指存在所述特征、整数、步骤、操作、元件和/或组件，但是并不排除存在或添加一个或多个其他特征、整数、步骤、操作、元件、组件和/或它们的组。应该理解，当我们称元件被“连接”或“耦接”到另一元件时，它可以直接连接或耦接到其他元件，或者也可以存在中间元件。此外，这里使用的“连接”或“耦接”可以包括无线连接或无线耦接。这里使用的措辞“和/或”包括一个或更多个相关联的列出项的全部或任一单元和全部组合。
本技术领域技术人员可以理解，除非另外定义，这里使用的所有术语(包括技术术语和科学术语)，具有与本发明所属领域中的普通技术人员的一般理解相同的意义。还应该理解的是，诸如通用字典中定义的那些术语，应该被理解为具有与现有技术的上下文中的意义一致的意义，并且除非像这里一样被特定定义，否则不会用理想化或过于正式的含义来解释。
下面结合附图，通过对实施例的描述，对发明内容作进一步说明。
请参照图1，图1为本发明提供的数值控件的扩展方法较佳实施例的流程图。所述方法包括：
S100、当接收到数据展示指令时，获取待展示的数据。
具体地，本发明预先通过VUE框架对可复用的公共组件进行封装，得到封装好的数值控件。所述封装好的数值控件可方便用户在多个页面引用，这样不用再每个页面都需要处理业务逻辑，只需要在父组件（最终在界面上显示的组件，里面可以包括导入其他组件的使用）中配置待展示的数据，这样，在使用控件时只接受父组件的参数，返回给父组件需要呈现的值，也能根据当前的组件配置好样式，封装好的的控件可以用于其他封装好的可复用的公共组件或者直接导入用于父组件，可选择已经封装好的四种不同数值与名称显示位置，即数值在文字的上方、下方、左方、右方，满足不同的显示效果。
进一步，所述的预先通过VUE框架对可复用的公共组件进行封装，得到封装好的数值控件具体为：
预先通过VUE框架对可复用的公共组件进行封装，并在控件中写一个空的slot（插槽），得到封装好的数值控件。
具体地，插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot>表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。这样，在控件中将各种显示的方式设置好类型，在引用控件的时候设置好此页面想要呈现的效果类型，配置好CSS样式可添加背景图以及调整显示位置，再通过设置好插槽内容（在导入组件的地方插入想呈现的其他效果）。
进一步，封装此可复用公共组件，先在控件中写一个空的slot，接下来通过vue的v-show属性，根据条件展示元素，因为带有v-show的元素始终会被渲染并保留在DOM中有更好的初始渲染开销，所以使用v-show属性可以非常频繁地进行切换；
在带有v-show的div中写数值和标题的HTML模板（{{}}），用于输出数值和标题函数的返回值，使用vue的计算属性将数值和标题函数所得到的值进行返回，并在使用组件时未定义参数的情况进行默认值的返回，这样不会在无数据的情况下不显示东西；对每种显示的方式以及数值和标题的CSS进行初始的配置，使其可以在使用组件时可以进一步根据需求配置。
使用空slot即是当无需要插槽的内容时，可以不对其进行渲染；如果有需要放在组件中的内容时，可以在使用组件时在里面灵活的写入需要扩展的内容一同与组件渲染出来。
本实施例中，所述的待展示的数据至少包括名称以及数值；所述待展示的数据还包括位置关系，其中，所述位置关系为名称和数值的位置信息。
具体地，所述待展示的数据包含singleData属性，title属性，verticalType属性；其中，所述singleData为数值控件上显示的数值数据，所述title属性为数值控件上显示的名称，所述verticalType为数值控件上数值数据与显示的名称的位置关系，以图2为例，图2为本发明提供的数值控件的效果图。“已办理”为显示的名称，“34”为数值控件上显示的数值数据，显示方式为valueBottom，即数值在名称的下方，并且，由于此处应有一个logo标志，所以使用了插槽内容，插入了一张logo标志图。显示的效果如图2所示。
相应的，所述的待展示的数据还包括图片的路径，所述图片的路径用于显示数值控件的显示效果。
具体地，如图2所示，使用VUE插槽方法，可在父组件中使用时可以插入与设计图一样设计好的显示效果例如gif图、logo图，如果不使用插槽，则显示出的是原始控件封装时的显示效果。在父组件中配置好相对应名称与传入的数值，支持在父组件中配置数据，这样可以在任意界面复用组件都可以配置不同数据。
S200、根据预先封装好的数值控件来显示所述待展示的数据。
本实施例的一个实现方式中，如图3所述，图3为本发明提供的数值控件的扩展方法中步骤S200的流程图。相应的，所述的根据预先封装好的数值控件来显示所述待展示的数据具体包括：
S201、获取所述待展示的数据包含的名称、数值以及位置关系；
S202、根据预先封装好的数值控件以及位置关系来显示所述名称和数值。
具体地，所述待展示的数据包含singleData数值，title名称，verticalType位置关系；其中，所述singleData为数值控件上显示的数值数据，所述title属性为数值控件上显示的名称，所述verticalType为数值控件上数值数据与显示的名称的位置关系，以图2为例，图2为本发明提供的数值控件的效果图。“已办理”为显示的名称，“34”为数值控件上显示的数值数据，显示方式为valueBottom，即数值在名称的下方，并且，由于此处应有一个logo标志，所以使用了插槽内容，插入了一张logo标志图。显示的效果如图2所示。
本实施例的一个实现方式中，所述的封装好的数值控件配置有多种样式。
具体地，所述多种样式可以是显示文字以及数值的字体、字体大小以及字体颜色等。事件对应的css样式和插槽样式可以统一在父组件配置，这样不会改变其他使用了此控件的其他组件的样式，样式风格可以根据不同的需求调整，使数值控件显示的更加美观，同时也满足样式的需求。
本发明还提供了一种计算机可读存储介质，所述计算机可读存储介质存储有一个或者多个程序，所述一个或者多个程序可被一个或者多个处理器执行，以实现上述实施例所述的数值控件的扩展方法中的步骤。
本发明还提供了一种终端设备，如图4所示，其包括至少一个处理器（processor）20；显示屏21；以及存储器（memory）22，还可以包括通信接口（Communications Interface）23和总线24。其中，处理器20、显示屏21、存储器22和通信接口23可以通过总线24完成相互间的通信。显示屏21设置为显示初始设置模式中预设的用户引导界面。通信接口23可以传输信息。处理器20可以调用存储器22中的逻辑指令，以执行上述实施例中的方法。
此外，上述的存储器22中的逻辑指令可以通过软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。
存储器22作为一种计算机可读存储介质，可设置为存储软件程序、计算机可执行程序，如本公开实施例中的方法对应的程序指令或模块。处理器30通过运行存储在存储器22中的软件程序、指令或模块，从而执行功能应用以及数据处理，即实现上述实施例中的方法。
存储器22可包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序；存储数据区可存储根据终端设备的使用所创建的数据等。此外，存储器22可以包括高速随机存取存储器，还可以包括非易失性存储器。例如，U盘、移动硬盘、只读存储器(Read-Only Memory，ROM)、随机存取存储器(Random Access Memory，RAM)、磁碟或者光盘等多种可以存储程序代码的介质，也可以是暂态存储介质。
此外，上述存储介质以及终端设备中的多条指令处理器加载并执行的具体过程在上述方法中已经详细说明，在这里就不再一一陈述。
综上所述，本发明提供了一种数值控件的扩展方法、存储介质及终端设备，所述方法包括：当接收到数据展示指令时，获取待展示的数据；根据预先封装好的数值控件来显示所述待展示的数据。本发明通过预先封装好的数值控件，从而可以根据待展示的数据来灵活的为数值控件配置各种样式，以及文字和数值的位置关系，这样，不仅满足了项目的需求，还给用户带来更好的使用体验。
最后应说明的是：以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。
Claims (10)
1.一种数值控件的扩展方法，其特征在于，其包括：
当接收到数据展示指令时，获取待展示的数据；
根据预先封装好的数值控件来显示所述待展示的数据。
2.根据权利要求1所述的数值控件的扩展方法，其特征在于，所述的当接收到数据展示指令时，获取待展示的数据之前还包括：
预先通过VUE框架对可复用的公共组件进行封装，得到封装好的数值控件。
3.根据权利要求2所述的数值控件的扩展方法，其特征在于，所述的预先通过VUE框架对可复用的公共组件进行封装，得到封装好的数值控件具体为：
预先通过VUE框架对可复用的公共组件进行封装，并在控件中写一个空的slot，得到封装好的数值控件。
4.根据权利要求2所述的数值控件的扩展方法，其特征在于，所述的待展示的数据至少包括名称以及数值。
5.根据权利要求4所述的数值控件的扩展方法，其特征在于，所述的待展示的数据还包括位置关系，其中，所述位置关系为名称和数值的位置信息。
6.根据权利要求5所述的数值控件的扩展方法，其特征在于，所述的根据预先封装好的数值控件来显示所述待展示的数据具体包括：
获取所述待展示的数据包含的名称、数值以及位置关系；
根据预先封装好的数值控件以及位置关系来显示所述名称和数值。
7.根据权利要求2所述的数值控件的扩展方法，其特征在于，所述的封装好的数值控件配置有多种样式。
8.根据权利要求1所述的数值控件的扩展方法，其特征在于，所述的待展示的数据还包括图片的路径，所述图片的路径用于显示数值控件的显示效果。
9.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有一个或者多个程序，所述一个或者多个程序可被一个或者多个处理器执行，以实现如权利要求1～8任意一项所述的数值控件的扩展方法中的步骤。
10.一种终端设备，其特征在于，包括：处理器和存储器；所述存储器上存储有可被所述处理器执行的计算机可读程序；所述处理器执行所述计算机可读程序时实现如权利要求1～8任意一项所述的数值控件的扩展方法中的步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010064943.6A CN111273984A (zh) | 2020-01-20 | 2020-01-20 | 一种数值控件的扩展方法、存储介质及终端设备 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010064943.6A CN111273984A (zh) | 2020-01-20 | 2020-01-20 | 一种数值控件的扩展方法、存储介质及终端设备 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN111273984A true CN111273984A (zh) | 2020-06-12 |
Family
ID=70999019
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010064943.6A Pending CN111273984A (zh) | 2020-01-20 | 2020-01-20 | 一种数值控件的扩展方法、存储介质及终端设备 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111273984A (zh) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112379881A (zh) * | 2020-12-02 | 2021-02-19 | 四川长虹电器股份有限公司 | 基于Vue的弹框组件实现方法及装置 |
| CN114416250A (zh) * | 2022-01-14 | 2022-04-29 | 百果园技术(新加坡)有限公司 | 页面显示控制方法、装置、设备及存储介质 |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108491205A (zh) * | 2018-03-22 | 2018-09-04 | 北京焦点新干线信息技术有限公司 | 一种基于组件树的前端网页开发方法及系统 |
| US20190018555A1 (en) * | 2015-12-31 | 2019-01-17 | Huawei Technologies Co., Ltd. | Method for displaying menu on user interface and handheld terminal |
| CN109697254A (zh) * | 2018-12-04 | 2019-04-30 | 国云科技股份有限公司 | 一种前端页面图表组件化的方法 |
| CN110309475A (zh) * | 2019-06-28 | 2019-10-08 | 百度在线网络技术（北京）有限公司 | 一种页面展现方法、装置、终端设备及存储介质 |
| CN110597501A (zh) * | 2019-08-09 | 2019-12-20 | 苏宁金融科技(南京)有限公司 | 一种基于强静态脚本语言的自然语言编程方法及装置 |
-
2020
- 2020-01-20 CN CN202010064943.6A patent/CN111273984A/zh active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20190018555A1 (en) * | 2015-12-31 | 2019-01-17 | Huawei Technologies Co., Ltd. | Method for displaying menu on user interface and handheld terminal |
| CN108491205A (zh) * | 2018-03-22 | 2018-09-04 | 北京焦点新干线信息技术有限公司 | 一种基于组件树的前端网页开发方法及系统 |
| CN109697254A (zh) * | 2018-12-04 | 2019-04-30 | 国云科技股份有限公司 | 一种前端页面图表组件化的方法 |
| CN110309475A (zh) * | 2019-06-28 | 2019-10-08 | 百度在线网络技术（北京）有限公司 | 一种页面展现方法、装置、终端设备及存储介质 |
| CN110597501A (zh) * | 2019-08-09 | 2019-12-20 | 苏宁金融科技(南京)有限公司 | 一种基于强静态脚本语言的自然语言编程方法及装置 |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112379881A (zh) * | 2020-12-02 | 2021-02-19 | 四川长虹电器股份有限公司 | 基于Vue的弹框组件实现方法及装置 |
| CN114416250A (zh) * | 2022-01-14 | 2022-04-29 | 百果园技术(新加坡)有限公司 | 页面显示控制方法、装置、设备及存储介质 |
| CN114416250B (zh) * | 2022-01-14 | 2023-11-24 | 百果园技术(新加坡)有限公司 | 页面显示控制方法、装置、设备及存储介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10726195B2 (en) | Filtered stylesheets | |
| CN106339226B (zh) | 一种网页页面的展示方法和页面展示装置 | |
| US11216253B2 (en) | Application prototyping tool | |
| CN102609256B (zh) | 一种基于网页的动态图表生成方法 | |
| CN112363794B (zh) | 一种前端列表类组件的渲染方法及电子设备 | |
| CN107832038A (zh) | 组件库的实现方法及装置 | |
| KR20150079867A (ko) | Html5-프로토콜 기반 웹페이지 표시 방법 및 장치 | |
| CN104820589A (zh) | 一种动态适配网页的方法及其装置 | |
| CN111273984A (zh) | 一种数值控件的扩展方法、存储介质及终端设备 | |
| CN108121539B (zh) | 组件处理方法和装置 | |
| CN106708506A (zh) | 一种从视觉上优化Android应用启动速度的方法及装置 | |
| CN105956133B (zh) | 智能终端上显示文件的方法及装置 | |
| CN105549817A (zh) | 字体包的生成方法、装置和图形的展示方法、装置 | |
| CN104714802A (zh) | 一种显示html元素的附加信息的方法和装置 | |
| CN111427574B (zh) | 列表自动翻页轮播组件实现方法及装置、设备、介质 | |
| CN112329412A (zh) | 动态控制基于前端技术表格列的方法及装置 | |
| CN102902658A (zh) | 一种炫彩字显示方法和装置 | |
| CN113449226B (zh) | 一种表格创建方法 | |
| EP2310963B1 (en) | Information output apparatus, information output method, and recording medium | |
| CN109284481B (zh) | 一种提示文本处理方法、装置及计算机可读存储介质 | |
| CN113807048B (zh) | 一种自适应文字宽度的方法、装置、终端及存储介质 | |
| CN111291283A (zh) | 基于vue的导航条显示方法、存储介质及终端设备 | |
| CN113343136B (zh) | 一种展示信息的方法及装置 | |
| CN111274306A (zh) | 一种基于象形图组件的数据展示方法、系统及储存介质 | |
| CN112416268B (zh) | 一种激光打印策略代码显示方法及相关装置 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20200612 |
|
| RJ01 | Rejection of invention patent application after publication |