How to use heyui - 10 common examples

trigger(data) {
      if (data.type == 'togglemenuEvent') {
        let menu = data.data;
        this.status.opened = utils.toggleValue(this.status.opened, menu.key);

        // accordion
        if (this.accordion && this.status.opened.indexOf(menu.key) > -1) {
          for (let key in this.menuobj) {
            let mo = this.menuobj[key];
            if (mo.parent === menu.parent && menu.key != key && this.status.opened.indexOf(mo.key) > -1) {
              this.status.opened.splice(this.status.opened.indexOf(mo.key), 1);
            }
          }
        }

        this.$emit('click', menu);
        let isParent = menu.children && menu.children.length > 0;
        if (isParent && (!this.activeAll || this.status.selected == menu.key)) {
          return;
        }

import Dropdown from 'heyui/src/plugins/dropdown';
import dateBase from 'heyui/src/components/date-picker/datebase';
import Locale from 'heyui/src/mixins/locale';

const prefix = 'h-datetime';

const manbaType = {
  year: manba.YEAR,
  month: manba.MONTH,
  date: manba.DAY,
  datetime: manba.MINUTE,
  time: manba.MINUTE,
  datehour: manba.HOUR
};

const options = config.getOption('datepicker');

export default {
  name: 'hDatePicker',
  mixins: [Locale],
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    readonly: {
      type: Boolean,
      default: false
    },
    type: {
      type: [String],
      default: 'date' // year, month, week

message() {
      return locale.t('h.validation.type.globalmobile');
    }
  } // international mobile

classes() {
      let width = this.width;
      let classList = [`${prefixCls}`];
      classList.push({
        [`${prefixCls}-${width}`]: width,
        [`${this.className}`]: !!this.className
      });

      // let noOtherWidth = width==undefined&&this.flex == undefined;
      let lastSize = null;
      for (let size of [ 'xl', 'lg', 'md', 'sm', 'xs' ]) {
        if (utils.isNumber(this[size])) {
          lastSize = this[size];
          classList.push(`${prefixCls}-${size}-${this[size]}`);
        } else if (lastSize) {
          classList.push(`${prefixCls}-${size}-${lastSize}`);
        }
      }

      return classList;
    },
    styles() {

jump(event) {
      let value = parseInt(event.target.value, 10);
      // log(value);
      if (isNaN(value)) {
        Message.error(this.t('h.pagination.incorrectFormat'));
        return;
      }
      if (value > this.count || value < 1) {
        Message.error(this.t('h.pagination.overSize'));
        return;
      }
      let cur = parseInt(event.target.value, 10);
      if (cur == (this.value.page || this.cur)) {
        return;
      }
      this.setvalue({ cur: cur, size: this.sizeNow });
    },
    change(cur) {

setvalue(trigger) {
      let value = this.dispose();
      this.$emit('input', value);
      this.$emit('change', utils.copy(this.multiple ? this.objects : this.object));
      if (trigger != 'clear') {
        this.valueBak = value;
      }
      let event = document.createEvent('CustomEvent');
      event.initCustomEvent('setvalue', true, true, value);
      this.$el.dispatchEvent(event);
      this.dropdownUpdate();
    },
    initCategoryDatas() {

this.$nextTick(() => {
        this.$emit(
          'change',
          utils.copy(this.multiple ? this.objects : this.object)
        );
      });
    },

setvalue() {
      let value = this.dispose();
      this.$emit('input', value);
      this.$emit('change', utils.copy(this.multiple ? this.objects : this.object));
      let event = document.createEvent('CustomEvent');
      event.initCustomEvent('setvalue', true, true, value);
      this.$el.dispatchEvent(event);
    },
    initCascaderDatas() {

constructor(reference, options) {
    options = utils.extend({}, DEFAULT_OPTIONS, options);
    this.reference = reference;

    this.options = options;

    const triggerEvents = typeof options.trigger === 'string' ? options.trigger.split(' ').filter((trigger) => {
      return ['click', 'hover', 'focus', 'manual', 'contextMenu'].indexOf(trigger) !== -1;
    }) : [];

    this.isOpen = false;

    this.arrowSelector = options.arrowSelector;
    this.innerSelector = options.innerSelector;
    this.triggerEvents = [];
    if (options.content.nodeType === 1) {
      options.content.style.display = 'none';
    }

initCascaderDatas() {
      let datas = [];
      if (utils.isArray(this.param.datas)) {
        datas = this.param.datas;
      } else if (utils.isFunction(this.param.datas)) {
        datas = this.param.datas.apply(this.param);
      }
      if (utils.isFunction(this.param.getTotalDatas) || utils.isFunction(this.param.getDatas)) {
        datas = [];
        this.globalloading = true;
        let loadData = this.param.getTotalDatas || this.param.getDatas;
        let param = [
          result => {
            this.cascaderDatas = this.initDatas(utils.copy(result));
            this.parse();
            this.globalloading = false;
            this.$emit('loadDataSuccess');
          },
          () => {
            this.globalloading = false;
          }
        ];
        if (this.param.getDatas) {
          param.unshift(null);