other / mew-iview

Blame view

test/routers/input.vue 4.45 KB
Edit Raw Normal View History
7d5431d8   梁灏   update some style 
1
 
  <template>
0f822c9b   梁灏   add Input component 
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
 
      <i-input icon="ios-clock-outline" style="width:200px;" :value.sync="v" @on-enter="enter" @on-click="iconclick" size="large" placeholder="请输入"></i-input>
      <i-input icon="ios-clock-outline" style="width:200px;" :value.sync="v" @on-enter="enter" placeholder="请输入"></i-input>
      <i-input icon="ios-clock-outline" style="width:200px;" :value.sync="v" @on-enter="enter" size="small" placeholder="请输入"></i-input>
      <br>
      <br>
      <i-input style="width:200px;" :value.sync="v" @on-enter="enter" size="large" placeholder="请输入"></i-input>
      <i-input style="width:200px;" :value.sync="v" @on-enter="enter" placeholder="请输入"></i-input>
      <i-input style="width:200px;" :value.sync="v" @on-enter="enter" @on-change="change" size="small" placeholder="请输入"></i-input>
      {{ v }}
      <br>
      <br>
      <i-input placeholder="this is something" style="width:200px;" :value.sync="t" type="textarea" :autosize="autosize"></i-input>
      {{ t }}
      <br>
      <br>
      <div style="width: 400px">
          <i-input :value.sync="v">
              <span slot="prepend">http://</span>
              <span slot="append">
                  <i-button icon="ios-search"></i-button>
              </span>
          </i-input>
          <br>
          <i-input :value.sync="v">
              <span slot="prepend">http://</span>
              <span slot="append"><Icon type="ios-search"></Icon></span>
          </i-input>
          <br>
          <i-input :value.sync="v" size="small">
              <span slot="prepend">http://</span>
              <span slot="append"><Icon type="ios-search"></Icon></span>
          </i-input>
  
          <br>
          <i-input :value.sync="v" size="large">
              <i-select :model.sync="select1" slot="prepend" style="width: 80px">
                  <i-option value="http">http://</i-option>
                  <i-option value="https">https://</i-option>
              </i-select>
              <i-select :model.sync="select2" slot="append" style="width: 70px">
                  <i-option value="com">.com</i-option>
                  <i-option value="cn">.cn</i-option>
                  <i-option value="net">.net</i-option>
                  <i-option value="io">.io</i-option>
              </i-select>
          </i-input>
          <br>
          <i-input :value.sync="v">
              <i-select :model.sync="select1" slot="prepend" style="width: 80px">
                  <i-option value="http">http://</i-option>
                  <i-option value="https">https://</i-option>
              </i-select>
              <i-select :model.sync="select2" slot="append" style="width: 70px">
                  <i-option value="com">.com</i-option>
                  <i-option value="cn">.cn</i-option>
                  <i-option value="net">.net</i-option>
                  <i-option value="io">.io</i-option>
              </i-select>
          </i-input>
          <br>
          <i-input :value.sync="v" size="small">
              <i-select :model.sync="select1" slot="prepend" style="width: 80px">
                  <i-option value="http">http://</i-option>
                  <i-option value="https">https://</i-option>
              </i-select>
              <i-select :model.sync="select2" slot="append" style="width: 70px">
                  <i-option value="com">.com</i-option>
                  <i-option value="cn">.cn</i-option>
                  <i-option value="net">.net</i-option>
                  <i-option value="io">.io</i-option>
              </i-select>
          </i-input>
3c01d81a   梁灏   fixed Modal bug,w... 
74
75
76
 
          <Input-number :value="2" size="small"></Input-number>
          <Input-number :value="2"></Input-number>
          <Input-number :value="2" size="large"></Input-number>
0f822c9b   梁灏   add Input component 
77
 
      </div>
7d5431d8   梁灏   update some style 
78
79
 
  </template>
  <script>
3c01d81a   梁灏   fixed Modal bug,w... 
80
 
      import { iInput, Icon, iButton, iSelect, iOption, InputNumber } from 'iview';
7d5431d8   梁灏   update some style 
81
82
83
 
  
      export default {
          components: {
0f822c9b   梁灏   add Input component 
84
85
86
87
 
              iInput,
              Icon,
              iButton,
              iSelect,
3c01d81a   梁灏   fixed Modal bug,w... 
88
89
 
              iOption,
              InputNumber
7d5431d8   梁灏   update some style 
90
91
 
          },
          props: {
0f822c9b   梁灏   add Input component 
92
7d5431d8   梁灏   update some style 
93
94
95
 
          },
          data () {
              return {
0f822c9b   梁灏   add Input component 
96
97
98
99
100
101
102
103
 
                  v: 'hello',
                  t: '',
                  autosize: {
                      minRows: 2,
                      maxRows: 5
                  },
                  select1: 'http',
                  select2: 'com'
7d5431d8   梁灏   update some style 
104
105
106
 
              }
          },
          computed: {
0f822c9b   梁灏   add Input component 
107
7d5431d8   梁灏   update some style 
108
109
 
          },
          methods: {
0f822c9b   梁灏   add Input component 
110
111
112
113
114
115
116
117
118
 
              enter () {
                  console.log(123)
              },
              iconclick () {
                  console.log('iconclicked')
              },
              change (val) {
                  console.log(val)
              }
7d5431d8   梁灏   update some style 
119
120
121
 
          }
      }
  </script>