blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-05 19:41:42 +08:00
Code Issues Projects Releases Wiki Activity

style(Circle): add @circle-color less var

Browse Source
This commit is contained in:
chenjiahan 2020-11-30 22:45:51 +08:00 committed by neverland
parent bb18310f1b
commit 1a6cf64f54
14 changed files with 23 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/badge/demo/index.vue
View File

@ -28,13 +28,13 @@
</demo-block>
<demo-block :title="t('customColor')">
<van-badge content="5" :color="BLUE">
<van-badge content="5" color="#1989fa">
<div class="child" />
</van-badge>
<van-badge content="10" :color="BLUE">
<van-badge content="10" color="#1989fa">
<div class="child" />
</van-badge>
<van-badge dot :color="BLUE">
<van-badge dot color="#1989fa">
<div class="child" />
</van-badge>
</demo-block>
@ -68,8 +68,6 @@
</template>
<script>
import { BLUE } from '../../utils/constant';
export default {
i18n: {
'zh-CN': {
@ -85,12 +83,6 @@ export default {
customContent: 'Custom Content',
},
},
data() {
return {
BLUE,
};
},
};
</script>

4
src/calendar/demo/index.vue
View File

@ -121,8 +121,6 @@
</template>
<script>
import { BLUE } from '../../utils/constant';
export default {
i18n: {
'zh-CN': {
@ -235,7 +233,7 @@ export default {
this.showConfirm = false;
break;
case 'customColor':
this.color = BLUE;
this.color = '#1989fa';
break;
case 'customConfirm':
this.confirmText = this.t('confirmText');

1
src/circle/README.md
View File

@ -131,6 +131,7 @@ How to use: [Custom Theme](#/en-US/theme).
| Name | Default Value | Description |
| ------------------------ | ------------------- | ----------- |
| @circle-color | `@blue` | - |
| @circle-text-color | `@text-color` | - |
| @circle-text-font-weight | `@font-weight-bold` | - |
| @circle-text-font-size | `@font-size-md` | - |

1
src/circle/README.zh-CN.md
View File

@ -142,6 +142,7 @@ export default {
| 名称 | 默认值 | 描述 |
| ------------------------ | ------------------- | ---- |
| @circle-color | `@blue` | - |
| @circle-text-color | `@text-color` | - |
| @circle-text-font-weight | `@font-weight-bold` | - |
| @circle-text-font-size | `@font-size-md` | - |

7
src/circle/index.js
View File

@ -1,6 +1,6 @@
import { createNamespace, isObject, addUnit } from '../utils';
import { raf, cancelRaf } from '../utils/dom/raf';
import { BLUE, WHITE } from '../utils/constant';
import { WHITE } from '../utils/constant';
const [createComponent, bem] = createNamespace('circle');
@ -22,6 +22,7 @@ function getPath(clockwise, viewBoxSize) {
export default createComponent({
props: {
text: String,
color: [String, Object],
strokeLinecap: String,
value: {
type: Number,
@ -47,10 +48,6 @@ export default createComponent({
type: String,
default: WHITE,
},
color: {
type: [String, Object],
default: BLUE,
},
strokeWidth: {
type: [Number, String],
default: 40,

1
src/circle/index.less
View File

@ -15,6 +15,7 @@
&__layer {
fill: none;
stroke: @circle-color;
stroke-linecap: round;
}

4
src/circle/test/__snapshots__/demo.spec.js.snap
View File

@ -5,7 +5,7 @@ exports[`renders demo correctly 1`] = `
<div>
<div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1040 1040">
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 40px;"></path>
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" stroke="#1989fa" class="van-circle__layer" style="stroke: #1989fa; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__layer" style="stroke: undefined; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
</svg>
<div class="van-circle__text">70%</div>
</div>
@ -13,7 +13,7 @@ exports[`renders demo correctly 1`] = `
<div>
<div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1060 1060">
<path d="M 530 530 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 60px;"></path>
<path d="M 530 530 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" stroke="#1989fa" class="van-circle__layer" style="stroke: #1989fa; stroke-width: 61px; stroke-dasharray: 2198px 3140px;"></path>
<path d="M 530 530 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__layer" style="stroke: undefined; stroke-width: 61px; stroke-dasharray: 2198px 3140px;"></path>
</svg>
<div class="van-circle__text">宽度定制</div>
</div>

6
src/circle/test/__snapshots__/index.spec.js.snap
View File

@ -3,20 +3,20 @@
exports[`size prop 1`] = `
<div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1040 1040">
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 40px;"></path>
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" stroke="#1989fa" class="van-circle__layer" style="stroke: #1989fa; stroke-width: 41px; stroke-dasharray: 0px 3140px;"></path>
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__layer" style="stroke: undefined; stroke-width: 41px; stroke-dasharray: 0px 3140px;"></path>
</svg></div>
`;
exports[`speed is 0 1`] = `
<div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1040 1040">
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 40px;"></path>
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" stroke="#1989fa" class="van-circle__layer" style="stroke: #1989fa; stroke-width: 41px; stroke-dasharray: 1570px 3140px;"></path>
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__layer" style="stroke: undefined; stroke-width: 41px; stroke-dasharray: 1570px 3140px;"></path>
</svg></div>
`;
exports[`stroke-linecap prop 1`] = `
<div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1040 1040">
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 40px;"></path>
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" stroke="#1989fa" class="van-circle__layer" style="stroke: #1989fa; stroke-width: 41px; stroke-linecap: square; stroke-dasharray: 0px 3140px;"></path>
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__layer" style="stroke: undefined; stroke-width: 41px; stroke-linecap: square; stroke-dasharray: 0px 3140px;"></path>
</svg></div>
`;

10
src/divider/demo/index.vue
View File

@ -28,7 +28,7 @@
<demo-block :title="t('customStyle')">
<van-divider
:style="{ borderColor: BLUE, color: BLUE, padding: '0 16px' }"
:style="{ borderColor: '#1989fa', color: '#1989fa', padding: '0 16px' }"
>
{{ t('text') }}
</van-divider>
@ -37,8 +37,6 @@
</template>
<script>
import { BLUE } from '../../utils/constant';
export default {
i18n: {
'zh-CN': {
@ -56,12 +54,6 @@ export default {
customStyle: 'Custom Style',
},
},
data() {
return {
BLUE,
};
},
};
</script>

5
src/dropdown-menu/demo/index.vue
View File

@ -37,7 +37,7 @@
</demo-block>
<demo-block :title="t('customActiveColor')">
<van-dropdown-menu :active-color="BLUE">
<van-dropdown-menu active-color="#1989fa">
<van-dropdown-item v-model="value1" :options="option1" />
<van-dropdown-item v-model="value2" :options="option2" />
</van-dropdown-menu>
@ -60,7 +60,7 @@
</template>
<script>
import { RED, BLUE } from '../../utils/constant';
import { RED } from '../../utils/constant';
export default {
i18n: {
@ -107,7 +107,6 @@ export default {
data() {
return {
RED,
BLUE,
switch1: true,
switch2: false,
value1: 0,

7
src/icon/demo/index.vue
View File

@ -24,8 +24,8 @@
</demo-block>
<demo-block :title="t('color')">
<van-col span="6" @click="copy(demoIcon, { color: BLUE })">
<van-icon name="cart-o" :color="BLUE" />
<van-col span="6" @click="copy(demoIcon, { color: '#1989fa' })">
<van-icon name="cart-o" color="#1989fa" />
</van-col>
<van-col span="6" @click="copy(demoIcon, { color: RED })">
<van-icon name="fire-o" :color="RED" />
@ -83,7 +83,7 @@
<script>
import icons from '@vant/icons';
import { RED, BLUE } from '../../utils/constant';
import { RED } from '../../utils/constant';
// from https://30secondsofcode.org
function copyToClipboard(str) {
@ -137,7 +137,6 @@ export default {
data() {
this.RED = RED;
this.BLUE = BLUE;
this.icons = icons;
return {
tab: 0,

8
src/radio/test/__snapshots__/demo.spec.js.snap
View File

@ -70,15 +70,11 @@ exports[`renders demo correctly 1`] = `
<div role="radiogroup" class="demo-radio-group van-radio-group">
<div role="radio" tabindex="0" aria-checked="true" class="van-radio">
<div class="van-radio__icon van-radio__icon--round van-radio__icon--checked" style="font-size: 24px;"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-radio__label">
单选框 1
</span>
<!----></i></div><span class="van-radio__label"> 单选框 1 </span>
</div>
<div role="radio" tabindex="-1" aria-checked="false" class="van-radio">
<div class="van-radio__icon van-radio__icon--round" style="font-size: 24px;"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-radio__label">
单选框 2
</span>
<!----></i></div><span class="van-radio__label"> 单选框 2 </span>
</div>
</div>
</div>

1
src/style/var.less
View File

@ -241,6 +241,7 @@
@checkbox-disabled-background-color: @border-color;
// Circle
@circle-color: @blue;
@circle-text-color: @text-color;
@circle-text-font-weight: @font-weight-bold;
@circle-text-font-size: @font-size-md;

1
src/utils/constant.ts
View File

@ -1,6 +1,5 @@
// color
export const RED = '#ee0a24';
export const BLUE = '#1989fa';
export const WHITE = '#fff';
// border