Input 输入框

基本表单组件，用来输入信息。

Input 输入示例

>{}

<template>
  <Form label-width="20%" label-mark="：">
    <Field label="文本">
      <Input v-model="the.code" placeholder="Enter LoginCode" autofocus />
    </Field>
    <Field label="密码">
      <Input
        v-model="the.password"
        type="password"
        placeholder="Enter password"
      />
    </Field>
    <Field label="数字">
      <Input v-model="the.GID" type="number" disabled="disabled" />
    </Field>
    <Field label="数字">
      <Input
        v-model="the.GID"
        named="GID"
        placeholder="请输入组织ID"
        type="number"
        icon="icon-sousuo"
        @onEvent="onInputEvent"
      />
    </Field>
    <Field label="文本">
      <Textarea
        v-model="the.text"
        placeholder="请输入多行文本框"
        spellcheck="false"
        rows="3"
        @onEvent="onRespEvent"
      />
    </Field>
  </Form>
</template>

<script>
export default {
  setup() {
    // 使用外挂方式引入，具体查看demo
    const $plus = window.$plus;
    const { reactive } = $plus.vue;

    const the = reactive({
      password: 'abc',
      code: '',
      GID: 123,
      text: '标题\r\n内容',
    });

    const onInputEvent = (resp) => {
      console.log(resp);
      switch (resp.cmd) {
        case 'clear':
          break;
        case 'password':
          break;
      }
    };

    return { the, onInputEvent };
  },
};
</script>

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

v-model props 动态绑定

传递一个属性value，然后接收一个input事件


<template>
  <div>
   <input :value="role.ID"
             @input="inputEvent" />
  </div>
</template>

<script>
export default {
  props: {
    //传入值
    role: {
      type: Object
    }
  },
  setup() {
    const inputEvent=(res)=>{
      console.log('收到的值',res)
    }
    return {inputEvent};
  }
};
</script>

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

Input props

属性	说明	类型	默认值
named `0.4.2`	组件命名	String	input
type	输入框类型 `text`, `textarea`,`password`, `url`, `email`, `date`, `number`,`tel`	String	text
v-model	双向绑定数据	String	-
clearable	是否显示清空按钮,触发事件名`clear`	Boolean	true
icon	输入框扩展图标,触发事件名`InputPlus`	String	-
disabled	设置输入框为禁用，可复制，不能接收焦点,设置后文字的颜色会变成灰色	string	disabled
readonly	设置输入框为只读,可复制使用 Tab 键切换到该字段,可选择,可以接收焦点，还可以选中或拷贝其文本	string	true

Input events

事件名	说明	值
onEvent	点击触发回调事件
cmd	指令类别 `clear` 清除内容,`password` 显示密码,`InputPlus`扩展图标触发	string
named	自定义组件命名	string
data	交互数据	string
event	触发组件对象$event，用于位置等	string

Input slot 插槽

名称	说明
	插入输入框头部
append `0.4.8`	输入框尾部

Loading 加载

Textarea 输入框

Input 输入框 #

Input 输入示例 #

v-model props 动态绑定 #

Input props #