feat(Circle): update text style (#4401)

This commit is contained in:
neverland 2019-09-09 14:20:44 +08:00 committed by GitHub
parent 7dbfbb9bcd
commit 1133b4ce1a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 13 additions and 10 deletions

View File

@ -13,7 +13,6 @@
<van-circle
v-model="currentRate3"
:rate="rate"
layer-color="#ebedf0"
:speed="100"
:stroke-width="60"
:text="$t('customWidth')"

View File

@ -24,6 +24,9 @@
left: 0;
width: 100%;
color: @circle-text-color;
font-weight: @circle-text-font-weight;
font-size: @circle-text-font-size;
line-height: @circle-text-line-height;
transform: translateY(-50%);
}
}

View File

@ -12,7 +12,7 @@ exports[`renders demo correctly 1`] = `
</div>
<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: #ebedf0; 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" 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>
</svg>
<div class="van-circle__text">宽度定制</div>

View File

@ -143,11 +143,11 @@ Vue.use(Field);
| arrow-direction | 箭头方向,可选值为 `left` `up` `down` | *string* | - | 2.0.4 |
| error-message | 底部错误提示文案,为空时不展示 | *string* | `''` | -
| label-class | 左侧文本额外类名 | *any* | - | - |
| label-width | 左侧文本宽度,可指定单位,默认为 px | *string \| number* | `90px` | - |
| label-width | 左侧文本宽度,默认单位为`px` | *string \| number* | `90px` | - |
| label-align | 左侧文本对齐方式,可选值为 `center` `right` | *string* | `left` | - |
| input-align | 输入框内容对齐方式,可选值为 `center` `right` | *string* | `left` | - |
| error-message-align | 错误提示文案对齐方式,可选值为 `center` `right` | *string* | `left` | - |
| autosize | 自适应内容高度,只对 textarea 有效,可传入对象,<br>如 { maxHeight: 100, minHeight: 50 },单位为 px | *boolean \| object* | `false` | - |
| autosize | 自适应内容高度,只对 textarea 有效,可传入对象,<br>如 { maxHeight: 100, minHeight: 50 },单位为`px` | *boolean \| object* | `false` | - |
| left-icon | 左侧图标名称或图片链接,可选值见 Icon 组件 | *string* | - | - |
| right-icon | 右侧图标名称或图片链接,可选值见 Icon 组件 | *string* | - | - |

View File

@ -162,6 +162,9 @@
// Circle
@circle-text-color: @text-color;
@circle-text-font-weight: 500;
@circle-text-font-size: @font-size-md;
@circle-text-line-height: 18px;
// Collapse
@collapse-item-transition-duration: @animation-duration-base;

View File

@ -100,10 +100,10 @@ export default {
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|------|------|------|------|------|
| items | 分类显示所需的数据 | *Item[]* | `[]` | - |
| height | 高度,默认单位为 px | *string \| number* | `300` | - |
| height | 高度,默认单位为`px` | *string \| number* | `300` | - |
| main-active-index | 左侧选中项的索引 | *number* | `0` | - |
| active-id | 右侧选中项的 id支持传入数组 | *string \| number \| (string \| number)[]* | `0` | - |
| max | 右侧项最大选中个数 | *number* | *Infinity* | 2.2.0 |
| max | 右侧项最大选中个数 | *number* | `Infinity` | 2.2.0 |
### Events
@ -120,9 +120,7 @@ export default {
### Item 数据结构
`items` 整体为一个数组,数组内包含一系列描述分类的对象。
每个分类里text 表示当前分类的名称。children 表示分类里的可选项为数组结构id 被用来唯一标识每个选项
`items` 整体为一个数组,数组内包含一系列描述分类的对象,每个分类里,`text`表示当前分类的名称,`children`表示分类里的可选项。
```javascript
[
@ -136,7 +134,7 @@ export default {
{
// 名称
text: '温州',
// id作为匹配选中状态的标识
// id作为匹配选中状态的标识
id: 1,
// 禁用选项
disabled: true