[重构] button buttonGroup buttonContainer 组件, 未破坏功能的前提下改进代码

package.json

@@ -19,10 +19,6 @@
     "build:types": "rimraf types && tsc -d",
     "build:docs": "vite build docs"
   },
-  "repository": {
-    "type": "git",
-    "url": "https://gitee.com/layui-vue/layui-vue"
-  },
   "keywords": [
     "layui-vue",
     "layui",
@@ -30,10 +26,6 @@
   ],
   "author": "layui-vue",
   "license": "MIT",
-  "bugs": {
-    "url": "https://gitee.com/layui-vue/layui-vue/issues"
-  },
-  "homepage": "https://gitee.com/layui-vue/layui-vue/blob/master/README.md",
   "peerDependencies": {
     "vue": "^3.2.22",
     "vue-router": "^4.0.12"
@@ -53,6 +45,8 @@
     "@vue/compiler-sfc": "^3.2.22",
     "@vue/server-renderer": "^3.2.20",
     "escape-html": "^1.0.3",
+    "less": "^4.1.2",
+    "less-loader": "^10.2.0",
     "markdown-it-container": "^3.0.0",
     "prismjs": "^1.25.0",
     "rimraf": "^3.0.2",
@@ -69,4 +63,4 @@
     "last 2 versions and > 2%",
     "ie > 10"
   ]
-}
+}

shims-vue.d.ts

@@ -22,4 +22,4 @@ interface ImportMeta {
     DEV: boolean
     SSR: boolean
   }
-}
+}

src/css/layui.css

@@ -2259,170 +2259,6 @@ a cite {
   color: #c2c2c2 !important;
 }
 
-.layui-btn {
-  height: 38px;
-  line-height: 38px;
-  border: 1px solid transparent;
-  padding: 0 18px;
-  background-color: #009688;
-  color: #fff;
-  white-space: nowrap;
-  text-align: center;
-  font-size: 14px;
-  border-radius: 2px;
-  cursor: pointer;
-}
-
-.layui-btn:hover {
-  opacity: 0.8;
-  filter: alpha(opacity=80);
-  color: #fff;
-}
-
-.layui-btn:active {
-  opacity: 1;
-  filter: alpha(opacity=100);
-}
-
-.layui-btn + .layui-btn {
-  margin-left: 10px;
-}
-
-.layui-btn-container {
-  font-size: 0;
-}
-
-.layui-btn-container .layui-btn {
-  margin-right: 10px;
-  margin-bottom: 10px;
-}
-
-.layui-btn-container .layui-btn + .layui-btn {
-  margin-left: 0;
-}
-
-.layui-table .layui-btn-container .layui-btn {
-  margin-bottom: 9px;
-}
-
-.layui-btn-radius {
-  border-radius: 100px;
-}
-
-.layui-btn .layui-icon {
-  padding: 0 2px;
-  vertical-align: middle\9;
-  vertical-align: bottom;
-}
-
-.layui-btn-primary {
-  border-color: #d2d2d2;
-  background: 0 0;
-  color: #666;
-}
-
-.layui-btn-primary:hover {
-  border-color: #009688;
-  color: #333;
-}
-
-.layui-btn-normal {
-  background-color: #1e9fff;
-}
-
-.layui-btn-warm {
-  background-color: #ffb800;
-}
-
-.layui-btn-danger {
-  background-color: #ff5722;
-}
-
-.layui-btn-checked {
-  background-color: #5fb878;
-}
-
-.layui-btn-disabled,
-.layui-btn-disabled:active,
-.layui-btn-disabled:hover {
-  border-color: #eee !important;
-  background-color: #fbfbfb !important;
-  color: #d2d2d2 !important;
-  cursor: not-allowed !important;
-  opacity: 1;
-}
-
-.layui-btn-lg {
-  height: 44px;
-  line-height: 44px;
-  padding: 0 25px;
-  font-size: 16px;
-}
-
-.layui-btn-sm {
-  height: 30px;
-  line-height: 30px;
-  padding: 0 10px;
-  font-size: 12px;
-}
-
-.layui-btn-xs {
-  height: 22px;
-  line-height: 22px;
-  padding: 0 5px;
-  font-size: 12px;
-}
-
-.layui-btn-xs i {
-  font-size: 12px !important;
-}
-
-.layui-btn-group {
-  vertical-align: middle;
-  font-size: 0;
-}
-
-.layui-btn-group .layui-btn {
-  margin-left: 0 !important;
-  margin-right: 0 !important;
-  border-left: 1px solid rgba(255, 255, 255, 0.5);
-  border-radius: 0;
-}
-
-.layui-btn-group .layui-btn-primary {
-  border-left: none;
-}
-
-.layui-btn-group .layui-btn-primary:hover {
-  border-color: #d2d2d2;
-  color: #009688;
-}
-
-.layui-btn-group .layui-btn:first-child {
-  border-left: none;
-  border-radius: 2px 0 0 2px;
-}
-
-.layui-btn-group .layui-btn-primary:first-child {
-  border-left: 1px solid #d2d2d2;
-}
-
-.layui-btn-group .layui-btn:last-child {
-  border-radius: 0 2px 2px 0;
-}
-
-.layui-btn-group .layui-btn + .layui-btn {
-  margin-left: 0;
-}
-
-.layui-btn-group + .layui-btn-group {
-  margin-left: 10px;
-}
-
-.layui-btn-fluid {
-  width: 100%;
-}
-
 .layui-input-number[type='number'] {
   -moz-appearance: textfield;
 }

