vue 使用 js 的类实现 css 模块化

前言

上篇文章过后这边继续研究

在 vue3 中关于 tailwindcss 的类名过长拆分研究

下面用一个按钮样式举例

Snipaste_2022-03-10_11-01-31.png

所用到的技术

  • tailwindcss 版本 3
  • vue2 或 vue3
  • js 或者 ts(有提示)
  • 其他包不用

util.js

用于各种前置效果拼接

function name_arr(name, str) {
     const af = str.trim().split(/\s+/)
     let arr1 = []
     af.forEach(ele => {
         arr1.push(name + ":" + ele)
     });

     return " " + arr1.join(' ') + " "
 }

_button.js

按钮的css

class Button {

    btn() {
        let className = " py-3 px-10 inline-block rounded-full transition-all duration-200";

        function hover() {
            let className = " transform -translate-y-1 shadow-md ";

            function after() {
                let className = "scale-150 opacity-0";
                return name_arr('after', className);
            };

            return name_arr('hover', className + after());
        };

        function active() {
            let className = " transform -translate-y-0.5 shadow relative";
            return name_arr('active', className);
        };

        function after() {
            let className = " inline-block h-full w-full rounded-full absolute top-0 left-0 -z-10 transition-all duration-400";
            return name_arr('after', className);
        };

        return className + hover() + active() + after();
    }

    btn_white() {
        let className = " bg-white text-gray-600";

        function after() {
            let className = " bg-white";
            return name_arr('after', className);
        };

        return className + after();
    }
}

buttom.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue</title>
    <script src="/js/utils/index.js"></script>
    <script src="/js/base/_button.js"></script>
</head>

<body>
    <div id="app">
        <div class=" w-screen h-screen bg-gray-200 p-10">
            <div class=" w-1/4 h-80 p-3 bg-green-500">
                <a class="" v-bind:class="[css.btn(), css.btn_white()]" href="#">{{ message }}</a>
            </div>
        </div>
    </div>
</body>


<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello!',
            css: new Button()
        }
    })
</script>

</html>

结语

  • 后续有其他文章组件, 布局样式, 暗黑模式等
  • 代码也开源出来了,欢迎贡献 码云
  • 体验地址 buttom
  • 这个是为了弥补组件的不足, 样式不够炫
  • 初心是为了像后端程序员可以少量代码实现 css 酷炫效果