ソースを参照

fix: docs,demo

Ymm0008 3 年 前
コミット
840b63d3de

+ 1 - 1
src/packages/__VUE/barrage/demo.vue

@@ -2,7 +2,7 @@
   <div class="demo">
     <h2>{{ translate('basic') }}</h2>
     <nut-cell>
-      <nut-barrage ref="danmu" :danmu="list"></nut-barrage>
+      <!-- <nut-barrage ref="danmu" :danmu="list"></nut-barrage> -->
     </nut-cell>
     <div class="test">
       <nut-button @click="addDanmu" class="add nut-button--primary">{{ translate('btn1') }}</nut-button>

+ 2 - 2
src/packages/__VUE/countup/demo.vue

@@ -6,10 +6,10 @@
       <nut-countup :init-num="150.0" :end-num="0.0" :speed="6.18" :to-fixed="2"></nut-countup>
       <nut-countup :init-num="500.0" :end-num="0.0" :speed="50" :to-fixed="2"></nut-countup>
     </div>
-    <h2>{{ translate('title') }}</h2>
+    <!-- <h2>{{ translate('title') }}</h2>
     <div class="show-demo">
       <nut-countup :scrolling="true" :init-num="18.618" :during="600"></nut-countup>
-    </div>
+    </div> -->
     <h2>{{ translate('title1') }}</h2>
     <div class="show-demo">
       <nut-countup

+ 0 - 13
src/packages/__VUE/countup/doc.en-US.md

@@ -27,18 +27,6 @@ app.use(Countup);
 </template>
 ```
 
-:::
-### Digital scrolling
-:::demo
-
-```html
-<template>
-    <nut-countup :scrolling="true" :init-num='17.618' :during="600"></nut-countup>
-</template>
-```
-
-:::
-
 ### Custom scrolling picture display
 :::demo
 
@@ -176,7 +164,6 @@ export default {
 | during | rolling time to run | number | `1000`
 | num-width | Number width, often used to customize seamless scrolling | number | `20`
 | num-height | Number height, often used to customize seamless scrolling (required for lottery function) | number | `20`
-| scrolling | numeric scrolling mode (H5 only) | boolean | `false`
 | custom-change-num | The number to change (for custom pictures, initNum and endNum are invalid here) | number | `1`
 | custom-bg-img | Custom image (it is recommended to use Sprite image, and Sprite image must be used to use the lottery function) | string | `-`
 | custom-spac-num | There may be space between numbers in the image | number | `0`

+ 0 - 10
src/packages/__VUE/countup/doc.md

@@ -27,16 +27,6 @@ app.use(Countup);
 ```
 
 :::
-### 数字滚动
-:::demo
-
-```html
-<template>
-    <nut-countup :scrolling="true" :init-num='17.618' :during="600"></nut-countup>
-</template>
-```
-
-:::
 
 ### 自定义数字图片展示
 :::demo

+ 45 - 4
src/packages/__VUE/textarea/index.taro.vue

@@ -19,17 +19,23 @@
       :maxlength="maxLength"
       :placeholder="placeholder || translate('placeholder')"
       :auto-focus="autofocus"
+      @change="endComposing"
+      @compositionend="endComposing"
+      @compositionstart="startComposing"
     />
     <view class="nut-textarea__limit" v-if="limitShow"> {{ modelValue ? modelValue.length : 0 }}/{{ maxLength }}</view>
     <view class="nut-textarea__cpoyText" :style="copyTxtStyle" v-if="autosize">{{ modelValue }}</view>
   </view>
 </template>
+<!-- eslint-disable @typescript-eslint/no-non-null-assertion -->
 <script lang="ts">
 import { computed, nextTick, onMounted, ref, watch } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-import Taro, { eventCenter, getCurrentInstance as getCurrentInstanceTaro } from '@tarojs/taro';
+import Taro from '@tarojs/taro';
 const { componentName, create, translate } = createComponent('textarea');
