feat(textarea-item): textarea-item first blood (#563)
feat(textarea): reorder following vue-style-guide feat(textarea): add event capture doc(textarea): add doc feat(textarea): remove unuse code feat(textarea-item): rename textarea => textarea-item test(textarea-item): add test test(textarea-input): add test fix(textarea-item): autosize alone does't work fix(textarea-item): add style: 'resize: none' test(textarea-item): specific the purpose of this test fix(textarea-item): remove unused event test(textarea-item): update test style test(textarea-item): update snapshots feat(textarea-item): use $ref rather then $el.querySelector test(textarea-item): update snapshots
This commit is contained in:
msdlisper
Shawn Xu
parent
9a5d7247c6
commit
bcb1df4f73
|
|
@ -55,7 +55,7 @@ button-warning-color = color-text-base-inverse
|
|||
button-default-plain-color = button-default-color
|
||||
button-primary-plain-color = button-primary-fill
|
||||
button-warning-plain-color = button-warning-fill
|
||||
button-disabled-plain-color = color-text-disabled
|
||||
button-disabled-plain-color = color-text-disabled
|
||||
|
||||
button-height = 100px
|
||||
button-font-size = font-caption-large
|
||||
|
|
@ -91,7 +91,7 @@ cashier-choose-channel-title-color = color-text-body
|
|||
cashier-choose-channel-title-action-font-size = font-body-large // 支付渠道动作标题
|
||||
cashier-choose-channel-title-action-color = color-primary
|
||||
cashier-choose-channel-desc-font-size = font-minor-large // 支付渠道备注
|
||||
cashier-choose-channel-desc-color = color-text-caption
|
||||
cashier-choose-channel-desc-color = color-text-caption
|
||||
cashier-choose-channel-icon-color = color-primary
|
||||
cashier-choose-more-font-size = font-minor-large // 更多支付方式
|
||||
cashier-choose-more-color = color-text-minor
|
||||
|
|
@ -235,9 +235,20 @@ input-item-color-disabled = color-text-caption
|
|||
input-item-color-error = color-text-error
|
||||
input-item-color-brief = color-text-caption
|
||||
input-item-placeholder = color-text-placeholder
|
||||
input-item-color-highlight = color-text-base
|
||||
input-item-color-highlight = color-text-base
|
||||
input-item-icon = color-text-placeholder // delete icon
|
||||
|
||||
/// textarea-item
|
||||
textarea-item-font-size = font-caption-normal
|
||||
textarea-item-font-weight = font-weight-medium
|
||||
textarea-item-line-height = 1.2
|
||||
textarea-item-color = color-text-base
|
||||
textarea-item-color-error = color-text-error
|
||||
textarea-item-color-disabled = color-text-caption
|
||||
textarea-item-placeholder-color = color-text-placeholder-color
|
||||
textarea-item-placeholder-weight = font-weight-normal
|
||||
|
||||
|
||||
/// slider
|
||||
slider-bg-base = color-bg-base
|
||||
slider-bg-tap = color-primary
|
||||
|
|
|
|||
|
|
@ -61,6 +61,7 @@ import DetailItem from './detail-item'
|
|||
import Slider from './slider'
|
||||
import Progress from './progress'
|
||||
import Ruler from './ruler'
|
||||
import TextareaItem from './textarea-item'
|
||||
import Skeleton from './skeleton'
|
||||
/* @init<%import ${componentNameUpper} from './${componentName}'%> */
|
||||
|
||||
|
|
@ -132,6 +133,7 @@ export const components = {
|
|||
Slider,
|
||||
Progress,
|
||||
Ruler,
|
||||
TextareaItem,
|
||||
Skeleton,
|
||||
/* @init<%${componentNameUpper},%> */
|
||||
}
|
||||
|
|
@ -224,6 +226,7 @@ export {
|
|||
Slider,
|
||||
Progress,
|
||||
Ruler,
|
||||
TextareaItem,
|
||||
Skeleton,
|
||||
/* @init<%${componentNameUpper},%> */
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,61 @@
|
|||
### Import
|
||||
|
||||
```javascript
|
||||
import { TextareaItem } from 'mand-mobile'
|
||||
|
||||
Vue.component(TextareaItem.name, TextareaItem)
|
||||
```
|
||||
|
||||
### Code Examples
|
||||
<!-- DEMO -->
|
||||
|
||||
### API
|
||||
|
||||
#### TextareaItem Props
|
||||
| Props | Description | Type | Default | Note |
|
||||
| ----------- | ------------------------------------------------ | ------------- | ------- | ------------------ |
|
||||
| title | title of textarea | String | - | - |
|
||||
| placeholder | placeholder of textarea | String | - | - |
|
||||
| v-model | value of textarea | String | - | |
|
||||
| max-length | max length of textarea | String/Number | - | - |
|
||||
| autosize | Dose the Textarea resize with content | Boolean | `false` | - |
|
||||
| max-height | The max height of textarea with `autosize=true`, | String/Number | `'40'` | rely on `autosize` |
|
||||
| solid | the width of title is fixed or not | Boolean | `true` | |
|
||||
| readonly | readonly | Boolean | `false` | - |
|
||||
| disabled | disabled | Boolean | `false` | - |
|
||||
| rows | rows | String/Number | `'3'` | - |
|
||||
| error | error message | String | - | - |
|
||||
|
||||
#### TextareaItem Slots
|
||||
|
||||
##### footer
|
||||
|
||||
the slot of footer
|
||||
|
||||
#### TextareaItem Events
|
||||
|
||||
##### focus()
|
||||
Input gets focus
|
||||
|
||||
##### blur()
|
||||
Input loses focus
|
||||
|
||||
##### getValue()
|
||||
Get value of input
|
||||
|
||||
#### TextItem Events
|
||||
|
||||
##### @focus(name)
|
||||
Textarea gets focus
|
||||
|
||||
##### @blur(name)
|
||||
Textarea loses blur
|
||||
|
||||
##### @change(name, value)
|
||||
Change the value of Textarea
|
||||
|
||||
##### @keyup(name, event)
|
||||
key press
|
||||
|
||||
##### @keydown(name, event)
|
||||
key release
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
### 引入
|
||||
|
||||
```javascript
|
||||
import { TextareaItem } from 'mand-mobile'
|
||||
|
||||
Vue.component(TextareaItem.name, TextareaItem)
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
<!-- DEMO -->
|
||||
|
||||
### API
|
||||
|
||||
#### TextareaItem Props
|
||||
| 属性 | 说明 | 类型 | 默认值 | 备注 |
|
||||
| ----------- | ------------------------------------------------ | ------------- | ------- | -------------- |
|
||||
| title | 标题 | String | - | - |
|
||||
| placeholder | 占位符 | String | - | - |
|
||||
| v-model | 输入内容 | String | - | |
|
||||
| max-length | 可输入的字符长度 | String/Number | - | - |
|
||||
| autosize | 是否可自动适应高度 | Boolean | `false` | - |
|
||||
| max-height | 在`autosize=true`的情况, 文本域最长的高度 | String/Number | `'40'` | 依赖`autosize` |
|
||||
| solid | title的宽度是否固定 | Boolean | `true` | |
|
||||
| readonly | 是否只读 | Boolean | `false` | - |
|
||||
| disabled | 是否禁用 | Boolean | `false` | - |
|
||||
| rows | 开始显示的行数 | String/Number | `'3'` | - |
|
||||
| error | 是否显示错误, 如果有内容就认定是出错, 并显示出来 | String | - | - |
|
||||
|
||||
#### TextareaItem Slots
|
||||
|
||||
##### footer
|
||||
|
||||
文本域在分隔线上面部分的slot
|
||||
|
||||
#### TextareaItem Events
|
||||
|
||||
##### focus()
|
||||
文本域获得焦点
|
||||
|
||||
##### blur()
|
||||
文本域失去焦点
|
||||
|
||||
##### getValue()
|
||||
获取文本域值
|
||||
|
||||
#### TextItem Events
|
||||
|
||||
##### @focus(name)
|
||||
文本域获得焦点事件
|
||||
|
||||
##### @blur(name)
|
||||
文本域失去焦点事件
|
||||
|
||||
##### @change(name, value)
|
||||
文本域值变化事件
|
||||
|
||||
##### @keyup(name, event)
|
||||
文本域按键按下事件
|
||||
|
||||
##### @keydown(name, event)
|
||||
文本域按键释放事件
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
export default {
|
||||
'name': 'textarea-item',
|
||||
'text': '文本输入框',
|
||||
'category': 'form',
|
||||
'description': '文本输入框。',
|
||||
'author': '张鹏'
|
||||
}
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
<template>
|
||||
<div class="md-example-child md-example-child-textarea md-example-child-textarea-0">
|
||||
<md-field>
|
||||
<md-textarea-item
|
||||
ref="demo0"
|
||||
title="普通"
|
||||
autosize
|
||||
class="example"
|
||||
v-model="value"
|
||||
placeholder="普通文本域"
|
||||
/>
|
||||
<md-textarea-item
|
||||
ref="demo0"
|
||||
title="自动适应"
|
||||
class="example"
|
||||
v-model="value"
|
||||
:autosize="true"
|
||||
:rows="1"
|
||||
placeholder="最大高度100px 超过出现滚动条"
|
||||
:max-height="100"
|
||||
/>
|
||||
<md-textarea-item
|
||||
ref="demo0"
|
||||
title="禁用"
|
||||
class="example"
|
||||
:autosize="true"
|
||||
value="禁用文本域, 理赔报案描述, 理赔报案描述, 理赔报案描述, 理赔报案描述, 理赔报案描述, 理赔报案描述"
|
||||
placeholder="500字以内"
|
||||
:max-height="100"
|
||||
disabled
|
||||
/>
|
||||
<md-textarea-item
|
||||
ref="demo0"
|
||||
title="只读"
|
||||
class="example"
|
||||
:autosize="true"
|
||||
value="只读文本域, 理赔报案描述, 理赔报案描述, 理赔报案描述, 理赔报案描述, 理赔报案描述, 理赔报案描述"
|
||||
placeholder="500字以内"
|
||||
:max-height="100"
|
||||
readonly
|
||||
/>
|
||||
</md-field>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
import {TextareaItem, Field} from 'mand-mobile'
|
||||
|
||||
export default {
|
||||
name: 'tips-demo',
|
||||
title: '普通文本域',
|
||||
titleEnUS: 'basic',
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
}
|
||||
},
|
||||
components: {
|
||||
[TextareaItem.name]: TextareaItem,
|
||||
[Field.name]: Field,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<template>
|
||||
<div class="md-example-child md-example-child-textarea md-example-child-textarea-0">
|
||||
<md-field>
|
||||
<md-textarea-item
|
||||
ref="demo1"
|
||||
title="错误提示"
|
||||
class="example"
|
||||
v-model="value"
|
||||
@blur="blur"
|
||||
@change="change"
|
||||
@keyup="keyup"
|
||||
@keydown="keydown"
|
||||
@focus="focus"
|
||||
placeholder=""
|
||||
error="输入信息有误!"
|
||||
/>
|
||||
|
||||
</md-field>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
import {TextareaItem, Field} from 'mand-mobile'
|
||||
|
||||
export default {
|
||||
name: 'tips-demo',
|
||||
title: '错误提示',
|
||||
titleEnUS: 'error-tip',
|
||||
data() {
|
||||
return {
|
||||
value: '申请理赔xxx',
|
||||
}
|
||||
},
|
||||
components: {
|
||||
[TextareaItem.name]: TextareaItem,
|
||||
[Field.name]: Field,
|
||||
},
|
||||
mounted() {
|
||||
// this.$refs.demo1.focus()
|
||||
},
|
||||
methods: {
|
||||
blur() {
|
||||
console.log('blur')
|
||||
},
|
||||
keyup(e) {
|
||||
console.log('keyup', e)
|
||||
},
|
||||
focus() {
|
||||
console.log('focus')
|
||||
},
|
||||
keydown(e) {
|
||||
console.log('keydown', e)
|
||||
},
|
||||
change(v) {
|
||||
console.log('change', v)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<template>
|
||||
<div class="md-example-child md-example-child-textarea md-example-child-textarea-2">
|
||||
<md-field>
|
||||
<md-textarea-item
|
||||
ref="demo2"
|
||||
class="demo2"
|
||||
:autosize="true"
|
||||
v-model="value"
|
||||
:max-length="100"
|
||||
:max-height="100"
|
||||
placeholder="描述信息在100字以内"
|
||||
>
|
||||
<template slot="footer">
|
||||
<p class="demo2__footer">
|
||||
<span
|
||||
class="demo2__footer-left"
|
||||
v-if="value.length"
|
||||
>{{ value.length }}/100</span
|
||||
>
|
||||
<span v-else></span>
|
||||
|
||||
<span
|
||||
class="demo2__footer-right"
|
||||
>页脚文案</span
|
||||
>
|
||||
</p>
|
||||
</template>
|
||||
</md-textarea-item>
|
||||
</md-field>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
import {TextareaItem, Field} from 'mand-mobile'
|
||||
|
||||
export default {
|
||||
name: 'tips-demo',
|
||||
title: '插槽',
|
||||
titleEnUS: 'slot',
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
}
|
||||
},
|
||||
components: {
|
||||
[TextareaItem.name]: TextareaItem,
|
||||
[Field.name]: Field,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="stylus">
|
||||
.md-example-child-textarea-2
|
||||
.demo2
|
||||
&__footer
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: #999;
|
||||
font-size: 24px;
|
||||
</style>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<template>
|
||||
<div class="md-example textarea-item">
|
||||
<section class="md-example-section" v-for="(demo, index) in demos" :key="index">
|
||||
<div class="md-example-title" v-html="demo.title || '基础'"></div>
|
||||
<div class="md-example-describe" v-html="demo.describe"></div>
|
||||
<div class="md-example-content">
|
||||
<component :is="demo"></component>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
import createDemoModule from '../../../examples/create-demo-module'
|
||||
import Demo0 from './cases/demo0'
|
||||
import Demo1 from './cases/demo1'
|
||||
import Demo2 from './cases/demo2'
|
||||
|
||||
export default {...createDemoModule('textarea-item', [Demo0, Demo1, Demo2])}
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
</style>
|
||||
|
|
@ -0,0 +1,197 @@
|
|||
<template>
|
||||
<md-field-item
|
||||
class="md-textarea-item"
|
||||
:class="[
|
||||
isDisabled ? 'is-disabled' : '',
|
||||
errorInfo ? 'is-error' : ''
|
||||
]"
|
||||
:title="title"
|
||||
:solid="solid"
|
||||
>
|
||||
<textarea
|
||||
class="md-textarea-item__textarea"
|
||||
ref="textarea"
|
||||
v-model="inputValue"
|
||||
:disabled="isDisabled"
|
||||
:readonly="readonly"
|
||||
:maxlength="maxLength"
|
||||
:placeholder="placeholder"
|
||||
:rows="rows"
|
||||
@input="$_onInput"
|
||||
@focus="$_onFocus"
|
||||
@blur="$_onBlur"
|
||||
@keyup="$_onKeyup"
|
||||
@keydown="$_onKeydown"
|
||||
></textarea>
|
||||
<slot name="footer"></slot>
|
||||
<template slot="children">
|
||||
<div v-if="errorInfo" class="md-textarea-item-msg">
|
||||
<p>{{ errorInfo }}</p>
|
||||
</div>
|
||||
</template>
|
||||
</md-field-item>
|
||||
</template>
|
||||
<script>
import FieldItem from '../field-item'
|
||||
|
||||
export default {
|
||||
name: 'md-textarea-item',
|
||||
components: {
|
||||
[FieldItem.name]: FieldItem,
|
||||
},
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
value: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
maxLength: {
|
||||
type: [String, Number],
|
||||
default: '',
|
||||
},
|
||||
maxHeight: {
|
||||
type: [String, Number],
|
||||
default: '',
|
||||
},
|
||||
solid: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
rows: {
|
||||
type: [String, Number],
|
||||
default: '3',
|
||||
},
|
||||
autosize: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
error: {
|
||||
type: String,
|
||||
defalut: '',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
maxHeightInner: this.maxHeight,
|
||||
inputValue: this.value,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isDisabled() {
|
||||
return this.disabled
|
||||
},
|
||||
errorInfo() {
|
||||
return this.error
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
value(val) {
|
||||
this.inputValue = val
|
||||
this.resizeTextarea()
|
||||
},
|
||||
inputValue(val) {
|
||||
this.$emit('input', val)
|
||||
this.$emit('change', val)
|
||||
},
|
||||
maxHeight(val) {
|
||||
this.maxHeightInner = val
|
||||
this.resizeTextarea()
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.resizeTextarea()
|
||||
},
|
||||
methods: {
|
||||
$_onInput(event) {
|
||||
this.inputValue = event.target.value
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.resizeTextarea()
|
||||
})
|
||||
},
|
||||
$_onKeyup(event) {
|
||||
this.$emit('keyup', event)
|
||||
},
|
||||
$_onKeydown(event) {
|
||||
this.$emit('keydown', event)
|
||||
},
|
||||
$_onFocus() {
|
||||
this.$emit('focus')
|
||||
},
|
||||
$_onBlur() {
|
||||
setTimeout(() => {
|
||||
this.$emit('blur')
|
||||
}, 100)
|
||||
},
|
||||
$_calcTextareaHeight(textarea) {
|
||||
// Triggers the textarea to repaint
|
||||
textarea.style.height = 'auto'
|
||||
|
||||
let scrollHeight = textarea.scrollHeight
|
||||
if (this.maxHeightInner && scrollHeight > this.maxHeightInner) {
|
||||
scrollHeight = this.maxHeightInner
|
||||
}
|
||||
|
||||
textarea.style.height = scrollHeight + 'px'
|
||||
},
|
||||
// public
|
||||
resizeTextarea() {
|
||||
if (this.autosize) {
|
||||
this.$_calcTextareaHeight(this.$refs.textarea)
|
||||
}
|
||||
},
|
||||
focus() {
|
||||
this.$refs.textarea.focus()
|
||||
},
|
||||
blur() {
|
||||
this.$refs.textarea.blur()
|
||||
},
|
||||
getValue() {
|
||||
return this.inputValue
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="stylus">
|
||||
.md-textarea-item
|
||||
&-msg
|
||||
color textarea-item-color-error
|
||||
.md-field-item-content
|
||||
align-items normal
|
||||
.is-disabled
|
||||
.md-textarea-item__textarea
|
||||
-webkit-text-fill-color textarea-item-color-disabled
|
||||
color textarea-item-color-disabled
|
||||
&__textarea
|
||||
width 100%
|
||||
-webkit-appearance none
|
||||
border none
|
||||
background transparent
|
||||
outline none
|
||||
resize none
|
||||
box-sizing border-box
|
||||
-webkit-tap-highlight-color transparent
|
||||
appearance none
|
||||
line-height textarea-item-line-height
|
||||
font-size textarea-item-font-size
|
||||
&::-webkit-input-placeholder
|
||||
color textarea-item-placeholder-color
|
||||
font-weight textarea-item-placeholder-weight
|
||||
&.is-error
|
||||
.md-field-item-content
|
||||
hairline(bottom, textarea-item-color-error, 0, 4px)
|
||||
</style>
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`TextareaItem - Demo Basic 1`] = `
|
||||
<div class="md-example-child md-example-child-textarea md-example-child-textarea-0">
|
||||
<fieldset class="md-field">
|
||||
<!---->
|
||||
<div class="md-field-content">
|
||||
<div class="md-field-item md-textarea-item example is-solid is-browser">
|
||||
<div class="md-field-item-content"><label class="md-field-item-title">普通</label>
|
||||
<!---->
|
||||
<div class="md-field-item-control"><textarea maxlength="" placeholder="普通文本域" rows="3" class="md-textarea-item__textarea"></textarea> </div>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<div class="md-field-item md-textarea-item example is-solid is-browser">
|
||||
<div class="md-field-item-content"><label class="md-field-item-title">自动适应</label>
|
||||
<!---->
|
||||
<div class="md-field-item-control"><textarea maxlength="10" placeholder="最大高度100px 超过出现滚动条" rows="1" class="md-textarea-item__textarea"></textarea> </div>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<div class="md-field-item md-textarea-item example is-solid is-browser is-disabled">
|
||||
<div class="md-field-item-content"><label class="md-field-item-title">禁用</label>
|
||||
<!---->
|
||||
<div class="md-field-item-control"><textarea disabled="disabled" maxlength="" placeholder="500字以内" rows="3" class="md-textarea-item__textarea">禁用文本域, 理赔报案描述, 理赔报案描述, 理赔报案描述, 理赔报案描述, 理赔报案描述, 理赔报案描述</textarea> </div>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<div class="md-field-item md-textarea-item example is-solid is-browser">
|
||||
<div class="md-field-item-content"><label class="md-field-item-title">只读</label>
|
||||
<!---->
|
||||
<div class="md-field-item-control"><textarea readonly="readonly" maxlength="" placeholder="500字以内" rows="3" class="md-textarea-item__textarea">只读文本域, 理赔报案描述, 理赔报案描述, 理赔报案描述, 理赔报案描述, 理赔报案描述, 理赔报案描述</textarea> </div>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
</fieldset>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`TextareaItem - Demo Error Tip 1`] = `
|
||||
<div class="md-example-child md-example-child-textarea md-example-child-textarea-0">
|
||||
<fieldset class="md-field">
|
||||
<!---->
|
||||
<div class="md-field-content">
|
||||
<div class="md-field-item md-textarea-item example is-solid is-browser is-error">
|
||||
<div class="md-field-item-content"><label class="md-field-item-title">错误提示</label>
|
||||
<!---->
|
||||
<div class="md-field-item-control"><textarea maxlength="" placeholder="" rows="3" class="md-textarea-item__textarea">申请理赔xxx</textarea> </div>
|
||||
<!---->
|
||||
</div>
|
||||
<div class="md-field-item-children">
|
||||
<div class="md-textarea-item-msg">
|
||||
<p>输入信息有误!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
</fieldset>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`TextareaItem - Demo Slot 1`] = `
|
||||
<div class="md-example-child md-example-child-textarea md-example-child-textarea-2">
|
||||
<fieldset class="md-field">
|
||||
<!---->
|
||||
<div class="md-field-content">
|
||||
<div class="md-field-item md-textarea-item demo2 is-solid is-browser">
|
||||
<div class="md-field-item-content">
|
||||
<!---->
|
||||
<!---->
|
||||
<div class="md-field-item-control"><textarea maxlength="100" placeholder="描述信息在100字以内" rows="3" class="md-textarea-item__textarea"></textarea>
|
||||
<p class="demo2__footer"><span></span> <span class="demo2__footer-right">页脚文案</span></p>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
</fieldset>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<template>
|
||||
<div class="md-example-child md-example-child-textarea md-example-child-textarea-0">
|
||||
<md-field>
|
||||
<md-textarea-item
|
||||
ref="demo0"
|
||||
title="普通"
|
||||
autosize
|
||||
class="example"
|
||||
v-model="value"
|
||||
placeholder="普通文本域"
|
||||
/>
|
||||
<md-textarea-item
|
||||
ref="demo0"
|
||||
title="自动适应"
|
||||
class="example"
|
||||
v-model="value"
|
||||
:autosize="true"
|
||||
:rows="1"
|
||||
maxLength="10"
|
||||
placeholder="最大高度100px 超过出现滚动条"
|
||||
:max-height="100"
|
||||
/>
|
||||
<md-textarea-item
|
||||
ref="demo0"
|
||||
title="禁用"
|
||||
class="example"
|
||||
:autosize="true"
|
||||
value="禁用文本域, 理赔报案描述, 理赔报案描述, 理赔报案描述, 理赔报案描述, 理赔报案描述, 理赔报案描述"
|
||||
placeholder="500字以内"
|
||||
:max-height="100"
|
||||
disabled
|
||||
/>
|
||||
<md-textarea-item
|
||||
ref="demo0"
|
||||
title="只读"
|
||||
class="example"
|
||||
:autosize="true"
|
||||
value="只读文本域, 理赔报案描述, 理赔报案描述, 理赔报案描述, 理赔报案描述, 理赔报案描述, 理赔报案描述"
|
||||
placeholder="500字以内"
|
||||
:max-height="100"
|
||||
readonly
|
||||
/>
|
||||
</md-field>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
import {TextareaItem, Field} from 'mand-mobile'
|
||||
|
||||
export default {
|
||||
name: 'tips-demo',
|
||||
title: '普通文本域',
|
||||
titleEnUS: 'basic',
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
}
|
||||
},
|
||||
components: {
|
||||
[TextareaItem.name]: TextareaItem,
|
||||
[Field.name]: Field,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<template>
|
||||
<div class="md-example-child md-example-child-textarea md-example-child-textarea-0">
|
||||
<md-field>
|
||||
<md-textarea-item
|
||||
ref="demo1"
|
||||
title="错误提示"
|
||||
class="example"
|
||||
v-model="value"
|
||||
@blur="blur"
|
||||
@change="change"
|
||||
@keyup="keyup"
|
||||
@keydown="keydown"
|
||||
@focus="focus"
|
||||
placeholder=""
|
||||
error="输入信息有误!"
|
||||
/>
|
||||
|
||||
</md-field>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
import {TextareaItem, Field} from 'mand-mobile'
|
||||
|
||||
export default {
|
||||
name: 'tips-demo',
|
||||
title: '错误提示',
|
||||
titleEnUS: 'error-tip',
|
||||
data() {
|
||||
return {
|
||||
value: '申请理赔xxx',
|
||||
}
|
||||
},
|
||||
components: {
|
||||
[TextareaItem.name]: TextareaItem,
|
||||
[Field.name]: Field,
|
||||
},
|
||||
mounted() {
|
||||
// this.$refs.demo1.focus()
|
||||
},
|
||||
methods: {
|
||||
blur() {
|
||||
console.log('blur')
|
||||
},
|
||||
keyup(e) {
|
||||
console.log('keyup', e)
|
||||
},
|
||||
focus() {
|
||||
console.log('focus')
|
||||
},
|
||||
keydown(e) {
|
||||
console.log('keydown', e)
|
||||
},
|
||||
change(v) {
|
||||
console.log('change', v)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<template>
|
||||
<div class="md-example-child md-example-child-textarea md-example-child-textarea-2">
|
||||
<md-field>
|
||||
<md-textarea-item
|
||||
ref="demo2"
|
||||
class="demo2"
|
||||
:autosize="true"
|
||||
v-model="value"
|
||||
:max-length="100"
|
||||
:max-height="100"
|
||||
placeholder="描述信息在100字以内"
|
||||
>
|
||||
<template slot="footer">
|
||||
<p class="demo2__footer">
|
||||
<span
|
||||
class="demo2__footer-left"
|
||||
v-if="value.length"
|
||||
>{{ value.length }}/100</span
|
||||
>
|
||||
<span v-else></span>
|
||||
|
||||
<span
|
||||
class="demo2__footer-right"
|
||||
>页脚文案</span
|
||||
>
|
||||
</p>
|
||||
</template>
|
||||
</md-textarea-item>
|
||||
</md-field>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
import {TextareaItem, Field} from 'mand-mobile'
|
||||
|
||||
export default {
|
||||
name: 'tips-demo',
|
||||
title: '插槽',
|
||||
titleEnUS: 'slot',
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
}
|
||||
},
|
||||
components: {
|
||||
[TextareaItem.name]: TextareaItem,
|
||||
[Field.name]: Field,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="stylus">
|
||||
.md-example-child-textarea-2
|
||||
.demo2
|
||||
&__footer
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: #999;
|
||||
font-size: 24px;
|
||||
</style>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
import Demo0 from './cases/demo0'
|
||||
import Demo1 from './cases/demo1'
|
||||
import Demo2 from './cases/demo2'
|
||||
import {renderToString} from '@vue/server-test-utils'
|
||||
|
||||
describe('TextareaItem - Demo', () => {
|
||||
test('Basic', () => {
|
||||
expect(renderToString(Demo0)).toMatchSnapshot()
|
||||
})
|
||||
test('Error Tip', () => {
|
||||
expect(renderToString(Demo1)).toMatchSnapshot()
|
||||
})
|
||||
test('Slot', () => {
|
||||
expect(renderToString(Demo2)).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
import {TextareaItem} from 'mand-mobile'
|
||||
import {mount} from '@vue/test-utils'
|
||||
import triggerEvent from '../../popup/test/touch-trigger'
|
||||
|
||||
describe('TextareaItem - Operation', () => {
|
||||
let wrapper
|
||||
|
||||
afterEach(() => {
|
||||
wrapper && wrapper.destroy()
|
||||
})
|
||||
|
||||
test('error msg', () => {
|
||||
wrapper = mount(TextareaItem, {
|
||||
propsData: {
|
||||
maxLength: 10,
|
||||
error: 'hi',
|
||||
value: '禁用文本域, 理赔报案描述, 理赔报案描述, 理赔报案描述, 理赔报案描述, 理赔报案描述, 理赔报案描述',
|
||||
},
|
||||
})
|
||||
expect(wrapper.contains('.md-textarea-item-msg'))
|
||||
})
|
||||
|
||||
test('test input', () => {
|
||||
wrapper = mount(TextareaItem, {
|
||||
propsData: {
|
||||
maxHeight: 300,
|
||||
maxLength: 10,
|
||||
autosize: true,
|
||||
value: '',
|
||||
},
|
||||
})
|
||||
wrapper.setProps({maxHeight: '200'})
|
||||
expect(wrapper.vm.maxHeightInner).toBe('200')
|
||||
const textarea = wrapper.vm.$refs.textarea
|
||||
triggerEvent(textarea, 'focus', 0, 0)
|
||||
triggerEvent(textarea, 'focus', 0, 0)
|
||||
textarea.style.height = '342px'
|
||||
triggerEvent(textarea, 'input', 0, 0, '禁用文本域, 理赔报案描述, 理赔报案描述, 理赔报案描述, 理赔报案描述, 理赔报案描述, 理赔报案描述')
|
||||
triggerEvent(textarea, 'keydown', 0, 0, 49)
|
||||
triggerEvent(textarea, 'keyup', 0, 0, 49)
|
||||
triggerEvent(textarea, 'blur', 0, 0)
|
||||
|
||||
// 测试高度适应
|
||||
wrapper.setProps({maxHeight: '-1'})
|
||||
wrapper.setProps({value: '123'})
|
||||
expect(wrapper.vm.$refs.textarea.style.height).toBe('-1px')
|
||||
})
|
||||
|
||||
test('focus and blur', done => {
|
||||
wrapper = mount(TextareaItem, {
|
||||
propsData: {
|
||||
maxHeight: 300,
|
||||
maxLength: 10,
|
||||
autosize: true,
|
||||
value: '1',
|
||||
},
|
||||
})
|
||||
expect(wrapper.vm.getValue()).toBe('1')
|
||||
wrapper.vm.blur()
|
||||
setTimeout(() => {
|
||||
done()
|
||||
}, 120)
|
||||
wrapper.vm.focus()
|
||||
})
|
||||
})
|
||||
|
|
@ -1 +1 @@
|
|||
[{"category":"basic","name":"Basic","text":"基础","list":[{"name":"ActionBar","path":"/action-bar","icon":"action-bar","text":"操作栏"},{"name":"ActivityIndicator","path":"/activity-indicator","icon":"activity-indicator","text":"活动指示器"},{"path":"/button","name":"Button","icon":"button","text":"按钮"},{"name":"CellItem","path":"/cell-item","icon":"cell-item","text":"列表单元"},{"name":"DetailItem","path":"/detail-item","icon":"detail-item","text":"清单项"},{"name":"DropMenu","path":"/drop-menu","icon":"drop-menu","text":"下拉菜单"},{"path":"/icon","name":"Icon","icon":"icon","text":"图标"},{"name":"ImageReader","path":"/image-reader","icon":"image-reader","text":"图片选择器"},{"name":"ImageViewer","path":"/image-viewer","icon":"image-viewer","text":"图片浏览器"},{"name":"NoticeBar","path":"/notice-bar","icon":"notice-bar","text":"通知栏"},{"name":"Progress","path":"/progress","icon":"progress","text":"进度"},{"name":"Skeleton","path":"/skeleton","icon":"skeleton","text":"骨架屏"},{"name":"Stepper","path":"/stepper","icon":"stepper","text":"步进器"},{"name":"Steps","path":"/steps","icon":"steps","text":"步骤条"},{"name":"Swiper","path":"/swiper","icon":"swiper","text":"轮播"},{"name":"TabBar","path":"/tab-bar","icon":"tab-bar","text":"标签栏"},{"name":"Tabs","path":"/tabs","icon":"tabs","text":"标签页"},{"name":"Tag","path":"/tag","icon":"tag","text":"标签"}]},{"category":"business","name":"Business","text":"业务相关","list":[{"name":"Amount","path":"/amount","icon":"amount","text":"金融数字"},{"name":"Bill","path":"/bill","icon":"bill","text":"票据"},{"name":"Captcha","path":"/captcha","icon":"captcha","text":"验证码窗口"},{"name":"Cashier","path":"/cashier","icon":"cashier","text":"收银台"},{"name":"Chart","path":"/chart","icon":"chart","text":"折线图表"},{"name":"Landscape","path":"/landscape","icon":"landscape","text":"压屏窗"},{"name":"ResultPage","path":"/result-page","icon":"result-page","text":"结果页"},{"name":"Ruler","path":"/ruler","icon":"ruler","text":"刻度尺"},{"name":"WaterMark","path":"/water-mark","icon":"water-mark","text":"水印"}]},{"category":"feedback","name":"Feedback","text":"操作反馈","list":[{"name":"ActionSheet","path":"/action-sheet","icon":"action-sheet","text":"动作面板"},{"name":"DatePicker","path":"/date-picker","icon":"date-picker","text":"日期选择器"},{"name":"Dialog","path":"/dialog","icon":"dialog","text":"模态窗"},{"name":"Picker","path":"/picker","icon":"picker","text":"选择器"},{"name":"Popup","path":"/popup","icon":"popup","text":"弹出层"},{"name":"Selector","path":"/selector","icon":"selector","text":"列表选择器"},{"name":"TabPicker","path":"/tab-picker","icon":"tab-picker","text":"多频道选择器"},{"name":"Tip","path":"/tip","icon":"tip","text":"气泡提示"},{"name":"Toast","path":"/toast","icon":"toast","text":"轻提示"},{"name":"Transition","path":"/transition","icon":"transition","text":"动画"}]},{"category":"form","name":"Form","text":"表单相关","list":[{"name":"Agree","path":"/agree","icon":"agree","text":"勾选按钮"},{"name":"Check","path":"/check","icon":"check","text":"选择项组"},{"name":"Codebox","path":"/codebox","icon":"codebox","text":"字符码输入框"},{"name":"Field","path":"/field","icon":"field","text":"区域列表组合"},{"name":"InputItem","path":"/input-item","icon":"input-item","text":"输入框"},{"name":"NumberKeyboard","path":"/number-keyboard","icon":"number-keyboard","text":"数字键盘"},{"name":"Radio","path":"/radio","icon":"radio","text":"单选框"},{"name":"Slider","path":"/slider","icon":"slider","text":"滑块"},{"name":"Switch","path":"/switch","icon":"switch","text":"开关"}]},{"category":"gesture","name":"Gesture","text":"手势","list":[{"name":"ScrollView","path":"/scroll-view","icon":"scroll-view","text":"滚动区域/下拉刷新"}]}]
|
||||
[{"category":"basic","name":"Basic","text":"基础","list":[{"name":"ActionBar","path":"/action-bar","icon":"action-bar","text":"操作栏"},{"name":"ActivityIndicator","path":"/activity-indicator","icon":"activity-indicator","text":"活动指示器"},{"path":"/button","name":"Button","icon":"button","text":"按钮"},{"name":"CellItem","path":"/cell-item","icon":"cell-item","text":"列表单元"},{"name":"DetailItem","path":"/detail-item","icon":"detail-item","text":"清单项"},{"name":"DropMenu","path":"/drop-menu","icon":"drop-menu","text":"下拉菜单"},{"path":"/icon","name":"Icon","icon":"icon","text":"图标"},{"name":"ImageReader","path":"/image-reader","icon":"image-reader","text":"图片选择器"},{"name":"ImageViewer","path":"/image-viewer","icon":"image-viewer","text":"图片浏览器"},{"name":"NoticeBar","path":"/notice-bar","icon":"notice-bar","text":"通知栏"},{"name":"Progress","path":"/progress","icon":"progress","text":"进度"},{"name":"Skeleton","path":"/skeleton","icon":"skeleton","text":"骨架屏"},{"name":"Stepper","path":"/stepper","icon":"stepper","text":"步进器"},{"name":"Steps","path":"/steps","icon":"steps","text":"步骤条"},{"name":"Swiper","path":"/swiper","icon":"swiper","text":"轮播"},{"name":"TabBar","path":"/tab-bar","icon":"tab-bar","text":"标签栏"},{"name":"Tabs","path":"/tabs","icon":"tabs","text":"标签页"},{"name":"Tag","path":"/tag","icon":"tag","text":"标签"}]},{"category":"business","name":"Business","text":"业务相关","list":[{"name":"Amount","path":"/amount","icon":"amount","text":"金融数字"},{"name":"Bill","path":"/bill","icon":"bill","text":"票据"},{"name":"Captcha","path":"/captcha","icon":"captcha","text":"验证码窗口"},{"name":"Cashier","path":"/cashier","icon":"cashier","text":"收银台"},{"name":"Chart","path":"/chart","icon":"chart","text":"折线图表"},{"name":"Landscape","path":"/landscape","icon":"landscape","text":"压屏窗"},{"name":"ResultPage","path":"/result-page","icon":"result-page","text":"结果页"},{"name":"Ruler","path":"/ruler","icon":"ruler","text":"刻度尺"},{"name":"WaterMark","path":"/water-mark","icon":"water-mark","text":"水印"}]},{"category":"feedback","name":"Feedback","text":"操作反馈","list":[{"name":"ActionSheet","path":"/action-sheet","icon":"action-sheet","text":"动作面板"},{"name":"DatePicker","path":"/date-picker","icon":"date-picker","text":"日期选择器"},{"name":"Dialog","path":"/dialog","icon":"dialog","text":"模态窗"},{"name":"Picker","path":"/picker","icon":"picker","text":"选择器"},{"name":"Popup","path":"/popup","icon":"popup","text":"弹出层"},{"name":"Selector","path":"/selector","icon":"selector","text":"列表选择器"},{"name":"TabPicker","path":"/tab-picker","icon":"tab-picker","text":"多频道选择器"},{"name":"Tip","path":"/tip","icon":"tip","text":"气泡提示"},{"name":"Toast","path":"/toast","icon":"toast","text":"轻提示"},{"name":"Transition","path":"/transition","icon":"transition","text":"动画"}]},{"category":"form","name":"Form","text":"表单相关","list":[{"name":"Agree","path":"/agree","icon":"agree","text":"勾选按钮"},{"name":"Check","path":"/check","icon":"check","text":"选择项组"},{"name":"Codebox","path":"/codebox","icon":"codebox","text":"字符码输入框"},{"name":"Field","path":"/field","icon":"field","text":"区域列表组合"},{"name":"InputItem","path":"/input-item","icon":"input-item","text":"输入框"},{"name":"NumberKeyboard","path":"/number-keyboard","icon":"number-keyboard","text":"数字键盘"},{"name":"Radio","path":"/radio","icon":"radio","text":"单选框"},{"name":"Slider","path":"/slider","icon":"slider","text":"滑块"},{"name":"Switch","path":"/switch","icon":"switch","text":"开关"},{"name":"TextareaItem","path":"/textarea-item","icon":"textarea-item","text":"文本域"}]},{"category":"gesture","name":"Gesture","text":"手势","list":[{"name":"ScrollView","path":"/scroll-view","icon":"scroll-view","text":"滚动区域/下拉刷新"}]}]
|
||||
|
|
@ -46,4 +46,7 @@ export {default as Transition} from '../components/transition/demo'
|
|||
export {default as DetailItem} from '../components/detail-item/demo'
|
||||
export {default as Slider} from '../components/slider/demo'
|
||||
export {default as Progress} from '../components/progress/demo'
|
||||
export {default as Ruler} from '../components/ruler/demo'
export {default as Skeleton} from '../components/skeleton/demo'
/* @init<%export {default as ${componentNameUpper}} from '../components/${componentName}/demo'%> */
|
||||
export {default as Ruler} from '../components/ruler/demo'
|
||||
export {default as TextareaItem} from '../components/textarea-item/demo'
|
||||
export {default as Skeleton} from '../components/skeleton/demo'
|
||||
/* @init<%export {default as ${componentNameUpper}} from '../components/${componentName}/demo'%> */
|
||||
|
|
|
|||
Loading…
Reference in New Issue