[发明专利]基于Vue框架和CSS变量的CSS动态编程方法

说明书

本发明公开了基于Vue框架和CSS变量的CSS动态编程方法，涉及计算机动态编程领域，包括如下步骤：步骤1：通过事件监听，获取交互数据，使用CSS变量，将交互数据注册为通用变量；步骤2：在Vue框架的组件内部通过Vue自定义指令功能注册私有变量；步骤3：在CSS中使用步骤1和步骤2中注册的变量，即实现了动态编程。本发明通过利用Vue框架的自定义指令功能，以贴合CSS变量自身优先级策略的方式，将组件与CSS变量的关联过程封装在指令内，然后在CSS中使用var()、counter()等方法提取变量，从而实现了将数据传输到CSS的效果，即可实现CSS动态编程。

技术领域

本发明涉及计算机动态编程领域，具体涉及基于Vue框架和CSS变量的CSS动态编程方法。

背景技术

目前,针对CSS的动态编程需求，实际应用中，主要方式有两种：第一种方法是使用JavaScript直接对CSS进行编辑。第二种方法是将需要的CSS内容提前写好，然后通过CSS选择器组织管理起来，当需要改变CSS时，通过使用JavaScript编辑html元素匹配到相应的CSS选择器，就变相的实现动态编程的效果。但是现有技术在实际使用中存在如下的缺点：

第一种方法，即使用JavaScript直接编辑CSS样式时，往往需要在业务代码中加入许多与业务逻辑不相关的代码，从而导致代码组织度下降、不简洁，且由于通过js直接操作CSS带来的额外负担，还会导致性能下降。

第二种方法通过匹配CSS选择器切换CSS样式，则存在开发成本高、冗余代码多、优先级控制难度高的问题，所以现有的方法均不能满足实际的需求。

发明内容

本发明的目的在于：为了解决上述技术问题，本发明提供了基于Vue框架和CSS变量的CSS动态编程方法，能够不需要多种CSS选择器，且不直接通过JavaScript对CSS进行编程，即可实现动态编程。。

本发明采用的技术方案如下：

基于Vue框架和CSS变量的CSS动态编程方法，包括以下步骤：

步骤1：通过事件监听，获取交互数据，使用CSS变量，将交互数据注册为通用变量；

步骤2：在Vue框架的组件内部通过Vue自定义指令功能注册私有变量；

步骤3：在CSS中使用步骤1和步骤2中注册的变量，即实现了动态编程。

进一步地，所述步骤1具体包括如下步骤：

步骤1.1：使用JavaScript监听鼠标的点击、移动、滚轮事件以及键盘的按下、按住事件；

步骤1.2：将步骤1.1中收集到的被鼠标点击的元素信息、鼠标坐标位置以及键盘按键信息、通过CSS变量注册功能注册到root中，成为通用变量。

进一步地，所述步骤2具体包括如下步骤：

步骤2.1：使用Vue自定义指令功能，创建并注册私有变量注册指令；

步骤2.2：在Vue框架的组件上使用步骤2.1中注册的指令，注册当前组件的私有变量。

进一步地，所述通用变量为，所有Dom元素都可以使用的变量。

进一步地，所述私有变量为，只有发起变量注册的组件才能够使用的变量。

本发明的有益效果如下：

1.本发明通过利用Vue框架下的自定义功能中的dom元素可以自由编辑的特性，从而通过使用JavaScript将CSS变量写入到dom元素的style属性上，再采用Var()、counter()等方法进行获取变量值，通过在CSS中使用传入的变量，而实现将数据传输到CSS的效果，即可实现CSS动态编程。