update w-button

uniapp/src/components/w-button/w-button.vue

@@ -0,0 +1,98 @@
+<template>
+  <view
+    class="w-button"
+    hover-class="w-button-hover"
+    @click="emits('click')"
+    :class="{ 'w-button-loading': props.loading ,'w-button-disabled': props.disabled }">
+    <view></view>
+    <view><slot></slot></view>
+    <view></view>
+  </view>
+</template>
+
+<script setup>
+const emits = defineEmits('click');
+const props = defineProps({
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.w-button {
+  padding: var(--padding, 0.3em 0.7em);
+  margin: var(--margin,0);
+  border-radius: var(--border-radius, 0.2em);
+  position: relative;
+  overflow: hidden;
+  font-size: var(--font-size, 1em);
+  color: var(--color, var(--w-main-dark));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s;
+
+  & > view {
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:first-child {
+      content: "";
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      background-color: currentColor;
+      transition: all 0.3s;
+      opacity: var(--opacity, 0.1);
+    }
+  }
+
+  &.w-button-hover {
+    --opacity: 0.2;
+  }
+  &.w-button-disabled {
+    --opacity: 0.1;
+    pointer-events: none;
+    filter: grayscale(100%);
+  }
+  &.w-button-loading {
+    --opacity: 0.1;
+    pointer-events: none;
+
+    & > view:first-child {
+      z-index: 2;
+      opacity: 0.5;
+      background-color: #000;
+    }
+
+    & > view:last-child {
+      position: absolute;
+      content: "";
+      width: 1em;
+      height: 1em;
+      border-radius: 1em;
+      border: 0.2em solid #fff;
+      border-top-color: #0000;
+      z-index: 3;
+      animation: w-am-button-loading 1s infinite;
+    }
+  }
+  @keyframes w-am-button-loading {
+    from {
+      transform: rotate(0deg);
+    }
+
+    to {
+      transform: rotate(360deg);
+    }
+  }
+}
+</style>