├── babel.config.js
├── src
    ├── main.js
    └── App.vue
├── package.json
├── LICENSE
├── index.js
├── index.module.js
├── .gitignore
└── README.md


/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue'
2 | import App from './App.vue'
3 | import install from '../index'
4 | // const install = require('../index.module')
5 | const app = createApp(App)
6 | install(app)
7 | app.mount('#app')
8 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 
 3 |   <div v-css="{c,aBC,userAvatarColor}" class="box" @click="changeColor">hello</div>
 4 | 
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   data(){
10 |     return {
11 |       c : 1,
12 |       aBC : '700',
13 |       userAvatarColor: 'green'
14 |     }
15 |   },
16 |   methods: {
17 |     changeColor(){
18 |       this.c++;
19 |     }
20 |   }
21 | }
22 | </script>
23 | 
24 | <style lang="less">
25 | 
26 |   .box {
27 |     width : calc( var(--c) * 100);
28 |     height : 100px;
29 |     background-color : red;
30 |     font-weight: var(--a-b-c);
31 |     color : var(--user-avatar-color)
32 |   }
33 |  
34 | 
35 | 
36 | 
37 | </style>
38 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-cssvar",
 3 |   "version": "0.1.2",
 4 |   "scripts": {
 5 |     "serve": "vue-cli-service serve",
 6 |     "build": "vue-cli-service build"
 7 |   },
 8 |   "main": "index.js",
 9 |   "module": "index.module.js",
10 |   "files": [
11 |     "index.js",
12 |     "index.module.js"
13 |   ],
14 |   "devDependencies": {
15 |     "@vue/cli-plugin-babel": "~4.5.0",
16 |     "@vue/cli-service": "~4.5.0",
17 |     "@vue/compiler-sfc": "^3.0.0",
18 |     "core-js": "^3.6.5",
19 |     "vue": "^3.0.0"
20 |   },
21 |   "browserslist": [
22 |     "> 1%",
23 |     "last 2 versions",
24 |     "not dead"
25 |   ],
26 |   "keywords": [
27 |     "css",
28 |     "vue",
29 |     "vue-css",
30 |     "css-variable"
31 |   ],
32 |   "license": "MIT",
33 |   "homepage": "https://github.com/HJT-hl/vue-cssvar",
34 |   "repository": {
35 |       "type": "git",
36 |       "url": "https://github.com/HJT-hl/vue-cssvar"
37 |   },
38 | }
39 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 siluxianren
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | const config = {
 2 |     name : 'css',
 3 |     isPx : true,
 4 |     toLine : false
 5 | }
 6 | 
 7 | function toLowerLine(str) {
 8 | 	var temp = str.replace(/[A-Z]/g, function (match) {	
 9 | 		return "-" + match.toLowerCase();
10 |   	});
11 |   	if(temp.slice(0,1) === '-'){ 
12 |   		temp = temp.slice(1);
13 |   	}
14 | 	return temp;
15 | }
16 | export default  function(app,options=config) {
17 | 
18 |     let {name,isPx,toLine} = {...config , ...options}
19 |     function change(el,binding){
20 |         for(let [key,value] of Object.entries(binding.value)){
21 |             if(value == null) continue;
22 |             if(toLine){
23 |                 key = toLowerLine(key)
24 |             }
25 |             if(isPx){
26 |                 if ( typeof value === "number") value += 'px'
27 |             }
28 |             el.style.setProperty('--'+key, value);
29 |         }
30 |     }
31 |     app.directive(name, {
32 |         mounted(el,binding){
33 |             change(el,binding)
34 |         },
35 |         inserted(el,binding){
36 |             change(el,binding)
37 |         },
38 |         updated(el, binding) {
39 |             change(el,binding)
40 |         },
41 |         update(el,binding){
42 |             change(el,binding)
43 |         }
44 |     })
45 |     return app;
46 | }


