mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
feat(Circle): update text style (#4401)
This commit is contained in:
parent
7dbfbb9bcd
commit
1133b4ce1a
@ -13,7 +13,6 @@
|
||||
<van-circle
|
||||
v-model="currentRate3"
|
||||
:rate="rate"
|
||||
layer-color="#ebedf0"
|
||||
:speed="100"
|
||||
:stroke-width="60"
|
||||
:text="$t('customWidth')"
|
||||
|
@ -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%);
|
||||
}
|
||||
}
|
||||
|
@ -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>
|
||||
|
@ -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* | - | - |
|
||||
|
||||
|
@ -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;
|
||||
|
@ -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
|
||||
|
Loading…
x
Reference in New Issue
Block a user