mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2024-12-21 02:50:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(docs): Rate code for composition (#2364)

Browse Source 
Co-authored-by: xing.wu <wuxing@bjca.org.cn>
This commit is contained in:
Xing.Wu 2021-06-30 15:11:46 +08:00 committed by GitHub
parent 42239d2d8d
commit 5d1a591fa3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 401 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
website/docs/en-US/rate.md
View File

@ -30,6 +30,23 @@ Used for rating
}
}
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
return {
value1: ref(null),
value2: ref(null),
colors: ref(['#99A9BF', '#F7BA2A', '#FF9900']), // same as { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
};
},
});
</setup>
-->
```
:::
@ -43,15 +60,29 @@ Used for rating
<script>
import { defineComponent, ref } from 'vue'
export default {
setup() {
data() {
return {
value: ref(null)
value: null
}
}
}
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
return {
value: ref(null),
};
},
});
</setup>
-->
```
:::
@ -77,6 +108,21 @@ Using text to indicate rating score
}
}
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
return {
value: ref(null),
};
},
});
</setup>
-->
```
:::
@ -104,6 +150,22 @@ You can use different icons to distinguish different rate components.
}
}
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
return {
value: ref(null),
iconClasses: ref(['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']) // same as { 2: 'icon-rate-face-1', 4: { value: 'icon-rate-face-2', excluded: true }, 5: 'icon-rate-face-3' }
};
},
});
</setup>
-->
```
:::
@ -131,6 +193,21 @@ Read-only Rate is for displaying rating score. Half star is supported.
}
}
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
return {
value: ref(3.7),
};
},
});
</setup>
-->
```
:::

83
website/docs/es/rate.md
View File

@ -31,6 +31,23 @@ Usado para la calificación
}
}
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
return {
value1: ref(null),
value2: ref(null),
colors: ref(['#99A9BF', '#F7BA2A', '#FF9900']), // same as { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
};
},
});
</setup>
-->
```
:::
@ -44,15 +61,29 @@ Usado para la calificación
<script>
import { defineComponent, ref } from 'vue'
export default {
setup() {
data() {
return {
value: ref(null)
value: null
}
}
}
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
return {
value: ref(null),
};
},
});
</setup>
-->
```
:::
@ -78,6 +109,21 @@ Usa texto para indicar la puntuación
}
}
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
return {
value: ref(null),
};
},
});
</setup>
-->
```
:::
@ -105,6 +151,22 @@ Puede utilizar iconos para diferenciar cada componente.
}
}
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
return {
value: ref(null),
iconClasses: ref(['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']) // same as { 2: 'icon-rate-face-1', 4: { value: 'icon-rate-face-2', excluded: true }, 5: 'icon-rate-face-3' }
};
},
});
</setup>
-->
```
:::
@ -132,6 +194,21 @@ La calificación de solo lectura es para mostrar la puntuación. Soporta media e
}
}
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
return {
value: ref(3.7),
};
},
});
</setup>
-->
```
:::

85
website/docs/fr-FR/rate.md
View File

@ -30,6 +30,23 @@ Utilisé pour donner une note sur cinq étoiles.
}
}
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
return {
value1: ref(null),
value2: ref(null),
colors: ref(['#99A9BF', '#F7BA2A', '#FF9900']), // same as { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
};
},
});
</setup>
-->
```
:::
@ -43,15 +60,29 @@ Utilisé pour donner une note sur cinq étoiles.
<script>
import { defineComponent, ref } from 'vue'
export default {
setup() {
data() {
return {
value: ref(null)
value: null
}
}
}
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
return {
value: ref(null),
};
},
});
</setup>
-->
```
:::
@ -78,6 +109,21 @@ Vous pouvez ajouter du texte à chaque score.
}
}
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
return {
value: ref(null),
};
},
});
</setup>
-->
```
:::
@ -102,9 +148,25 @@ Vous pouvez utiliser différentes icônes pour chaque
value: null,
iconClasses: ['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3'] // same as { 2: 'icon-rate-face-1', 4: { value: 'icon-rate-face-2', excluded: true }, 5: 'icon-rate-face-3' }
}
}
}
}
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
return {
value: ref(null),
iconClasses: ref(['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']), // same as { 2: 'icon-rate-face-1', 4: { value: 'icon-rate-face-2', excluded: true }, 5: 'icon-rate-face-3' }
};
},
});
</setup>
-->
```
:::
@ -132,6 +194,21 @@ Le score peut être en lecture seule. Les demi-étoiles sont supportées.
}
}
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
return {
value: ref(3.7),
};
},
});
</setup>
-->
```
:::

83
website/docs/jp/rate.md
View File

@ -30,6 +30,23 @@
}
}
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
return {
value1: ref(null),
value2: ref(null),
colors: ref(['#99A9BF', '#F7BA2A', '#FF9900']), // same as { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
};
},
});
</setup>
-->
```
:::
@ -43,15 +60,29 @@
<script>
import { defineComponent, ref } from 'vue'
export default {
setup() {
data() {
return {
value: ref(null)
value: null
}
}
}
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
return {
value: ref(null),
};
},
});
</setup>
-->
```
:::
@ -77,6 +108,21 @@ import { defineComponent, ref } from 'vue'
}
}
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
return {
value: ref(null),
};
},
});
</setup>
-->
```
:::
@ -104,6 +150,22 @@ import { defineComponent, ref } from 'vue'
}
}
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
return {
value: ref(null),
iconClasses: ref(['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']) // same as { 2: 'icon-rate-face-1', 4: { value: 'icon-rate-face-2', excluded: true }, 5: 'icon-rate-face-3' }
};
},
});
</setup>
-->
```
:::
@ -131,6 +193,21 @@ import { defineComponent, ref } from 'vue'
}
}
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
return {
value: ref(3.7),
};
},
});
</setup>
-->
```
:::

83
website/docs/zh-CN/rate.md
View File

@ -29,6 +29,23 @@
}
}
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
return {
value1: ref(null),
value2: ref(null),
colors: ref(['#99A9BF', '#F7BA2A', '#FF9900']),// 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
};
},
});
</setup>
-->
```
:::
@ -42,15 +59,29 @@
<script>
import { defineComponent, ref } from 'vue'
export default {
setup() {
data() {
return {
value: ref(null)
value: null
}
}
}
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
return {
value: ref(null),
};
},
});
</setup>
-->
```
:::
@ -74,6 +105,21 @@ import { defineComponent, ref } from 'vue'
}
}
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
return {
value: ref(null),
};
},
});
</setup>
-->
```
:::
@ -100,6 +146,22 @@ import { defineComponent, ref } from 'vue'
}
}
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
return {
value: ref(null),
iconClasses: ref(['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']), // 等同于 { 2: 'icon-rate-face-1', 4: { value: 'icon-rate-face-2', excluded: true }, 5: 'icon-rate-face-3' }
};
},
});
</setup>
-->
```
:::
@ -126,6 +188,21 @@ import { defineComponent, ref } from 'vue'
}
}
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
return {
value: ref(3.7),
};
},
});
</setup>
-->
```
:::