-
+export interface InputTarget extends HTMLInputElement {
+  composing?: boolean;
+}
 export default create({
   props: {
     modelValue: {
@@ -113,8 +119,24 @@ export default create({
     };
 
     const change = (event: Event) => {
+      if (Taro.getEnv() === Taro.ENV_TYPE.WEB) {
+        if (!composing.value) {
+          // console.log((event.target as InputTarget)!.composing);
+          _onInput(event);
+        }
+      } else {
+        _onInput(event);
+      }
+      // const input = event.target as HTMLInputElement;
+      // emitChange(input.value, event);
+    };
+    const _onInput = (event: Event) => {
       const input = event.target as HTMLInputElement;
-      emitChange(input.value, event);
+      let value = input.value;
+      if (props.maxLength && value.length > Number(props.maxLength)) {
+        value = value.slice(0, Number(props.maxLength));
+      }
+      emitChange(value, event);
     };
 
     const focus = (event: Event) => {
@@ -227,6 +249,23 @@ export default create({
         });
       }
     });
+    const composing = ref(false);
+    const startComposing = (event: Event) => {
+      if (Taro.getEnv() === Taro.ENV_TYPE.WEB) {
+        composing.value = true;
+        // (event.target as InputTarget)!.composing = true;
+      }
+    };
+
+    const endComposing = ({ target }: Event) => {
+      if (Taro.getEnv() === Taro.ENV_TYPE.WEB) {
+        if (composing.value) {
+          composing.value = false;
+          // (target as InputTarget)!.composing = false;
+          (target as InputTarget).dispatchEvent(new Event('input'));
+        }
+      }
+    };
 
     return {
       env,
@@ -237,7 +276,9 @@ export default create({
       focus,
       blur,
       translate,
-      copyTxtStyle
+      copyTxtStyle,
+      startComposing,
+      endComposing
     };
   }
 });

+ 31 - 4
src/packages/__VUE/textarea/index.vue

@@ -14,16 +14,22 @@
       :maxlength="maxLength"
       :placeholder="placeholder || translate('placeholder')"
       :autofocus="autofocus"
+      @change="endComposing"
+      @compositionend="endComposing"
+      @compositionstart="startComposing"
     />
     <view class="nut-textarea__limit" v-if="limitShow"> {{ modelValue ? modelValue.length : 0 }}/{{ maxLength }}</view>
   </view>
 </template>
+<!-- eslint-disable @typescript-eslint/no-non-null-assertion -->
 <script lang="ts">
 import { watch, ref, computed, onMounted, nextTick } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 
 const { componentName, create, translate } = createComponent('textarea');
-
+export interface InputTarget extends HTMLInputElement {
+  composing: boolean;
+}
 export default create({
   props: {
     modelValue: {
@@ -132,8 +138,16 @@ export default create({
     };
 
     const change = (event: Event) => {
-      const input = event.target as HTMLInputElement;
-      emitChange(input.value, event);
+      if (!(event.target as InputTarget)!.composing) {
+        const input = event.target as HTMLInputElement;
+        let value = input.value;
+        if (props.maxLength && value.length > Number(props.maxLength)) {
+          value = value.slice(0, Number(props.maxLength));
+        }
+        emitChange(input.value, event);
+      }
+      // const input = event.target as HTMLInputElement;
+      // emitChange(input.value, event);
     };
 
     const focus = (event: Event) => {
@@ -153,6 +167,17 @@ export default create({
       emit('blur', { value, event });
     };
 
+    const startComposing = ({ target }: Event) => {
+      (target as InputTarget)!.composing = true;
+    };
+
+    const endComposing = ({ target }: Event) => {
+      if ((target as InputTarget)!.composing) {
+        (target as InputTarget)!.composing = false;
+        (target as InputTarget)!.dispatchEvent(new Event('input'));
+      }
+    };
+
     return {
       textareaRef,
       classes,
@@ -160,7 +185,9 @@ export default create({
       change,
       focus,
       blur,
-      translate
+      translate,
+      startComposing,
+      endComposing
     };
   }
 });