bmui/es/vue/components/searchbox.js

Bluemoon Moon Components

import MixinInput from '../mixins/input';

var __render = function __render() {
  var _vm = this;

  var _h = _vm.$createElement;

  var _c = _vm._self._c || _h;

  return _c('form', {
    "class": ['bmui-searchbox', {
      'bmui-searchbox-active': _vm.active
    }],
    on: {
      "click": _vm.mixinInputDoFocus,
      "submit": function submit($event) {
        $event.preventDefault();
        return _vm.submit($event);
      }
    }
  }, [_c('div', {
    staticClass: "bmui-searchbox-wrap"
  }, [_c('i', {
    staticClass: "bmui-searchbox-icon"
  }), _vm._v(" "), _c('input', _vm._b({
    directives: [{
      name: "model",
      rawName: "v-model",
      value: _vm.valueInside,
      expression: "valueInside"
    }],
    ref: "input",
    staticClass: "bmui-searchbox-content",
    attrs: {
      "placeholder": _vm.placeholder || '请输入关键字',
      "type": "text"
    },
    domProps: {
      "value": _vm.valueInside
    },
    on: {
      "focus": function focus($event) {
        _vm.active = true;
      },
      "input": function input($event) {
        if ($event.target.composing) {
          return;
        }

        _vm.valueInside = $event.target.value;
      }
    }
  }, 'input', _vm.mixinInputProps, false)), _vm._v(" "), _vm.valueInside ? _c('button', {
    staticClass: "bmui-searchbox-del",
    attrs: {
      "type": "button"
    },
    on: {
      "click": function click($event) {
        _vm.valueInside = '';
      }
    }
  }) : _vm._e(), _vm._v(" "), _vm.active && _vm.valueInside ? _c('button', {
    staticClass: "bmui-searchbox-submit",
    attrs: {
      "type": "submit"
    },
    on: {
      "click": function click($event) {
        $event.stopPropagation();
      }
    }
  }, [_vm._v("确 认")]) : _vm._e(), _vm._v(" "), _vm.active && !_vm.valueInside ? _c('button', {
    staticClass: "bmui-searchbox-submit",
    attrs: {
      "type": "button"
    },
    on: {
      "click": function click($event) {
        $event.stopPropagation();
        _vm.active = false;
      }
    }
  }, [_vm._v("取 消")]) : _vm._e()])]);
};

var __staticRender = [];
export default {
  render: __render,
  staticRenderFns: __staticRender,
  name: 'BmuiSearchbox',
  mixins: [MixinInput],
  data: function data() {
    return {
      active: false
    };
  },
  methods: {
    submit: function submit() {
      this.$emit('submit', this.valueInside);
    }
  }
};