feat(field,field-item): code refactor
BREAKING CHANGE: remove unnecessary code and rename some slots
This commit is contained in:
moyus
parent
39049ffc1d
commit
dab9d9ae6e
|
|
@ -162,35 +162,24 @@ drop-menu-disabled-opacity = opacity-disabled
|
|||
field-padding-h = h-gap-sl
|
||||
field-padding-v = v-gap-sl
|
||||
field-bg-color = color-bg-inverse
|
||||
field-header-gap = v-gap-lg
|
||||
field-footer-gap = v-gap-md
|
||||
field-title-color = color-text-base
|
||||
field-title-font-size = font-caption-large
|
||||
field-title-font-weight = font-weight-normal
|
||||
field-title-operator-color = color-text-minor
|
||||
field-title-operator-font-size = font-body-large
|
||||
field-title-margin = 36px
|
||||
field-item-padding-v = v-gap-lg
|
||||
field-item-bg-tap-color = color-bg-tap
|
||||
field-item-label-color = color-text-base
|
||||
field-item-label-font-size = font-caption-normal
|
||||
field-item-label-font-weight = font-weight-normal
|
||||
field-item-content-color = color-text-base
|
||||
field-item-content-font-size = font-caption-normal
|
||||
field-item-content-font-weight = font-weight-medium
|
||||
field-item-icon-color = #ccc
|
||||
field-describe-color = color-text-caption
|
||||
field-describe-font-size = font-body-large
|
||||
field-action-color = color-text-minor
|
||||
field-action-font-size = font-body-large
|
||||
|
||||
// field-item
|
||||
field-item-min-height = 108px
|
||||
field-item-padding-v = 30px
|
||||
field-item-color = color-text-base
|
||||
field-item-font-size = font-caption-normal
|
||||
field-item-after-color = color-text-caption
|
||||
field-item-after-font-size = font-body-large
|
||||
field-item-border-color = color-border-base
|
||||
field-item-color-disabled = opacity-disabled
|
||||
field-item-brief-font-size = font-body-normal
|
||||
field-item-brief-color = color-text-caption
|
||||
field-title-plain-color = color-text-body
|
||||
field-title-plain-font-size = font-body-large
|
||||
field-padding-plain-h = h-gap-lg
|
||||
field-padding-plain-v = v-gap-lg
|
||||
field-bg-plain-color = color-bg-base
|
||||
field-item-padding-plain-v = h-gap-md
|
||||
field-item-label-plain-color = color-text-caption
|
||||
field-item-label-plain-font-size = font-body-large
|
||||
field-item-content-plain-color = color-text-body
|
||||
field-item-content-plain-font-size = font-body-large
|
||||
|
||||
// icon
|
||||
icon-size-xs = 20px
|
||||
|
|
@ -205,6 +194,7 @@ image-viewer-index-bottom = 100px
|
|||
|
||||
// input-item
|
||||
input-item-height = 100px
|
||||
input-item-border-color = color-border-base
|
||||
input-item-title-width = 170px
|
||||
input-item-title-gap = 22px
|
||||
input-item-font-size = font-caption-normal
|
||||
|
|
|
|||
|
|
@ -105,23 +105,27 @@ tag-small-font-size = var(--tag-small-font-size)
|
|||
tag-tiny-font-size = var(--tag-tiny-font-size)
|
||||
|
||||
// field
|
||||
field-padding = var(--field-padding)
|
||||
field-padding-h = var(--field-padding-h)
|
||||
field-padding-v = var(--field-padding-v)
|
||||
field-title-font-size = var(--field-title-font-size)
|
||||
field-bg-color = var(--field-bg-color)
|
||||
field-header-gap = var(--field-header-gap)
|
||||
field-footer-gap = var(--field-footer-gap)
|
||||
field-title-color = var(--field-title-color)
|
||||
field-title-font-size = var(--field-title-font-size)
|
||||
field-title-font-weight = var(--field-title-font-weight)
|
||||
field-title-margin = var(--field-title-margin)
|
||||
field-describe-color = var(--field-describe-color)
|
||||
field-describe-font-size = var(--field-describe-font-size)
|
||||
field-action-color = var(--field-action-color)
|
||||
field-action-font-size = var(--field-action-font-size)
|
||||
|
||||
// field-item
|
||||
field-item-min-height = var(--field-item-min-height)
|
||||
field-item-padding-v = var(--field-item-padding-v)
|
||||
field-item-bg-color = var(--field-item-bg-color)
|
||||
field-item-bg-tap-color = var(--field-item-bg-tap-color)
|
||||
field-item-color = var(--field-item-color)
|
||||
field-item-font-size = var(--field-item-font-size)
|
||||
field-item-icon-color = var(--field-item-icon-color)
|
||||
field-item-after-color = var(--field-item-after-color)
|
||||
field-item-after-font-size = var(--field-item-after-font-size)
|
||||
field-item-border-color = var(--field-item-border-color)
|
||||
field-item-color-disabled = var(--field-item-color-disabled)
|
||||
field-item-brief-font-size = var(--field-item-brief-font-size)
|
||||
field-item-brief-color = var(--field-item-brief-color)
|
||||
|
||||
// input-item
|
||||
input-item-height = var(--input-item-height)
|
||||
|
|
|
|||
|
|
@ -19,69 +19,43 @@ describe('FieldItem', () => {
|
|||
expect(wrapper.vm.title).to.equal('field item title')
|
||||
})
|
||||
|
||||
it('create a simple field-item with brief', () => {
|
||||
it('create a simple field-item with describe', () => {
|
||||
wrapper = mount(FieldItem, {
|
||||
propsData: {
|
||||
title: 'field item title',
|
||||
brief: 'field item brief',
|
||||
describe: 'field item describe',
|
||||
},
|
||||
})
|
||||
|
||||
expect(wrapper.find('.md-field-item-brief').length).to.equal(1)
|
||||
expect(wrapper.find('.md-field-item-describe').length).to.equal(1)
|
||||
})
|
||||
|
||||
it('create a simple field-item with arrow', () => {
|
||||
wrapper = mount(FieldItem, {
|
||||
propsData: {
|
||||
title: 'field item title',
|
||||
brief: 'field item brief',
|
||||
arrow: 'arrow-right',
|
||||
describe: 'field item describe',
|
||||
arrow: true,
|
||||
},
|
||||
})
|
||||
|
||||
expect(wrapper.hasClass('has-arrow')).to.be.true
|
||||
expect(wrapper.contains('.md-icon-arrow-right')).to.be.true
|
||||
|
||||
const eventStub = sinon.stub(wrapper.vm, '$emit')
|
||||
wrapper.trigger('click')
|
||||
expect(eventStub.calledWith('click')).to.be.true
|
||||
})
|
||||
|
||||
it('create a field-item with solid title', () => {
|
||||
wrapper = mount(FieldItem, {
|
||||
propsData: {
|
||||
title: 'field item title',
|
||||
brief: 'field item brief',
|
||||
arrow: 'arrow-right',
|
||||
solid: true,
|
||||
},
|
||||
})
|
||||
|
||||
expect(wrapper.find('.solid').length).to.equal(1)
|
||||
})
|
||||
|
||||
it('create a field-item with customized value align right', () => {
|
||||
wrapper = mount(FieldItem, {
|
||||
propsData: {
|
||||
title: 'field item title',
|
||||
brief: 'field item brief',
|
||||
customized: true,
|
||||
align: 'right',
|
||||
},
|
||||
})
|
||||
|
||||
expect(wrapper.vm.customized).to.be.true
|
||||
})
|
||||
|
||||
it('create a disabled field-item', () => {
|
||||
wrapper = mount(FieldItem, {
|
||||
propsData: {
|
||||
title: 'field item title',
|
||||
brief: 'field item brief',
|
||||
arrow: 'arrow-right',
|
||||
describe: 'field item describe',
|
||||
arrow: true,
|
||||
disabled: true,
|
||||
},
|
||||
})
|
||||
|
||||
expect(wrapper.hasClass('disabled')).to.be.true
|
||||
expect(wrapper.hasClass('is-disabled')).to.be.true
|
||||
})
|
||||
})
|
||||
|
|
|
|||
|
|
@ -23,37 +23,69 @@ Vue.component(FieldItem.name, FieldItem)
|
|||
|Props | Description | Type | Default | Note|
|
||||
|----|-----|------|------|------|
|
||||
|title|title|String|-|-|
|
||||
|describe|description|String|-|-|
|
||||
|disabled|disable content operation|Boolean|false|-|
|
||||
|plain|plain style|Boolean|false|-|
|
||||
|
||||
When use `disabled` prop, its descendants can use [inject](https://vuejs.org/v2/api/#provide-inject)to have access of `Field` ancestor.
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
name: 'your-component',
|
||||
|
||||
inject: {
|
||||
rootField: {
|
||||
from: 'rootField',
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
disabled() {
|
||||
return this.rootField.disabled
|
||||
}
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
#### Field Slots
|
||||
|
||||
##### default
|
||||
default content slot
|
||||
|
||||
##### header
|
||||
header content slot
|
||||
|
||||
##### action
|
||||
header action slot
|
||||
|
||||
##### footer
|
||||
footer content slot
|
||||
|
||||
---
|
||||
|
||||
#### FieldItem Props
|
||||
|Props | Description | Type | Default | Note|
|
||||
|----|-----|------|------|------|
|
||||
|name|name|Number/String|-1|-|
|
||||
|title|title|Number/String|-|-|
|
||||
|brief|subtitle|String|-|-|
|
||||
|disabled|whether to disable it or not|Boolean|true|-|
|
||||
|arrow|the name of arrow|String|-|`arrow-up`, `arrow-right`, `arrow-down`, `arrow-left`|
|
||||
|customized|the content is customized or not|Boolean|have `slot` or not|-|
|
||||
|align|the position of customized contents|String|left|`left`, `right`, `center`|
|
||||
|value|content|String|-|-|
|
||||
|solid|the width of title is fixed or not|Boolean|false|-|
|
||||
|title|title|String|-|-|
|
||||
|describe|description|String|-|-|
|
||||
|disabled|disable item operation|Boolean|false|-|
|
||||
|arrow|arrow indicator|Boolean|false|-|
|
||||
|
||||
#### FieldItem Events
|
||||
##### @click(event)
|
||||
click event when not disabled
|
||||
|
||||
#### FieldItem Slots
|
||||
|
||||
##### default
|
||||
Default slot of content
|
||||
default content slot
|
||||
|
||||
##### left
|
||||
Left slot of title <sup class="version-after">1.4.0+</sup>
|
||||
##### start
|
||||
start content slot
|
||||
|
||||
##### right
|
||||
Right slot of content <sup class="version-after">1.4.0+</sup>
|
||||
##### after
|
||||
after content slot
|
||||
|
||||
#### FieldItem Events
|
||||
|
||||
##### @click(name)
|
||||
|
||||
Click event
|
||||
|
||||
|Props | Description | Type |
|
||||
|----|-----|------|
|
||||
|name|the name of fieldItem|Number/String|
|
||||
##### children
|
||||
extra children slot
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ title: Field 区域列表组合
|
|||
preview: https://didi.github.io/mand-mobile/examples/#/field
|
||||
---
|
||||
|
||||
区域列表垂直排列，显示当前的内容、状态和可进行的操作
|
||||
区域列表垂直排列，显示当前的内容、状态和可进行的操作。
|
||||
|
||||
### 引入
|
||||
|
||||
|
|
@ -23,36 +23,69 @@ Vue.component(FieldItem.name, FieldItem)
|
|||
|属性 | 说明 | 类型 | 默认值|备注|
|
||||
|----|-----|------|------|------|
|
||||
|title|标题|String|-|-|
|
||||
|describe|描述内容|String|-|-|
|
||||
|disabled|是否禁用区域|Boolean|false|-|
|
||||
|plain|镂空样式|Boolean|false|-|
|
||||
|
||||
当使用了`disabled`选项时，其后代内容可以通过[inject](https://vuejs.org/v2/api/#provide-inject)的方式获取祖先`Field`的实例属性。
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
name: 'your-component',
|
||||
|
||||
inject: {
|
||||
rootField: {
|
||||
from: 'rootField',
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
disabled() {
|
||||
return this.rootField.disabled
|
||||
}
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
#### Field Slots
|
||||
|
||||
##### default
|
||||
内容默认插槽
|
||||
|
||||
##### header
|
||||
页眉内容插槽
|
||||
|
||||
##### action
|
||||
页眉操作区域插槽
|
||||
|
||||
##### footer
|
||||
页脚内容插槽
|
||||
|
||||
---
|
||||
|
||||
#### FieldItem Props
|
||||
|属性 | 说明 | 类型 | 默认值 |备注|
|
||||
|属性 | 说明 | 类型 | 默认值|备注|
|
||||
|----|-----|------|------|------|
|
||||
|name|标识|Number/String| `-1`|-|
|
||||
|title|标题|String|-|-|
|
||||
|brief|子标题|String|-|-|
|
||||
|disabled|是否禁用|Boolean|`true`|-|
|
||||
|arrow|箭头名称|String|-|`arrow-up`, `arrow-right`, `arrow-down`, `arrow-left`|
|
||||
|customized|内容是否自定义|Boolean|是否有`slot`|-|
|
||||
|align|自定义内容时，内容位置|String|`left`|`left`, `right`, `center`|
|
||||
|value|内容|String|-|-|
|
||||
|solid|是否固定标题宽度，超出会自动换行|Boolean|`false`|-|
|
||||
|describe|描述内容|String|-|-|
|
||||
|disabled|是否禁用项目|Boolean|false|-|
|
||||
|arrow|动作箭头标识|Boolean|false|-|
|
||||
|
||||
#### FieldItem Events
|
||||
##### @click(event)
|
||||
非禁用状态下的点击事件
|
||||
|
||||
#### FieldItem Slots
|
||||
|
||||
##### default
|
||||
内容默认插槽
|
||||
|
||||
##### left
|
||||
标题左侧插槽 <sup class="version-after">1.4.0+</sup>
|
||||
##### start
|
||||
头部区域插槽
|
||||
|
||||
##### right
|
||||
内容右侧插槽 <sup class="version-after">1.4.0+</sup>
|
||||
##### after
|
||||
末尾预期插槽
|
||||
|
||||
#### FieldItem Events
|
||||
|
||||
##### @click(name)
|
||||
点击事件
|
||||
|
||||
|属性 | 说明 | 类型|
|
||||
|----|-----|------|
|
||||
|name|fieldItem标识|Number/String|
|
||||
##### children
|
||||
额外内容插槽
|
||||
|
|
|
|||
|
|
@ -1,41 +1,13 @@
|
|||
<template>
|
||||
<div class="md-example-child md-example-child-field md-example-child-field-0">
|
||||
<md-field title="区域标题">
|
||||
<div
|
||||
class="field-operator"
|
||||
slot="titleValue"
|
||||
@click="onClick('操作')"
|
||||
>
|
||||
<md-field title="区域标题" describe="区域描述性文本，可根据具体场景配置">
|
||||
<template slot="action">
|
||||
操作<md-icon name="arrow-right"></md-icon>
|
||||
</div>
|
||||
<div>
|
||||
<md-field-item
|
||||
name="item0"
|
||||
title="普通条目"
|
||||
>
|
||||
</md-field-item>
|
||||
<md-field-item
|
||||
name="item1"
|
||||
title="动作条目"
|
||||
arrow="arrow-right"
|
||||
solid
|
||||
@click="onClick">
|
||||
</md-field-item>
|
||||
<md-field-item
|
||||
name="item2"
|
||||
title="禁用条目"
|
||||
arrow="arrow-right"
|
||||
disabled
|
||||
@click="onClick">
|
||||
</md-field-item>
|
||||
<md-field-item
|
||||
name="item4"
|
||||
title="标题"
|
||||
brief="展示摘要描述"
|
||||
arrow="arrow-right"
|
||||
@click="onClick">
|
||||
</md-field-item>
|
||||
</div>
|
||||
</template>
|
||||
<p slot="footer">区域页脚区域内容插槽</p>
|
||||
<md-field-item title="普通条目" />
|
||||
<md-field-item title="动作条目" arrow @click="onClick" />
|
||||
<md-field-item title="禁用条目" arrow disabled />
|
||||
</md-field>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -44,33 +16,25 @@
|
|||
|
||||
export default {
|
||||
name: 'field-demo',
|
||||
|
||||
components: {
|
||||
[Field.name]: Field,
|
||||
[FieldItem.name]: FieldItem,
|
||||
[Icon.name]: Icon,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
open: false,
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClick(name) {
|
||||
onClick() {
|
||||
Dialog.alert({
|
||||
content: `点击了 ${name}`,
|
||||
content: '点击了',
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
.md-example-child-field-0
|
||||
.md-field
|
||||
margin-bottom 20px
|
||||
.field-operator
|
||||
display flex
|
||||
align-items center
|
||||
justify-content flex-end
|
||||
.md-input-item
|
||||
background #FFF
|
||||
padding 0 32px
|
||||
.strong-tip
|
||||
font-size 24px
|
||||
color color-text-highlight
|
||||
</style>
|
||||
|
|
@ -1,82 +1,53 @@
|
|||
<template>
|
||||
<div class="md-example-child md-example-child-field md-example-child-field-1">
|
||||
<md-field
|
||||
title="区域标题"
|
||||
>
|
||||
<md-field-item
|
||||
name="item0"
|
||||
title="步进器"
|
||||
align="right">
|
||||
<md-stepper></md-stepper>
|
||||
<md-field>
|
||||
<md-field-item title="滴水贷" arrow />
|
||||
<md-field-item title="信用付">
|
||||
<md-switch slot="after" v-model="open" />
|
||||
</md-field-item>
|
||||
<md-input-item
|
||||
name="item1"
|
||||
title="输入框"
|
||||
placeholder="请输入..."
|
||||
></md-input-item>
|
||||
<md-field-item
|
||||
name="item2"
|
||||
title="开关"
|
||||
brief="包含子区域"
|
||||
align="right">
|
||||
<md-switch name="switch0" v-model="switchActive"></md-switch>
|
||||
<md-field slot="child" plain>
|
||||
<div>
|
||||
<md-field-item
|
||||
title="企业名称"
|
||||
value="xxxxx"
|
||||
align="right"
|
||||
></md-field-item>
|
||||
<md-field-item
|
||||
title="社会信用代码"
|
||||
value="xxxxx"
|
||||
align="right"
|
||||
></md-field-item>
|
||||
<md-field-item
|
||||
title="单位电话"
|
||||
value="xxxxx"
|
||||
align="right"
|
||||
></md-field-item>
|
||||
</div>
|
||||
</md-field>
|
||||
<md-field-item title="滴水贷" arrow>
|
||||
<span slot="after">可用8000.34</span>
|
||||
</md-field-item>
|
||||
<md-field-item title="信用付">
|
||||
<span slot="after">可用8000.35</span>
|
||||
</md-field-item>
|
||||
<md-field-item title="滴水贷" arrow>
|
||||
<div class="holder" slot="start"></div>
|
||||
<span slot="after">可用8000.34</span>
|
||||
</md-field-item>
|
||||
<md-field-item title="信用付" arrow>
|
||||
<div class="holder" slot="start"></div>
|
||||
<span slot="after">可用8000.34</span>
|
||||
</md-field-item>
|
||||
</md-field>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
import {Field, FieldItem, Dialog, InputItem, Stepper, Switch} from 'mand-mobile'
|
||||
<script>
import {Field, FieldItem, Switch} from 'mand-mobile'
|
||||
|
||||
export default {
|
||||
name: 'field-demo',
|
||||
/* DELETE */
|
||||
title: '配合控件',
|
||||
titleEnUS: 'With control',
|
||||
title: '单行列表',
|
||||
titleEnUS: 'Simple List',
|
||||
/* DELETE */
|
||||
components: {
|
||||
[Field.name]: Field,
|
||||
[FieldItem.name]: FieldItem,
|
||||
[InputItem.name]: InputItem,
|
||||
[Stepper.name]: Stepper,
|
||||
[Switch.name]: Switch,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
switchActive: false,
|
||||
open: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onClick(name) {
|
||||
Dialog.alert({
|
||||
content: `点击了 ${name}`,
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.md-example-child-field-1
|
||||
.strong-tip
|
||||
font-size 24px
|
||||
color color-text-highlight
|
||||
</style>
|
||||
.holder
|
||||
display block
|
||||
width 48px
|
||||
height 48px
|
||||
background-color #E6E6E6
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,77 +1,56 @@
|
|||
<template>
|
||||
<div class="md-example-child md-example-child-field md-example-child-field-2">
|
||||
<md-field>
|
||||
<md-field-item
|
||||
name="item0"
|
||||
title="短标题"
|
||||
arrow="arrow-right"
|
||||
value="内容靠左展示"
|
||||
align="left"
|
||||
@click="onClick">
|
||||
<md-field-item title="交通银行(尾号3089)" describe="展示摘要描述" />
|
||||
<md-field-item title="招商银行(尾号2342)" describe="展示摘要描述">
|
||||
<md-switch v-model="open" slot="after" />
|
||||
</md-field-item>
|
||||
<md-field-item
|
||||
name="item1"
|
||||
title="标题宽度不固定"
|
||||
arrow="arrow-right"
|
||||
value="内容居中展示"
|
||||
align="center"
|
||||
@click="onClick">
|
||||
<md-field-item title="交通银行(尾号3089)" describe="展示摘要描述" arrow>
|
||||
<span slot="after">附加文案</span>
|
||||
</md-field-item>
|
||||
<md-field-item
|
||||
name="item2"
|
||||
title="标题宽度固定"
|
||||
arrow="arrow-right"
|
||||
value="内容靠右展示"
|
||||
solid
|
||||
align="right"
|
||||
@click="onClick">
|
||||
<md-field-item title="交通银行" describe="展示摘要描述" arrow>
|
||||
<span class="holder" slot="start"></span>
|
||||
<span slot="after">附加文案</span>
|
||||
</md-field-item>
|
||||
<md-field-item
|
||||
name="item2"
|
||||
title="左右插槽"
|
||||
arrow="arrow-right"
|
||||
solid
|
||||
align="right"
|
||||
@click="onClick">
|
||||
<div>内容展示</div>
|
||||
<md-icon name="bank-zs" slot="left"></md-icon>
|
||||
<md-icon name="circle-alert" slot="right"></md-icon>
|
||||
<md-field-item title="招商银行" describe="展示摘要描述" disabled arrow>
|
||||
<span class="holder" slot="start"></span>
|
||||
<span slot="after">禁用的项目</span>
|
||||
</md-field-item>
|
||||
<md-field-item title="建设银行" describe="摘要描述" arrow>
|
||||
<p slot="children">
|
||||
中国建设银行，在全球范围内为台湾、香港、美国、澳大利亚等国家或地区提供全面金融服务，主要经营公司银行业务、个人银行业务和资金业务，包括居民储蓄存款、信贷资金贷款、住房类贷款、外汇、信用卡，以及投资理财等多种业务。
|
||||
</p>
|
||||
</md-field-item>
|
||||
</md-field>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
import {Field, FieldItem, Dialog, InputItem, Icon} from 'mand-mobile'
|
||||
import '@examples/assets/images/bank-zs.svg'
|
||||
<script>
import {Field, FieldItem, Switch} from 'mand-mobile'
|
||||
|
||||
export default {
|
||||
name: 'field-demo',
|
||||
/* DELETE */
|
||||
title: '包含内容',
|
||||
titleEnUS: 'With content',
|
||||
title: '多行列表',
|
||||
titleEnUS: 'Content List',
|
||||
/* DELETE */
|
||||
components: {
|
||||
[Field.name]: Field,
|
||||
[FieldItem.name]: FieldItem,
|
||||
[InputItem.name]: InputItem,
|
||||
[Icon.name]: Icon,
|
||||
[Switch.name]: Switch,
|
||||
},
|
||||
methods: {
|
||||
onClick(name) {
|
||||
Dialog.alert({
|
||||
content: `点击了 ${name}`,
|
||||
})
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
open: false,
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.md-example-child-field-2
|
||||
.md-input-item
|
||||
background #FFF
|
||||
padding 0 32px
|
||||
.strong-tip
|
||||
font-size 24px
|
||||
color color-text-highlight
|
||||
</style>
|
||||
.holder
|
||||
display block
|
||||
width 88px
|
||||
height 88px
|
||||
border-radius 44px
|
||||
background-color #E6E6E6
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,64 +0,0 @@
|
|||
<template>
|
||||
<div class="md-example-child md-example-child-field md-example-child-field-3">
|
||||
<md-field
|
||||
title="收款账户"
|
||||
plain
|
||||
>
|
||||
<div
|
||||
class="field-title-value"
|
||||
slot="titleValue"
|
||||
>
|
||||
<md-icon name="bank-zs"></md-icon> 招商银行(尾号xxxx)
|
||||
</div>
|
||||
<div>
|
||||
<md-field-item
|
||||
title="借款金额"
|
||||
value="￥30,000"
|
||||
align="right"
|
||||
></md-field-item>
|
||||
<md-field-item
|
||||
title="借款期数"
|
||||
value="12期"
|
||||
align="right"
|
||||
></md-field-item>
|
||||
<md-field-item
|
||||
title="正常还款总息"
|
||||
value="￥140.50"
|
||||
align="right"
|
||||
></md-field-item>
|
||||
</div>
|
||||
</md-field>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
import {Field, FieldItem, Icon} from 'mand-mobile'
|
||||
|
||||
export default {
|
||||
name: 'field-demo',
|
||||
/* DELETE */
|
||||
title: '纯文列表',
|
||||
titleEnUS: 'Plain text items',
|
||||
/* DELETE */
|
||||
components: {
|
||||
[Field.name]: Field,
|
||||
[FieldItem.name]: FieldItem,
|
||||
[Icon.name]: Icon,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
.md-example-child-field-3
|
||||
.md-field
|
||||
margin-bottom 20px
|
||||
.field-title-value
|
||||
display flex
|
||||
align-items center
|
||||
justify-content flex-end
|
||||
.md-input-item
|
||||
background #FFF
|
||||
padding 0 32px
|
||||
.strong-tip
|
||||
font-size 24px
|
||||
color color-text-highlight
|
||||
</style>
|
||||
|
|
@ -13,7 +13,5 @@
|
|||
import Demo0 from './cases/demo0'
|
||||
import Demo1 from './cases/demo1'
|
||||
import Demo2 from './cases/demo2'
|
||||
import Demo3 from './cases/demo3'
|
||||
|
||||
export default {...createDemoModule('field', [Demo0, Demo1, Demo2, Demo3])}
|
||||
</script>
|
||||
export default {...createDemoModule('field', [Demo0, Demo1, Demo2])}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,25 +1,22 @@
|
|||
<template>
|
||||
<div class="md-field" :class="{'is-plain': plain}">
|
||||
<div
|
||||
class="md-field-title"
|
||||
v-if="title !== '' || value !== '' "
|
||||
>
|
||||
<div class="md-field-title-inner">
|
||||
<p class="title" v-if="title !== ''">
|
||||
{{title}}
|
||||
</p>
|
||||
<p class="value" v-if="$slots.titleValue">
|
||||
<slot name="titleValue"></slot>
|
||||
</p>
|
||||
<p class="value" v-else-if="value !== ''">
|
||||
{{value}}
|
||||
</p>
|
||||
<fieldset class="md-field" :class="{'is-plain': plain, 'is-disabled': disabled}">
|
||||
<header class="md-field-header" v-if="title || describe || $slots.header || $slots.action">
|
||||
<div class="md-field-heading">
|
||||
<legend v-if="title" class="md-field-title" v-text="title"></legend>
|
||||
<p v-if="describe" class="md-field-describe" v-text="describe"></p>
|
||||
<slot name="header"></slot>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md-field-action">
|
||||
<slot name="action"></slot>
|
||||
</div>
|
||||
</header>
|
||||
<div class="md-field-content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="md-field-footer" v-if="$slots.footer">
|
||||
<slot name="footer"></slot>
|
||||
</footer>
|
||||
</fieldset>
|
||||
</template>
|
||||
|
||||
<script>
export default {
|
||||
|
|
@ -30,94 +27,76 @@
|
|||
type: String,
|
||||
default: '',
|
||||
},
|
||||
value: {
|
||||
describe: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
arrow: {
|
||||
type: String,
|
||||
default: '',
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
plain: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
|
||||
provide() {
|
||||
return {
|
||||
rootField: this,
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
.md-field
|
||||
padding field-padding-v field-padding-h
|
||||
border none
|
||||
background-color field-bg-color
|
||||
.md-field-title
|
||||
padding field-padding-v field-padding-h field-title-margin field-padding-h
|
||||
.md-field-title-inner
|
||||
display flex
|
||||
font-size field-title-font-size
|
||||
font-weight field-title-font-weight
|
||||
color field-title-color
|
||||
&>p
|
||||
flex 1
|
||||
&.title
|
||||
text-align left
|
||||
&.value
|
||||
font-size field-title-operator-font-size
|
||||
color field-title-operator-color
|
||||
text-align right
|
||||
.md-field-content
|
||||
display flex
|
||||
flex-direction column
|
||||
.md-field-item,
|
||||
.md-input-item,
|
||||
.md-input-item-brief,
|
||||
.md-input-item-msg,
|
||||
.md-radio
|
||||
padding-left field-padding-h
|
||||
padding-right field-padding-h
|
||||
box-sizing border-box
|
||||
.md-field-item .md-field-item-inner, .md-input-item-container
|
||||
hairline(bottom, field-item-border-color)
|
||||
.md-field-item:last-of-type
|
||||
.md-field-item-inner::before
|
||||
display none
|
||||
// .md-input-item:last-of-type .md-input-item-container::before
|
||||
// display none
|
||||
.md-input-item.is-error .md-input-item-container
|
||||
hairline(bottom, input-item-color-error, 0, 4px)
|
||||
.md-input-item.is-focus .md-input-item-container
|
||||
hairline(bottom, color-text-base, 0, 4px)
|
||||
|
||||
.md-radio .md-radio-item
|
||||
padding-left 0 !important
|
||||
padding-right 0 !important
|
||||
|
||||
&.is-plain
|
||||
background-color field-bg-plain-color
|
||||
.md-field-title
|
||||
padding field-item-padding-plain-v field-padding-plain-h 0
|
||||
.md-field-title-inner
|
||||
padding-bottom field-item-padding-plain-v
|
||||
font-size field-title-plain-font-size
|
||||
color field-title-plain-color
|
||||
hairline(bottom, field-item-border-color)
|
||||
.md-field-item
|
||||
padding-left field-padding-plain-h
|
||||
padding-right field-padding-plain-h
|
||||
.md-field-item-inner
|
||||
margin-bottom field-item-padding-plain-v
|
||||
padding 0
|
||||
&:before
|
||||
display none
|
||||
.md-field-item-label
|
||||
.md-field-item-title
|
||||
font-size field-item-label-plain-font-size
|
||||
color field-item-label-plain-color
|
||||
.md-field-item-brief
|
||||
display none
|
||||
.md-field-item-content
|
||||
font-size field-item-content-plain-font-size
|
||||
font-weight font-weight-normal
|
||||
color field-item-content-plain-color
|
||||
&:first-of-type
|
||||
margin-top field-item-padding-plain-v
|
||||
padding 0
|
||||
background-color transparent
|
||||
|
||||
.md-field-header
|
||||
position relative
|
||||
display flex
|
||||
align-items center
|
||||
justify-content space-between
|
||||
margin-bottom field-header-gap
|
||||
|
||||
.md-field-heading
|
||||
flex 1 1 0%
|
||||
|
||||
.md-field-action
|
||||
flex-shrink 0
|
||||
display inline-flex
|
||||
align-items center
|
||||
justify-content flex-end
|
||||
margin-left h-gap-sm
|
||||
color field-action-color
|
||||
font-size field-action-font-size
|
||||
|
||||
.md-field-title
|
||||
color field-title-color
|
||||
font-size field-title-font-size
|
||||
font-weight field-title-font-weight
|
||||
|
||||
.md-field-describe
|
||||
color field-describe-color
|
||||
font-size field-describe-font-size
|
||||
line-height 1.4
|
||||
|
||||
.md-field-footer
|
||||
margin-top field-footer-gap
|
||||
|
||||
.md-field
|
||||
&:disabled,
|
||||
&.is-disabled
|
||||
.md-field-title,
|
||||
.md-field-describe,
|
||||
.md-field-action,
|
||||
.md-field-content,
|
||||
.md-field-footer
|
||||
color color-text-disabled
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,64 +1,26 @@
|
|||
<template>
|
||||
<div
|
||||
class="md-field-item"
|
||||
:class="[
|
||||
arrow ? 'has-arrow' : '' ,
|
||||
!!$slots.child ? 'has-child' : '' ,
|
||||
disabled ? 'disabled' : '',
|
||||
]"
|
||||
:name="name"
|
||||
@click="$_onItemClick($event, name)">
|
||||
<div class="md-field-item-inner">
|
||||
<!-- Left Control -->
|
||||
<div class="md-field-item-extra" v-if="$slots.left">
|
||||
<slot name="left"></slot>
|
||||
<div class="md-field-item" :class="{ 'is-disabled': currentDisabled }" @click="$_onClick">
|
||||
<div class="md-field-item-content">
|
||||
<div class="md-field-item-start" v-if="$slots.start">
|
||||
<slot name="start"></slot>
|
||||
</div>
|
||||
<div
|
||||
class="md-field-item-label"
|
||||
:class="[
|
||||
solid ? 'solid' : ''
|
||||
]">
|
||||
<div class="md-field-item-title" v-html="title"></div>
|
||||
<div class="md-field-item-brief"
|
||||
v-if="brief"
|
||||
v-html="brief"
|
||||
></div>
|
||||
</div>
|
||||
<!-- Content -->
|
||||
<div
|
||||
v-if="customized"
|
||||
class="md-field-item-content"
|
||||
:class="[align]">
|
||||
<div class="md-field-item-inner">
|
||||
<p class="md-field-item-title" v-if="title" v-text="title"></p>
|
||||
<p class="md-field-item-describe" v-if="describe" v-text="describe"></p>
|
||||
<slot></slot>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="md-field-item-content"
|
||||
:class="[align]">
|
||||
{{value}}
|
||||
<div class="md-field-item-after" v-if="arrow || $slots.after">
|
||||
<slot name="after"></slot>
|
||||
<md-icon v-if="arrow" name="arrow-right" size="lg" />
|
||||
</div>
|
||||
<!-- Right Control -->
|
||||
<div
|
||||
class="md-field-right"
|
||||
v-if="$slots.right"
|
||||
>
|
||||
<slot name="right"></slot>
|
||||
</div>
|
||||
<md-icon
|
||||
v-else-if="arrow"
|
||||
class="md-field-arrow"
|
||||
:name="arrow"
|
||||
size="lg">
|
||||
</md-icon>
|
||||
</div>
|
||||
<div class="md-field-child" v-if="$slots.child">
|
||||
<slot name="child"></slot>
|
||||
<div class="md-field-item-children" v-if="$slots.children">
|
||||
<slot name="children"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
import Icon from '../icon'
|
||||
import {isEmptyObject, randomId} from '../_util'
|
||||
|
||||
export default {
|
||||
name: 'md-field-item',
|
||||
|
|
@ -67,60 +29,43 @@ export default {
|
|||
[Icon.name]: Icon,
|
||||
},
|
||||
|
||||
props: {
|
||||
name: {
|
||||
type: Number | String,
|
||||
default() {
|
||||
return randomId('field-item')
|
||||
},
|
||||
inject: {
|
||||
rootField: {
|
||||
from: 'rootField',
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
brief: {
|
||||
describe: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
value: {
|
||||
type: String,
|
||||
default: '',
|
||||
arrow: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
arrow: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
customized: {
|
||||
type: Boolean,
|
||||
default() {
|
||||
return !isEmptyObject(this.$slots)
|
||||
},
|
||||
},
|
||||
align: {
|
||||
// left, right, center
|
||||
type: String,
|
||||
default: 'left',
|
||||
validator(value) {
|
||||
return ['left', 'right', 'center'].indexOf(value) > -1
|
||||
},
|
||||
},
|
||||
solid: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
|
||||
computed: {
|
||||
currentDisabled() {
|
||||
return this.rootField.disabled || this.disabled
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
// MARK: events handler
|
||||
$_onItemClick(event, name) {
|
||||
if (this.disabled) {
|
||||
return
|
||||
$_onClick(e) {
|
||||
if (!this.currentDisabled) {
|
||||
this.$emit('click', e)
|
||||
}
|
||||
this.$emit('click', name)
|
||||
},
|
||||
},
|
||||
}
|
||||
|
|
@ -128,79 +73,56 @@ export default {
|
|||
|
||||
<style lang="stylus">
|
||||
.md-field-item
|
||||
-webkit-tap-highlight-color transparent
|
||||
position relative
|
||||
&:not(:last-child)
|
||||
hairline(bottom, field-item-border-color)
|
||||
|
||||
.md-field-item-content
|
||||
display flex
|
||||
align-items center
|
||||
justify-content space-between
|
||||
min-height field-item-min-height
|
||||
padding-top field-item-padding-v
|
||||
padding-bottom field-item-padding-v
|
||||
box-sizing border-box
|
||||
width 100%
|
||||
&.disabled
|
||||
.md-field-item-inner
|
||||
.md-field-item-label, .md-field-item-content
|
||||
opacity field-item-color-disabled
|
||||
&.has-arrow
|
||||
.md-field-item-content
|
||||
padding-right 28px
|
||||
&::after
|
||||
absolute-pos()
|
||||
display none
|
||||
content ''
|
||||
position absolute
|
||||
box-sizing border-box
|
||||
background-color field-item-bg-tap-color
|
||||
&:active::after
|
||||
display block
|
||||
&.has-child
|
||||
padding 0 !important
|
||||
.md-field-item-inner
|
||||
padding field-item-padding-v field-padding-h
|
||||
.md-field-child
|
||||
position relative
|
||||
&:before
|
||||
content ''
|
||||
position absolute
|
||||
top -12px
|
||||
left 10%
|
||||
border-left solid 12px transparent
|
||||
border-right solid 12px transparent
|
||||
border-bottom solid 12px field-bg-plain-color
|
||||
.md-field-item
|
||||
padding-left field-padding-h !important
|
||||
padding-right field-padding-h !important
|
||||
.md-field-item-inner
|
||||
display flex
|
||||
align-items center
|
||||
padding field-item-padding-v 0
|
||||
.md-field-item-extra
|
||||
display flex
|
||||
margin-right field-item-padding-v
|
||||
.md-field-item-label
|
||||
&.solid
|
||||
width input-item-title-width
|
||||
.md-field-item-title
|
||||
font-size field-item-label-font-size
|
||||
.md-field-item-brief
|
||||
font-size field-item-brief-font-size
|
||||
color field-item-brief-color
|
||||
.md-field-item-content
|
||||
display flex
|
||||
flex-grow 1
|
||||
align-items center
|
||||
color field-item-content-color
|
||||
font-size field-item-content-font-size
|
||||
font-weight field-item-content-font-weight
|
||||
&.left
|
||||
margin-left v-gap-lg
|
||||
&.right
|
||||
justify-content flex-end
|
||||
&.center
|
||||
justify-content center
|
||||
.md-field-arrow
|
||||
position absolute
|
||||
right 28px
|
||||
top 50%
|
||||
transform translate(42px, -50%)
|
||||
color field-item-icon-color
|
||||
.md-field-right
|
||||
display flex
|
||||
align-items center
|
||||
justify-content center
|
||||
|
||||
.md-field-item-start
|
||||
flex-shrink 0
|
||||
margin-right h-gap-lg
|
||||
|
||||
.md-field-item-inner
|
||||
flex 1 1 0%
|
||||
color field-item-color
|
||||
font-size field-item-font-size
|
||||
line-height 1.2
|
||||
|
||||
.md-field-item-after
|
||||
flex-shrink 0
|
||||
margin-left h-gap-sm
|
||||
display inline-flex
|
||||
align-items center
|
||||
justify-content flex-end
|
||||
color field-item-after-color
|
||||
font-size field-item-after-font-size
|
||||
.md-icon-arrow-right
|
||||
margin-right -12px
|
||||
|
||||
.md-field-item-title
|
||||
line-height 1.2
|
||||
|
||||
.md-field-item-describe
|
||||
color #858B9C
|
||||
font-size 24px
|
||||
line-height 1.4
|
||||
margin-top v-gap-sm
|
||||
|
||||
.md-field-item-children
|
||||
padding-bottom field-item-padding-v
|
||||
|
||||
.md-field-item
|
||||
&.is-disabled
|
||||
.md-field-item-inner,
|
||||
.md-field-item-describe,
|
||||
.md-field-item-after
|
||||
color color-text-disabled
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue