mirror of
				https://gitee.com/vant-contrib/vant.git
				synced 2025-11-04 12:52:08 +08:00 
			
		
		
		
	docs(Rate): use composition api
This commit is contained in:
		
							parent
							
								
									dea44580df
								
							
						
					
					
						commit
						e5df5d734e
					
				@ -19,11 +19,12 @@ app.use(Rate);
 | 
				
			|||||||
```
 | 
					```
 | 
				
			||||||
 | 
					
 | 
				
			||||||
```js
 | 
					```js
 | 
				
			||||||
 | 
					import { ref } from 'vue';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
export default {
 | 
					export default {
 | 
				
			||||||
  data() {
 | 
					  setup() {
 | 
				
			||||||
    return {
 | 
					    const value = ref(3);
 | 
				
			||||||
      value: 3,
 | 
					    return { value };
 | 
				
			||||||
    };
 | 
					 | 
				
			||||||
  },
 | 
					  },
 | 
				
			||||||
};
 | 
					};
 | 
				
			||||||
```
 | 
					```
 | 
				
			||||||
@ -53,11 +54,12 @@ export default {
 | 
				
			|||||||
```
 | 
					```
 | 
				
			||||||
 | 
					
 | 
				
			||||||
```js
 | 
					```js
 | 
				
			||||||
 | 
					import { ref } from 'vue';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
export default {
 | 
					export default {
 | 
				
			||||||
  data() {
 | 
					  setup() {
 | 
				
			||||||
    return {
 | 
					    const value = ref(2.5);
 | 
				
			||||||
      value: 2.5,
 | 
					    return { value };
 | 
				
			||||||
    };
 | 
					 | 
				
			||||||
  },
 | 
					  },
 | 
				
			||||||
};
 | 
					};
 | 
				
			||||||
```
 | 
					```
 | 
				
			||||||
@ -87,11 +89,19 @@ export default {
 | 
				
			|||||||
```
 | 
					```
 | 
				
			||||||
 | 
					
 | 
				
			||||||
```javascript
 | 
					```javascript
 | 
				
			||||||
 | 
					import { ref } from 'vue';
 | 
				
			||||||
 | 
					import { Toast } from 'vant';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
export default {
 | 
					export default {
 | 
				
			||||||
  method: {
 | 
					  setup() {
 | 
				
			||||||
    onChange(value) {
 | 
					    const value = ref(3);
 | 
				
			||||||
 | 
					    const onChange = (value) => {
 | 
				
			||||||
      Toast('current value:' + value);
 | 
					      Toast('current value:' + value);
 | 
				
			||||||
    },
 | 
					    };
 | 
				
			||||||
 | 
					    return {
 | 
				
			||||||
 | 
					      value,
 | 
				
			||||||
 | 
					      onChange,
 | 
				
			||||||
 | 
					    };
 | 
				
			||||||
  },
 | 
					  },
 | 
				
			||||||
};
 | 
					};
 | 
				
			||||||
```
 | 
					```
 | 
				
			||||||
 | 
				
			|||||||
@ -23,11 +23,12 @@ app.use(Rate);
 | 
				
			|||||||
```
 | 
					```
 | 
				
			||||||
 | 
					
 | 
				
			||||||
```js
 | 
					```js
 | 
				
			||||||
 | 
					import { ref } from 'vue';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
export default {
 | 
					export default {
 | 
				
			||||||
  data() {
 | 
					  setup() {
 | 
				
			||||||
    return {
 | 
					    const value = ref(3);
 | 
				
			||||||
      value: 3,
 | 
					    return { value };
 | 
				
			||||||
    };
 | 
					 | 
				
			||||||
  },
 | 
					  },
 | 
				
			||||||
};
 | 
					};
 | 
				
			||||||
```
 | 
					```
 | 
				
			||||||
@ -57,11 +58,12 @@ export default {
 | 
				
			|||||||
```
 | 
					```
 | 
				
			||||||
 | 
					
 | 
				
			||||||
```js
 | 
					```js
 | 
				
			||||||
 | 
					import { ref } from 'vue';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
export default {
 | 
					export default {
 | 
				
			||||||
  data() {
 | 
					  setup() {
 | 
				
			||||||
    return {
 | 
					    const value = ref(2.5);
 | 
				
			||||||
      value: 2.5,
 | 
					    return { value };
 | 
				
			||||||
    };
 | 
					 | 
				
			||||||
  },
 | 
					  },
 | 
				
			||||||
};
 | 
					};
 | 
				
			||||||
```
 | 
					```
 | 
				
			||||||
@ -91,11 +93,19 @@ export default {
 | 
				
			|||||||
```
 | 
					```
 | 
				
			||||||
 | 
					
 | 
				
			||||||
```javascript
 | 
					```javascript
 | 
				
			||||||
 | 
					import { ref } from 'vue';
 | 
				
			||||||
 | 
					import { Toast } from 'vant';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
export default {
 | 
					export default {
 | 
				
			||||||
  method: {
 | 
					  setup() {
 | 
				
			||||||
    onChange(value) {
 | 
					    const value = ref(3);
 | 
				
			||||||
 | 
					    const onChange = (value) => {
 | 
				
			||||||
      Toast('当前值:' + value);
 | 
					      Toast('当前值:' + value);
 | 
				
			||||||
    },
 | 
					    };
 | 
				
			||||||
 | 
					    return {
 | 
				
			||||||
 | 
					      value,
 | 
				
			||||||
 | 
					      onChange,
 | 
				
			||||||
 | 
					    };
 | 
				
			||||||
  },
 | 
					  },
 | 
				
			||||||
};
 | 
					};
 | 
				
			||||||
```
 | 
					```
 | 
				
			||||||
 | 
				
			|||||||
@ -45,6 +45,10 @@
 | 
				
			|||||||
</template>
 | 
					</template>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
<script>
 | 
					<script>
 | 
				
			||||||
 | 
					import { toRefs, reactive } from 'vue';
 | 
				
			||||||
 | 
					import { useTranslate } from '../../composables/use-translate';
 | 
				
			||||||
 | 
					import Toast from '../../toast';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
export default {
 | 
					export default {
 | 
				
			||||||
  i18n: {
 | 
					  i18n: {
 | 
				
			||||||
    'zh-CN': {
 | 
					    'zh-CN': {
 | 
				
			||||||
@ -69,8 +73,9 @@ export default {
 | 
				
			|||||||
    },
 | 
					    },
 | 
				
			||||||
  },
 | 
					  },
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  data() {
 | 
					  setup() {
 | 
				
			||||||
    return {
 | 
					    const t = useTranslate();
 | 
				
			||||||
 | 
					    const state = reactive({
 | 
				
			||||||
      value1: 3,
 | 
					      value1: 3,
 | 
				
			||||||
      value2: 3,
 | 
					      value2: 3,
 | 
				
			||||||
      value3: 3,
 | 
					      value3: 3,
 | 
				
			||||||
@ -78,14 +83,17 @@ export default {
 | 
				
			|||||||
      value5: 4,
 | 
					      value5: 4,
 | 
				
			||||||
      value6: 3,
 | 
					      value6: 3,
 | 
				
			||||||
      value7: 2,
 | 
					      value7: 2,
 | 
				
			||||||
    };
 | 
					    });
 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
 | 
					
 | 
				
			||||||
  methods: {
 | 
					    const onChange = (value) => {
 | 
				
			||||||
    onChange(value) {
 | 
					      Toast(t('toastContent', value));
 | 
				
			||||||
      this.value7 = value;
 | 
					    };
 | 
				
			||||||
      this.$toast(this.t('toastContent', value));
 | 
					
 | 
				
			||||||
    },
 | 
					    return {
 | 
				
			||||||
 | 
					      ...toRefs(state),
 | 
				
			||||||
 | 
					      t,
 | 
				
			||||||
 | 
					      onChange,
 | 
				
			||||||
 | 
					    };
 | 
				
			||||||
  },
 | 
					  },
 | 
				
			||||||
};
 | 
					};
 | 
				
			||||||
</script>
 | 
					</script>
 | 
				
			||||||
 | 
				
			|||||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user