1、安装

vue create rockh5

2、项目结构

image.png

3、基础配置

vue.config.js

  1. const isDebug = process.env.NODE_ENV !== 'production' && process.env.NODE_ENV !== 'test'
  2. let webpackConfig = {}
  3. // console.log(isDebug,'isDebug>>>>')
  4. if (isDebug) { // development
  5.   webpackConfig = {
  6.     lintOnSave: false, // 保存时候 lint
  7.     devServer: { // devServer 配置
  8.       port: 8333,
  9.       disableHostCheck: true
  10.     },
  11.     chainWebpack: config => {
  12.       config.resolve
  13.         .symlinks(true)
  14.       config
  15.         .entry('app')
  16.           .clear()
  17.           .add('./src/example/main.ts')
  18.           .end()
  19.         .plugin('html')
  20.           .tap(args => {
  21.             args[0].template = './src/example/index.html'
  22.             return args
  23.           })
  24.       return config
  25.     }
  26.   }
  27. } else { // production
  28.   webpackConfig = {
  29.     lintOnSave: false, // 保存时候 lint
  30.     outputDir: 'build', // output 目录
  31.     productionSourceMap: false, // 是否打 sourcemap
  32.     runtimeCompiler: false, // 是否使用包含运行时编译器的 Vue 构建版本，设置成 true 可以使用 template，但是大小会大 10kb 左右
  33.     chainWebpack: config => {
  34.       // entry 这些在命令行做了
  35.       config
  36.         .performance
  37.           .hints(false) // 去除资源大小提示
  39.       return config
  40.     }, // webpack 配置
  41.     css: {
  42.       modules: false, // 是否作为 CSS Modules 模块
  43.       extract: true, // 是否抽取 CSS 到独立文件，默认 porduction = true，development = false
  44.       sourceMap: false, // 是否为 CSS 开启 source map
  45.       loaderOptions: {}, // 向 CSS 相关的 loader 传递选项
  46.     },
  47.   }
  48. }
  50. module.exports = webpackConfig

tslint.json

  1. {
  2.   "defaultSeverity": "warning",
  3.   "extends": [
  4.     "tslint-config-standard"
  5.   ],
  6.   "linterOptions": {
  7.     "exclude": [
  8.       "node_modules/**"
  9.     ]
  10.   },
  11.   "rules": {
  13.     "no-use-before-declare": false,
  14.     "no-unnecessary-qualifier": false,
  15.     "strict-type-predicates": false,
  16.     "no-unnecessary-type-assertion": false,
  17.     "deprecation": false,
  18.     "await-promise": false,
  20.     "quotemark": [false, "single"],
  21.     "indent": [false, "spaces", 2],
  22.     "interface-name": false,
  23.     "ordered-imports": false,
  24.     "object-literal-sort-keys": false,
  25.     "no-consecutive-blank-lines": false,
  26.     "no-unused-expressions": false,
  27.     "no-floating-promises": false,
  28.     "no-unused-variable": false,
  29.     "trailing-comma": false,
  30.     "no-trailing-whitespace": false,
  31.     "no-multi-spaces": false,
  32.     "no-empty": false,
  33.     "space-before-function-paren": false,
  34.     "semicolon": [false, "never"]
  35.   }
  36. }

tsconfig.json

  1. {
  2.   "compilerOptions": {
  3.     "outDir": "./build/",
  4.     "target": "es5",
  5.     "module": "esnext",
  6.     "strict": false,
  7.     "jsx": "preserve",
  8.     "moduleResolution": "node",
  9.     "experimentalDecorators": true,
  10.     "noImplicitAny": false,
  11.     "allowJs": false,
  12.     "allowUnreachableCode": true,
  13.     "sourceMap": true,
  14.     // "importHelpers": true,
  15.     // "esModuleInterop": true,
  16.     "baseUrl": "src",
  17.     "types": [
  18.       "webpack-env",
  19.       "jest"
  20.     ],
  21.     "paths": {
  22.       "@/*": [
  23.         "src/*"
  24.       ]
  25.     },
  26.     "lib": [
  27.       "es2015",
  28.       "es2016",
  29.       "es2017",
  30.       "esnext",
  31.       "dom"
  32.     ]
  33.   },
  34.   "include": [
  35.     "src/**/*.ts",
  36.     "src/**/*.tsx",
  37.     "src/**/*.vue",
  38.     "tests/**/*.ts",
  39.     "tests/**/*.tsx"
  40.   ],
  41.   "exclude": [
  42.     "node_modules"
  43.   ]
  44. }

babel.config.json

  1. module.exports = {
  2.   presets: [
  3.     ['@vue/app', { useBuiltIns: false }, '@vue/cli-plugin-babel/preset'],
  4.   ],
  5. };

