docs(CouponList): use composition api

2020-12-15 15:05:03 +08:00
parent 039732d4be
commit 7d20266f41
3 changed files with 151 additions and 128 deletions
@@ -18,20 +18,20 @@ app.use(CouponList);
 ```html
 <!-- Coupon Cell -->
 <van-coupon-cell
-  :coupons="coupons"
-  :chosen-coupon="chosenCoupon"
-  @click="showList = true"
+  :coupons="state.coupons"
+  :chosen-coupon="state.chosenCoupon"
+  @click="state.showList = true"
 />
 <!-- Coupon List -->
 <van-popup
-  v-model="showList"
+  v-model="state.showList"
  round
  position="bottom"
  style="height: 90%; padding-top: 4px;"
 >
  <van-coupon-list
-    :coupons="coupons"
-    :chosen-coupon="chosenCoupon"
+    :coupons="state.coupons"
+    :chosen-coupon="state.chosenCoupon"
    :disabled-coupons="disabledCoupons"
    @change="onChange"
    @exchange="onExchange"
@@ -40,6 +40,8 @@ app.use(CouponList);
 ```

 ```js
+import { reactive } from 'vue';
+
 const coupon = {
  available: 1,
  originCondition: 0,
@@ -53,22 +55,28 @@ const coupon = {
 };

 export default {
-  data() {
-    return {
-      chosenCoupon: -1,
+  setup() {
+    const state = reactive({
      coupons: [coupon],
+      showList: false,
+      chosenCoupon: -1,
+    });
+
+    const onChange = (index) => {
+      state.showList = false;
+      state.chosenCoupon = index;
+    };
+    const onExchange = (code) => {
+      state.coupons.push(coupon);
+    };
+
+    return {
+      state,
+      onChange,
+      onExchange,
      disabledCoupons: [coupon],
    };
  },
-  methods: {
-    onChange(index) {
-      this.showList = false;
-      this.chosenCoupon = index;
-    },
-    onExchange(code) {
-      this.coupons.push(coupon);
-    },
-  },
 };
 ```