alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

docs: prefer using ref (#9285)

Browse Source 
* docs: prefer using ref

* docs: fix lint error
This commit is contained in:
neverland
2021-08-18 16:39:09 +08:00
committed by GitHub
parent 5adaeb704d
commit c3ad21791b
23 changed files with 577 additions and 621 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/coupon-list/README.md
+28 -28
View File
@@ -24,20 +24,20 @@ app.use(CouponList);
```html
<!-- Coupon Cell -->
<van-coupon-cell
:coupons="state.coupons"
:chosen-coupon="state.chosenCoupon"
@click="state.showList = true"
:coupons="coupons"
:chosen-coupon="chosenCoupon"
@click="showList = true"
/>
<!-- Coupon List -->
<van-popup
v-model:show="state.showList"
v-model:show="showList"
round
position="bottom"
style="height: 90%; padding-top: 4px;"
>
<van-coupon-list
:coupons="state.coupons"
:chosen-coupon="state.chosenCoupon"
:coupons="coupons"
:chosen-coupon="chosenCoupon"
:disabled-coupons="disabledCoupons"
@change="onChange"
@exchange="onExchange"
@@ -46,40 +46,40 @@ app.use(CouponList);
```
```js
import { reactive } from 'vue';
const coupon = {
available: 1,
originCondition: 0,
reason: '',
value: 150,
name: 'Coupon name',
startAt: 1489104000,
endAt: 1514592000,
valueDesc: '1.5',
unitDesc: '元',
};
import { ref } from 'vue';
export default {
setup() {
const state = reactive({
coupons: [coupon],
showList: false,
chosenCoupon: -1,
});
const coupon = {
available: 1,
originCondition: 0,
reason: '',
value: 150,
name: 'Coupon name',
startAt: 1489104000,
endAt: 1514592000,
valueDesc: '1.5',
unitDesc: '元',
};
const coupons = ref([coupon]);
const showList = ref(false);
const chosenCoupon = ref(-1);
const onChange = (index) => {
state.showList = false;
state.chosenCoupon = index;
showList.value = false;
chosenCoupon.value = index;
};
const onExchange = (code) => {
state.coupons.push(coupon);
coupons.value.push(coupon);
};
return {
state,
coupons,
showList,
onChange,
onExchange,
chosenCoupon,
disabledCoupons: [coupon],
};
},
src/coupon-list/README.zh-CN.md
+28 -28
View File
@@ -24,20 +24,20 @@ app.use(CouponList);
```html
<!-- 优惠券单元格 -->
<van-coupon-cell
:coupons="state.coupons"
:chosen-coupon="state.chosenCoupon"
@click="state.showList = true"
:coupons="coupons"
:chosen-coupon="chosenCoupon"
@click="showList = true"
/>
<!-- 优惠券列表 -->
<van-popup
v-model:show="state.showList"
v-model:show="showList"
round
position="bottom"
style="height: 90%; padding-top: 4px;"
>
<van-coupon-list
:coupons="state.coupons"
:chosen-coupon="state.chosenCoupon"
:coupons="coupons"
:chosen-coupon="chosenCoupon"
:disabled-coupons="disabledCoupons"
@change="onChange"
@exchange="onExchange"
@@ -46,40 +46,40 @@ app.use(CouponList);
```
```js
import { reactive } from 'vue';
const coupon = {
available: 1,
condition: '无使用门槛\n最多优惠12元',
reason: '',
value: 150,
name: '优惠券名称',
startAt: 1489104000,
endAt: 1514592000,
valueDesc: '1.5',
unitDesc: '元',
};
import { ref } from 'vue';
export default {
setup() {
const state = reactive({
coupons: [coupon],
showList: false,
chosenCoupon: -1,
});
const coupon = {
available: 1,
condition: '无使用门槛\n最多优惠12元',
reason: '',
value: 150,
name: '优惠券名称',
startAt: 1489104000,
endAt: 1514592000,
valueDesc: '1.5',
unitDesc: '元',
};
const coupons = ref([coupon]);
const showList = ref(false);
const chosenCoupon = ref(-1);
const onChange = (index) => {
state.showList = false;
state.chosenCoupon = index;
showList.value = false;
chosenCoupon.value = index;
};
const onExchange = (code) => {
state.coupons.push(coupon);
coupons.value.push(coupon);
};
return {
state,
coupons,
showList,
onChange,
onExchange,
chosenCoupon,
disabledCoupons: [coupon],
};
},