feat: 完成文字涂色卡功能

miniprogram/components/word-input/word-input.json

@@ -2,6 +2,7 @@
     "component": true,
     "styleIsolation": "apply-shared",
     "usingComponents": {
-        "van-icon": "@vant/weapp/icon/index"
+        "van-icon": "@vant/weapp/icon/index",
+        "toy-button": "/ui/button/button"
     }
 }

miniprogram/components/word-input/word-input.less

@@ -19,4 +19,22 @@
         font-size: 28rpx;
         line-height: 92rpx;
     }
+
+    .btn-word-add {
+        box-sizing: border-box;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        height: 72rpx;
+        padding: 0 24rpx;
+        background: rgba(255, 215, 25, 1);
+        border-radius: 20rpx;
+        font-size: 28rpx;
+        color: #fff;
+        margin-right: 10rpx;
+
+        &.active {
+            background-color: rgba(255, 215, 25, 0.8);
+        }
+    }
 }

miniprogram/components/word-input/word-input.ts

@@ -18,20 +18,28 @@ Component({
     /**
      * 组件的初始数据
      */
-    data: {},
+    data: {
+    },
     lifetimes: {
         attached() {
-            (this as any).words = '';
+            (this as any).value = '';
         },
     },
     /**
      * 组件的方法列表
      */
     methods: {
-        onConfirm(e: WechatMiniprogram.Input) {
+        onInput(e: WechatMiniprogram.Input) {
             let { value } = e.detail;
-            // (this as any).words = value;
-            value = value.replace(' ', '');
+            value = value.replace(/\s/g, '');
+            if (value.length > 0) {
+                (this as any).value = value;
+            }
+        },
+
+        onConfirm() {
+            const value = (this as any).value;
+
             if (value.length > 0) {
                 this.triggerEvent('onConfirm', { value });
             }

miniprogram/components/word-input/word-input.wxml

@@ -1,3 +1,5 @@
+<wxs module="wxs" src="./word-input.wxs"></wxs>
+
 <view
     class="word-input-container"
     style="{{width ? 'width:' + width + ';' : ''}}">
@@ -10,5 +12,13 @@
         class="word-input"
         type="text"
         placeholder="{{placeholder}}"
+        bindinput="onInput"
         bindconfirm="onConfirm" />
+    <view
+        class="btn-word-add"
+        bind:tap="onConfirm"
+        bind:touchstart="{{wxs.touchStart}}"
+        bind:touchend="{{wxs.touchEnd}}">
+        添加
+    </view>
 </view>

miniprogram/components/word-input/word-input.wxs

@@ -0,0 +1,23 @@
+module.exports = {
+    touchStart: function (event, ownerInstance) {
+        var instance = event.instance;
+        var dataSet = instance.getDataset();
+        var disabled = dataSet.disabled;
+        var loading = dataSet.loading;
+
+        if (instance && !disabled && !loading) {
+            instance.addClass('active');
+        }
+    },
+
+    touchEnd: function (event, ownerInstance) {
+        var instance = event.instance;
+        var dataSet = instance.getDataset();
+        var disabled = dataSet.disabled;
+        var loading = dataSet.loading;
+
+        if (instance && !disabled && !loading) {
+            instance.removeClass('active');
+        }
+    },
+};