diff --git a/src/cascader/README.md b/src/cascader/README.md index 8f8af5efb..e805903f9 100644 --- a/src/cascader/README.md +++ b/src/cascader/README.md @@ -22,34 +22,32 @@ app.use(Cascader); ```html - + ``` ```js -import { reactive } from 'vue'; +import { ref } from 'vue'; export default { setup() { - const state = reactive({ - show: false, - fieldValue: '', - cascaderValue: '', - }); + const show = ref(false); + const fieldValue = ref(''); + const cascaderValue = ref(''); const options = [ { text: 'Zhejiang', @@ -63,14 +61,16 @@ export default { }, ]; const onFinish = ({ selectedOptions }) => { - state.show = false; - state.fieldValue = selectedOptions.map((option) => option.text).join('/'); + show.value = false; + fieldValue.value = selectedOptions.map((option) => option.text).join('/'); }; return { - state, + show, options, onFinish, + fieldValue, + cascaderValue, }; }, }; @@ -80,11 +80,11 @@ export default { ```html ``` @@ -93,19 +93,19 @@ export default { ```html - + @@ -113,26 +113,24 @@ export default { ``` ```js -import { reactive } from 'vue'; +import { ref } from 'vue'; export default { setup() { - const state = reactive({ - show: false, - fieldValue: '', - cascaderValue: '', - options: [ - { - text: 'Zhejiang', - value: '330000', - children: [], - }, - ], - }); + const show = ref(false); + const fieldValue = ref(''); + const cascaderValue = ref(''); + const options = ref([ + { + text: 'Zhejiang', + value: '330000', + children: [], + }, + ]); const onChange = ({ value }) => { - if (value === state.options[0].value) { + if (value === options.value[0].value) { setTimeout(() => { - state.options[0].children = [ + options.value[0].children = [ { text: 'Hangzhou', value: '330100' }, { text: 'Ningbo', value: '330200' }, ]; @@ -140,14 +138,16 @@ export default { } }; const onFinish = ({ selectedOptions }) => { - state.show = false; - state.fieldValue = selectedOptions.map((option) => option.text).join('/'); + show.value = false; + fieldValue.value = selectedOptions.map((option) => option.text).join('/'); }; return { - state, - onChange, + show, + options, onFinish, + fieldValue, + cascaderValue, }; }, }; diff --git a/src/cascader/README.zh-CN.md b/src/cascader/README.zh-CN.md index b53ad03bb..dd4268b7f 100644 --- a/src/cascader/README.zh-CN.md +++ b/src/cascader/README.zh-CN.md @@ -24,34 +24,32 @@ app.use(Cascader); ```html - + ``` ```js -import { reactive } from 'vue'; +import { ref } from 'vue'; export default { setup() { - const state = reactive({ - show: false, - fieldValue: '', - cascaderValue: '', - }); + const show = ref(false); + const fieldValue = ref(''); + const cascaderValue = ref(''); // 选项列表，children 代表子选项，支持多级嵌套 const options = [ { @@ -67,14 +65,16 @@ export default { ]; // 全部选项选择完毕后，会触发 finish 事件 const onFinish = ({ selectedOptions }) => { - state.show = false; - state.fieldValue = selectedOptions.map((option) => option.text).join('/'); + show.value = false; + fieldValue.value = selectedOptions.map((option) => option.text).join('/'); }; return { - state, + show, options, onFinish, + fieldValue, + cascaderValue, }; }, }; @@ -86,11 +86,11 @@ export default { ```html ``` @@ -101,19 +101,19 @@ export default { ```html - + @@ -121,26 +121,24 @@ export default { ``` ```js -import { reactive } from 'vue'; +import { ref } from 'vue'; export default { setup() { - const state = reactive({ - show: false, - fieldValue: '', - cascaderValue: '', - options: [ - { - text: '浙江省', - value: '330000', - children: [], - }, - ], - }); + const show = ref(false); + const fieldValue = ref(''); + const cascaderValue = ref(''); + const options = ref([ + { + text: '浙江省', + value: '330000', + children: [], + }, + ]); const onChange = ({ value }) => { - if (value === state.options[0].value) { + if (value === options.value[0].value) { setTimeout(() => { - state.options[0].children = [ + options.value[0].children = [ { text: '杭州市', value: '330100' }, { text: '宁波市', value: '330200' }, ]; @@ -148,14 +146,16 @@ export default { } }; const onFinish = ({ selectedOptions }) => { - state.show = false; - state.fieldValue = selectedOptions.map((option) => option.text).join('/'); + show.value = false; + fieldValue.value = selectedOptions.map((option) => option.text).join('/'); }; return { - state, - onChange, + show, + options, onFinish, + fieldValue, + cascaderValue, }; }, }; diff --git a/src/contact-card/README.md b/src/contact-card/README.md index 0982a3ac5..b6ae5af93 100644 --- a/src/contact-card/README.md +++ b/src/contact-card/README.md @@ -40,29 +40,23 @@ export default { ### Edit Contact ```html - + ``` ```js -import { reactive } from 'vue'; +import { ref } from 'vue'; import { Toast } from 'vant'; export default { setup() { - const currentContact = reactive({ - name: 'John Snow', - tel: '13000000000', - }); + const tel = ref('13000000000'); + const name = ref('John Snow'); const onEdit = () => Toast('edit'); return { + tel, + name, onEdit, - currentContact, }; }, }; diff --git a/src/contact-card/README.zh-CN.md b/src/contact-card/README.zh-CN.md index b49f33544..24880bdc6 100644 --- a/src/contact-card/README.zh-CN.md +++ b/src/contact-card/README.zh-CN.md @@ -40,28 +40,21 @@ export default { ### 编辑联系人 ```html - + ``` ```js -import { reactive } from 'vue'; +import { ref } from 'vue'; import { Toast } from 'vant'; export default { setup() { - const currentContact = reactive({ - name: '张三', - tel: '13000000000', - }); + const tel = ref('13000000000'); + const name = ref('张三'); const onEdit = () => Toast('edit'); - return { - onEdit, + tel, + name, currentContact, }; }, diff --git a/src/contact-list/README.md b/src/contact-list/README.md index 5a947f940..3fde955c9 100644 --- a/src/contact-list/README.md +++ b/src/contact-list/README.md @@ -32,37 +32,36 @@ app.use(ContactList); ``` ```js -import { reactive } from 'vue'; +import { ref } from 'vue'; import { Toast } from 'vant'; export default { setup() { - const state = reactive({ - chosenContactId: '1', - list: [ - { - id: '1', - name: 'John Snow', - tel: '13000000000', - isDefault: true, - }, - { - id: '2', - name: 'Ned Stark', - tel: '1310000000', - }, - ], - }); + const chosenContactId = ref('1'); + const list = ref([ + { + id: '1', + name: 'John Snow', + tel: '13000000000', + isDefault: true, + }, + { + id: '2', + name: 'Ned Stark', + tel: '1310000000', + }, + ]); const onAdd = () => Toast('Add'); const onEdit = (contact) => Toast('Edit' + contact.id); const onSelect = (contact) => Toast('Select' + contact.id); return { - state, + list, onAdd, onEdit, onSelect, + chosenContactId, }; }, }; diff --git a/src/contact-list/README.zh-CN.md b/src/contact-list/README.zh-CN.md index c278d7fcd..e1fe81038 100644 --- a/src/contact-list/README.zh-CN.md +++ b/src/contact-list/README.zh-CN.md @@ -22,8 +22,8 @@ app.use(ContactList); ```html Toast('新增'); const onEdit = (contact) => Toast('编辑' + contact.id); const onSelect = (contact) => Toast('选择' + contact.id); return { - state, + list, onAdd, onEdit, onSelect, + chosenContactId, }; }, }; diff --git a/src/coupon-list/README.md b/src/coupon-list/README.md index daeb5ce06..ef1011299 100644 --- a/src/coupon-list/README.md +++ b/src/coupon-list/README.md @@ -24,20 +24,20 @@ app.use(CouponList); ```html { - 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], }; }, diff --git a/src/coupon-list/README.zh-CN.md b/src/coupon-list/README.zh-CN.md index 96b810a21..1bb3a6efa 100644 --- a/src/coupon-list/README.zh-CN.md +++ b/src/coupon-list/README.zh-CN.md @@ -24,20 +24,20 @@ app.use(CouponList); ```html { - 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], }; }, diff --git a/src/dropdown-menu/README.zh-CN.md b/src/dropdown-menu/README.zh-CN.md index 6fe9d3df5..3dd4ffe1f 100644 --- a/src/dropdown-menu/README.zh-CN.md +++ b/src/dropdown-menu/README.zh-CN.md @@ -29,7 +29,7 @@ app.use(DropdownItem); ``` ```js -import { reactive } from 'vue'; +import { ref } from 'vue'; export default { setup() { diff --git a/src/field/README.md b/src/field/README.md index 855934910..6c86719b1 100644 --- a/src/field/README.md +++ b/src/field/README.md @@ -46,28 +46,26 @@ Use `type` prop to custom different type fields. ```html - - - - - + + + + + ``` ```js -import { reactive } from 'vue'; +import { ref } from 'vue'; export default { setup() { - const state = reactive({ - tel: '', - text: '', - digit: '', - number: '', - password: '', - }); + const tel = ref(''); + const text = ref(''); + const digit = ref(''); + const number = ref(''); + const password = ref(''); - return { state }; + return { tel, text, digit, number, password }; }, }; ``` @@ -86,14 +84,14 @@ export default { ```html value.replace(/\d/g, ''); return { - state, + value1, + value2, formatter, }; }, diff --git a/src/field/README.zh-CN.md b/src/field/README.zh-CN.md index 2a53352ae..e40c84679 100644 --- a/src/field/README.zh-CN.md +++ b/src/field/README.zh-CN.md @@ -48,32 +48,30 @@ export default { ```html - + - + - + - + - + ``` ```js -import { reactive } from 'vue'; +import { ref } from 'vue'; export default { setup() { - const state = reactive({ - tel: '', - text: '', - digit: '', - number: '', - password: '', - }); + const tel = ref(''); + const text = ref(''); + const digit = ref(''); + const number = ref(''); + const password = ref(''); - return { state }; + return { tel, text, digit, number, password }; }, }; ``` @@ -96,14 +94,14 @@ export default { ```html value.replace(/\d/g, ''); return { - state, + value1, + value2, formatter, }; }, diff --git a/src/form/README.md b/src/form/README.md index f15b2361f..a5c0bd6b2 100644 --- a/src/form/README.md +++ b/src/form/README.md @@ -26,14 +26,14 @@ app.use(CellGroup); { console.log('submit', values); }; return { - state, + username, + password, onSubmit, }; }, @@ -76,25 +75,25 @@ export default { /1\d{10}/.test(val); @@ -140,7 +138,10 @@ export default { }; return { - state, + value1, + value2, + value3, + value4, pattern, onFailed, validator, @@ -317,43 +318,42 @@ export default { ```html - + ``` ```js -import { reactive } from 'vue'; +import { ref } from 'vue'; export default { setup() { - const state = reactive({ - value: '', - showPicker: false, - }); + const result = ref(''); + const showPicker = ref(false); const columns = ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine']; const onConfirm = (value) => { - state.value = value; - state.showPicker = false; + result.value = value; + showPicker.value = false; }; return { - state, + result, columns, onConfirm, + showPicker, }; }, }; @@ -363,40 +363,40 @@ export default { ```html - + ``` ```js -import { reactive } from 'vue'; +import { ref } from 'vue'; export default { setup() { - const state = reactive({ - value: '', - showPicker: false, - }); + const result = ref(''); + const showPicker = ref(false); + const onConfirm = (value) => { - state.value = value; - state.showPicker = false; + result.value = value; + showPicker.value = false; }; return { - state, + result, onConfirm, + showPicker, }; }, }; @@ -406,43 +406,43 @@ export default { ```html - + ``` ```js -import { reactive } from 'vue'; +import { ref } from 'vue'; +import { areaList } from '@vant/area-data'; export default { setup() { - const state = reactive({ - value: '', - showArea: false, - }); + const result = ref(''); + const showArea = ref(false); const onConfirm = (value) => { - state.showArea = false; - state.value = values + showArea.value = false; + result.value = values .filter((item) => !!item) .map((item) => item.name) .join('/'); }; return { - state, - areaList: {}, + result, + areaList, + showArea, onConfirm, }; }, @@ -453,34 +453,33 @@ export default { ```html - + ``` ```js -import { reactive } from 'vue'; +import { ref } from 'vue'; export default { setup() { - const state = reactive({ - value: '', - showCalendar: false, - }); + const result = ref(''); + const showCalendar = ref(false); const onConfirm = (date) => { - state.value = `${date.getMonth() + 1}/${date.getDate()}`; - state.showCalendar = false; + result.value = `${date.getMonth() + 1}/${date.getDate()}`; + showCalendar.value = false; }; return { - state, + result, onConfirm, + showCalendar, }; }, }; diff --git a/src/form/README.zh-CN.md b/src/form/README.zh-CN.md index 389b105fa..a8c3e0404 100644 --- a/src/form/README.zh-CN.md +++ b/src/form/README.zh-CN.md @@ -28,14 +28,14 @@ app.use(CellGroup); { console.log('submit', values); }; return { - state, + username, + password, onSubmit, }; }, @@ -81,28 +80,28 @@ export default { - + ``` ```js -import { reactive } from 'vue'; +import { ref } from 'vue'; export default { setup() { - const state = reactive({ - value: '', - showPicker: false, - }); + const result = ref(''); + const showPicker = ref(false); const columns = ['杭州', '宁波', '温州', '嘉兴', '湖州']; const onConfirm = (value) => { - state.value = value; - state.showPicker = false; + result.value = value; + showPicker.value = false; }; return { - state, + result, columns, onConfirm, + showPicker, }; }, }; @@ -392,40 +391,40 @@ export default { ```html - + ``` ```js -import { reactive } from 'vue'; +import { ref } from 'vue'; export default { setup() { - const state = reactive({ - value: '', - showPicker: false, - }); + const result = ref(''); + const showPicker = ref(false); + const onConfirm = (value) => { - state.value = value; - state.showPicker = false; + result.value = value; + showPicker.value = false; }; return { - state, + result, onConfirm, + showPicker, }; }, }; @@ -437,43 +436,43 @@ export default { ```html - + ``` ```js -import { reactive } from 'vue'; +import { ref } from 'vue'; +import { areaList } from '@vant/area-data'; export default { setup() { - const state = reactive({ - value: '', - showArea: false, - }); + const result = ref(''); + const showArea = ref(false); const onConfirm = (value) => { - state.showArea = false; - state.value = values + showArea.value = false; + result.value = values .filter((item) => !!item) .map((item) => item.name) .join('/'); }; return { - state, - areaList: {}, // 数据格式见 Area 组件文档 + result, + areaList, + showArea, onConfirm, }; }, @@ -486,34 +485,33 @@ export default { ```html - + ``` ```js -import { reactive } from 'vue'; +import { ref } from 'vue'; export default { setup() { - const state = reactive({ - value: '', - showCalendar: false, - }); + const result = ref(''); + const showCalendar = ref(false); const onConfirm = (date) => { - state.value = `${date.getMonth() + 1}/${date.getDate()}`; - state.showCalendar = false; + result.value = `${date.getMonth() + 1}/${date.getDate()}`; + showCalendar.value = false; }; return { - state, + result, onConfirm, + showCalendar, }; }, }; diff --git a/src/image-preview/README.md b/src/image-preview/README.md index 20db17e53..93be40d3d 100644 --- a/src/image-preview/README.md +++ b/src/image-preview/README.md @@ -88,34 +88,30 @@ setTimeout(() => { ### Component Call ```html - + ``` ```js -import { reactive } from 'vue'; +import { ref } from 'vue'; export default { setup() { - const state = reactive({ - show: false, - index: 0, - }); - const onChange = (index) => { - state.index = index; + const show = ref(false); + const index = ref(0); + const images = [ + 'https://img.yzcdn.cn/vant/apple-1.jpg', + 'https://img.yzcdn.cn/vant/apple-2.jpg', + ]; + const onChange = (newIndex) => { + index.value = newIndex; }; return { - state, - images: [ - 'https://img.yzcdn.cn/vant/apple-1.jpg', - 'https://img.yzcdn.cn/vant/apple-2.jpg', - ], + show, + index, + images, onChange, }; }, diff --git a/src/image-preview/README.zh-CN.md b/src/image-preview/README.zh-CN.md index 622713544..d8f607977 100644 --- a/src/image-preview/README.zh-CN.md +++ b/src/image-preview/README.zh-CN.md @@ -117,34 +117,30 @@ setTimeout(() => { 如果需要在图片预览内嵌入组件或其他自定义内容，可以使用组件调用的方式，调用前需要通过 `app.use` 注册组件。 ```html - + ``` ```js -import { reactive } from 'vue'; +import { ref } from 'vue'; export default { setup() { - const state = reactive({ - show: false, - index: 0, - }); - const onChange = (index) => { - state.index = index; + const show = ref(false); + const index = ref(0); + const images = [ + 'https://img.yzcdn.cn/vant/apple-1.jpg', + 'https://img.yzcdn.cn/vant/apple-2.jpg', + ]; + const onChange = (newIndex) => { + index.value = newIndex; }; return { - state, - images: [ - 'https://img.yzcdn.cn/vant/apple-1.jpg', - 'https://img.yzcdn.cn/vant/apple-2.jpg', - ], + show, + index, + images, onChange, }; }, diff --git a/src/list/README.md b/src/list/README.md index 4bb285cea..b57045e94 100644 --- a/src/list/README.md +++ b/src/list/README.md @@ -22,42 +22,42 @@ app.use(List); ```html - + ``` ```js -import { reactive } from 'vue'; +import { ref } from 'vue'; export default { setup() { - const state = reactive({ - list: [], - loading: false, - finished: false, - }); + const list = ref([]); + const loading = ref(false); + const finished = ref(false); const onLoad = () => { setTimeout(() => { for (let i = 0; i < 10; i++) { - state.list.push(state.list.length + 1); + list.value.push(list.value.length + 1); } - state.loading = false; + loading.value = false; - if (state.list.length >= 40) { - state.finished = true; + if (list.value.length >= 40) { + finished.value = true; } }, 1000); }; return { - state, + list, onLoad, + loading, + finished, }; }, }; @@ -67,35 +67,34 @@ export default { ```html - + ``` ```js -import { reactive } from 'vue'; +import { ref } from 'vue'; export default { setup() { - const state = reactive({ - list: [], - error: false, - loading: false, - }); - + const list = ref([]); + const error = ref(false); + const loading = ref(false); const onLoad = () => { fetchSomeThing().catch(() => { - state.error = true; + error.value = true; }); }; return { - state, + list, + error, onLoad, + loading, }; }, }; @@ -104,58 +103,59 @@ export default { ### PullRefresh ```html - + - + ``` ```js -import { reactive } from 'vue'; +import { ref } from 'vue'; export default { setup() { - const state = reactive({ - list: [], - loading: false, - finished: false, - refreshing: false, - }); + const list = ref([]); + const loading = ref(false); + const finished = ref(false); + const refreshing = ref(false); const onLoad = () => { setTimeout(() => { - if (state.refreshing) { - state.list = []; - state.refreshing = false; + if (refreshing.value) { + list.value = []; + refreshing.value = false; } for (let i = 0; i < 10; i++) { - state.list.push(state.list.length + 1); + list.value.push(list.value.length + 1); } - state.loading = false; + loading.value = false; - if (state.list.length >= 40) { - state.finished = true; + if (list.value.length >= 40) { + finished.value = true; } }, 1000); }; const onRefresh = () => { - state.finished = false; - state.loading = true; + finished.value = false; + loading.value = true; onLoad(); }; return { - state, + list, onLoad, + loading, + finished, onRefresh, + refreshing, }; }, }; diff --git a/src/list/README.zh-CN.md b/src/list/README.zh-CN.md index 8c409b646..6834a8ad8 100644 --- a/src/list/README.zh-CN.md +++ b/src/list/README.zh-CN.md @@ -24,47 +24,47 @@ List 组件通过 `loading` 和 `finished` 两个变量控制加载状态，当 ```html - + ``` ```js -import { reactive } from 'vue'; +import { ref } from 'vue'; export default { setup() { - const state = reactive({ - list: [], - loading: false, - finished: false, - }); + const list = ref([]); + const loading = ref(false); + const finished = ref(false); const onLoad = () => { // 异步更新数据 // setTimeout 仅做示例，真实场景中一般为 ajax 请求 setTimeout(() => { for (let i = 0; i < 10; i++) { - state.list.push(state.list.length + 1); + list.value.push(list.value.length + 1); } // 加载状态结束 - state.loading = false; + loading.value = false; // 数据全部加载完成 - if (state.list.length >= 40) { - state.finished = true; + if (list.value.length >= 40) { + finished.value = true; } }, 1000); }; return { - state, + list, onLoad, + loading, + finished, }; }, }; @@ -76,35 +76,34 @@ export default { ```html - + ``` ```js -import { reactive } from 'vue'; +import { ref } from 'vue'; export default { setup() { - const state = reactive({ - list: [], - error: false, - loading: false, - }); - + const list = ref([]); + const error = ref(false); + const loading = ref(false); const onLoad = () => { fetchSomeThing().catch(() => { - state.error = true; + error.value = true; }); }; return { - state, + list, + error, onLoad, + loading, }; }, }; @@ -115,62 +114,63 @@ export default { List 组件可以与 [PullRefresh](#/zh-CN/pull-refresh) 组件结合使用，实现下拉刷新的效果。 ```html - + - + ``` ```js -import { reactive } from 'vue'; +import { ref } from 'vue'; export default { setup() { - const state = reactive({ - list: [], - loading: false, - finished: false, - refreshing: false, - }); + const list = ref([]); + const loading = ref(false); + const finished = ref(false); + const refreshing = ref(false); const onLoad = () => { setTimeout(() => { - if (state.refreshing) { - state.list = []; - state.refreshing = false; + if (refreshing.value) { + list.value = []; + refreshing.value = false; } for (let i = 0; i < 10; i++) { - state.list.push(state.list.length + 1); + list.value.push(list.value.length + 1); } - state.loading = false; + loading.value = false; - if (state.list.length >= 40) { - state.finished = true; + if (list.value.length >= 40) { + finished.value = true; } }, 1000); }; const onRefresh = () => { // 清空列表数据 - state.finished = false; + finished.value = false; // 重新加载数据 // 将 loading 设置为 true，表示处于加载状态 - state.loading = true; + loading.value = true; onLoad(); }; return { - state, + list, onLoad, + loading, + finished, onRefresh, + refreshing, }; }, }; diff --git a/src/picker/README.md b/src/picker/README.md index 4f3098127..4b04b1809 100644 --- a/src/picker/README.md +++ b/src/picker/README.md @@ -189,25 +189,23 @@ export default { When Picker columns data is acquired asynchronously, use `loading` prop to show loading prompt. ```html - + ``` ```js -import { reactive } from 'vue'; +import { ref } from 'vue'; export default { setup() { - const state = reactive({ - columns: [], - loading: true, - }); + const columns = ref([]); + const loading = ref(true); setTimeout(() => { - state.loading = false; - state.columns = ['Option']; + columns.value = ['Option']; + loading.value = false; }, 1000); - return { state }; + return { columns, loading }; }, }; ``` @@ -216,43 +214,42 @@ export default { ```html ``` ```js -import { reactive } from 'vue'; +import { ref } from 'vue'; export default { setup() { const columns = ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine']; - const state = reactive({ - value: '', - showPicker: false, - }); + const result = ref(''); + const showPicker = ref(false); const onConfirm = (value) => { - state.value = value; - state.showPicker = false; + result.value = value; + showPicker.value = false; }; return { - state, + result, columns, onConfirm, + showPicker, }; }, }; diff --git a/src/picker/README.zh-CN.md b/src/picker/README.zh-CN.md index 0ef85c52a..4a248031c 100644 --- a/src/picker/README.zh-CN.md +++ b/src/picker/README.zh-CN.md @@ -211,25 +211,23 @@ export default { 若选择器数据是异步获取的，可以通过 `loading` 属性显示加载提示。 ```html - + ``` ```js -import { reactive } from 'vue'; +import { ref } from 'vue'; export default { setup() { - const state = reactive({ - columns: [], - loading: true, - }); + const columns = ref([]); + const loading = ref(true); setTimeout(() => { - state.loading = false; - state.columns = ['选项']; + columns.value = ['选项']; + loading.value = false; }, 1000); - return { state }; + return { columns, loading }; }, }; ``` @@ -240,42 +238,41 @@ export default { ```html - + ``` ```js -import { reactive } from 'vue'; +import { ref } from 'vue'; export default { setup() { const columns = ['杭州', '宁波', '温州', '绍兴', '湖州', '嘉兴', '金华']; - const state = reactive({ - value: '', - showPicker: false, - }); + const result = ref(''); + const showPicker = ref(false); const onConfirm = (value) => { - state.value = value; - state.showPicker = false; + result.value = value; + showPicker.value = false; }; return { - state, + result, columns, onConfirm, + showPicker, }; }, }; diff --git a/src/pull-refresh/README.md b/src/pull-refresh/README.md index c127d24c6..a24aa2e1a 100644 --- a/src/pull-refresh/README.md +++ b/src/pull-refresh/README.md @@ -23,31 +23,30 @@ app.use(PullRefresh); The `refresh` event will be Emitted when pull refresh, you should set `v-model` to `false` to reset loading status after process refresh event. ```html - -

Refresh Count: {{ state.count }}

+ +

Refresh Count: {{ count }}

 ``` ```js -import { reactive } from 'vue'; +import { ref } from 'vue'; import { Toast } from 'vant'; export default { setup() { - const state = reactive({ - count: 0, - loading: false, - }); + const count = ref(0); + const loading = ref(false); const onRefresh = () => { setTimeout(() => { Toast('Refresh Success'); - state.loading = false; - state.count++; + loading.value = false; + count.value++; }, 1000); }; return { - state, + count, + loading, onRefresh, }; }, diff --git a/src/pull-refresh/README.zh-CN.md b/src/pull-refresh/README.zh-CN.md index 8c4747c43..a65766c7d 100644 --- a/src/pull-refresh/README.zh-CN.md +++ b/src/pull-refresh/README.zh-CN.md @@ -23,31 +23,30 @@ app.use(PullRefresh); 下拉刷新时会触发 `refresh` 事件，在事件的回调函数中可以进行同步或异步操作，操作完成后将 `v-model` 设置为 `false`，表示加载完成。 ```html - -

刷新次数: {{ state.count }}

+ +

刷新次数: {{ count }}

 ``` ```js -import { reactive } from 'vue'; +import { ref } from 'vue'; import { Toast } from 'vant'; export default { setup() { - const state = reactive({ - count: 0, - loading: false, - }); + const count = ref(0); + const loading = ref(false); const onRefresh = () => { setTimeout(() => { Toast('刷新成功'); - state.loading = false; - state.count++; + loading.value = false; + count.value++; }, 1000); }; return { - state, + count, + loading, onRefresh, }; }, diff --git a/src/tree-select/README.md b/src/tree-select/README.md index 676da3ed7..3edef4df5 100644 --- a/src/tree-select/README.md +++ b/src/tree-select/README.md @@ -22,21 +22,19 @@ app.use(TreeSelect); ```html ``` ```js -import { reactive } from 'vue'; +import { ref } from 'vue'; export default { setup() { - const state = reactive({ - activeId: 1, - activeIndex: 0, - }); + const activeId = ref(1); + const activeIndex = ref(0); const items = [ { text: 'Group 1', @@ -55,8 +53,9 @@ export default { ]; return { - state, items, + activeId, + activeIndex, }; }, }; @@ -66,21 +65,19 @@ export default { ```html ``` ```js -import { reactive } from 'vue'; +import { ref } from 'vue'; export default { setup() { - const state = reactive({ - activeId: [1, 2], - activeIndex: 0, - }); + const activeId = ref([1, 2]); + const activeIndex = ref(0); const items = [ { text: 'Group 1', @@ -99,8 +96,9 @@ export default { ]; return { - state, items, + activeId, + activeIndex, }; }, }; diff --git a/src/tree-select/README.zh-CN.md b/src/tree-select/README.zh-CN.md index 8a7154d8b..2c06483b3 100644 --- a/src/tree-select/README.zh-CN.md +++ b/src/tree-select/README.zh-CN.md @@ -24,21 +24,19 @@ app.use(TreeSelect); ```html ``` ```js -import { reactive } from 'vue'; +import { ref } from 'vue'; export default { setup() { - const state = reactive({ - activeId: 1, - activeIndex: 0, - }); + const activeId = ref(1); + const activeIndex = ref(0); const items = [ { text: '浙江', @@ -57,8 +55,9 @@ export default { ]; return { - state, items, + activeId, + activeIndex, }; }, }; @@ -70,21 +69,19 @@ export default { ```html ``` ```js -import { reactive } from 'vue'; +import { ref } from 'vue'; export default { setup() { - const state = reactive({ - activeId: [1, 2], - activeIndex: 0, - }); + const activeId = ref([1, 2]); + const activeIndex = ref(0); const items = [ { text: '浙江', @@ -103,8 +100,9 @@ export default { ]; return { - state, items, + activeId, + activeIndex, }; }, };