feat: taro

src/sites/mobile-taro/vue/dist/app.json

@@ -1 +1 @@
-{"pages":["pages/button-demo/index"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor":"#fff","navigationBarTitleText":"WeChat","navigationBarTextStyle":"black"}}
+{"pages":["pages/button/demo"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor":"#fff","navigationBarTitleText":"WeChat","navigationBarTextStyle":"black"}}

src/sites/mobile-taro/vue/dist/app.wxss

@@ -933,3 +933,5 @@ to {
 .nut-button--square {
   border-radius: 0;
 }
+
+@import "./common.wxss";

src/sites/mobile-taro/vue/dist/common.wxss

@@ -0,0 +1,656 @@
+view-block {
+  display: block;
+}
+@-webkit-keyframes nutFadeIn {
+from {
+    opacity: 0;
+}
+to {
+    opacity: 1;
+}
+}
+@keyframes nutFadeIn {
+from {
+    opacity: 0;
+}
+to {
+    opacity: 1;
+}
+}
+@-webkit-keyframes nutFadeOut {
+from {
+    opacity: 1;
+}
+to {
+    opacity: 0;
+}
+}
+@keyframes nutFadeOut {
+from {
+    opacity: 1;
+}
+to {
+    opacity: 0;
+}
+}
+.nutFade-enter-active,
+.nutFadeIn,
+.nutFade-leave-active,
+.nutFadeOut {
+  -webkit-animation-duration: 0.25s;
+          animation-duration: 0.25s;
+  -webkit-animation-fill-mode: both;
+          animation-fill-mode: both;
+  -webkit-animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+          animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+}
+.nutFade-enter-active,
+.nutFadeIn {
+  -webkit-animation-name: nutFadeIn;
+          animation-name: nutFadeIn;
+}
+.nutFade-leave-active,
+.nutFadeOut {
+  -webkit-animation-name: nutFadeOut;
+          animation-name: nutFadeOut;
+}
+@-webkit-keyframes nutZoomIn {
+from {
+    opacity: 0;
+    -webkit-transform: scale3d(0.3, 0.3, 0.3);
+            transform: scale3d(0.3, 0.3, 0.3);
+}
+50% {
+    opacity: 1;
+}
+}
+@keyframes nutZoomIn {
+from {
+    opacity: 0;
+    -webkit-transform: scale3d(0.3, 0.3, 0.3);
+            transform: scale3d(0.3, 0.3, 0.3);
+}
+50% {
+    opacity: 1;
+}
+}
+@-webkit-keyframes nutZoomOut {
+from {
+    opacity: 1;
+}
+50% {
+    opacity: 0;
+    -webkit-transform: scale3d(0.3, 0.3, 0.3);
+            transform: scale3d(0.3, 0.3, 0.3);
+}
+to {
+    opacity: 0;
+}
+}
+@keyframes nutZoomOut {
+from {
+    opacity: 1;
+}
+50% {
+    opacity: 0;
+    -webkit-transform: scale3d(0.3, 0.3, 0.3);
+            transform: scale3d(0.3, 0.3, 0.3);
+}
+to {
+    opacity: 0;
+}
+}
+.nutZoom-enter-active,
+.nutZoomIn,
+.nutZoom-leave-active,
+.nutZoomOut {
+  -webkit-animation-duration: 0.25s;
+          animation-duration: 0.25s;
+  -webkit-animation-fill-mode: both;
+          animation-fill-mode: both;
+  -webkit-animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+          animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+}
+.nutZoom-enter-active,
+.nutZoomIn {
+  -webkit-animation-name: nutZoomIn;
+          animation-name: nutZoomIn;
+}
+.nutZoom-leave-active,
+.nutZoomOut {
+  -webkit-animation-name: nutZoomOut;
+          animation-name: nutZoomOut;
+}
+@-webkit-keyframes nutEaseIn {
+0% {
+    opacity: 0;
+    -webkit-transform: scale(0.9);
+            transform: scale(0.9);
+}
+100% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+            transform: scale(1);
+}
+}
+@keyframes nutEaseIn {
+0% {
+    opacity: 0;
+    -webkit-transform: scale(0.9);
+            transform: scale(0.9);
+}
+100% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+            transform: scale(1);
+}
+}
+@-webkit-keyframes nutEaseOut {
+0% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+            transform: scale(1);
+}
+100% {
+    opacity: 0;
+    -webkit-transform: scale(0.9);
+            transform: scale(0.9);
+}
+}
+@keyframes nutEaseOut {
+0% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+            transform: scale(1);
+}
+100% {
+    opacity: 0;
+    -webkit-transform: scale(0.9);
+            transform: scale(0.9);
+}
+}
+.nutEase-enter-active,
+.nutEaseIn,
+.nutEase-leave-active,
+.nutEaseOut {
+  -webkit-animation-duration: 0.25s;
+          animation-duration: 0.25s;
+  -webkit-animation-fill-mode: both;
+          animation-fill-mode: both;
+  -webkit-animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+          animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+}
+.nutEase-enter-active,
+.nutEaseIn {
+  -webkit-animation-name: nutEaseIn;
+          animation-name: nutEaseIn;
+}
+.nutEase-leave-active,
+.nutEaseOut {
+  -webkit-animation-name: nutEaseOut;
+          animation-name: nutEaseOut;
+}
+@-webkit-keyframes nutDropIn {
+0% {
+    opacity: 0;
+    -webkit-transform: scaleY(0.8);
+            transform: scaleY(0.8);
+}
+100% {
+    opacity: 1;
+    -webkit-transform: scaleY(1);
+            transform: scaleY(1);
+}
+}
+@keyframes nutDropIn {
+0% {
+    opacity: 0;
+    -webkit-transform: scaleY(0.8);
+            transform: scaleY(0.8);
+}
+100% {
+    opacity: 1;
+    -webkit-transform: scaleY(1);
+            transform: scaleY(1);
+}
+}
+@-webkit-keyframes nutDropOut {
+0% {
+    opacity: 1;
+    -webkit-transform: scaleY(1);
+            transform: scaleY(1);
+}
+100% {
+    opacity: 0;
+    -webkit-transform: scaleY(0.8);
+            transform: scaleY(0.8);
+}
+}
+@keyframes nutDropOut {
+0% {
+    opacity: 1;
+    -webkit-transform: scaleY(1);
+            transform: scaleY(1);
+}
+100% {
+    opacity: 0;
+    -webkit-transform: scaleY(0.8);
+            transform: scaleY(0.8);
+}
+}
+.nutDrop-enter-active,
+.nutDropIn,
+.nutDrop-leave-active,
+.nutDropOut {
+  -webkit-animation-duration: 0.25s;
+          animation-duration: 0.25s;
+  -webkit-animation-fill-mode: both;
+          animation-fill-mode: both;
+  -webkit-animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+          animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+}
+.nutDrop-enter-active,
+.nutDropIn {
+  -webkit-animation-name: nutDropIn;
+          animation-name: nutDropIn;
+}
+.nutDrop-leave-active,
+.nutDropOut {
+  -webkit-animation-name: nutDropOut;
+          animation-name: nutDropOut;
+}
+@-webkit-keyframes rotation {
+0% {
+    -webkit-transform: rotate(0deg);
+}
+100% {
+    -webkit-transform: rotate(360deg);
+}
+}
+@keyframes rotation {
+0% {
+    -webkit-transform: rotate(0deg);
+}
+100% {
+    -webkit-transform: rotate(360deg);
+}
+}
+.nutRotate-enter-active,
+.nutRotateIn,
+.nutRotate-leave-active,
+.nutRotateOut {
+  -webkit-animation-duration: 0.25s;
+          animation-duration: 0.25s;
+  -webkit-animation-fill-mode: both;
+          animation-fill-mode: both;
+  -webkit-animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+          animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+}
+.nutRotate-enter-active,
+.nutRotateIn {
+  -webkit-animation-name: nutRotateIn;
+          animation-name: nutRotateIn;
+}
+.nutRotate-leave-active,
+.nutRotateOut {
+  -webkit-animation-name: nutRotateOut;
+          animation-name: nutRotateOut;
+}
+view-block {
+  display: block;
+}
+@keyframes nutFadeIn {
+from {
+    opacity: 0;
+}
+to {
+    opacity: 1;
+}
+}
+@keyframes nutFadeOut {
+from {
+    opacity: 1;
+}
+to {
+    opacity: 0;
+}
+}
+.nutFade-enter-active,
+.nutFadeIn,
+.nutFade-leave-active,
+.nutFadeOut {
+  -webkit-animation-duration: 0.25s;
+          animation-duration: 0.25s;
+  -webkit-animation-fill-mode: both;
+          animation-fill-mode: both;
+  -webkit-animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+          animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+}
+.nutFade-enter-active,
+.nutFadeIn {
+  -webkit-animation-name: nutFadeIn;
+          animation-name: nutFadeIn;
+}
+.nutFade-leave-active,
+.nutFadeOut {
+  -webkit-animation-name: nutFadeOut;
+          animation-name: nutFadeOut;
+}
+@keyframes nutZoomIn {
+from {
+    opacity: 0;
+    -webkit-transform: scale3d(0.3, 0.3, 0.3);
+            transform: scale3d(0.3, 0.3, 0.3);
+}
+50% {
+    opacity: 1;
+}
+}
+@keyframes nutZoomOut {
+from {
+    opacity: 1;
+}
+50% {
+    opacity: 0;
+    -webkit-transform: scale3d(0.3, 0.3, 0.3);
+            transform: scale3d(0.3, 0.3, 0.3);
+}
+to {
+    opacity: 0;
+}
+}
+.nutZoom-enter-active,
+.nutZoomIn,
+.nutZoom-leave-active,
+.nutZoomOut {
+  -webkit-animation-duration: 0.25s;
+          animation-duration: 0.25s;
+  -webkit-animation-fill-mode: both;
+          animation-fill-mode: both;
+  -webkit-animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+          animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+}
+.nutZoom-enter-active,
+.nutZoomIn {
+  -webkit-animation-name: nutZoomIn;
+          animation-name: nutZoomIn;
+}
+.nutZoom-leave-active,
+.nutZoomOut {
+  -webkit-animation-name: nutZoomOut;
+          animation-name: nutZoomOut;
+}
+@keyframes nutEaseIn {
+0% {
+    opacity: 0;
+    -webkit-transform: scale(0.9);
+            transform: scale(0.9);
+}
+100% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+            transform: scale(1);
+}
+}
+@keyframes nutEaseOut {
+0% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+            transform: scale(1);
+}
+100% {
+    opacity: 0;
+    -webkit-transform: scale(0.9);
+            transform: scale(0.9);
+}
+}
+.nutEase-enter-active,
+.nutEaseIn,
+.nutEase-leave-active,
+.nutEaseOut {
+  -webkit-animation-duration: 0.25s;
+          animation-duration: 0.25s;
+  -webkit-animation-fill-mode: both;
+          animation-fill-mode: both;
+  -webkit-animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+          animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+}
+.nutEase-enter-active,
+.nutEaseIn {
+  -webkit-animation-name: nutEaseIn;
+          animation-name: nutEaseIn;
+}
+.nutEase-leave-active,
+.nutEaseOut {
+  -webkit-animation-name: nutEaseOut;
+          animation-name: nutEaseOut;
+}
+@keyframes nutDropIn {
+0% {
+    opacity: 0;
+    -webkit-transform: scaleY(0.8);
+            transform: scaleY(0.8);
+}
+100% {
+    opacity: 1;
+    -webkit-transform: scaleY(1);
+            transform: scaleY(1);
+}
+}
+@keyframes nutDropOut {
+0% {
+    opacity: 1;
+    -webkit-transform: scaleY(1);
+            transform: scaleY(1);
+}
+100% {
+    opacity: 0;
+    -webkit-transform: scaleY(0.8);
+            transform: scaleY(0.8);
+}
+}
+.nutDrop-enter-active,
+.nutDropIn,
+.nutDrop-leave-active,
+.nutDropOut {
+  -webkit-animation-duration: 0.25s;
+          animation-duration: 0.25s;
+  -webkit-animation-fill-mode: both;
+          animation-fill-mode: both;
+  -webkit-animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+          animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+}
+.nutDrop-enter-active,
+.nutDropIn {
+  -webkit-animation-name: nutDropIn;
+          animation-name: nutDropIn;
+}
+.nutDrop-leave-active,
+.nutDropOut {
+  -webkit-animation-name: nutDropOut;
+          animation-name: nutDropOut;
+}
+@keyframes rotation {
+0% {
+    -webkit-transform: rotate(0deg);
+}
+100% {
+    -webkit-transform: rotate(360deg);
+}
+}
+.nutRotate-enter-active,
+.nutRotateIn,
+.nutRotate-leave-active,
+.nutRotateOut {
+  -webkit-animation-duration: 0.25s;
+          animation-duration: 0.25s;
+  -webkit-animation-fill-mode: both;
+          animation-fill-mode: both;
+  -webkit-animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+          animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+}
+.nutRotate-enter-active,
+.nutRotateIn {
+  -webkit-animation-name: nutRotateIn;
+          animation-name: nutRotateIn;
+}
+.nutRotate-leave-active,
+.nutRotateOut {
+  -webkit-animation-name: nutRotateOut;
+          animation-name: nutRotateOut;
+}
+.nut-button {
+  position: relative;
+  display: inline-block;
+  -webkit-flex-shrink: 0;
+      -ms-flex-negative: 0;
+          flex-shrink: 0;
+  height: 76rpx;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  line-height: 72rpx;
+  font-size: 28rpx;
+  text-align: center;
+  -webkit-transition: opacity 0.2s;
+  -o-transition: opacity 0.2s;
+  transition: opacity 0.2s;
+  -webkit-appearance: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  -ms-touch-action: manipulation;
+      touch-action: manipulation;
+}
+.nut-button .text {
+  margin-left: 10rpx;
+}
+.nut-button::before {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 100%;
+  height: 100%;
+  background-color: #000;
+  border: inherit;
+  border-color: #000;
+  border-radius: inherit;
+  -webkit-transform: translate(-50%, -50%);
+      -ms-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+  opacity: 0;
+  content: " ";
+}
+.nut-button:active::before {
+  opacity: 0.1;
+}
+.nut-button__warp {
+  height: 100%;
+  width: 100%;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-justify-content: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+}
+.nut-button--loading::before, .nut-button--disabled::before {
+  display: none;
+}
+.nut-button--default {
+  color: #666666;
+  background: #fff;
+  border: 2rpx solid #cccccc;
+}
+.nut-button--primary {
+  color: #fff;
+  background: -webkit-linear-gradient(315deg, #fa2c19 0%, #fa6419 100%);
+  background: -o-linear-gradient(315deg, #fa2c19 0%, #fa6419 100%);
+  background: linear-gradient(135deg, #fa2c19 0%, #fa6419 100%);
+  border: 2rpx solid transparent;
+}
+.nut-button--info {
+  color: #fff;
+  background: -webkit-linear-gradient(135deg, #498ff2 0%, #4965f2 100%);
+  background: -o-linear-gradient(135deg, #498ff2 0%, #4965f2 100%);
+  background: linear-gradient(315deg, #498ff2 0%, #4965f2 100%);
+  border: 2rpx solid transparent;
+}
+.nut-button--success {
+  color: #fff;
+  background: -webkit-linear-gradient(315deg, #26bf26 0%, #27c530 45%, #28cf3f 83%, #29d446 100%);
+  background: -o-linear-gradient(315deg, #26bf26 0%, #27c530 45%, #28cf3f 83%, #29d446 100%);
+  background: linear-gradient(135deg, #26bf26 0%, #27c530 45%, #28cf3f 83%, #29d446 100%);
+  border: 2rpx solid transparent;
+}
+.nut-button--danger {
+  color: #fff;
+  background: #fa2c19;
+  border: 2rpx solid transparent;
+}
+.nut-button--warning {
+  color: #fff;
+  background: -webkit-linear-gradient(315deg, #ff9e0d 0%, #ffa70d 45%, #ffb60d 83%, #ffbe0d 100%);
+  background: -o-linear-gradient(315deg, #ff9e0d 0%, #ffa70d 45%, #ffb60d 83%, #ffbe0d 100%);
+  background: linear-gradient(135deg, #ff9e0d 0%, #ffa70d 45%, #ffb60d 83%, #ffbe0d 100%);
+  border: 2rpx solid transparent;
+}
+.nut-button--plain {
+  background: #fff;
+}
+.nut-button--plain.nut-button--primary {
+  color: #fa2c19;
+  border-color: #fa2c19;
+}
+.nut-button--plain.nut-button--info {
+  color: #496af2;
+  border-color: #496af2;
+}
+.nut-button--plain.nut-button--success {
+  color: #26bf26;
+  border-color: #26bf26;
+}
+.nut-button--plain.nut-button--danger {
+  color: #fa2c19;
+  border-color: #fa2c19;
+}
+.nut-button--plain.nut-button--warning {
+  color: #ff9e0d;
+  border-color: #ff9e0d;
+}
+.nut-button--large {
+  width: 100%;
+  height: 96rpx;
+  line-height: 92rpx;
+}
+.nut-button--normal {
+  padding: 0 36rpx;
+  font-size: 28rpx;
+}
+.nut-button--small {
+  height: 56rpx;
+  line-height: 52rpx;
+  padding: 0 24rpx;
+  font-size: 24rpx;
+}
+.nut-button--block {
+  display: block;
+  width: 100%;
+}
+.nut-button--disabled {
+  opacity: 0.68;
+}
+.nut-button--loading {
+  opacity: 0.9;
+}
+.nut-button--round {
+  border-radius: 50rpx;
+}
+.nut-button--square {
+  border-radius: 0;
+}

src/sites/mobile-taro/vue/dist/pages/button/demo.json

@@ -0,0 +1 @@
+{"usingComponents":{"custom-wrapper":"../../custom-wrapper","comp":"../../comp"}}

src/sites/mobile-taro/vue/dist/pages/button/demo.wxml

@@ -0,0 +1,2 @@
+<import src="../../base.wxml"/>
+<template is="taro_tmpl" data="{{root:root}}" />

src/sites/mobile-taro/vue/dist/pages/button/demo.wxss

@@ -0,0 +1,331 @@
+view-block {
+  display: block;
+}
+@-webkit-keyframes nutFadeIn {
+from {
+    opacity: 0;
+}
+to {
+    opacity: 1;
+}
+}
+@keyframes nutFadeIn {
+from {
+    opacity: 0;
+}
+to {
+    opacity: 1;
+}
+}
+@-webkit-keyframes nutFadeOut {
+from {
+    opacity: 1;
+}
+to {
+    opacity: 0;
+}
+}
+@keyframes nutFadeOut {
+from {
+    opacity: 1;
+}
+to {
+    opacity: 0;
+}
+}
+.nutFade-enter-active,
+.nutFadeIn,
+.nutFade-leave-active,
+.nutFadeOut {
+  -webkit-animation-duration: 0.25s;
+          animation-duration: 0.25s;
+  -webkit-animation-fill-mode: both;
+          animation-fill-mode: both;
+  -webkit-animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+          animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+}
+.nutFade-enter-active,
+.nutFadeIn {
+  -webkit-animation-name: nutFadeIn;
+          animation-name: nutFadeIn;
+}
+.nutFade-leave-active,
+.nutFadeOut {
+  -webkit-animation-name: nutFadeOut;
+          animation-name: nutFadeOut;
+}
+@-webkit-keyframes nutZoomIn {
+from {
+    opacity: 0;
+    -webkit-transform: scale3d(0.3, 0.3, 0.3);
+            transform: scale3d(0.3, 0.3, 0.3);
+}
+50% {
+    opacity: 1;
+}
+}
+@keyframes nutZoomIn {
+from {
+    opacity: 0;
+    -webkit-transform: scale3d(0.3, 0.3, 0.3);
+            transform: scale3d(0.3, 0.3, 0.3);
+}
+50% {
+    opacity: 1;
+}
+}
+@-webkit-keyframes nutZoomOut {
+from {
+    opacity: 1;
+}
+50% {
+    opacity: 0;
+    -webkit-transform: scale3d(0.3, 0.3, 0.3);
+            transform: scale3d(0.3, 0.3, 0.3);
+}
+to {
+    opacity: 0;
+}
+}
+@keyframes nutZoomOut {
+from {
+    opacity: 1;
+}
+50% {
+    opacity: 0;
+    -webkit-transform: scale3d(0.3, 0.3, 0.3);
+            transform: scale3d(0.3, 0.3, 0.3);
+}
+to {
+    opacity: 0;
+}
+}
+.nutZoom-enter-active,
+.nutZoomIn,
+.nutZoom-leave-active,
+.nutZoomOut {
+  -webkit-animation-duration: 0.25s;
+          animation-duration: 0.25s;
+  -webkit-animation-fill-mode: both;
+          animation-fill-mode: both;
+  -webkit-animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+          animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+}
+.nutZoom-enter-active,
+.nutZoomIn {
+  -webkit-animation-name: nutZoomIn;
+          animation-name: nutZoomIn;
+}
+.nutZoom-leave-active,
+.nutZoomOut {
+  -webkit-animation-name: nutZoomOut;
+          animation-name: nutZoomOut;
+}
+@-webkit-keyframes nutEaseIn {
+0% {
+    opacity: 0;
+    -webkit-transform: scale(0.9);
+            transform: scale(0.9);
+}
+100% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+            transform: scale(1);
+}
+}
+@keyframes nutEaseIn {
+0% {
+    opacity: 0;
+    -webkit-transform: scale(0.9);
+            transform: scale(0.9);
+}
+100% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+            transform: scale(1);
+}
+}
+@-webkit-keyframes nutEaseOut {
+0% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+            transform: scale(1);
+}
+100% {
+    opacity: 0;
+    -webkit-transform: scale(0.9);
+            transform: scale(0.9);
+}
+}
+@keyframes nutEaseOut {
+0% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+            transform: scale(1);
+}
+100% {
+    opacity: 0;
+    -webkit-transform: scale(0.9);
+            transform: scale(0.9);
+}
+}
+.nutEase-enter-active,
+.nutEaseIn,
+.nutEase-leave-active,
+.nutEaseOut {
+  -webkit-animation-duration: 0.25s;
+          animation-duration: 0.25s;
+  -webkit-animation-fill-mode: both;
+          animation-fill-mode: both;
+  -webkit-animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+          animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+}
+.nutEase-enter-active,
+.nutEaseIn {
+  -webkit-animation-name: nutEaseIn;
+          animation-name: nutEaseIn;
+}
+.nutEase-leave-active,
+.nutEaseOut {
+  -webkit-animation-name: nutEaseOut;
+          animation-name: nutEaseOut;
+}
+@-webkit-keyframes nutDropIn {
+0% {
+    opacity: 0;
+    -webkit-transform: scaleY(0.8);
+            transform: scaleY(0.8);
+}
+100% {
+    opacity: 1;
+    -webkit-transform: scaleY(1);
+            transform: scaleY(1);
+}
+}
+@keyframes nutDropIn {
+0% {
+    opacity: 0;
+    -webkit-transform: scaleY(0.8);
+            transform: scaleY(0.8);
+}
+100% {
+    opacity: 1;
+    -webkit-transform: scaleY(1);
+            transform: scaleY(1);
+}
+}
+@-webkit-keyframes nutDropOut {
+0% {
+    opacity: 1;
+    -webkit-transform: scaleY(1);
+            transform: scaleY(1);
+}
+100% {
+    opacity: 0;
+    -webkit-transform: scaleY(0.8);
+            transform: scaleY(0.8);
+}
+}
+@keyframes nutDropOut {
+0% {
+    opacity: 1;
+    -webkit-transform: scaleY(1);
+            transform: scaleY(1);
+}
+100% {
+    opacity: 0;
+    -webkit-transform: scaleY(0.8);
+            transform: scaleY(0.8);
+}
+}
+.nutDrop-enter-active,
+.nutDropIn,
+.nutDrop-leave-active,
+.nutDropOut {
+  -webkit-animation-duration: 0.25s;
+          animation-duration: 0.25s;
+  -webkit-animation-fill-mode: both;
+          animation-fill-mode: both;
+  -webkit-animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+          animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+}
+.nutDrop-enter-active,
+.nutDropIn {
+  -webkit-animation-name: nutDropIn;
+          animation-name: nutDropIn;
+}
+.nutDrop-leave-active,
+.nutDropOut {
+  -webkit-animation-name: nutDropOut;
+          animation-name: nutDropOut;
+}
+@-webkit-keyframes rotation {
+0% {
+    -webkit-transform: rotate(0deg);
+}
+100% {
+    -webkit-transform: rotate(360deg);
+}
+}
+@keyframes rotation {
+0% {
+    -webkit-transform: rotate(0deg);
+}
+100% {
+    -webkit-transform: rotate(360deg);
+}
+}
+.nutRotate-enter-active,
+.nutRotateIn,
+.nutRotate-leave-active,
+.nutRotateOut {
+  -webkit-animation-duration: 0.25s;
+          animation-duration: 0.25s;
+  -webkit-animation-fill-mode: both;
+          animation-fill-mode: both;
+  -webkit-animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+          animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+}
+.nutRotate-enter-active,
+.nutRotateIn {
+  -webkit-animation-name: nutRotateIn;
+          animation-name: nutRotateIn;
+}
+.nutRotate-leave-active,
+.nutRotateOut {
+  -webkit-animation-name: nutRotateOut;
+          animation-name: nutRotateOut;
+}
+.h2 {
+  margin-top: 60rpx;
+  margin-bottom: 20rpx;
+  font-size: 28rpx;
+  color: #909ca4;
+  padding: 0 20rpx;
+  font-weight: 400;
+}
+view {
+  display: block;
+}
+.demo-button-row {
+  margin-bottom: 40rpx;
+}
+.demo-button-row2 {
+  margin-bottom: 20rpx;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-flex-wrap: wrap;
+      -ms-flex-wrap: wrap;
+          flex-wrap: wrap;
+}
+.nut-button {
+  margin-right: 30rpx;
+}
+.nut-button:last-child {
+  margin-bottom: 0;
+  margin-right: 0;
+}

src/sites/mobile-taro/vue/src/app.config.ts

@@ -1,8 +1,5 @@
 export default {
-  pages: [
-    // 'pages/icon-demo/index',
-    'pages/button-demo/index'
-  ],
+  pages: ['pages/button/demo'],
   window: {
     backgroundTextStyle: 'light',
     navigationBarBackgroundColor: '#fff',

src/sites/mobile-taro/vue/src/pages/button-demo/index.config.ts

@@ -1,3 +0,0 @@
-export default {
-  navigationBarTitleText: 'button-demo'
-};

src/sites/mobile-taro/vue/src/pages/button-demo/index.vue

@@ -1,28 +0,0 @@
-<template>
-  <view class="index">
-    <nut-button type="primary" desc="主要按钮" @click="handleClick"
-      >主要按钮</nut-button
-    >
-  </view>
-</template>
-
-<script>
-import { ref } from 'vue';
-import Demo from '../../../../../../packages/__VUE/button/demo.vue';
-import Button from '../button/index.taro.vue';
-
-export default {
-  components: {
-    'nut-button': Button
-  },
-  setup() {
-    const handleClick = () => {
-      console.log('click!!!');
-    };
-
-    return {
-      handleClick
-    };
-  }
-};
-</script>

src/sites/mobile-taro/vue/src/pages/button/demo.vue

@@ -0,0 +1,131 @@
+<template>
+  <view class="demo">
+    <h2 class="h2">按钮类型</h2>
+    <view class="demo-button-row">
+      <nut-button type="primary" @click="handleClick">主要按钮</nut-button>
+      <nut-button type="info">信息按钮</nut-button>
+      <nut-button type="default">默认按钮</nut-button>
+    </view>
+    <view class="demo-button-row2">
+      <nut-button type="danger">危险按钮</nut-button>
+      <nut-button type="warning">警告按钮</nut-button>
+      <nut-button type="success">成功按钮</nut-button>
+    </view>
+    <view class="h2">朴素按钮</view>
+    <view class="demo-button-row2">
+      <nut-button plain type="primary">朴素按钮</nut-button>
+      <nut-button plain type="info">朴素按钮</nut-button>
+    </view>
+    <view class="h2">禁用状态</view>
+    <view class="demo-button-row2">
+      <nut-button disabled type="primary">禁用状态</nut-button>
+      <nut-button plain disabled type="info">禁用状态</nut-button>
+      <nut-button plain disabled type="primary">禁用状态</nut-button>
+    </view>
+    <view class="h2">按钮形状</view>
+    <view class="demo-button-row2">
+      <nut-button shape="square" type="primary">方形按钮</nut-button>
+      <nut-button type="info">圆形按钮</nut-button>
+    </view>
+    <view class="h2">加载状态</view>
+    <view class="demo-button-row2">
+      <nut-button loading type="info"></nut-button>
+      <nut-button loading type="warning">加载中...</nut-button>
+      <nut-button :loading="isLoading" type="success" @click="changeLoading"
+        >Click me!</nut-button
+      >
+    </view>
+    <view class="h2">图标按钮</view>
+    <view class="demo-button-row2">
+      <nut-button
+        shape="square"
+        plain
+        type="primary"
+        icon="star-fill"
+      ></nut-button>
+      <nut-button shape="square" type="primary" icon="star">收藏</nut-button>
+    </view>
+
+    <view class="h2">按钮尺寸</view>
+    <view class="demo-button-row2">
+      <nut-button size="large" type="primary" style="margin-bottom: 10px"
+        >大号按钮</nut-button
+      >
+      <nut-button type="primary">普通按钮</nut-button>
+      <nut-button size="small" type="primary">小型按钮</nut-button>
+    </view>
+    <view class="h2">块级元素</view>
+    <view class="demo-button-row2">
+      <nut-button block type="primary">块级元素</nut-button>
+    </view>
+    <view class="h2">自定义颜色</view>
+    <view class="demo-button-row2">
+      <nut-button color="#7232dd">单色按钮</nut-button>
+      <nut-button color="#7232dd" plain>单色按钮</nut-button>
+      <nut-button color="linear-gradient(to right, #ff6034, #ee0a24)">
+        渐变按钮
+      </nut-button>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+import { ref } from 'vue';
+import { createComponent } from './../../../../../../packages/utils/create';
+import Button from './index.taro.vue';
+const { createDemo } = createComponent('button');
+export default createDemo({
+  props: {},
+  components: {
+    'nut-button': Button
+  },
+  setup(props) {
+    let isLoading = ref(false);
+    const changeLoading = () => {
+      isLoading.value = true;
+      setTimeout(() => {
+        isLoading.value = false;
+      }, 3000);
+    };
+    const handleClick = () => {
+      console.log('click~~');
+    };
+
+    return {
+      isLoading,
+      changeLoading,
+      handleClick
+    };
+  }
+});
+</script>
+
+<style lang="scss">
+.h2 {
+  margin-top: 30px;
+  margin-bottom: 10px;
+  font-size: 14px;
+  color: #909ca4;
+  padding: 0 10px;
+  font-weight: 400;
+}
+view {
+  display: block;
+}
+.demo-button-row {
+  margin-bottom: 20px;
+}
+.demo-button-row2 {
+  margin-bottom: 10px;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.nut-button {
+  margin-right: 15px;
+  &:last-child {
+    margin-bottom: 0;
+    margin-right: 0;
+  }
+}
+</style>

src/sites/mobile-taro/vue/src/pages/button/index.taro.vue

@@ -7,13 +7,12 @@
         <slot></slot>
       </view>
     </view>
-    <!-- <Demo></Demo> -->
   </view>
 </template>
 
 <script lang="ts">
 import { PropType, CSSProperties, toRefs, computed } from 'vue';
-import { createComponent } from '../../../../../../packages/utils/create';
+import { createComponent } from './../../../../../../packages/utils/create';
 const { componentName, create } = createComponent('button');
 
 export type ButtonType =

src/sites/mobile-taro/vue/src/pages/icon-demo/index.config.ts

@@ -1,3 +0,0 @@
-export default {
-  navigationBarTitleText: 'button-demo'
-};

src/sites/mobile-taro/vue/src/pages/icon-demo/index.vue

@@ -1,26 +0,0 @@
-<template>
-  <view class="index">
-    <nut-icon name="dongdong" @click="handleClick"></nut-icon>
-  </view>
-</template>
-
-<script>
-import { ref } from 'vue';
-// import Demo from '../../../../../../packages/__VUE/button/demo.vue';
-import Icon from '../icon/index.taro.vue';
-
-export default {
-  components: {
-    'nut-icon': Icon
-  },
-  setup() {
-    const handleClick = () => {
-      console.log('icon!!!');
-    };
-
-    return {
-      handleClick
-    };
-  }
-};
-</script>