完成按钮基本样式

coderjam · coderjam · commit a8d6487f13a6 · 2020-08-17T23:18:26.000+08:00
diff --git a/README.md b/README.md
@@ -0,0 +1,5 @@
+# jam ui - 一个Vue UI框架
+
+## 安装
+使用本框架前，请在css中开启 border-box
+
diff --git a/button.js b/button.js
@@ -0,0 +1,5 @@
+Vue.component('j-button',{
+    template: `
+        <button class="j-button">按钮</button>
+    `
+})
diff --git a/index.html b/index.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="zh-Hans">
+<head>
+    <meta charset="UTF-8">
+    <title>jam-ui</title>
+    <style>
+        *{
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        :root{
+            --button-height: 32px;
+            --font-size: 14px;
+            --button-bg: white;
+            --button-active-bg: #eee;
+            --border-radius: 4px;
+            --color: #333;
+            --border-color: #999;
+            --border-color-hover: #666;
+        }
+        #app{
+            margin: 20px;
+        }
+    </style>
+    <style>
+        .j-button{
+            font-size: var(--font-size);
+            height: var(--button-height);
+            padding: 0 1em;
+            border-radius: var(--border-radius);
+            border: 1px solid var(--border-color);
+            background: var(--button-bg);
+        }
+        .j-button:hover {
+            border-color: var(--border-color-hover);
+        }
+        .j-button:active {
+            background-color: var(--button-active-bg);
+        }
+        .j-button:focus {
+            outline: none;
+        }
+    </style>
+</head>
+<body>
+    <div id="app">
+    <j-button></j-button>
+    </div>
+    <script src="./node_modules/vue/dist/vue.min.js"></script>
+    <script src="./button.js"></script>
+    <script>
+        new Vue({
+            el: '#app',
+            data:{
+                jam: 'jam ui'
+            }
+        })
+    </script>
+</body>
+</html>
diff --git a/package-lock.json b/package-lock.json
