sunUI

基本配置

当前版本号：1.0.0
更新时间/版本 名称 类型 默认值 功能作用
2020/01/19 1.0.0 @input function 无 接收文本框的返回值
2020/01/19 1.0.0 indent string 0em 设置首行缩进(建议2em)
2020/01/19 1.0.0 styTextarea string padding:2%;background-color:#f5f5f5; 使用行内样式来设置文本框样式
2020/01/19 1.0.0 styMaxnum string text-align:right;color:#4888F2; 使用行内样式来设置提示样式
2020/01/19 1.0.0 ref unknow 子组件页面实例 获取子组件实例，并且可以操作使用子组件的方法以及改变它的值

注意

父组件获取子组件的ref实例时注意：

  1. 在mounted生命周期获取
  2. 使用this.nextTick

不合理操作

父组件获取子组件的ref实例时注意，此方法可能不适合：

  1. 使用setTimeout

复制到页面

template






 


 


 <view class="index-page">
		<view class="sunui-title">文本框(默认)</view>
        <!-- indent代表首行缩进，一般用2em即可 -->
        <!-- styTextarea设置textarea样式：font-size:0.8em;padding:2%;background-color:#F5F5F5; -->
        <!-- styMaxnum设置输入提示样式：text-align:right;color:#4888F2; -->
        <sunui-textarea ref="textarea1" indent="0em" @input="getInput1"></sunui-textarea>
		
		<view class="sunui-title">文本框(首行缩进)</view>
		 <sunui-textarea ref="textarea2" indent="2em" @input="getInput2"></sunui-textarea>
  </view>
1
2
3
4
5
6
7
8
9
10

css
1

js

 import sunUiTextarea from "@/components/sunui-textarea/sunui-textarea.vue";
    export default {
        components: {
            'sunui-textarea': sunUiTextarea
        },
        data() {
            return {}
        },
        onShow() {
 
        },
        onLoad() {
            this.$nextTick(function(){
            	this.setRefsTextarea1();
				this.setRefsTextarea2();
            })
        },
        methods: {
            setRefsTextarea1() {
              // 是否显示输入输入样式提示,默认false
              this.$refs.textarea1.maxnum = true;
              // 输入最大数量,传-1代表无限,默认为-1
              this.$refs.textarea1.maxlength = 40;
              // 弹出键盘高度,默认40
              this.$refs.textarea1.cursor = 40;
              // 是否禁用输入,默认不禁用
              this.$refs.textarea1.disabled = false;
              // 是否显示组件,默认显示（控制它显示隐藏textarea）
              this.$refs.textarea1.show = true;
              // 描述文字,默认简述文字...
              this.$refs.textarea1.placeholder = "请输入你的备注...";
            },
			setRefsTextarea2() {
			  // 是否显示输入输入样式提示,默认false
			  this.$refs.textarea2.maxnum = true;
			  // 输入最大数量,传-1代表无限,默认为-1
			  this.$refs.textarea2.maxlength = 40;
			  // 弹出键盘高度,默认40
			  this.$refs.textarea2.cursor = 40;
			  // 是否禁用输入,默认不禁用
			  this.$refs.textarea2.disabled = false;
			  // 是否显示组件,默认显示（控制它显示隐藏textarea）
			  this.$refs.textarea2.show = true;
			  // 描述文字,默认简述文字...
			  this.$refs.textarea2.placeholder = "请输入你的备注呀...";
			},
            getInput1(e) {
                console.log(e);
            },
			getInput2(e) {
			    console.log(e);
			}
        }
    }
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