pointer-events: none;

window.onunload = function () {};

-webkit-overflow-scrolling: touch;

<template>
  <div class="y-search" :style="styles" :clear="clear">
    <form action="#" onsubmit="return false;">
      <input type="search"
        class="y-search-input"
        ref="search"
        v-model=‘model‘
        :placeholder="placeholder"
        @input="searchInputFn"
        @keyup.enter="searchEnterFn"
        @foucs="searchFocusFn"
        @blur="searchBlurFn"
      />
      <y-icons class="search-icon" name="search" size="14"></y-icons>
    </form>
    <div v-if="showClose" @click="closeFn">
      <y-icons class="close-icon" name=‘close‘ size=‘12‘></y-icons>
    </div>
  </div>
</template>

searchEnterFn (e) {
  document.getElementsByClassName(‘y-search-input‘)[0].blur()
  // dosomething yourself
}

<template>
  <div class=‘y-mask-white-dialog‘ v-show=‘show‘>
    <div class=‘y-message  animated zoomIn‘ >
      <span v-html="msg"></span>
    </div>
  </div>
</template>

<script>
export default {
  name: ‘yMessage‘,
  props: {
    msg: String,
    timeout: Number,
    callback: Function,
    icon: String,
  },
  data() {
    return {
      show: true,
    };
  }
};
</script>

<style lang="stylus"  scoped>
.y-mask-white-dialog {
  background-color: rgba(0, 0, 0, .4);
  position: fixed;
  z-index: 999;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}
.y-message {
  min-width: 2.9rem;
  max-width: 5.5rem;
  width:100%;
  padding: 0.32rem;
  font-size: 14px;
  text-align: center;
  border-radius: 4px;
  background :rgba(0,0,0,0.8);
  color: #fff;
  animation: zoomIn .15s ease forwards;
}
</style>

import Vue from ‘vue‘;

const MsgConstructor = Vue.extend(require(‘./Message.vue‘));

const instance = new MsgConstructor({
  // el: document.createElement(‘div‘),
}).$mount(document.createElement(‘div‘));

MsgConstructor.prototype.closeMsg = function () {
  const el = instance.$el;
  el.parentNode && el.parentNode.removeChild(el);
  typeof this.callback === ‘function‘ && this.callback();
};

const Message = (options = {}) => {
  instance.msg = options.msg;
  instance.timeout = options.timeout || 2000;
  instance.icon = options.icon;
  instance.callback = options.callback;
  document.body.appendChild(instance.$el);

  const timer = setTimeout(() => {
    clearTimeout(timer);
    instance.closeMsg();
  }, instance.timeout + 100);
};

export default Message;

import Message from ‘./components/Message‘;

Vue.component(Message.name, Message)
Vue.prototype.$message = Message

this.$message({
  msg: ‘test message‘
  // ...
})

<div class="parent">
  <img :src="imgSrc" >
</div>

<style lang="stylus" scoped>
.parent {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  
  img {
    width :100%;
    height: auto;
  }
}
</style>

@media (orientation: landscape) {
  img {
    width auto
    height 100%
    margin auto
  }
}

// 配置文件
export default {
  env: (process.env.NODE_ENV === ‘development‘ ? require(‘./env/dev‘) : require(‘./env/pro‘)),
  headShow: false,
  lng: ‘zh‘,
};

// 获取语言环境
import config from ‘../config/index‘;

const {lng} = config;
// 账户类型
const type = {
  zh: {
    1: ‘银行‘,
    2: ‘支付宝‘,
    3: ‘微信支付‘,
  },
  en: {
    1: ‘bank_type‘,
    2: ‘alipay_type‘,
    3: ‘wxpay_type‘,
  }
}
export default type[lng];

import accountType from ‘./accountType‘; // 账户类型

const factory = {
  accountType(value) {
    if (value === -1) {
      return ‘请选择账户类型‘;
    }
    return accountType[value] ? accountType[value] : ‘请选择账户类型‘;
  }
}
const filter = [
  {
    name: ‘formatEnum‘, // 过滤类型
    filter: function(value, type, status) {
      return factory[type](value, status);
    }
  }
];
export default {
  filter
};
// filter
import baseFilter from ‘./filter/index‘;

const filters = [
  ...baseFilter.filter
];
filters.map(f => {
  Vue.filter(f.name, f.filter);
  return ‘‘;
});

<li>
  <label支付类型</label>
  <span>
    {{info.account_type | formatEnum(‘accountType‘)}}
  </span>
</li>

// 全局注册 import VueLazyload from ‘vue-lazyload‘;

Vue.use(VueLazyload, {
  error: require(‘./assets/close.svg‘),
  loading: require(‘./assets/loading.svg‘),
  attempt: 1,
});

// 使用
<img v-lazy="room.img" :alt="room.community_name" width="100%">

<style lang="stylus" scoped>
  .chose-house {
    height: 86px;
    width: 64px;
    margin 0 auto
    position relative
    &::before {
      content: ‘\20‘;
      height: 100%;
      width: 100%;
      position: absolute;
      left: 0;
      top: 0;
      background: url(‘../../assets/sprite-min.png‘) 0px 0px no-repeat;
    }
  }
</style>

//在router/index.js中引入组件时可使用如下异步方式引入
const Foo = resolve => {
  // require.ensure 是 Webpack 的特殊语法，用来设置 code-split point
  // （代码分块）
  require.ensure([‘./Foo.vue‘], () => {
    resolve(require(‘./Foo.vue‘))
  })
}
// or
const Foo = resolve => require([‘./Foo.vue‘], resolve)

const Foo = r => require.ensure([], () => r(require(‘./Foo.vue‘)), ‘group-foo‘)

const getWorkOrder = pageName => resolve => require([‘../pages/WorkOrder‘], pages => resolve(pages[pageName]))

let routers = [];
routers = [
  {
    path: ‘/workorder‘,
    name: ‘workorder‘,
    component: room,
    children: [
      {
        path: ‘list‘, // 管家端工单列表
        name: ‘list‘,
        rule: 3,
        component: getWorkOrder(‘WorkOrderList‘) //WorkOrder,
      },
      {
        path: ‘managerList‘, // 店长端工单列表
        name: ‘managerList‘,
        rule: 6,
        component: getWorkOrder(‘ManagerWorkOrder‘) // WorkOrder,
      },
    ]
  }
]

exports.Foo = require(‘./Foo.vue‘);
exports.Bar = require(‘./Bar.vue‘);
exports.Baz = require(‘./Baz.vue‘);

const components = [
  require(‘./components/base‘).Foo,
  require(‘./components/base‘).Bar,
  require(‘./components/base‘).Baz,
];

components.map(component => {
  Vue.component(component.name, component);
});