基于Vue框架和CSS变量的CSS动态编程方法技术

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

【技术实现步骤摘要】
基于Vue框架和CSS变量的CSS动态编程方法


[0001]本专利技术涉及计算机动态编程领域，具体涉及基于Vue框架和CSS变量的CSS动态编程方法。

技术介绍

[0002]目前,针对CSS的动态编程需求，实际应用中，主要方式有两种：第一种方法是使用JavaScript直接对CSS进行编辑。第二种方法是将需要的CSS内容提前写好，然后通过CSS选择器组织管理起来，当需要改变CSS时，通过使用JavaScript编辑html元素匹配到相应的CSS选择器，就变相的实现动态编程的效果。但是现有技术在实际使用中存在如下的缺点：
[0003]第一种方法，即使用JavaScript直接编辑CSS样式时，往往需要在业务代码中加入许多与业务逻辑不相关的代码，从而导致代码组织度下降、不简洁，且由于通过js直接操作CSS带来的额外负担，还会导致性能下降。
[0004]第二种方法通过匹配CSS选择器切换CSS样式，则存在开发成本高、冗余代码多、优先级控制难度高的问题，所以现有的方法均不能满足实际的需求。

技术实现思路

[0005]本专利技术的目的在于：为了解决上述技术问题，本专利技术提供了基于Vue框架和CSS变量的CSS动态编程方法，能够不需要多种CSS选择器，且不直接通过JavaScript对CSS进行编程，即可实现动态编程。。
[0006]本专利技术采用的技术方案如下：
[0007]基于Vue框架和CSS变量的CSS动态编程方法，包括以下步骤：
[0008]步骤1：通过事件监听，获取交互数据，使用CSS变量，将交互数据注册为通用变量；
[0009]步骤2：在Vue框架的组件内部通过Vue自定义指令功能注册私有变量；
[0010]步骤3：在CSS中使用步骤1和步骤2中注册的变量，即实现了动态编程。
[0011]进一步地，所述步骤1具体包括如下步骤：
[0012]步骤1.1：使用JavaScript监听鼠标的点击、移动、滚轮事件以及键盘的按下、按住事件；
[0013]步骤1.2：将步骤1.1中收集到的被鼠标点击的元素信息、鼠标坐标位置以及键盘按键信息、通过CSS变量注册功能注册到root中，成为通用变量。
[0014]进一步地，所述步骤2具体包括如下步骤：
[0015]步骤2.1：使用Vue自定义指令功能，创建并注册私有变量注册指令；
[0016]步骤2.2：在Vue框架的组件上使用步骤2.1中注册的指令，注册当前组件的私有变量。
[0017]进一步地，所述通用变量为，所有Dom元素都可以使用的变量。
[0018]进一步地，所述私有变量为，只有发起变量注册的组件才能够使用的变量。
[0019]本专利技术的有益效果如下：
[0020]1.本专利技术通过利用Vue框架下的自定义功能中的dom元素可以自由编辑的特性，从而通过使用JavaScript将CSS变量写入到dom元素的style属性上，再采用Var()、counter()等方法进行获取变量值，通过在CSS中使用传入的变量，而实现将数据传输到CSS的效果，即可实现CSS动态编程。
[0021]2.本专利技术实现的过程中不直接通过JavaScript对CSS进行编程，进而省去了额外负担。
[0022]3.本专利技术也不需要设置多个选择器进行选择切换，从而大大提高了动态编程的效率，降低了复杂度。
附图说明
[0023]为了更清楚地说明本专利技术实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，本说明书附图中的各个部件的比例关系不代表实际选材设计时的比例关系，其仅仅为结构或者位置的示意图，其中：
[0024]图1是本专利技术的流程示意图。
具体实施方式
[0025]为了使本专利技术的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本专利技术进行进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本专利技术，并不用于限定本专利技术，即所描述的实施例仅仅是本专利技术一部分实施例，而不是全部的实施例。
[0026]下面结合图1，对本专利技术作详细说明。
[0027]实施例1
[0028]基于Vue框架和CSS变量的CSS动态编程方法，包括以下步骤：
[0029]步骤1：通过事件监听，获取交互数据，使用CSS变量，将交互数据注册为通用变量；
[0030]步骤2：在Vue框架的组件内部通过Vue自定义指令功能注册私有变量；
[0031]步骤3：在CSS中使用步骤1和步骤2中注册的变量，即实现了动态编程。
[0032]本专利技术的工作原理/工作过程为：本专利技术主要是巧妙的使用JavaScript将CSS变量写入到dom元素的style属性上，从而实现将数据传输到CSS变量的效果，再在CSS变量中使用传入的变量，即可实现CSS变量动态编程。实现了功能的解耦，CSS变量归于CSS变量，保持了单纯性，也并没有增加太多的代码复杂度。在CSS变量中使用变化的数据，从而避免了开发多套CSS变量匹配多种场景的问题，降低了代码冗余。
[0033]实施例2
[0034]在实施例1的基础上，
[0035]所述步骤1具体包括如下步骤：
[0036]步骤1.1：使用JavaScript监听鼠标的点击、移动、滚轮事件以及键盘的按下、按住事件；
[0037]步骤1.2：将步骤1.1中收集到的被鼠标点击的元素信息、鼠标坐标位置以及键盘按键信息、通过CSS变量注册功能注册到root中，成为通用变量。
[0038]所述步骤2具体包括如下步骤：
[0039]步骤2.1：使用Vue自定义指令功能，创建并注册私有变量注册指令；
[0040]步骤2.2：在Vue框架的组件上使用步骤2.1中注册的指令，注册当前组件的私有变量主要实现方法简述如下：
[0041]通用属性注入：通过事件监听，将鼠标和键盘等交互事件信息注入到html根元素上，从而实现可以在CSS中获取实时的交互事件数据，将鼠标点击时的坐标位置传到了CSS变量中。
[0042]组件私有属性注入：利用Vue框架，定义CSS变量指令。通过var(变量名)的方式可以获取已定义的变量，var()是CSS提供的函数；
[0043]在需要用到CSS动态编程功能的地方，使用定义好的CSS变量指令，注册需要用到的CSS变量。在CSS代码中使用这些注册好的CSS变量进行编程。
[0044]以上所述仅为本专利技术的较佳实施例而已，并不用以限制本专利技术，凡在本专利技术的精神和原则之内所作的任何修改、等同替换和改进等，均应包含在本专利技术的保护范围之内。
本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.基于Vue框架和CSS变量的CSS动态编程方法，其特征在于，包括以下步骤：步骤1：通过事件监听，获取交互数据，使用CSS变量，将交互数据注册为通用变量；步骤2：在Vue框架的组件内部通过Vue自定义指令功能注册私有变量；步骤3：在CSS中使用步骤1和步骤2中注册的变量，即实现了动态编程。2.根据权利要求1所述的基于Vue框架和CSS变量的CSS动态编程方法，其特征在于，所述步骤1具体包括如下步骤：步骤1.1：使用JavaScript监听鼠标的点击、移动、滚轮事件以及键盘的按下、按住事件；步骤1.2：将步骤1.1中收集到的被鼠标点击的元素信息、鼠标坐标位置以及键盘按键信息、通过CSS...

【专利技术属性】
技术研发人员：田浪，
申请(专利权)人：中电四川数据服务有限公司，
类型：发明
国别省市：