cnf
2025-05-15 5f0b94e9c252e507b4c09badf923796151be0d03
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<template>
    <uvTextarea
        :value="value"
        :placeholder="placeholder"
        :height="height"
        :confirmType="confirmType"
        :disabled="disabled"
        :count="count"
        :focus="focus"
        :autoHeight="autoHeight"
        :fixed="fixed"
        :cursorSpacing="cursorSpacing"
        :cursor="cursor"
        :showConfirmBar="showConfirmBar"
        :selectionStart="selectionStart"
        :selectionEnd="selectionEnd"
        :adjustPosition="adjustPosition"
        :disableDefaultPadding="disableDefaultPadding"
        :holdKeyboard="holdKeyboard"
        :maxlength="maxlength"
        :border="border"
        :customStyle="customStyle"
        :formatter="formatter"
        :ignoreCompositionEvent="ignoreCompositionEvent"
        @focus="e => $emit('focus', e)"
        @blur="e => $emit('blur', e)"
        @linechange="e => $emit('linechange', e)"
        @confirm="e => $emit('confirm', e)"
        @input="e => $emit('input', e)"
        @keyboardheightchange="e => $emit('keyboardheightchange', e)"
    ></uvTextarea>
</template>
 
<script>
    /**
     * 此组件存在的理由是,在nvue下,u--textarea被uni-app官方占用了,u-textarea在nvue中相当于textarea组件
     * 所以在nvue下,取名为u--textarea,内部其实还是u-textarea.vue,只不过做一层中转
     */
    import uvTextarea from '../u-textarea/u-textarea.vue';
    import props from '../u-textarea/props.js'
    /**
     * Textarea 文本域
     * @description 文本域此组件满足了可能出现的表单信息补充,编辑等实际逻辑的功能,内置了字数校验等
     * @tutorial https://www.uviewui.com/components/textarea.html
     *
     * @property {String | Number}         value                    输入框的内容
     * @property {String | Number}        placeholder                输入框为空时占位符
     * @property {String}                placeholderClass        指定placeholder的样式类,注意页面或组件的style中写了scoped时,需要在类名前写/deep/ ( 默认 'input-placeholder' )
     * @property {String | Object}        placeholderStyle        指定placeholder的样式,字符串/对象形式,如"color: red;"
     * @property {String | Number}        height                    输入框高度(默认 70 )
     * @property {String}                confirmType                设置键盘右下角按钮的文字,仅微信小程序,App-vue和H5有效(默认 'done' )
     * @property {Boolean}                disabled                是否禁用(默认 false )
     * @property {Boolean}                count                    是否显示统计字数(默认 false )
     * @property {Boolean}                focus                    是否自动获取焦点,nvue不支持,H5取决于浏览器的实现(默认 false )
     * @property {Boolean | Function}    autoHeight                是否自动增加高度(默认 false )
     * @property {Boolean}                fixed                    如果textarea是在一个position:fixed的区域,需要显示指定属性fixed为true(默认 false )
     * @property {Number}                cursorSpacing            指定光标与键盘的距离(默认 0 )
     * @property {String | Number}        cursor                    指定focus时的光标位置
     * @property {Function}                formatter                内容式化函数
     * @property {Boolean}                showConfirmBar            是否显示键盘上方带有”完成“按钮那一栏,(默认 true )
     * @property {Number}                selectionStart            光标起始位置,自动聚焦时有效,需与selection-end搭配使用,(默认 -1 )
     * @property {Number | Number}        selectionEnd            光标结束位置,自动聚焦时有效,需与selection-start搭配使用(默认 -1 )
     * @property {Boolean}                adjustPosition            键盘弹起时,是否自动上推页面(默认 true )
     * @property {Boolean | Number}        disableDefaultPadding    是否去掉 iOS 下的默认内边距,只微信小程序有效(默认 false )
     * @property {Boolean}                holdKeyboard            focus时,点击页面的时候不收起键盘,只微信小程序有效(默认 false )
     * @property {String | Number}        maxlength                最大输入长度,设置为 -1 的时候不限制最大长度(默认 140 )
     * @property {String}                border                    边框类型,surround-四周边框,none-无边框,bottom-底部边框(默认 'surround' )
     * @property {Boolean}                ignoreCompositionEvent    是否忽略组件内对文本合成系统事件的处理
     *
     * @event {Function(e)} focus                    输入框聚焦时触发,event.detail = { value, height },height 为键盘高度
     * @event {Function(e)} blur                    输入框失去焦点时触发,event.detail = {value, cursor}
     * @event {Function(e)} linechange                输入框行数变化时调用,event.detail = {height: 0, heightRpx: 0, lineCount: 0}
     * @event {Function(e)} input                    当键盘输入时,触发 input 事件
     * @event {Function(e)} confirm                    点击完成时, 触发 confirm 事件
     * @event {Function(e)} keyboardheightchange    键盘高度发生变化的时候触发此事件
     * @example <u--textarea v-model="value1" placeholder="请输入内容" ></u--textarea>
     */
    export default {
        name: 'u--textarea',
        mixins: [uni.$u.mpMixin, props, uni.$u.mixin],
        components: {
            uvTextarea
        },
    }
</script>