Browse Source

fix: ecard增加国际化

Drjnigfubo 3 years ago
parent
commit
226a5c0a4e

+ 14 - 4
src/packages/__VUE/ecard/demo.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="demo">
-    <h2>基础用法</h2>
+    <h2>{{ translate('basic') }}</h2>
     <nut-cell>
       <nut-ecard
         v-model="money"
@@ -15,7 +15,16 @@
 <script lang="ts">
 import { reactive, ref } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { createDemo } = createComponent('ecard');
+const { createDemo, translate } = createComponent('ecard');
+import { useTranslate } from '@/sites/assets/util/useTranslate';
+useTranslate({
+  'zh-CN': {
+    basic: '基本用法'
+  },
+  'en-US': {
+    basic: 'Basic Usage'
+  }
+});
 export default createDemo({
   setup() {
     const dataList = reactive([
@@ -32,7 +41,7 @@ export default createDemo({
         price: 40
       }
     ]);
-    const money = ref(0);
+    const money = ref(10);
     const inputChange = (val: number) => {
       money.value = val;
     };
@@ -48,7 +57,8 @@ export default createDemo({
       inputChange,
       change,
       money,
-      changeStep
+      changeStep,
+      translate
     };
   }
 });

+ 103 - 0
src/packages/__VUE/ecard/doc.en-US.md

@@ -0,0 +1,103 @@
+# Ecard
+
+### Intro
+
+Virtual e-card selection
+
+### Install
+
+```javascript
+
+import { createApp } from 'vue';
+// vue
+import { Ecard, InputNumber } from '@nutui/nutui';
+// taro
+import { Ecard, InputNumber } from '@nutui/nutui-taro';
+
+const app = createApp();
+app.use(Ecard);
+app.use(InputNumber);
+
+```
+
+### Basic
+
+:::demo
+
+```html
+<template>
+  <nut-ecard
+    v-model="money"
+    @inputChange="inputChange"
+    @change="change"
+    @changeStep="changeStep"
+    :data-list="dataList"
+  ></nut-ecard>
+</template>
+<script>
+  import { reactive, toRefs } from 'vue';
+  export default {
+    setup() {
+      const dataList=reactive([
+        {
+          price:10
+        },
+        {
+          price:20
+        },
+        {
+          price:30
+        },
+        {
+          price:40
+        },
+      ])
+    const money = ref(0);
+    const inputChange = (val) => {
+      money.value = val;
+    };
+    const change = (item) => {
+      money.value = item.price;
+    };
+    const changeStep = (num,price) => {
+      const val = price * num;
+      money.value = val;
+    };
+      return {
+        dataList,
+        inputChange,
+        change,
+        money,
+        changeStep
+      };
+    }
+  };
+</script>
+```
+
+:::
+
+## API
+
+### Props
+
+| Attribute | Description | Type   | Default 
+|--------------|----------------------------------|--------|------------------|
+| modelValue        | Price                | Number | 0            |
+| choose-text         | Main Title               | String |  Select   |
+| other-value-text        | Other Text   | String |         Other Value        |
+| data-list         | Ecard List| Array |        []        |
+| card-amount-min| Other Min Value     | Number | 1|
+| card-amount-max        | Other Max Value                      | Number | 9999            |
+| card-buy-min        | Choose Min Value                      | Number | 9999            |
+| card-buy-max        | Choose Max Value                      | Number | 9999            |
+| placeholder        | Placeholder                     | String |    Placeholder       |
+| suffix        | Symbol mark                      | String | ¥            |
+
+### Events
+
+| 事件名 | 说明           | 回调参数     |
+|--------|----------------|--------------|
+| change  | Trigger event when Ecard is clicker | value |
+| input-change  | Triggered when the value changes |value |
+| change-step  | Triggered when the steps value changes | value,modelValue |

+ 5 - 5
src/packages/__VUE/ecard/index.vue

@@ -81,7 +81,7 @@ export default create({
       default: 9999
     },
     modelValue: {
-      type: Number,
+      type: [Number, String],
       default: 0
     },
     placeholder: {
@@ -97,13 +97,12 @@ export default create({
 
   setup(props, { emit }) {
     const currentIndex: Ref<number | null | string> = ref(null);
-    const currentValue: Ref<number | null | string> = ref(null);
-    const inputValue: Ref<string | undefined | number> = ref();
+    const currentValue: Ref<number | null | string | undefined> = ref(null);
+    const inputValue: Ref<string | undefined | number> = ref('');
     const stepValue: Ref<number> = ref(props.cardAmountMin);
     const money: Ref<number | string | undefined> = ref(props.modelValue);
     const handleClick = (item: { price: number | string }, index: number) => {
       currentIndex.value = index;
-      inputValue.value = '';
       stepValue.value = props.cardAmountMin;
       currentValue.value = item.price;
       emit('change', item);
@@ -128,7 +127,8 @@ export default create({
     const inputClick = () => {
       currentIndex.value = 'input';
       stepValue.value = props.cardAmountMin;
-      emit('update:modelValue', 0);
+      currentValue.value = inputValue.value;
+      emit('update:modelValue', inputValue.value);
       emit('inputClick');
     };
     const changeStep = (value: number) => {

+ 1 - 1
src/packages/__VUE/ecard/test/index.spec.ts

@@ -100,5 +100,5 @@ test('input change when less than maxValue', async () => {
   input.trigger('click');
   add.trigger('click');
   await nextTick();
-  expect((wrapper.emitted('update:modelValue') as any)[0][0]).toBe(0);
+  expect((wrapper.emitted('update:modelValue') as any)[0][0]).toBe('');
 });