package.json

  1. {
  2.   "name": "rockh5",
  3.   "version": "0.1.0",
  4.   "private": false,
  5.   "description": "",
  6.   "author": "商佳伟 - rock shang",
  7.   "scripts": {
  8.     "dev": "vue-cli-service serve",
  9.     "build": "vue-cli-service build --target lib --name rockh5 src/rockh5.ts",
  10.     "lint": "vue-cli-service lint",
  11.     "p": "npm publish --registry http://registry.npmjs.org && cnpm sync"
  12.   },
  13.   "dependencies": {
  14.     "core-js": "^3.6.5",
  15.     "jsonuri": "^2.2.8",
  16.     "vue": "^2.6.11"
  17.   },
  18.   "devDependencies": {
  19.     "@babel/runtime-corejs2": "^7.2.0",
  20.     "@types/jest": "^23.1.4",
  21.     "@vue/cli-plugin-babel": "^3.0.1",
  22.     "@vue/cli-plugin-e2e-nightwatch": "^3.0.0-rc.11",
  23.     "@vue/cli-plugin-typescript": "^3.0.0-rc.11",
  24.     "@vue/cli-plugin-unit-jest": "^3.0.0-rc.11",
  25.     "@vue/cli-service": "^3.0.0-rc.11",
  26.     "@vue/test-utils": "^1.0.0-beta.20",
  27.     "autoprefixer": "^7.2.6",
  28.     "babel-core": "7.0.0-bridge.0",
  29.     "cssnano": "^3.10.0",
  30.     "cssnano-preset-advanced": "^4.0.0",
  31.     "lint-staged": "^6.0.0",
  32.     "postcss-aspect-ratio-mini": "^0.0.2",
  33.     "postcss-import": "^11.1.0",
  34.     "postcss-preset-env": "^5.3.0",
  35.     "postcss-px-to-viewport": "^0.0.3",
  36.     "postcss-url": "^7.3.2",
  37.     "postcss-viewport-units": "^0.1.4",
  38.     "postcss-write-svg": "^3.0.1",
  39.     "poststylus": "^1.0.0",
  40.     "rimraf": "^2.6.0",
  41.     "stylus": "^0.54.5",
  42.     "stylus-loader": "^3.0.2",
  43.     "ts-jest": "^23.0.0",
  44.     "tslint": "^5.11.0",
  45.     "tslint-config-standard": "^7.1.0",
  46.     "typescript": "^3.0.0",
  47.     "vue": "^2.5.17",
  48.     "vue-class-component": "^6.0.0",
  49.     "vue-property-decorator": "^7.0.0",
  50.     "vue-router": "^3.0.1",
  51.     "vue-template-compiler": "^2.5.17",
  52.     "vuex": "^3.1.0"
  53.   },
  54.   "eslintConfig": {
  55.     "root": true,
  56.     "env": {
  57.       "node": true
  58.     },
  59.     "extends": [
  60.       "plugin:vue/essential",
  61.       "eslint:recommended"
  62.     ],
  63.     "parserOptions": {
  64.       "parser": "babel-eslint"
  65.     },
  66.     "rules": {
  67.       "indent_style": "space",
  68.       "indent_size": "2",
  69.       "end_of_line": "lf",
  70.       "insert_final_newline": "true",
  71.       "trim_trailing_whitespace": "true"
  72.     }
  73.   },
  74.   "browserslist": [
  75.     "> 1%",
  76.     "last 2 versions",
  77.     "Android >= 4.4",
  78.     "iOS >= 9"
  79.   ]
  80. }

4、入口文件

src/rockh5.ts

  1. import { Btn, BtnGroup } from './packages/Btn'
  3. /**
  4.  * Utils 工具方法
  5.  */
  6. import {
  7.   transDateStr, formatDate,
  8.   outclick,
  9.   clone, mod, sleep, getNow, pad,
  10.   decode, encode, qsParse, qsStringify, escapeHtml, escapeJs,
  11.   throttle, debounce,
  12.   px2vw, realPx, targetPx,
  13.   isAndroid, isiOS, isIPX
  14. } from './packages/Utils'
  17. export {
  18.   Btn, BtnGroup,
  19.   transDateStr, formatDate,
  20.   outclick,
  21.   clone, mod, sleep, getNow, pad,
  22.   decode, encode, qsParse, qsStringify, escapeHtml, escapeJs,
  23.   throttle, debounce,
  24.   px2vw, realPx, targetPx,
  25.   isAndroid, isiOS, isIPX
  26. }

5、ts类型定义文件

src/typings/json.d.ts

  1. declare module '*.json' {
  2.   const value: any
  3.   export default value
  4. }

src/typings/shims-tsx.d.ts

  1. import Vue, { VNode } from 'vue'
  3. declare global {
  4.   namespace JSX {
  5.     // tslint:disable no-empty-interface
  6.     interface Element extends VNode {}
  7.     // tslint:disable no-empty-interface
  8.     interface ElementClass extends Vue {}
  9.     interface IntrinsicElements {
  10.       [elem: string]: any
  11.     }
  12.   }
  13. }

src/typings/shims-vue.d.ts

  1. declare module '*.vue' {
  2.   import Vue from 'vue'
  3.   export default Vue
  4. }

src/typings/vue-options.d.ts

  1. import Vue from 'vue'
  3. declare module 'vue/types/options' {
  4.   interface ComponentOptions<V extends Vue> {
  5.     componentName?: string
  6.   }
  7. }

src/typings/vue-types.d.ts

  1. import Vue from 'vue'
  3. interface Loading {
  4.   open: Function,
  5.   close: Function
  6. }
  8. declare module 'vue/types/vue' {
  9.   interface Vue {
  10.     $loading: Loading,
  11.     $toast: Function,
  12.     $dialog: Function,
  13.     $alert: Function,
  14.     $confirm: Function
  15.   }
  16.   interface VueConstructor {
  17.     install: (vue: typeof Vue) => void
  18.   }
  19. }

6、包组件内容

按钮组件为例

src/packages/Btn/index.ts

  2. import Btn from './src/btn.vue'
  3. import BtnGroup from './src/btnGroup.vue'
  4. Btn.install = function (Vue) {
  5.   Vue.component(Btn.name, Btn)
  6. }
  7. BtnGroup.install = function (Vue) {
  8.   Vue.component(BtnGroup.name, BtnGroup)
  9. }
  10. export { Btn, BtnGroup }

