Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(rate): support gap #185

Merged
merged 3 commits into from
Jun 20, 2022
Merged

fix(rate): support gap #185

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f0dc12d
fix(rate): support gap
anlyyao Jun 16, 2022
e2b5af1
test(rate): update snapshots
anlyyao Jun 16, 2022
306b290
fix(rate): update demo
anlyyao Jun 20, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 5 additions & 10 deletions src/rate/demos/allow-half.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,10 @@
<template>
<t-rate v-model="value" allow-half />
<t-rate v-model="value" clearable allow-half :gap="defaultGap" />
</template>

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

export default defineComponent({
setup() {
return {
value: ref(3.5),
};
},
});
const defaultGap = 8;
const value = ref(3.5);
</script>
21 changes: 8 additions & 13 deletions src/rate/demos/base.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,13 @@
<template>
<t-rate v-model="value" />
<!-- 允许清除 -->
<t-rate v-model="value1" clearable />
<t-rate v-model="value" clearable :gap="defaultGap" @change="changeValue" />
</template>

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

export default defineComponent({
setup() {
return {
value: ref(2),
value1: ref(3),
};
},
});
const changeValue = (val: Number) => {
console.log('current value is', val);
};
const defaultGap = 8;
const value = ref(1);
</script>
15 changes: 5 additions & 10 deletions src/rate/demos/color.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,10 @@
<template>
<t-rate v-model="value" color="#0052d9" />
<t-rate v-model="value" clearable :color="['#FFC51C', '#E8E8E8']" :gap="defaultGap" />
</template>

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

export default defineComponent({
setup() {
return {
value: ref(5),
};
},
});
const defaultGap = 8;
const value = ref(3);
</script>
15 changes: 5 additions & 10 deletions src/rate/demos/count.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,10 @@
<template>
<t-rate v-model="value" :count="6" allow-half clearable />
<t-rate v-model="value" :count="6" clearable :gap="defaultGap" />
</template>

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

export default defineComponent({
setup() {
return {
value: ref(6),
};
},
});
const defaultGap = 8;
const value = ref(3);
</script>
15 changes: 5 additions & 10 deletions src/rate/demos/disabled.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,10 @@
<template>
<t-rate v-model="value" disabled />
<t-rate v-model="value" disabled :gap="defaultGap" />
</template>

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

export default defineComponent({
setup() {
return {
value: ref(3.5),
};
},
});
const defaultGap = 8;
const value = ref(3);
</script>
17 changes: 6 additions & 11 deletions src/rate/demos/icon.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,14 @@
<template>
<t-rate v-model="value" clearable show-text allow-half>
<t-rate v-model="value" clearable allow-half>
<template #icon>
<t-icon name="user-filled" />
<CheckCircleFilledIcon />
</template>
</t-rate>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
<script lang="ts" setup>
import { ref } from 'vue';
import { CheckCircleFilledIcon } from 'tdesign-icons-vue-next';

