Skip to content

ManfredHu/hu-vue-plugin

Repository files navigation

hu-vue-plugin Logo

Commitizen friendly GitHub

这是一个比较简单上手的插件,集成一些现有的解决方案,如果有更好的模块或者解决方案,请提issue讨论

内置工具模块

this.$et

使用 events 模块, click here.

// listen
this.$et.on('createBtn', (obj, number) => {
})
// emit
this.$et.emit('createBtn', {a: 123}, 9527))

this.$cookie

Using js-cookie, click here

// set
this.$cookie.set('time', new Date(), { expires: 7, path: '' })
// get
this.$cookie.get('time')

this.$time

因为moment太大了在移动端,大约200K,所以用了轻量的同类语法的解决方案dayjs.

this.$time().format('YYYY-MM-DD HH:mm:ss') //2018-12-21 10:06:42

this.$axios

Using Axios, click here

this.$axios.get('/static/mock/axiosTestData.json').then(({data}) => {
  console.log(data)
})

this.$cache

Using localforage, click here. 这里其实localforage是支持localStorage/indexeddb/websql的,这里用到了localStorage.

const self = this
this.$cache.setItem('time', 123).then(() => {
  self.$cache.getItem('time').then((data) => {
    // data: 123
  })
})

可以考虑传入option修改引擎。

But the default use of Web SQL in PC, if you need localStorage, modify the driver.

移动端测试

mobile debug

动态引用,不用到调试脚本的用户不拉取调试脚本。

增加 &debug=eruda 或者 eruda=true 的url参数. 代码在 src/helper/eruda-helper.js

增加 &debug=vconsole 或者 vconsole=true的url参数. 代码在 src/helper/vconsole-helper.js

tools工具

hu-tool

hu-tool包含常用的一些工具,比如URL模块,可以获取url的query、hash的参数之类的。比如TypeCheck可以做一些常用的类型检测。 具体的可以看这里

v-tap

我们知道移动端的click事件是有延迟的,所以会用touchend事件来做兼容。具体可以看src/page/tapTest.vue这个页面,对应的路由hash是/tap tap指令的代码在directive/tap.js。或者也可以用fastClick

v-tap指令用法

给template元素绑定v-tap="methodName",在PC绑定click事件,在移动端绑定touch事件(防止移动端点击穿透) 点透具体可以看这里:https://segmentfault.com/a/1190000003848737

  • 1.可以加修饰符.stop调用e.stopPropagation().prevent调用e.preventDefault()
  • 2.可以加.move则可以在回调event.moveTag收到是'left'/'rigth'/'up'/'down'/false,注意这里移动必须大于moveStandard(默认70)
  • 3.v-tap可以加在带有href跳转链接的a标签上,会自动做页面跳转如 <a v-tap href="https://www.qq.com"></a>

style样式(会独立一个包)

使用normalize.css实现样式重置

具体可以看src/main.js里面,引入了normalize.css

rem

src/helper/rem.js里面对document.style.fontSize做了动态设置,可以动态改变<html>标签的fontSize.这样样式就可以与设计稿(750px)统一,假设设计稿量出来是apx这么大。那么对应的代码就是a/@rem

less的@rem单位全局设定

可以看一下build/utils.js

if (loader === 'less') {
  loaders.push({
    loader: 'style-resources-loader',
    options:{
      patterns: [
          path.resolve(__dirname, '../src/style/base.less'),
      ]
    }
  })
}

这里用到了style-resources-loader这个模块。可以不需要在每个component组件都引用一遍src/style/base.less的文件。

About

Vue plugin for common modules

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages