├── .gitignore ├── LICENSE ├── README.md ├── babel.config.js ├── index.js ├── index.module.js ├── package.json ├── src ├── App.vue └── main.js └── yarn.lock /.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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-cssvar 2 | Vue 注入 CSS 变量控制样式 (兼容 vue2 , vue3) 3 | 4 | 样例：点击 div。div 以及其 hover伪类会变色。 5 | ```js 6 | 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 | 24 | 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 |
72 | 73 | ``` 74 | 75 | - options.isPx 值为数字时默认加上px方便计算，默认 true 76 | 77 | ```js 78 | vueCssvar(app,{ 79 | isPx : 'true' 80 | }) 81 | 82 | -----------template------------- 83 |
hello
84 | 99 | 108 | 109 | 110 | ``` 111 | - options.toLine 驼峰命名法转中划线命名法（中划线命名法符合css规范），默认 false 112 | 113 | ```js 114 | vueCssvar(app,{ 115 | toLine : true 116 | }) 117 | 118 | -----------template------------- 119 |
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 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /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 | } -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 23 | 24 | 38 | -------------------------------------------------------------------------------- /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 | --------------------------------------------------------------------------------