Rate 评分 ​

<template>
  <div class="demo-block">
    <p>默认不区分颜色</p>
    <tu-rate v-model="value1" />
  </div>
  <div class="demo-block">
    <p>区分颜色</p>
    <tu-rate v-model="value2" :colors="colors" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const value1 = ref(null);
const value2 = ref(null);
const colors = ref(['#99A9BF', '#F7BA2A', '#FF9900']); // 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
</script>

<style scoped>
.demo-block {
  width: 50%;
  display: inline-block;
}
</style>

<template>
  <div class="demo-block">
    <p>默认不区分颜色</p>
    <tu-rate v-model="value1" />
  </div>
  <div class="demo-block">
    <p>区分颜色</p>
    <tu-rate v-model="value2" :colors="colors" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const value1 = ref(null);
const value2 = ref(null);
const colors = ref(['#99A9BF', '#F7BA2A', '#FF9900']); // 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
</script>

<style scoped>
.demo-block {
  width: 50%;
  display: inline-block;
}
</style>

<template>
  <span class="demo-label">超小</span>
  <tu-rate v-model="value" size="mini" />
  <br />

  <span class="demo-label">较小</span>
  <tu-rate v-model="value" size="small" />
  <br />

  <span class="demo-label">默认</span>
  <tu-rate v-model="value" />
  <br />

  <span class="demo-label">大型</span>
  <tu-rate v-model="value" size="large" />
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const value = ref(null);
</script>

<style scoped>
.demo-label {
  font-size: 14px;
  vertical-align: -webkit-baseline-middle;
  margin-right: 5px;
}
</style>

<template>
  <span class="demo-label">超小</span>
  <tu-rate v-model="value" size="mini" />
  <br />

  <span class="demo-label">较小</span>
  <tu-rate v-model="value" size="small" />
  <br />

  <span class="demo-label">默认</span>
  <tu-rate v-model="value" />
  <br />

  <span class="demo-label">大型</span>
  <tu-rate v-model="value" size="large" />
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const value = ref(null);
</script>

<style scoped>
.demo-label {
  font-size: 14px;
  vertical-align: -webkit-baseline-middle;
  margin-right: 5px;
}
</style>

<template>
  <tu-rate v-model="value" allow-half />
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const value = ref();
</script>

<template>
  <tu-rate v-model="value" allow-half />
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const value = ref();
</script>

<template>
  <tu-rate
    v-model="value"
    :texts="['oops', 'disappointed', 'normal', 'good', 'great']"
    show-text
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const value = ref();
</script>

<template>
  <tu-rate
    v-model="value"
    :texts="['oops', 'disappointed', 'normal', 'good', 'great']"
    show-text
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const value = ref();
</script>

<template>
  <tu-rate v-model="value" clearable />
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const value = ref(3);
</script>

<template>
  <tu-rate v-model="value" clearable />
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const value = ref(3);
</script>

<template>
  <tu-rate
    v-model="value"
    :icons="icons"
    :void-icon="ChatRound"
    :colors="['#409eff', '#67c23a', '#FF9900']"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import {
  ChatDotRound,
  ChatLineRound,
  ChatRound
} from '@tu-view-plus/icons-vue';

const value = ref();
const icons = [ChatRound, ChatLineRound, ChatDotRound]; // 等同于 { 2: ChatRound, 4: { value: ChatLineRound, excluded: true }, 5: ChatDotRound }
</script>

<template>
  <tu-rate
    v-model="value"
    :icons="icons"
    :void-icon="ChatRound"
    :colors="['#409eff', '#67c23a', '#FF9900']"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import {
  ChatDotRound,
  ChatLineRound,
  ChatRound
} from '@tu-view-plus/icons-vue';

const value = ref();
const icons = [ChatRound, ChatLineRound, ChatDotRound]; // 等同于 { 2: ChatRound, 4: { value: ChatLineRound, excluded: true }, 5: ChatDotRound }
</script>

<template>
  <tu-rate
    v-model="value"
    disabled
    show-score
    text-color="#ff9900"
    score-template="{value} points"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const value = ref(3.7);
</script>

<template>
  <tu-rate
    v-model="value"
    disabled
    show-score
    text-color="#ff9900"
    score-template="{value} points"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const value = ref(3.7);
</script>