other / mew-iview

  <template>

      <i-input name="a" icon="ios-clock-outline" @on-focus="focus" @on-blur="blur" readonly 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 name="b" 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 readonly 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" type="password">

              <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>

          <Input-number :value="2" size="small"></Input-number>
          <Input-number :value="2"></Input-number>
          <Input-number :value="2" size="large"></Input-number>

          <i-input type="password"></i-input>

      </div>

  </template>
  <script>

      import { iInput, Icon, iButton, iSelect, iOption, InputNumber } from 'iview';

  
      export default {
          components: {

              iInput,
              Icon,
              iButton,
              iSelect,

              iOption,
              InputNumber

          },
          props: {

          },
          data () {
              return {

                  v: 'hello',
                  t: '',
                  autosize: {
                      minRows: 2,
                      maxRows: 5
                  },
                  select1: 'http',
                  select2: 'com'

              }
          },
          computed: {

          },
          methods: {

              enter () {
                  console.log(123)
              },
              iconclick () {
                  console.log('iconclicked')
              },
              change (val) {
                  console.log(val)

              },
              focus () {
                  this.$Message.info('focus');
              },
              blur () {
                  this.$Message.info('blur');

              }

          }
      }
  </script>