|
|
@@ -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 |
|