export default defineComponent({
setup() {
return {
value: ref(1),
};
},
});
const value = ref(3);
</script>
126 changes: 52 additions & 74 deletions src/rate/demos/mobile.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,116 +2,93 @@
<div class="tdesign-mobile-demo">
<h1 class="title">Rate 按钮</h1>
<p class="summary">评分组件，对内容进行快速评级操作，或内容评价的等级展示，目前常用为五星实心评价</p>
<tdesign-demo-block title="01 类型" summary="基础评分">
<tdesign-demo-block title="01 类型" summary="实心评分">
<div class="rate-demo-cell">
<div class="rate-demo-cell__label">请点击评分</div>
<t-rate v-model="current" size="16px" clearable />
</div>
<div class="rate-demo-cell">
<div class="rate-demo-cell__label">请点击评分</div>
<t-rate :default-value="3" clearable />
<BaseDemo />
</div>
</tdesign-demo-block>
<tdesign-demo-block summary="空心评分">
<div class="rate-demo-cell">
<div class="rate-demo-cell__label">请点击评分</div>
<t-rate :value="current" variant="outline" />
<t-rate :default-value="demoValue[0]" variant="outline" clearable :gap="defaultGap" />
</div>
</tdesign-demo-block>
<tdesign-demo-block summary="自定义数量评分">
<div class="rate-demo-cell">
<div class="rate-demo-cell__label">自定义数量</div>
<t-rate v-model="current1" :count="4" clearable />
<CountDemo />
</div>
</tdesign-demo-block>
<tdesign-demo-block summary="半星评分">
<div class="rate-demo-cell">
<div class="rate-demo-cell__label">半星评分</div>
<t-rate v-model="current2" clearable allow-half />
<div class="rate-demo-cell__label">半星评价</div>
<AllowHalfDemo />
</div>
</tdesign-demo-block>
<tdesign-demo-block summary="带描述评分">
<div class="rate-demo-cell">
<div class="rate-demo-cell rate-demo-cell--space">
<div class="rate-demo-cell__label">请点击评分</div>
<t-rate v-model="current3" clearable show-text />
<t-rate v-model="demoValue[1]" clearable show-text :gap="defaultGap" />
</div>
<div class="rate-demo-cell">
<div class="rate-demo-cell rate-demo-cell--space">
<div class="rate-demo-cell__label">请点击评分</div>
<t-rate v-model="current4" clearable show-text :texts="texts" />
<t-rate v-model="demoValue[2]" clearable show-text :texts="texts" :gap="defaultGap" />
</div>
<div class="rate-demo-cell">
<div class="rate-demo-cell__label">请点击评分</div>
<t-rate v-model="current4" clearable show-text :texts="texts" variant="outline" />
<TextDemo />
</div>
</tdesign-demo-block>
<tdesign-demo-block summary="展示型评分">
<t-rate v-model="current5" disabled style="margin-left: 32px" />
</tdesign-demo-block>
<tdesign-demo-block title="02 规格" summary="实心评分">
<tdesign-demo-block summary="禁用评分">
<div class="rate-demo-cell">
<div class="rate-demo-cell__label">请点击评分</div>
<t-rate v-model="current6" size="16px" />
</div>
<div class="rate-demo-cell">
<div class="rate-demo-cell__label">请点击评分</div>
<t-rate v-model="current6" />
<div class="rate-demo-cell__label">仅展示</div>
<DisabledDemo />
</div>
</tdesign-demo-block>
<tdesign-demo-block summary="空心评分">
<div class="rate-demo-cell">
<div class="rate-demo-cell__label">请点击评分</div>
<t-rate v-model="current6" size="16px" variant="outline" />
<tdesign-demo-block summary="设置评分颜色">
<div class="rate-demo-cell rate-demo-cell--space">
<div class="rate-demo-cell__label">空心评分</div>
<t-rate v-model="demoValue[3]" variant="outline" clearable :color="['#FFC51C', '#E8E8E8']" :gap="defaultGap" />
</div>
<div class="rate-demo-cell">
<div class="rate-demo-cell__label">请点击评分</div>
<t-rate v-model="current6" variant="outline" />
<div class="rate-demo-cell__label">实心评分</div>
<ColorDemo />
</div>
</tdesign-demo-block>
<tdesign-demo-block summary="自定义数量">
<div class="rate-demo-cell">
<div class="rate-demo-cell__label">请点击评分</div>
<t-rate v-model="current6" size="16px" :count="4" />
<tdesign-demo-block title="02 规格" summary="评价规格">
<div class="rate-demo-cell rate-demo-cell--space">
<div class="rate-demo-cell__label">评分20</div>
<t-rate v-model="demoValue[4]" clearable :gap="defaultGap" />
</div>
<div class="rate-demo-cell">
<div class="rate-demo-cell__label">请点击评分</div>
<t-rate v-model="current6" :count="4" />
<div class="rate-demo-cell__label">评分16</div>
<SizeDemo />
</div>
</tdesign-demo-block>
<tdesign-demo-block summary="半星评分">
<div class="rate-demo-cell">
<div class="rate-demo-cell__label">半星评分</div>
<t-rate v-model="current7" size="16px" allow-half />
</div>
<tdesign-demo-block summary="自定义图标评分">
<div class="rate-demo-cell">
<div class="rate-demo-cell__label">半星评分</div>
<t-rate v-model="current7" allow-half />
<div class="rate-demo-cell__label">评分20</div>
<IconDemo />
</div>
</tdesign-demo-block>
</div>
</template>

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

export default defineComponent({
setup() {
const current = ref(3);
const current1 = ref(3);
const current2 = ref(3.5);
const current3 = ref(3);
const current4 = ref(3);
const current5 = ref(3);
const current6 = ref(3);
const current7 = ref(3.5);
const texts = ref(['很差', '差', '一般', '好评', '优秀']);
<script lang="ts" setup>
import { ref } from 'vue';
import IconDemo from './icon.vue';
import SizeDemo from './size.vue';
import ColorDemo from './color.vue';
import DisabledDemo from './disabled.vue';
import CountDemo from './count.vue';
import BaseDemo from './base.vue';
import TextDemo from './text.vue';
import AllowHalfDemo from './allow-half.vue';

return {
current,
current1,
current2,
current3,
current4,
current5,
current6,
current7,
texts,
};
},
});
const defaultGap = 8;
const demoValue = ref([2, 3, 3, 3, 3]);
const texts = ref(['很差', '差', '一般', '好评', '优秀']);
</script>

<style lang="less">
Expand All @@ -126,8 +103,9 @@ export default defineComponent({
margin-right: 16px;
min-width: 80px;
}
}
.tdesign-mobile-demo-block__summary.rate {
margin-top: 8px;

&--space {
margin-bottom: 16px;
}
}
</style>
15 changes: 5 additions & 10 deletions src/rate/demos/size.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,10 @@
<template>
<t-rate v-model="value" size="36px" allow-half clearable />
<t-rate v-model="value" size="16" clearable :gap="defaultGap" />
</template>

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

export default defineComponent({
setup() {
return {
value: ref(3),
};
},
});
const defaultGap = 8;
const value = ref(3);
</script>
26 changes: 6 additions & 20 deletions src/rate/demos/text.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,11 @@
<template>
<t-rate v-model="value" clearable show-text allow-half />
<t-rate v-model="value1" clearable show-text allow-half text-color="#FA0" />
<t-rate v-model="value2" clearable show-text :texts="texts" />
<t-rate v-model="value" clearable show-text :texts="texts" variant="outline" :gap="defaultGap" />
</template>

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

export default defineComponent({
setup() {
const value = ref(0);
const value1 = ref(2.5);
const value2 = ref(3);
const texts = ref(['很差', '差', '一般', '好评', '优秀']);

return {
value,
value1,
value2,
texts,
};
},
});
const defaultGap = 8;
const value = ref(3);
const texts = ref(['很差', '差', '一般', '好评', '优秀']);
</script>
Loading