src/hooks/useClickOutside.ts

@@ -1,16 +1,11 @@
 import { ref, onMounted, onUnmounted, Ref } from 'vue'
 
 const x = undefined
-// 案例详见 dropdown.vue
 const useClickOutside = (elementRef: Ref<HTMLElement | null>) => {
-  // 设置一个导出值
   const isClickOutside = ref(false)
-  // 给界面绑定上事件
   const handler = (e: MouseEvent) => {
     if (elementRef.value) {
-      // e.target 有可能是为 null 所以需要断言
       if (elementRef.value.contains(e.target as HTMLElement)) {
-        // 判断目标节点是不是当前的节点
         isClickOutside.value = false
       } else {
         isClickOutside.value = true

src/module/button/index.less

@@ -0,0 +1,104 @@
+.layui-btn {
+    height: 38px;
+    line-height: 38px;
+    border: 1px solid transparent;
+    padding: 0 18px;
+    background-color: #009688;
+    color: #fff;
+    white-space: nowrap;
+    text-align: center;
+    font-size: 14px;
+    border-radius: 2px;
+    cursor: pointer;
+}
+
+.layui-btn:hover {
+    opacity: 0.8;
+    filter: alpha(opacity=80);
+    color: #fff;
+}
+
+.layui-btn:active {
+    opacity: 1;
+    filter: alpha(opacity=100);
+}
+
+.layui-btn+.layui-btn {
+    margin-left: 10px;
+}
+
+.layui-btn-radius {
+    border-radius: 100px;
+}
+
+.layui-btn .layui-icon {
+    padding: 0 2px;
+    vertical-align: middle\9;
+    vertical-align: bottom;
+}
+
+.layui-btn-primary {
+    border-color: #d2d2d2;
+    background: 0 0;
+    color: #666;
+}
+
+.layui-btn-primary:hover {
+    border-color: #009688;
+    color: #333;
+}
+
+.layui-btn-normal {
+    background-color: #1e9fff;
+}
+
+.layui-btn-warm {
+    background-color: #ffb800;
+}
+
+.layui-btn-danger {
+    background-color: #ff5722;
+}
+
+.layui-btn-checked {
+    background-color: #5fb878;
+}
+
+.layui-btn-disabled,
+.layui-btn-disabled:active,
+.layui-btn-disabled:hover {
+    border-color: #eee !important;
+    background-color: #fbfbfb !important;
+    color: #d2d2d2 !important;
+    cursor: not-allowed !important;
+    opacity: 1;
+}
+
+.layui-btn-lg {
+    height: 44px;
+    line-height: 44px;
+    padding: 0 25px;
+    font-size: 16px;
+}
+
+.layui-btn-sm {
+    height: 30px;
+    line-height: 30px;
+    padding: 0 10px;
+    font-size: 12px;
+}
+
+.layui-btn-xs {
+    height: 22px;
+    line-height: 22px;
+    padding: 0 5px;
+    font-size: 12px;
+}
+
+.layui-btn-xs i {
+    font-size: 12px !important;
+}
+
+.layui-btn-fluid {
+    width: 100%;
+}

src/module/button/index.ts

@@ -6,4 +6,4 @@ Component.install = (app: App) => {
   app.component(Component.name || 'LayButton', Component)
 }
 
-export default Component as IDefineComponent
+export default Component as IDefineComponent

src/module/button/index.vue

@@ -1,13 +1,51 @@
+<script lang="ts">
+export default {
+  name: "LayButton",
+};
+</script>
+
+<script setup lang="ts">
+import "./index.less";
+import { computed } from 'vue';
+
+export interface LayButtonProps {
+    type?: 'primary' | 'normal' | 'warm' | 'danger'
+    size?: 'lg' | 'sm' | 'xs'
+    fluid?: boolean
+    radius?: boolean
+    border?: 'green' | 'blue' | 'orange' | 'red' | 'black'
+    disabled?: boolean
+    loading?: boolean
+    nativeType?: 'button' | 'submit' | 'reset'
+}
+
+const props = withDefaults(defineProps<LayButtonProps>(), {
+  fluid: false,
+  radius: false,
+  disabled: false,
+  loading: false,
+  nativeType: "button",
+});
+
+const classes = computed(() => {
+  return [
+      props.type ? 'layui-btn-' + props.type : '',
+      props.size ? 'layui-btn-' + props.size : '',
+      props.border ? 'layui-border-' + props.border : '',
+  ]
+})
+</script>
+
 <template>
   <button
     class="layui-btn"
     :class="[
-      type ? 'layui-btn-' + type : '',
-      size ? 'layui-btn-' + size : '',
-      fluid ? 'layui-btn-fluid' : '',
-      radius ? 'layui-btn-radius' : '',
-      border ? 'layui-border-' + border : '',
-      disabled ? 'layui-btn-disabled' : '',
+      {
+       'layui-btn-fluid' : fluid,
+       'layui-btn-radius' : radius,
+       'layui-btn-disabled' : disabled
+      },
+      classes
     ]"
     :type="nativeType"
   >
@@ -23,25 +61,4 @@
     ></i>
     <slot v-else />
   </button>
-</template>
-
-<script lang="ts">
-export default {
-  name: 'LayButton',
-}
-</script>
-
-<script setup lang="ts">
-import { defineProps } from 'vue'
-
-const props = defineProps<{
-  type?: string
-  size?: string
-  fluid?: boolean
-  radius?: boolean
-  border?: string
-  disabled?: boolean
-  loading?: boolean
-  nativeType?: string
-}>()
-</script>
+</template>

src/module/buttonContainer/index.less

@@ -0,0 +1,16 @@
+.layui-btn-container {
+    font-size: 0;
+}
+
+.layui-btn-container .layui-btn {
+    margin-right: 10px;
+    margin-bottom: 10px;
+}
+
+.layui-btn-container .layui-btn+.layui-btn {
+    margin-left: 0;
+}
+
+.layui-table .layui-btn-container .layui-btn {
+    margin-bottom: 9px;
+}

src/module/buttonContainer/index.ts

@@ -6,4 +6,4 @@ Component.install = (app: App) => {
   app.component(Component.name || 'LayButtonContainer', Component)
 }
 
-export default Component as IDefineComponent
+export default Component as IDefineComponent

src/module/buttonContainer/index.vue

@@ -4,4 +4,12 @@
   </div>
 </template>
 
-<script setup name="LayButtonContainer" lang="ts"></script>
+<script lang="ts">
+export default {
+  name: "LayButtonContainer",
+};
+</script>
+
+<script setup lang="ts">
+import "./index.less";
+</script>

src/module/buttonGroup/index.less

@@ -0,0 +1,41 @@
+.layui-btn-group {
+    vertical-align: middle;
+    font-size: 0;
+}
+
+.layui-btn-group .layui-btn {
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+    border-left: 1px solid rgba(255, 255, 255, 0.5);
+    border-radius: 0;
+}
+
+.layui-btn-group .layui-btn-primary {
+    border-left: none;
+}
+
+.layui-btn-group .layui-btn-primary:hover {
+    border-color: #d2d2d2;
+    color: #009688;
+}
+
+.layui-btn-group .layui-btn:first-child {
+    border-left: none;
+    border-radius: 2px 0 0 2px;
+}
+
+.layui-btn-group .layui-btn-primary:first-child {
+    border-left: 1px solid #d2d2d2;
+}
+
+.layui-btn-group .layui-btn:last-child {
+    border-radius: 0 2px 2px 0;
+}
+
+.layui-btn-group .layui-btn+.layui-btn {
+    margin-left: 0;
+}
+
+.layui-btn-group+.layui-btn-group {
+    margin-left: 10px;
+}

src/module/buttonGroup/index.ts

@@ -6,4 +6,4 @@ Component.install = (app: App) => {
   app.component(Component.name || 'LayButtonGroup', Component)
 }
 
-export default Component as IDefineComponent
+export default Component as IDefineComponent

src/module/buttonGroup/index.vue

@@ -1,7 +1,15 @@
+<script lang="ts">
+export default {
+  name: "LayButtonGroup",
+};
+</script>
+
+<script setup lang="ts">
+import "./index.less"
+</script>
+
 <template>
   <div class="layui-btn-group">
     <slot />
   </div>
-</template>
-
-<script setup name="LayButtonGroup" lang="ts"></script>
+</template>

tsconfig.json

@@ -12,10 +12,7 @@
     "esModuleInterop": true,
     "declarationDir": "types",
     "lib": ["ESNext", "DOM"],
-    "paths": {
-      "/@src/*": ["./src/*"]
-    }
   },
   "include": ["src/**/*", "shims-vue.d.ts"],
   "exclude": ["node_modules"]
-}
+}