iview/examples/routers/input.vue

<template>
    <!--<div>-->
        <!--<Input v-model="value" placeholder="Enter something..." style="width: 300px"></Input>-->
        <!--<Input v-model="value11">-->
            <!--<span slot="prepend">http://</span>-->
            <!--<span slot="append">.com</span>-->
        <!--</Input>-->
        <!--<br>-->
        <!--<Input v-model="value12">-->
            <!--<Select v-model="select1" slot="prepend" style="width: 80px">-->
                <!--<Option value="http">http://</Option>-->
                <!--<Option value="https">https://</Option>-->
            <!--</Select>-->
            <!--<Select v-model="select2" slot="append" style="width: 70px">-->
                <!--<Option value="com">.com</Option>-->
                <!--<Option value="org">.org</Option>-->
                <!--<Option value="io">.io</Option>-->
            <!--</Select>-->
        <!--</Input>-->
        <!--<br>-->
        <!--<Input v-model="value13">-->
            <!--<Select v-model="select3" slot="prepend" style="width: 80px">-->
                <!--<Option value="day">Day</Option>-->
                <!--<Option value="month">Month</Option>-->
            <!--</Select>-->
            <!--<Button slot="append" icon="ios-search"></Button>-->
        <!--</Input>-->
        <!--<br>-->

        <!--<Input v-model="value11" size="small">-->
        <!--<span slot="prepend">http://</span>-->
        <!--<span slot="append">.com</span>-->
        <!--</Input>-->
        <!--<br>-->
        <!--<Input v-model="value12" size="small">-->
        <!--<Select v-model="select1" slot="prepend" style="width: 80px">-->
            <!--<Option value="http">http://</Option>-->
            <!--<Option value="https">https://</Option>-->
        <!--</Select>-->
        <!--<Select v-model="select2" slot="append" style="width: 70px">-->
            <!--<Option value="com">.com</Option>-->
            <!--<Option value="org">.org</Option>-->
            <!--<Option value="io">.io</Option>-->
        <!--</Select>-->
        <!--</Input>-->
        <!--<br>-->
        <!--<Input v-model="value13" size="small">-->
        <!--<Select v-model="select3" slot="prepend" style="width: 80px">-->
            <!--<Option value="day">Day</Option>-->
            <!--<Option value="month">Month</Option>-->
        <!--</Select>-->
        <!--<Button slot="append" icon="ios-search"></Button>-->
        <!--</Input>-->
        <!--<br>-->

        <!--<Input v-model="value11" size="large">-->
        <!--<span slot="prepend">http://</span>-->
        <!--<span slot="append">.com</span>-->
        <!--</Input>-->
        <!--<br>-->
        <!--<Input v-model="value12" size="large">-->
        <!--<Select v-model="select1" slot="prepend" style="width: 80px">-->
            <!--<Option value="http">http://</Option>-->
            <!--<Option value="https">https://</Option>-->
        <!--</Select>-->
        <!--<Select v-model="select2" slot="append" style="width: 70px">-->
            <!--<Option value="com">.com</Option>-->
            <!--<Option value="org">.org</Option>-->
            <!--<Option value="io">.io</Option>-->
        <!--</Select>-->
        <!--</Input>-->
        <!--<br>-->
        <!--<Input v-model="value13" size="large">-->
        <!--<Select v-model="select3" slot="prepend" style="width: 80px">-->
            <!--<Option value="day">Day</Option>-->
            <!--<Option value="month">Month</Option>-->
        <!--</Select>-->
        <!--<Button slot="append" icon="ios-search"></Button>-->
        <!--</Input>-->
        <!--<br>-->
    <!--</div>-->

    <!--<div>-->
        <!--<Input-->
                <!--v-model="value"-->
                <!--size="small"-->
                <!--prefix="ios-contact"-->
                <!--suffix="ios-search"-->
                <!--placeholder="Enter something..."-->
                <!--style="width: 300px"></Input>-->
        <!--<br>-->
        <!--<Input-->
                <!--v-model="value"-->
                <!--prefix="ios-contact"-->
                <!--suffix="ios-search"-->
                <!--placeholder="Enter something..."-->
                <!--style="width: 300px"></Input>-->
        <!--<br>-->
        <!--<Input-->
                <!--v-model="value"-->
                <!--size="large"-->
                <!--prefix="ios-contact"-->
                <!--suffix="ios-search"-->
                <!--placeholder="Enter something..."-->
                <!--style="width: 300px"></Input>-->
        <!--<br><br>-->
        <!--<Input-->
                <!--v-model="value"-->
                <!--size="small"-->
                <!--icon="ios-search"-->
                <!--placeholder="Enter something..."-->
                <!--style="width: 300px"></Input>-->
        <!--<br>-->
        <!--<Input-->
                <!--v-model="value"-->
                <!--icon="ios-search"-->
                <!--placeholder="Enter something..."-->
                <!--style="width: 300px"></Input>-->
        <!--<br>-->
        <!--<Input-->
                <!--v-model="value"-->
                <!--size="large"-->
                <!--icon="ios-search"-->
                <!--placeholder="Enter something..."-->
                <!--style="width: 300px"></Input>-->
        <!--<br><br><br>-->
        <!--<Input v-model="value" placeholder="Enter something..." style="width: 300px">-->
            <!--<Icon type="ios-alarm-outline" slot="suffix" />-->
            <!--<Icon type="ios-aperture" slot="prefix" />-->
        <!--</Input>-->
        <!--<br><br><br><br>-->
        <!--<Input v-model="value" search enter-button style="width: 300px" @on-search="hs" size="small" />-->
        <!--<br>-->
        <!--<Input v-model="value" search enter-button style="width: 300px" @on-search="hs" />-->
        <!--<br>-->
        <!--<Input v-model="value" search enter-button style="width: 300px" @on-search="hs" size="large" />-->
        <!--<br><br>-->
        <!--<Input v-model="value" search style="width: 300px" @on-search="hs" />-->
        <!--<br><br>-->
        <!--<Input v-model="value" search enter-button="Search" style="width: 300px" @on-search="hs" />-->
    <!--</div>-->
    <div style="width: 200px">
        <Input v-model="value7" type="textarea" :autosize="true" placeholder="Enter something..."></Input>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                value: '',
                value11: '',
                value12: '',
                value13: '',
                select1: 'http',
                select2: 'com',
                select3: 'day',
                value7: ``
            }
        },
        methods: {
            hs (val) {
                console.log(val);
            }
        }
    }
</script>