src/packages/Btn/src/btn.vue

  1. <template>
  2.   <button
  3.     :disabled="disabled"
  4.     :class="computedCls"
  5.     :style="computedStyle"
  6.     :type="actionType"
  7.     @click="onClick"
  8.   >
  9.     <span><slot></slot></span>
  10.   </button>
  11. </template>
  13. <script lang="ts">
  14. import Vue from 'vue';
  15. import { BtnStyle } from './interface';
  17. const ACTION_MAP = ['button', 'submit', 'reset'];
  18. const TYPE_MAP = ['primary', 'danger', 'warning', 'hollow', 'disabled'];
  19. const SIZE_MAP = ['mini', 'small', 'large'];
  20. const SHAPE_MAP = ['round', 'circle', 'square'];
  22. export default Vue.extend({
  23.   name: 'TnBtn',
  25.   props: {
  26.     disabled: Boolean,
  27.     actionType: {
  28.       validator(value) {
  29.         return ACTION_MAP.indexOf(value) > -1;
  30.       },
  31.       default: 'button',
  32.     },
  33.     type: {
  34.       validator(value) {
  35.         return TYPE_MAP.indexOf(value) > -1;
  36.       },
  37.       default: 'primary',
  38.     },
  39.     size: {
  40.       validator(value) {
  41.         return SIZE_MAP.indexOf(value) > -1;
  42.       },
  43.       default: 'large',
  44.     },
  45.     shape: {
  46.       validator(value) {
  47.         return SHAPE_MAP.indexOf(value) > -1;
  48.       },
  49.       default: 'round',
  50.     },
  51.     bgColor: {
  52.       type: String,
  53.     },
  54.     color: {
  55.       type: String,
  56.     },
  57.   },
  59.   computed: {
  60.     computedCls(): string[] {
  61.       const ret = [
  62.         'tn-btn',
  63.         `tn-btn--${this.size}`,
  64.         `tn-btn--${this.type}`,
  65.         `tn-btn--${this.shape}`,
  66.       ];
  67.       if (this.disabled) {
  68.         ret.push('tn-btn--disabled');
  69.       }
  70.       return ret;
  71.     },
  72.     computedStyle(): BtnStyle {
  73.       return {
  74.         backgroundColor: this.bgColor,
  75.         color: this.color,
  76.       };
  77.     },
  78.   },
  80.   methods: {
  81.     onClick(e) {
  82.       this.$emit('click', e);
  83.     },
  84.   },
  85. });
  86. </script>
  88. <style lang="stylus">
  89. @import '../../../style/btn.styl'
  90. </style>

src/packages/Btn/src/btnGroup.vue

  1. <template>
  2.   <div class="tn-btn-group">
  3.     <slot></slot>
  4.   </div>
  5. </template>
  7. <script lang="ts">
  8. import Vue from 'vue'
  10. export default Vue.extend({
  11.   name: 'TnBtnGroup',
  12. })
  13. </script>
  15. <style lang="stylus">
  16.   @import '../../../style/btn.styl'
  17. </style>

src/package/Btn/src/interface.ts

  1. export interface BtnStyle {
  2.   backgroundColor: string,
  3.   color: string
  4. }

Utils

src/packages/Utils/index.ts

  1. export { transDateStr, formatDate } from './date'
  2. export { outclick } from './dom'
  3. export { clone, mod, sleep, getNow, pad } from './other'
  4. export { decode, encode, qsParse, qsStringify, escapeHtml, escapeJs } from './security'
  5. export { throttle, debounce } from './throttle'
  6. export { px2vw, realPx, targetPx } from './transform'
  7. export { isAndroid, isiOS, isIPX } from './ua'

