fix(ui): button原型完成

affects: @varlet/ui
varletjs · Dec 1, 2020 · cdf32e5 · cdf32e5
1 parent 41bfdab
commit cdf32e5
Show file tree

Hide file tree

Showing 4 changed files with 182 additions and 21 deletions.
diff --git a/packages/varlet-ui/src/button/Button.vue b/packages/varlet-ui/src/button/Button.vue
@@ -16,7 +16,11 @@
     :disabled="disabled"
     @click="trigger"
   >
-    <varlet-loading v-if="loading"></varlet-loading>
+    <varlet-loading
+      :type="loadingType"
+      :size="loadingSize"
+      v-if="loading"
+    />
     <slot v-else/>
   </button>
 </template>

diff --git a/packages/varlet-ui/src/button/example/index.vue b/packages/varlet-ui/src/button/example/index.vue
@@ -1,20 +1,5 @@
 <template>
   <div class="example">
-    <varlet-button class="example__button" type="plain" size="large">测试</varlet-button>
-
-    <varlet-button class="example__button" type="primary" size="large">测试</varlet-button>
-    <varlet-button class="example__button" type="primary" size="normal">测试</varlet-button>
-    <varlet-button class="example__button" type="primary" size="small">测试</varlet-button>
-    <varlet-button class="example__button" type="primary" size="mini">测试</varlet-button>
-
-    <varlet-button class="example__button" type="danger" size="large">测试</varlet-button>
-    <varlet-button class="example__button" type="danger">测试</varlet-button>
-    <varlet-button class="example__button" type="danger" size="small">测试</varlet-button>
-    <varlet-button class="example__button" type="danger" size="mini">测试</varlet-button>
-
-    <varlet-button class="example__button" type="info" size="normal" block>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</varlet-button>
-    <varlet-button class="example__button" type="warning" size="large" block>测试</varlet-button>
-
     <varlet-button
       class="example__button"
       round
@@ -36,14 +21,164 @@
     <varlet-button class="example__button" type="primary" @click="trigger">切换状态</varlet-button>
     <varlet-button class="example__button" type="plain" size="large" :disabled="disabled">{{ disabled ? '禁用' : '启用' }}</varlet-button>
 
+    <varlet-button
+      class="example__button"
+      type="primary"
+      size="large"
+      v-model:loading="loading"
+      @click="trigger"
+    >
+      Large
+    </varlet-button>
+    <varlet-button
+      class="example__button"
+      type="primary"
+      size="normal"
+      v-model:loading="loading"
+      @click="trigger"
+    >
+      Normal
+    </varlet-button>
+    <varlet-button
+      class="example__button"
+      type="primary"
+      size="small"
+      v-model:loading="loading"
+      @click="trigger"
+    >
+      Small
+    </varlet-button>
+    <varlet-button
+      class="example__button"
+      type="primary"
+      size="mini"
+      v-model:loading="loading"
+      @click="trigger"
+    >
+      Mini
+    </varlet-button>
+
+    <varlet-button
+      class="example__button"
+      type="danger"
+      loading-type="cube"
+      size="large"
+      v-model:loading="loading"
+      @click="trigger"
+    >
+      Large
+    </varlet-button>
+    <varlet-button
+      class="example__button"
+      type="danger"
+      loading-type="cube"
+      size="normal"
+      v-model:loading="loading"
+      @click="trigger"
+    >
+      Normal
+    </varlet-button>
+    <varlet-button
+      class="example__button"
+      type="danger"
+      loading-type="cube"
+      size="small"
+      v-model:loading="loading"
+      @click="trigger"
+    >
+      Small
+    </varlet-button>
+    <varlet-button
+      class="example__button"
+      type="danger"
+      loading-type="cube"
+      size="mini"
+      v-model:loading="loading"
+      @click="trigger"
+    >
+      Mini
+    </varlet-button>
+
+    <varlet-button
+      class="example__button"
+      type="warning"
+      loading-type="rect"
+      size="large"
+      v-model:loading="loading"
+      @click="trigger"
+    >
+      Large
+    </varlet-button>
+    <varlet-button
+      class="example__button"
+      type="warning"
+      loading-type="rect"
+      size="normal"
+      v-model:loading="loading"
+      @click="trigger"
+    >
+      Normal
+    </varlet-button>
+    <varlet-button
+      class="example__button"
+      type="warning"
+      loading-type="rect"
+      size="small"
+      v-model:loading="loading"
+      @click="trigger"
+    >
+      Small
+    </varlet-button>
+    <varlet-button
+      class="example__button"
+      type="warning"
+      loading-type="rect"
+      size="mini"
+      v-model:loading="loading"
+      @click="trigger"
+    >
+      Mini
+    </varlet-button>
+
     <varlet-button
       class="example__button"
       type="success"
+      loading-type="disappear"
       size="large"
       v-model:loading="loading"
       @click="trigger"
     >
-      给老子转!
+      Large
+    </varlet-button>
+    <varlet-button
+      class="example__button"
+      type="success"
+      loading-type="disappear"
+      size="normal"
+      v-model:loading="loading"
+      @click="trigger"
+    >
+      Normal
+    </varlet-button>
+    <varlet-button
+      class="example__button"
+      type="success"
+      loading-type="disappear"
+      size="small"
+      v-model:loading="loading"
+      @click="trigger"
+    >
+      Small
+    </varlet-button>
+    <varlet-button
+      class="example__button"
+      type="success"
+      loading-type="disappear"
+      size="mini"
+      v-model:loading="loading"
+      @click="trigger"
+    >
+      Mini
     </varlet-button>
   </div>
 </template>

diff --git a/packages/varlet-ui/src/button/propsEmits.ts b/packages/varlet-ui/src/button/propsEmits.ts
@@ -1,3 +1,9 @@
+import {
+  typeValidator as loadingTypeValidator,
+  sizeValidator as loadingSizeValidator,
+  getTypeDefault as getLoadingTypeDefault
+} from '../loading/propsEmits'
+
 function typeValidator(type: string): boolean {
   const validTypes = ['plain', 'primary', 'info', 'success', 'warning', 'danger']
 
@@ -28,6 +34,18 @@ export const props = {
     type: Boolean,
     default: false
   },
+  // 加载动画类型
+  loadingType: {
+    type: String,
+    default: getLoadingTypeDefault,
+    validator: loadingTypeValidator
+  },
+  // 加载动画尺寸
+  loadingSize: {
+    type: String,
+    default: (props: any) => props.size,
+    validator: loadingSizeValidator
+  },
   // 原型按钮
   round: {
     type: Boolean,

diff --git a/packages/varlet-ui/src/loading/propsEmits.ts b/packages/varlet-ui/src/loading/propsEmits.ts
@@ -1,25 +1,29 @@
-function typeValidator(type: string): boolean {
+export function typeValidator(type: string): boolean {
 	const validTypes = ['wave', 'cube', 'rect', 'disappear']
 	return validTypes.includes(type)
 }
 
-function sizeValidator(size: string): boolean {
+export function sizeValidator(size: string): boolean {
 	const validSizes = ['normal', 'mini', 'small', 'large']
 
 	return validSizes.includes(size)
 }
 
+export const getTypeDefault = () => 'wave'
+
+export const getSizeDefault = () => 'normal'
+
 export const props = {
 	// loading类型
 	type: {
 		type: String,
-		default: 'wave',
+		default: getTypeDefault,
 		validator: typeValidator,
 	},
 	// loading尺寸
 	size: {
 		type: String,
-		default: 'normal',
+		default: getSizeDefault,
 		validator: sizeValidator,
 	},
 	// loading颜色