vivo-ui/lib/components/popup-picker/index.js

vivo ui component lib for vue

import Popup from '../popup/index';
import Picker from '../picker/index';

(function () {
  if (typeof document !== 'undefined') {
    var head = document.head || document.getElementsByTagName('head')[0],
        style = document.createElement('style'),
        css = " .src-components-popup-picker-index--header--2XU6f { position: relative; height: 1.2rem; color: #000; font-size: .44rem; line-height: 1.2rem; text-align: center; border-bottom: 1px solid #d0d0d0; } .src-components-popup-picker-index--header--2XU6f p { margin: 0 auto; width: 6.5rem; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .src-components-popup-picker-index--cancel--1jYW4, .src-components-popup-picker-index--confirm--OG-BZ { position: absolute; left: .7rem; color: #828282; } .src-components-popup-picker-index--confirm--OG-BZ { left: auto; right: .7rem; color: #f90; } ";style.type = 'text/css';if (style.styleSheet) {
      style.styleSheet.cssText = css;
    } else {
      style.appendChild(document.createTextNode(css));
    }head.appendChild(style);
  }
})();

var index = { render: function render() {
    var _vm = this;var _h = _vm.$createElement;var _c = _vm._self._c || _h;return _c('popup', _vm._b({ attrs: { "show": _vm.show }, on: { "toggle": _vm.close }, nativeOn: { "touchmove": function touchmove($event) {
          $event.preventDefault();
        } } }, 'popup', _vm.$attrs, false), [_vm.title || _vm.cancel || _vm.confirm ? _c('div', { class: _vm.$style.header }, [_vm.cancel ? _c('span', { class: _vm.$style.cancel, on: { "click": _vm.close } }, [_vm._v(_vm._s(_vm.cancel))]) : _vm._e(), _vm._v(" "), _vm.confirm ? _c('span', { class: _vm.$style.confirm, on: { "click": _vm.confirmCallback } }, [_vm._v(_vm._s(_vm.confirm))]) : _vm._e(), _vm._v(" "), _vm.title ? _c('p', [_vm._v(_vm._s(_vm.title))]) : _vm._e()]) : _vm._e(), _vm._v(" "), _c('picker', _vm._b({ ref: "picker", staticStyle: { "height": "8rem" }, on: { "update": _vm.update } }, 'picker', _vm.$attrs, false))], 1);
  }, staticRenderFns: [], cssModules: { "header": "src-components-popup-picker-index--header--2XU6f", "cancel": "src-components-popup-picker-index--cancel--1jYW4", "confirm": "src-components-popup-picker-index--confirm--OG-BZ" },
  inheritAttrs: false,
  model: {
    prop: 'show',
    event: 'toggle'
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '请选择'
    },
    cancel: {
      type: String,
      default: '取消'
    },
    confirm: {
      type: String,
      default: '确定'
    }
  },
  computed: {
    $style: function $style() {
      return this.$options.cssModules;
    }
  },
  methods: {
    close: function close() {
      // 关闭
      this.$refs.picker.stop(true);
      this.$emit('toggle', false);
    },
    confirmCallback: function confirmCallback() {
      // 点击确定按钮
      this.close();
      // 确保update事件先执行
      this.$nextTick(function () {
        this.$emit('confirm', this.value.slice());
      });
    },
    update: function update(value) {
      this.value = value;
      this.$emit('update', this.value.slice());
    }
  },
  components: {
    Popup: Popup,
    Picker: Picker
  }
};

export default index;