<template>
<div class="hm-textarea-wrapper" :class="{'hm-textarea_expanded': expanded, 'hm-textarea_active': isFocus}">
<textarea
ref="input"
class="hm-textarea"
v-model="textareaValue"
v-bind="$props"
:placeholder="placeholder"
:maxlength="maxlength"
:disabled="disabled"
@focus="handleFocus"
@blur="handleBlur"
@change="changeHander"
>
</textarea>
<span v-if="indicator" v-show="expanded" class="hm-textarea-indicator">{
{
indicatorConf.remain ? remain : count}}</span>
</div>
</template>
<script type="text/ecmascript-6">
import inputMixin from '../../common/mixins/input'
const COMPONENT_NAME = 'hm-textarea'
const EVENT_INPUT = 'input'
const DEFAULT_INDICATOR = {
negative: true,
remain: true
}
export default {
name: COMPONENT_NAME,
mixins: [inputMixin],
data() {
return {
textareaValue: this.value,
expanded: this.autoExpand ? !!this.value : false,
isFocus: false
}
},
props: {
value: {
type: String,
default: ''
},
cols: Number,
rows: Number,
readonly: Boolean,
wrap: String,
required: Boolean,
placeholder: {
type: String,
default: 'please type here...'
},
dirname: String,
form: String,
name: String,
autofocus: Boolean,
disabled: {
type: Boolean,
default: false
},
maxlength: {
type: Number,
default: 60
},
indicator: {
type: [Boolean, Object],
default: true
},
autoExpand: {
type: Boolean,
default: false
}
},
computed: {
indicatorConf() {
let indicator = this.indicator
if (typeof indicator === 'boolean') {
indicator = {
}
}
return Object.assign({
}, DEFAULT_INDICATOR, indicator)
},
count() {
return this.textareaValue.length
},
remain() {
let diff = this.maxlength - this.count
if (!this.indicatorConf.negative && diff < 0) {
diff = 0
}
return diff
}
},
watch: {
value(newValue) {
this.textareaValue = newValue
},
textareaValue(newValue) {
this.$emit(EVENT_INPUT, newValue)
if (!this.isFocus && this.expanded) {
this.expanded = false
}
}
},
methods: {
handleFocus(e) {
this.$emit('focus', e)
this.expanded = true
this.isFocus = true
},
handleBlur(e) {
this.$emit('blur', e)
if (this.textareaValue.length === 0) {
this.expanded = false
}
this.isFocus = false
}
}
}
</script>
<style lang="stylus" rel="stylesheet/stylus">
@require "../../common/stylus/variable.styl"
@require "../../common/stylus/mixin.styl"
.hm-textarea-wrapper
position: relative
transition: height 200ms
height: 40px
font-size: $fontsize-medium
line-height: 1.429
textarea::-webkit-input-placeholder
color: $textarea-placeholder-color
text-overflow: ellipsis
border-1px($textarea-border-color)
.hm-textarea_expanded
height: 80px
.hm-textarea_active
border-1px($textarea-focus-border-color)
.hm-textarea-indicator
position: absolute
bottom: 7px
right: 10px
color: $textarea-indicator-color
.hm-textarea
width: 100%
height: 100%
text-align: left
padding: 10px
box-sizing: border-box
font-size: 100%
line-height: inherit
color: $textarea-color
background-color: $textarea-bgc
border-radius: 2px
resize: none
border: none
outline: none
</style>
问题1：
<script type="text/ecmascript-6">
上述代看的不大明白，网上直接搜，也没有搜到满意的回答，自己就去看了官方文档
关于script标签type属性的解释：
该属性定义 script 元素包含或src引用的脚本语言。属性的值为 MIME 类型; 支持的 MIME 类型包括text/javascript,
text/ecmascript, application/javascript, 和application/ecmascript。如果没有定义这个属性，脚本会被视作 JavaScript。
如果 MIME 类型不是 JavaScript 类型（上述支持的类型），则该元素所包含的内容会被当作数据块而不会被浏览器执
行。 如果 type 属性为module，代码会被当作 JavaScript 模块 实验性。请参见ES6 in Depth: Modules 在 Firefox 中可
以通过定义 type=application/javascript;version=1.8 来使用如 let 声明这类的 JS 高版本中的先进特性。 但请注意这是
个非标准功能，其他浏览器，特别是基于 Chrome 的浏览器可能会不支持。 关于如何引入特殊编程语言，请参见这篇
文章。
关于MIME类型：
根据百度百科的解释：MIME：全称Multipurpose Internet Mail Extensions，多功能Internet邮件扩充服务。它是一种多用途网际邮件扩充协议，在1992年最早应用于电子邮件系统，但后来也应用到浏览器。MIME类型就是设定某种扩展名的文件用一种应用程序来打开的方式类型，当该扩展名文件被访问的时候，浏览器会自动使用指定应用程序来打开。多用于指定一些客户端自定义的文件名，以及一些媒体文件打开方式。
说白了也就是文件的媒体类型。浏览器可以根据它来区分文件，然后决定什么内容用什么形式来显示。
