iview中Form组件

（1）Input输入框

 1 <template>
 2     <Input v-model="value" placeholder="Enter something..." style="width: 300px"></Input>
 3 </template>
 4 
 5 <script>
 6     export default {
 7         data () {
 8             return {
 9                 value: ''
10             }
11         }
12     }
13 </script>

（2） 复合型输入框

通过前置和后置的slot可以实现复合型的输入框。

 1 <template>
 2     <Input v-model="value11">
 3         <span slot="prepend">http://</span>
 4         <span slot="append">.com</span>
 5     </Input>
 6     <br>
 7     <Input v-model="value12">
 8         <Select v-model="select1" slot="prepend" style="width: 80px">
 9             <Option value="http">http://</Option>
10             <Option value="https">https://</Option>
11         </Select>
12         <Select v-model="select2" slot="append" style="width: 70px">
13             <Option value="com">.com</Option>
14             <Option value="org">.org</Option>
15             <Option value="io">.io</Option>

 

16         </Select>
17     </Input>
18     <br>
19     <Input v-model="value13">
20         <Select v-model="select3" slot="prepend" style="width: 80px">
21             <Option value="day">Day</Option>
22             <Option value="month">Month</Option>
23         </Select>
24         <Button slot="append" icon="ios-search"></Button>
25     </Input>
26 </template>
27 <script>
28     export default {
29         data () {
30             return {
31                 value11: '',
32                 value12: '',
33                 value13: '',
34                 select1: 'http',
35                 select2: 'com',
36                 select3: 'day'
37             }
38         }
39     }
40 </script>

 

转载于:https://www.cnblogs.com/lanyb009/p/9240895.html