--------------------------------------------------------------------------------
/index.module.js:
--------------------------------------------------------------------------------
 1 | const config = {
 2 |     name : 'css',
 3 |     isPx : true,
 4 |     toLine : false
 5 | }
 6 | 
 7 | function toLowerLine(str) {
 8 | 	var temp = str.replace(/[A-Z]/g, function (match) {	
 9 | 		return "-" + match.toLowerCase();
10 |   	});
11 |   	if(temp.slice(0,1) === '-'){ 
12 |   		temp = temp.slice(1);
13 |   	}
14 | 	return temp;
15 | }
16 | module.exports =  function(app,options=config) {
17 | 
18 |     let {name,isPx,toLine} = {...config , ...options}
19 |     function change(el,binding){
20 |         for(let [key,value] of Object.entries(binding.value)){
21 |             if(value == null) continue;
22 |             if(toLine){
23 |                 key = toLowerLine(key)
24 |             }
25 |             if(isPx){
26 |                 if ( typeof value === "number") value += 'px'
27 |             }
28 |             el.style.setProperty('--'+key, value);
29 |         }
30 |     }
31 |     app.directive(name, {
32 |         mounted(el,binding){
33 |             change(el,binding)
34 |         },
35 |         inserted(el,binding){
36 |             change(el,binding)
37 |         },
38 |         updated(el, binding) {
39 |             change(el,binding)
40 |         },
41 |         update(el,binding){
42 |             change(el,binding)
43 |         }
44 |     })
45 |     return app;
46 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
  1 | .DS_Store
  2 | node_modules
  3 | /dist
  4 | 
  5 | 
  6 | # local env files
  7 | .env.local
  8 | .env.*.local
  9 | 
 10 | # Editor directories and files
 11 | .idea
 12 | .vscode
 13 | *.suo
 14 | *.ntvs*
 15 | *.njsproj
 16 | *.sln
 17 | *.sw?
 18 | 
 19 | # Logs
 20 | logs
 21 | *.log
 22 | npm-debug.log*
 23 | yarn-debug.log*
 24 | yarn-error.log*
 25 | lerna-debug.log*
 26 | 
 27 | # Diagnostic reports (https://nodejs.org/api/report.html)
 28 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 29 | 
 30 | # Runtime data
 31 | pids
 32 | *.pid
 33 | *.seed
 34 | *.pid.lock
 35 | 
 36 | # Directory for instrumented libs generated by jscoverage/JSCover
 37 | lib-cov
 38 | 
 39 | # Coverage directory used by tools like istanbul
 40 | coverage
 41 | *.lcov
 42 | 
 43 | # nyc test coverage
 44 | .nyc_output
 45 | 
 46 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
 47 | .grunt
 48 | 
 49 | # Bower dependency directory (https://bower.io/)
 50 | bower_components
 51 | 
 52 | # node-waf configuration
 53 | .lock-wscript
 54 | 
 55 | # Compiled binary addons (https://nodejs.org/api/addons.html)
 56 | build/Release
 57 | 
 58 | # Dependency directories
 59 | node_modules/
 60 | jspm_packages/
 61 | 
 62 | # TypeScript v1 declaration files
 63 | typings/
 64 | 
 65 | # TypeScript cache
 66 | *.tsbuildinfo
 67 | 
 68 | # Optional npm cache directory
 69 | .npm
 70 | 
 71 | # Optional eslint cache
 72 | .eslintcache
 73 | 
 74 | # Microbundle cache
 75 | .rpt2_cache/
 76 | .rts2_cache_cjs/
 77 | .rts2_cache_es/
 78 | .rts2_cache_umd/
 79 | 
 80 | # Optional REPL history
 81 | .node_repl_history
 82 | 
 83 | # Output of 'npm pack'
 84 | *.tgz
 85 | 
 86 | # Yarn Integrity file
 87 | .yarn-integrity
 88 | 
 89 | # dotenv environment variables file
 90 | .env
 91 | .env.test
 92 | 
 93 | # parcel-bundler cache (https://parceljs.org/)
 94 | .cache
 95 | 
 96 | # Next.js build output
 97 | .next
 98 | 
 99 | # Nuxt.js build / generate output
100 | .nuxt
101 | dist
102 | 
103 | # Gatsby files
104 | .cache/
105 | # Comment in the public line in if your project uses Gatsby and *not* Next.js
106 | # https://nextjs.org/blog/next-9-1#public-directory-support
107 | # public
108 | 
109 | # vuepress build output
110 | .vuepress/dist
111 | 
112 | # Serverless directories
113 | .serverless/
114 | 
115 | # FuseBox cache
116 | .fusebox/
117 | 
118 | # DynamoDB Local files
119 | .dynamodb/
120 | 
121 | # TernJS port file
122 | .tern-port
123 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # vue-cssvar
  2 | Vue 注入 CSS 变量控制样式 (兼容 vue2 , vue3)
  3 | 
  4 | 样例：点击 div。div 以及其 hover伪类会变色。
  5 | ```js
  6 | <template>
  7 | 	<div v-css="{a,b}" class="box" @click="changeColor"></div>
  8 | </template>
  9 | export default {
 10 |   data(){
 11 |     return {
 12 |       a : 'blue',
 13 |       b : 'pink'
 14 |     }
 15 |   },
 16 |   methods: {
 17 |     changeColor(){
 18 |       this.a = this.a === 'blue' ? "red" : "blue"
 19 |       this.b = this.b === 'pink' ? "yellow" : "pink"
 20 |     }
 21 |   }
 22 | }
 23 | </script>
 24 | <style>
 25 |   .box {
 26 |     width : 100px;
 27 |     height : 100px;
 28 |     background-color : var(--a);
 29 |   }
 30 |   .box:hover {
 31 |     background-color : var(--b);
 32 |   }
 33 | </style>
 34 | ```
 35 | 简便了 vue 处理元素 style ，以及可以直接修改伪类伪元素的样式。
 36 | 
 37 | 
 38 | ## 使用
 39 | 
 40 | ### vue3 注册指令
 41 | 
 42 | ```js
 43 | import { createApp } from 'vue'
 44 | import vueCssvar from 'vue-cssvar'
 45 | const app = createApp(App)
 46 | vueCssvar(app)
 47 | app.mount('#app')
 48 | ```
 49 | 
 50 | ### vue2注册指令
 51 | ```js
 52 | import Vue from 'vue'
 53 | import vueCssvar from 'vue-cssvar'
 54 | vueCssvar(Vue)
 55 | new Vue({
 56 |   render: function (h) { return h(App) },
 57 | }).$mount('#app')
 58 | ```
 59 | ## vueCssvar 参数
 60 | 1. 参数1 ： 指令要绑定的应用，及 vue2 的 Vue、vue3 的 app。
 61 | 2. 参数2 ： 相关配置 options
 62 | 
 63 |  - options.name 指令名，默认 'css'
 64 | 
 65 |   ```js
 66 |   vueCssvar(app,{
 67 |   	name : 'custom'
 68 |   })
 69 |   	
 70 |   -----------template-------------
 71 |   <div v-custom="{a,b}" class="box" @click="changeColor"></div>
 72 |   	
 73 |   ```
 74 | 
 75 |   - options.isPx 值为数字时默认加上px方便计算，默认 true
 76 | 
 77 |   ```js
 78 |   vueCssvar(app,{
 79 |   	isPx : 'true'
 80 |   })
 81 |   	
 82 |   -----------template-------------
 83 |   <div v-css="{c,b}" class="box" @click="changeColor">hello</div>
 84 |   <script>
 85 | export default {
 86 |   data(){
 87 |     return {
 88 |       c : 1,
 89 |       b : '700' //如果不必须后面加px，使用字符串类型
 90 |     }
 91 |   },
 92 |   methods: {
 93 |     changeColor(){
 94 |       this.c++;
 95 |     }
 96 |   }
 97 | }
 98 | </script>
 99 | <style>
100 |   .box {
101 |   // 使用 css 内置函数计算其 width,此时的var(--c)为 1px
102 |     width : calc( var(--c) * 100); 
103 |     height : 100px;
104 |     background-color : red;
105 |     font-weight: var(--b);
106 |   }
107 | </style>
108 |   
109 |   	
110 |   ```
111 |   - options.toLine 驼峰命名法转中划线命名法（中划线命名法符合css规范），默认 false
112 | 
113 |   ```js
114 |   vueCssvar(app,{
115 |   	toLine : true
116 |   })
117 |   	
118 |   -----------template-------------
119 |   <div v-css="{userAvatarColor}" class="box" @click="changeColor"></div>
120 | 
121 |   -----------script---------------
122 |   data(){
123 |     return { 
124 |       userAvatarColor: 'green'
125 |     }
126 |   }
127 | 
128 |   -----------style-----------------
129 |   color : var(--user-avatar-color)
130 |   	
131 |   ```
132 | 
133 |   
134 | 
135 | 
136 | 
137 | 


--------------------------------------------------------------------------------