下面几个文件合到了一起

  1. // date.ts
  2. // 转化时间字符串，解决兼容性 bug
  3. export function transDateStr (time: string) {
  4.   return time.replace(/-/g, '/') // iOS 兼容
  5. }
  7. // 格式化时间
  8. export function formatDate (time: string | number | Date, fmt: string = 'YYYY-MM-DD hh:mm:ss') {
  9.   if (typeof time === 'string') {
  10.     time = transDateStr(time)
  11.   }
  12.   let d = new Date(time)
  13.   if (!fmt) return time
  14.   let obj = {
  15.     'M+': d.getMonth() + 1,
  16.     'D+': d.getDate(),
  17.     'h+': d.getHours(),
  18.     'm+': d.getMinutes(),
  19.     's+': d.getSeconds(),
  20.     'q+': Math.floor((d.getMonth() + 3) / 3),
  21.     'S': d.getMilliseconds()
  22.   }
  23.   if (/(Y+)/.test(fmt)) {
  24.     fmt = fmt.replace(RegExp.$1, (d.getFullYear() + '').substr(4 - RegExp.$1.length))
  25.   }
  26.   for (let key in obj) {
  27.     if (new RegExp('(' + key + ')').test(fmt)) {
  28.       fmt = fmt.replace(
  29.         RegExp.$1, (RegExp.$1.length === 1)
  30.           ? (obj[key])
  31.           : (('00' + obj[key]).substr(('' + obj[key]).length)))
  32.     }
  33.   }
  34.   return fmt
  35. }
  36. // dom.ts
  37. const $html: any = document.documentElement
  39. export function outclick (elIds: string, callback) {
  40.   'touchstart,click'.split(',').forEach(type => {
  41.     $html.addEventListener(type, (e) => {
  42.       const $els: any = Array.from(document.querySelectorAll(elIds))
  43.       if (!$els.length) return
  44.       let $target = e.target
  46.       while ($target) {
  47.         if ($els.includes($target)) return
  48.         $target = $target['parentNode']
  49.       }
  50.       callback(e)
  51.     }, false)
  52.   })
  53. }
  55. // 获取 rect
  56. export function getRect (el) {
  57.   if (typeof el === 'string') {
  58.     el = document.querySelector(el)
  59.   }
  60.   if (el) {
  61.     return el.getBoundingClientRect()
  62.   }
  63.   return {}
  64. }
  65. // other.ts
  66. export const clone = d => JSON.parse(JSON.stringify(d))
  68. // 将一维数组按长度 m 分割成二维数组，最后一组不足 m，不传 fill 默认不补
  69. export const mod = (arr, m, fill): any[] => {
  70.   arr = arr || []
  71.   m < 0 && (m = 0)
  72.   m = m || 3
  73.   let ret: any[] = []
  74.   for (let i = 0; i < arr.length; i += m) {
  75.     let row: any[] = []
  76.     for (let j = 0; j < m; ++j) {
  77.       let col = arr[i + j]
  78.       if (fill === undefined) {
  79.         col && row.push(col)
  80.       } else {
  81.         row.push(col || fill)
  82.       }
  83.     }
  84.     ret.push(row)
  85.   }
  86.   return ret
  87. }
  89. // setTimeout 语法糖
  90. export function sleep (delay: number): Promise<void> {
  91.   return new Promise(resolve => {
  92.     setTimeout(resolve, delay)
  93.   })
  94. }
  96. // 获取当前时间，为将来扩展为从服务器取时间
  97. export async function getNow () {
  98.   return Date.now()
  99. }
  101. // 补0
  102. export const pad = (num: any, n: number = 2) => {
  103.   num = num || ''
  104.   let len = num.toString().length
  105.   while (len < n) {
  106.     num = `0${num}`
  107.     len++
  108.   }
  109.   return num
  110. }
  111. // security.ts
  112. /**
  113.  * 解析字符串
  114.  */
  115. export function decode (s) {
  116.   try {
  117.     s = decodeURIComponent(s)
  118.   } catch (e) {}
  119.   return s
  120. }
  122. export const encode = encodeURIComponent
  124. /**
  125.  * 解析 query
  126.  */
  127. let cache = {}
  128. export function qsParse (query = location.search): any {
  129.   if (cache[query]) return cache[query]
  131.   let params = {}
  132.   query = query.replace(/^\?/, '')
  133.   const queryArr = query.split('&')
  134.   const len = queryArr.length
  135.   for (let i = 0; i < len; i++) {
  136.     let [k, v] = queryArr[i].split('=')
  137.     k && (params[decode(k)] = decode(v || ''))
  138.   }
  139.   cache[query] = params
  140.   return params
  141. }
  143. /**
  144.  * object 反序列化成 string
  145.  */
  146. export function qsStringify (o): string {
  147.   let s: string[] = []
  148.   for (let i in o) {
  149.     s.push(`${i}=${encode(o[i])}`)
  150.   }
  151.   return s.join('&')
  152. }
  154. /**
  155.  * 安全
  156.  */
  158. export function escapeHtml (s) {
  159.   return s.replace(/&/g, '&amp;')
  160.           .replace(/'/g, '&#39;')
  161.           .replace(/"/g, '&quot;')
  162.           .replace(/</g, '&lt;')
  163.           .replace(/>/g, '&gt;')
  164.           .replace(/\//g, '&#x2f;')
  165. }
  167. export function escapeJs (s) {
  168.   return String(s)
  169.           .replace(/\\/g, '\\\\')
  170.           .replace(/'/g, '\\\'')
  171.           .replace(/"/g, '\\"')
  172.           .replace(/`/g, '\\`')
  173.           .replace(/</g, '\\74')
  174.           .replace(/>/g, '\\76')
  175.           .replace(/\//g, '\\/')
  176.           .replace(/\n/g, '\\n')
  177.           .replace(/\r/g, '\\r')
  178.           .replace(/\t/g, '\\t')
  179.           .replace(/\f/g, '\\f')
  180.           .replace(/\v/g, '\\v')
  181.           .replace(/\b/g, '\\b')
  182.           .replace(/\0/g, '\\0')
  183. }
  184. // throttle.ts
  186. // 节流函数，指定时间执行一次
  187. export type Procedure = (...args: any[]) => void
  188. export type Options = {
  189.   leading?: Boolean,
  190.   trailing?: Boolean
  191. }
  193. // 节流函数 制定间隔执行
  194. export function throttle<F extends Procedure> (
  195.   fn: F,
  196.   wait: number = 100,
  197.   options: Options = {}
  198. ) {
  199.   let timeout
  200.   let context
  201.   let args
  202.   let result
  203.   let previous: number = 0
  205.   const later = function () {
  206.     previous = options.leading === false ? 0 : Date.now()
  207.     timeout = null
  208.     result = fn.apply(context, args)
  209.     if (!timeout) context = args = null
  210.   }
  211.   const throttled: any = function (this: any) {
  212.     const now = Date.now()
  213.     if (!previous && options.leading === false) previous = now
  214.     const remaining = wait - (now - previous)
  215.     context = this
  216.     args = arguments
  217.     if (remaining <= 0 || remaining > wait) {
  218.       if (timeout) {
  219.         clearTimeout(timeout)
  220.         timeout = null
  221.       }
  222.       previous = now
  223.       result = fn.apply(context, args)
  224.       if (!timeout) context = args = null
  225.     } else if (!timeout && options.trailing !== false) {
  226.       timeout = setTimeout(later, remaining)
  227.     }
  228.     return result
  229.   }
  231.   throttled.cancel = function () {
  232.     clearTimeout(timeout)
  233.     previous = 0
  234.     timeout = context = args = null
  235.   }
  237.   return throttled
  238. }
  240. // 防抖函数，到达指定时间间隔执行
  241. export function debounce<F extends Procedure>(
  242.   func: F,
  243.   waitMilliseconds = 50,
  244.   isImmediate: boolean = false
  245. ): F {
  246.   let timeoutId: number | undefined | any
  248.   return function(this: any, ...args: any[]) {
  249.     const context = this
  251.     const doLater = function() {
  252.       timeoutId = undefined
  253.       if (!isImmediate) {
  254.         func.apply(context, args)
  255.       }
  256.     }
  258.     const shouldCallNow = isImmediate && timeoutId === undefined
  260.     if (timeoutId !== undefined) {
  261.       clearTimeout(timeoutId)
  262.     }
  264.     timeoutId = setTimeout(doLater, waitMilliseconds)
  266.     if (shouldCallNow) {
  267.       func.apply(context, args)
  268.     }
  269.   } as any
  270. }
  272. // transform.ts
  273. // 将 px 转化为 vw
  274. export const px2vw = (pixel, viewportWidth = 375, unitPrecision = 3, minPixelValue = 1): string => {
  275.   if (pixel <= minPixelValue) return pixel
  276.   return (pixel * 100 / viewportWidth).toFixed(unitPrecision) + 'vw'
  277. }
  279. // 转化为实际 px
  280. export const realPx = (pixel, viewportWidth = 375, unitPrecision = 3): number => {
  281.   const screenWidth = window.screen.width
  282.   return +((pixel * screenWidth / viewportWidth).toFixed(unitPrecision))
  283. }
  285. // 转化为目标 px
  286. export const targetPx = (pixel, viewportWidth = 375, unitPrecision = 3): number => {
  287.   let screenWidth = window.screen.width
  288.   return +((pixel * viewportWidth / screenWidth).toFixed(unitPrecision))
  289. }
  292. // ua.ts
  293. export function isAndroid () {
  294.   const u = navigator.userAgent
  295.   return u.indexOf('Android') > -1 || u.indexOf('Adr') > -1
  296. }
  298. export function isiOS () {
  299.   const u = navigator.userAgent
  300.   return !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
  301. }
  303. export function isIPX () {
  304.   let screen = window.screen
  305.   return isiOS() && screen.width === 375 && screen.height === 812
  306. }

7、样式文件

src/style/_base.styl

  1. @import './_var.styl'
  2. @import './_mixin.styl'
  3. @import './_transition.styl'
  5. // 使用 px 转 vm 功能的副作用    问题：content会引起部分浏览器下，图片不会显示 所以要加该样式
  6. img{
  7.   content: initial !important;
  8. }
  10. // 清除浮动
  11. .u-clearfix
  12.   clearfix()
  14. // 隐藏滚动条
  15. .u-hide-scroll
  16.   hide-scrollbar()
  18. // iconfont
  19. .u-iconfont
  20.   iconfont()
  22. // 1px 边框
  23. .u-border-1px
  24.   border-1px(all)
  25. .u-border-bottom-1px
  26.   border-1px(bottom)
  27. .u-border-top-1px
  28.   border-1px(top)
  29. .u-border-left-1px
  30.   border-1px(left)
  31. .u-border-right-1px
  32.   border-1px(right)
  34. // 超过省略号
  35. .u-ellipsis
  36.   ellipsis()
  37. .u-ellipsis-2
  38.   ellipsis(2)
  39. .u-ellipsis-3
  40.   ellipsis(3)

src/style/_mixin.styl

  1. @import './_var.styl'
  3. // 转化为 vw
  4. r(px)
  5.   round(px / 375 * 100, 6) vw
  7. line-1px($dir = bottom, $color = #EBEBEB, $radius = 0, $style = solid)
  8.   content " "
  9.   pointer-events none
  10.   box-sizing border-box
  11.   position absolute
  12.   transform-origin 0 0
  13.   if $dir is bottom
  14.     border-bottom 1px $style $color
  15.     bottom 0
  16.     left 0
  17.     width 100%
  18.     transform-origin: 0 bottom
  19.     @media (min-resolution: 2dppx)
  20.       width 200%
  21.       transform scale(0.5)
  22.     @media (min-resolution: 3dppx)
  23.       width 300%
  24.       transform scale(0.333)
  25.   else if $dir is top
  26.     border-top 1px $style $color
  27.     top 0
  28.     left 0
  29.     width 100%
  30.     transform-origin: 0 top
  31.     @media (min-resolution: 2dppx)
  32.       width 200%
  33.       transform scale(0.5)
  34.     @media (min-resolution: 3dppx)
  35.       width 300%
  36.       transform scale(0.333)
  37.   else if $dir is left
  38.     border-left 1px $style $color
  39.     top 0
  40.     left 0
  41.     height 100%
  42.     transform-origin: left 0
  43.     @media (min-resolution: 2dppx)
  44.       height 200%
  45.       transform scale(0.5)
  46.     @media (min-resolution: 3dppx)
  47.       height 300%
  48.       transform scale(0.333)
  49.   else if $dir is right
  50.     border-right 1px $style $color
  51.     top 0
  52.     right 0
  53.     height 100%
  54.     transform-origin: right 0
  55.     @media (min-resolution: 2dppx)
  56.       height 200%
  57.       transform scale(0.5)
  58.     @media (min-resolution: 3dppx)
  59.       height 300%
  60.       transform scale(0.333)
  61.   else
  62.     left 0
  63.     top 0
  64.     border 1px $style $color
  65.     border-radius $radius
  66.     width 100%
  67.     height 100%
  68.     @media (min-resolution: 2dppx)
  69.       width 200%
  70.       height 200%
  71.       border-radius $radius * 2
  72.       transform scale(0.5)
  73.     @media (min-resolution: 3dppx)
  74.       width 300%
  75.       height 300%
  76.       border-radius $radius * 3
  77.       transform scale(0.333)
  79. border-1px($dir = bottom, $color = #EBEBEB, $radius = 0, $style = solid)
  80.   position relative
  81.   if $dir is all
  82.     &::before
  83.       line-1px($dir, $color, $radius, $style)
  84.   else
  85.      &::after
  86.       line-1px($dir, $color, $radius, $style)
  88. // 清除浮动
  89. clearfix()
  90.   &::after
  91.     content " "
  92.     display table
  93.     clear both
  95. // 隐藏滚动条
  96. hide-scrollbar()
  97.   &::-webkit-scrollbar
  98.     width 0
  99.     height 0
  101. // iconfont
  102. iconfont()
  103.   width 1em
  104.   height 1em
  105.   vertical-align -0.15em
  106.   fill currentColor
  107.   overflow hidden
  109. // 超出省略号
  110. ellipsis(line = 1)
  111.   if line is 1
  112.     overflow hidden
  113.     text-overflow ellipsis
  114.     white-space nowrap
  115.   else
  116.     overflow hidden
  117.     display -webkit-box
  118.     -webkit-box-orient vertical
  119.     -webkit-line-clamp $line
  121. // 点击高亮
  122. tap-color($color, $percent = 10%)
  123.   background-color: $color
  124.   &:active
  125.     background-color: darken($color, $percent)

src/style/_transition.styl

  1. // fade 效果
  2. @keyframes fade-in
  3.   0%
  4.     opacity 0
  5.   100%
  6.     opacity 1
  7. @keyframes fade-out
  8.   0%
  9.     opacity 1
  10.   100%
  11.     opacity 0
  12. .fade-enter-active
  13.   animation fade-in .3s
  14. .fade-leave-active
  15.   animation fade-out .3s
  17. // slide 效果
  18. @keyframes slide-up-in
  19.   0%
  20.     transform translate3d(0, 100%, 0)
  21.   100%
  22.     transform translate3d(0, 0, 0)
  23. @keyframes slide-up-out
  24.   0%
  25.     transform translate3d(0, 0, 0)
  26.   100%
  27.     transform translate3d(0, 100%, 0)
  28. .slide-up-enter-active
  29.   animation slide-up-in .3s
  30. .slide-up-leave-active
  31.   animation slide-up-out .3s

src/style/var.styl

  1. // 全局变量
  2. @import './var/color.styl'
  3. @import './var/size.styl'
  4. // @import './var/env.styl'
  5. @import './theme/default.styl'

src/style/btn.styl

  1. @import './_var.styl'
  2. @import './_mixin.styl'
  4. .tn-btn-group
  5.   padding $btn-group-padding
  6.   & > .tn-btn
  7.     margin-top $btn-marginTop
  8.     margin-left $btn-marginLeft
  9.     &:first-child
  10.       margin-top 0
  11.       margin-left 0
  12. .tn-btn
  13.   text-align center
  14.   position relative
  15.   margin 0
  16.   padding 0
  17.   border none
  18.   pointer-events auto
  19.   user-select none
  20.   outline none
  21.   display inline-block
  22.   box-sizing content-box
  23.   white-space nowrap
  24.   font-size: $btn-font
  25.   border-radius $btn-radius
  26.   color $btn-color-default
  27.   &--large
  28.     display block
  29.     width 100%
  30.     font-weight bold
  31.     height $btn-height-large
  32.     font-size $btn-font-large
  33.   &--small
  34.     min-width $btn-width-small
  35.     height $btn-height-small
  36.     padding $btn-padding
  37.   &--mini
  38.     min-width $btn-width-mini
  39.     height $btn-height-mini
  40.     font-size $btn-font-mini
  41.   &--primary
  42.     background-color $btn-bg-primary
  43.     tap-color($btn-bg-primary, 10%)
  44.   &--warning
  45.     background-color $btn-bg-warning
  46.     tap-color($btn-bg-warning, 10%)
  47.   &--danger
  48.     background-color $btn-bg-danger
  49.     tap-color($btn-bg-danger, 10%)
  50.   &--hollow
  51.     background-color $btn-bg-hollow
  52.     color $btn-color-hollow
  53.     tap-color($btn-bg-hollow, 3%)
  54.     border-1px(all, $btn-border-hollow, $btn-radius)
  55.   &--circle
  56.     border-radius $btn-radius-circle
  57.   &--square
  58.     border-radius 0
  59.   &--disabled
  60.     background $btn-bg-disabled
  61.     color $btn-color-disabled

src/style/theme/default.styl

  1. // Theme Variables
  3. //======== 【Btn】 ========
  4. $btn-group-padding = 12px 9px
  5. $btn-bg-primary = #0082FF
  6. $btn-bg-warning = #FFB400
  7. $btn-bg-danger = #EF4F4F
  8. $btn-bg-hollow = #FFF
  9. $btn-bg-disabled = #CCC
  10. $btn-color-default = #FFF
  11. $btn-color-hollow = #626B77
  12. $btn-color-disabled = #F0F0F0
  13. $btn-border-hollow = #EBEBEB
  14. $btn-height-large = 40px
  15. $btn-width-small = 90px
  16. $btn-height-small = 30px
  17. $btn-width-mini = 40px
  18. $btn-height-mini = 22px
  19. $btn-font = 15px
  20. $btn-font-large = 17px
  21. $btn-font-mini = 13px
  22. $btn-radius = 4px
  23. $btn-radius-circle = 100px
  24. $btn-padding = 0 5px
  25. $btn-marginTop = 12px
  26. $btn-marginLeft = 9px
  28. // ======== 【DateTime】 ========
  29. $datetime-content-height = 280px
  30. $datetime-item-height = 40px
  31. $datetime-item-font = 17px
  32. $datetime-item-font-active = 22px
  34. // ======== 【SelectPicker】 ========
  35. $selectpicker-content-height = 200px
  36. $selectpicker-item-height = 40px
  37. $selectpicker-item-font = 17px
  38. $selectpicker-item-font-active = 24px

src/style/var/color.styl

  1. // 主题颜色
  2. $color-blue = #0082FF
  3. $color-green = #3BBD5E
  4. $color-black = #282828
  5. $color-orange = #FFA43D
  6. $color-red = #EA4335
  8. // 辅助颜色
  9. $color-fail = #440011
  10. // $color-success:
  11. // $color-warning:
  12. // $color-info:
  14. // 文本颜色
  15. $color-main-text = #333
  16. $color-sub-text = #626B77
  17. $color-desc-text = #999FAA
  19. // 线条颜色
  20. $color-border = #EBEBEB
  22. // 背景颜色
  23. $color-bg-page = #F6F6F9

src/style/var/size.styl

  1. // 文本尺寸
  2. $size-main-text = 17px
  3. $size-sub-text = 15px
  4. $size-desc-text = 13px

8、开发验证example

src/example/index.html

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
  6.   <meta name="spm-id" content="{{$zebra.spma}}.{{$zebra.spmb}}">
  7.   <meta name="aplus-terminal" content="1"/>
  8.   <title>vue h5 组件</title>
  9.   <link rel="stylesheet" href="//g.alicdn.com/fish/polyfill/0.0.2/reset.css">
  10. </head>
  11. <body>
  12.   <div id="app"></div>
  13.   <script src="//g.alicdn.com/fish/console/index.js"></script>
  14.   <script src="//g.alicdn.com/fish/polyfill/0.0.1/core.min.js"></script>
  15. </html>

src/example/main.ts

  1. import Vue from 'vue'
  2. import Example from './Example.vue'
  3. import router from './router'
  4. import store from './store'
  6. const app = new Vue({
  7.   el: '#app',
  8.   router,
  9.   store,
  10.   render: h => h(Example)
  11. })

src/example/router.ts

  1. import Vue from 'vue'
  2. import Router from 'vue-router'
  3. import Home from './pages/Home.vue'
  5. /**
  6.  * Layout 布局组件
  7.  */
  8. import Btn from './pages/Btn.vue'
  10. Vue.use(Router)
  12. export const routes = [
  13.   // Tunas
  14.   {
  15.     path: '/',
  16.     component: Home,
  17.     meta: {
  18.       title: 'Home'
  19.     }
  20.   },
  21.   // 布局
  22.   {
  23.     path: '/Btn',
  24.     component: Btn,
  25.     meta: {
  26.       title: 'Btn',
  27.       group: 'Layout',
  28.     }
  29.   }
  30. ]
  32. export default new Router({
  33.   mode: 'hash',
  34.   routes
  35. })

src/example/store.ts

  1. import Vue from 'vue'
  2. import Vuex from 'vuex'
  4. Vue.use(Vuex)
  6. /* eslint-disable no-new */
  7. export default new Vuex.Store({
  8.   state: {
  9.     status: 100, // 设备状态 0 - 未激活， 1 - 在线， 3 - 离线， 8 - 禁用,
  10.     check: false
  11.   },
  12.   mutations: { // 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation, 只能同步
  13.     /**
  14.      * 更新状态树中的属性集合
  15.      * @param {*} attr 要更新的属性集合
  16.      */
  17.     updateState(state, data) {
  18.       data.find((key) => {
  19.         state[key[0]] = key[1]
  20.       });
  21.     }
  22.   },
  23. })

src/example/Example.vue

  1. <template>
  2.   <div class="example" :class="{'example__menu--show': showMenu}">
  3.     <div class="example__topbar">
  4.       <button class="example__topbar-icon" @click="showMenu=true"></button>
  5.     </div>
  7.     <div class="example__menu">
  8.       <div class="example__search">
  9.         <input type="text" class="example__search-input" v-model="query">
  10.       </div>
  11.       <ul class="example__menulist">
  12.         <li v-for="(o, i) of list" :key="i">
  13.           <h2>{{o.title}}</h2>
  14.           <ul>
  15.             <li v-for="(p, j) of o.children" :key="j">
  16.               <router-link :to="p.path" v-html="highlight(p.meta.title)" @click.native="showMenu = false"></router-link>
  17.             </li>
  18.           </ul>
  19.         </li>
  20.       </ul>
  21.     </div>
  23.     <div class="example__view" :class="{'example__view--scroll': $route.meta.scroll}" :style="{padding: 0}">
  24.       <router-view></router-view>
  25.     </div>
  26.   </div>
  27. </template>
  29. <script lang="ts">
  30. import Vue from 'vue'
  31. import { walk } from 'jsonuri'
  32. import { escapeHtml, outclick } from '../packages/Utils'
  33. import router, { routes } from './router'
  35. function formatRoutes (routes) {
  36.   let ret: any[] = []
  37.   const keys: string[] = routes.map(r => r.meta.group || 'RockH5')
  38.   const groups: string[] = keys.filter((v, i, _) => _.indexOf(v) === i)
  39.   groups.forEach(g => {
  40.     let children: any[] = []
  41.     if (g === 'RockH5') {
  42.       children = routes.filter(r => !r.meta.group)
  43.     } else {
  44.       children = routes.filter(r => r.meta.group === g)
  45.     }
  46.     ret.push({
  47.       title: g,
  48.       children
  49.     })
  50.   })
  51.   return ret
  52. }
  54. export default Vue.extend({
  55.   data () {
  56.     return {
  57.       query: '',
  58.       showMenu: false,
  59.       list: formatRoutes(routes)
  60.     }
  61.   },
  62.   computed: {
  63.     bgColor(): any {
  64.       return {
  65.         backgroundColor: this.$route.meta.bgColor || '#fff'
  66.       }
  67.     }
  68.   },
  69.   created () {
  70.     outclick('.example__topbar-icon, .example__menu', () => {
  71.       this.showMenu = false
  72.     })
  73.   },
  74.   watch: {
  75.     query (qs) {
  76.       let list = JSON.parse(JSON.stringify(this.list))
  77.       walk(list, () => {
  79.       })
  80.       // this.list = this.list.filter(p => p.children.filter(p => p.title === qs).length > 0)
  81.     }
  82.   },
  83.   methods: {
  84.     highlight (str) {
  85.       let query = this.query.trim()
  86.       if (!query) return str
  87.       let reg = new RegExp(`(${query})`, 'ig')
  88.       let ret = str.replace(reg, ($0, $1) => `<em class="example--highlight">${escapeHtml($1)}</em>`)
  89.       return ret
  90.     }
  91.   }
  92. })
  93. </script>
  95. <style lang="stylus">
  96. .example {
  97.   max-width 100vw
  98.   overflow hidden
  99.   a {
  100.     text-decoration none
  101.     color #34495e
  102.     &.router-link-exact-active {
  103.       color #008EE9
  104.     }
  105.   }
  106.   ul, li {
  107.     list-style none
  108.   }
  109.   &--highlight {
  110.     background yellow
  111.   }
  112.   &__topbar {
  113.     height 50px
  114.     display flex
  115.     align-items center
  116.   }
  117.   &__topbar-icon {
  118.     border none
  119.     outline none
  120.     margin-left 10px
  121.     background url('//gw.alicdn.com/tfs/TB1g0gVrntYBeNjy1XdXXXXyVXa-48-48.png') no-repeat
  122.     background-size cover
  123.     width 24px
  124.     height 24px
  125.   }
  127.   &__menu {
  128.     transition all 0.2s
  129.     transform translate3d(-100%, 0, 0)
  130.     padding-top 30px
  131.     box-shadow 0 0 10px rgba(0,0,0,0.2)
  132.     box-sizing border-box
  133.     height 100vh
  134.     width 50%
  135.     background #f9f9f9
  136.     position fixed
  137.     top 0
  138.     left 0
  139.     overflow auto
  140.   }
  141.   &__menulist {
  142.     padding-left 1.5em
  143.     margin-top 15px
  144.     li {
  145.       margin-top 0.5em
  146.     }
  147.     ul {
  148.       padding-left 1.5em
  149.     }
  150.   }
  151.   &__search {
  152.     height 30px
  153.     line-height 30px
  154.     box-sizing border-box
  155.     padding 0 15px 0 30px
  156.     border 1px solid #e3e3e3
  157.     color #2c3e50
  158.     outline none
  159.     border-radius 15px
  160.     margin 0 10px
  161.     transition border-color 0.2s ease
  162.     background: #fff url('//gw.alicdn.com/tfs/TB1hn5OtbSYBuNjSspiXXXNzpXa-96-96.png') 8px 5px no-repeat
  163.     background-size: 20px
  164.     vertical-align: middle !important
  165.   }
  166.   &__search-input {
  167.     width 100%
  168.     height 100%
  169.     outline none
  170.     background none
  171.     border none
  172.   }
  174.   &__view {
  175.     box-sizing border-box
  176.     transition all 0.2s
  177.     transform translate3d(0, 0, 0)
  178.     background #fff
  179.     min-height calc(100vh - 50px)
  180.     overflow-x hidden
  181.     padding 0 15px
  182.     &--full {
  183.       margin-left 0
  184.     }
  185.     &--scroll {
  186.       // height 120vh
  187.     }
  188.   }
  190.   // 状态
  191.   &__menu--show {
  192.     .example__menu {
  193.       transform translate3d(0, 0, 0)
  194.     }
  195.     .example__view {
  196.       padding: 0 @important;
  197.       transform translate3d(50%, 0, 0)
  198.     }
  199.   }
  200. }
  201. </style>

src/example/pages/Btn.vue

  1. <template>
  2.   <div class="btn">
  3.     <btn-group>
  4.       <btn size="mini">mini</btn>
  5.       <btn size="mini" type="warning">mini</btn>
  6.       <btn size="mini" type="danger">mini</btn>
  7.       <btn size="mini" type="hollow">mini</btn>
  8.     </btn-group>
  9.     <btn-group>
  10.       <btn size="small">small</btn>
  11.       <btn size="small" type="warning">small</btn>
  12.       <btn size="small" type="danger">small</btn>
  13.     </btn-group>
  14.     <btn-group>
  15.       <btn size="small" type="hollow">small</btn>
  16.     </btn-group>
  17.     <btn shape="circle">shape="circle"</btn>
  18.     <btn shape="square" type="warning">shape="square"</btn>
  19.     <btn shape="round" type="danger">shape="round"</btn>
  20.     <btn type="hollow">shape="round"</btn>
  21.     <btn disabled>disabled</btn>
  22.   </div>
  23. </template>
  25. <script lang="ts">
  26. import Vue from 'vue'
  27. import { BtnGroup, Btn } from '../../rockh5'
  29. export default Vue.extend({
  30.   components: {
  31.     BtnGroup, Btn
  32.   }
  33. })
  34. </script>
  36. <style lang="stylus" scoped>
  37. </style>

src/example/pages/Home.vue

  1. <template>
  2.   <div class="wrap">Hello, VueUI!</div>
  3. </template>
  5. <style lang="stylus" scoped>
  6. .wrap {
  7.   margin-top 250px
  8.   text-align center
  9.   font-size 36px
  10. }
  11. </style>
  12. <script lang="ts">
  13. import Vue from 'vue'
  14. export default Vue.extend({
  15.   created () {
  16.   },
  17.   mounted () {
  18.   }
  19. })
  20. </script>