forked from ccsens_fe/tall-mui-3
11 changed files with 141 additions and 13 deletions
@ -1 +1 @@ |
|||
[{"/mnt/c/Users/Administrator/Documents/coding/ccsens/demo/tall-v3.0-demo/src/main.js":"1","/mnt/c/Users/Administrator/Documents/coding/ccsens/demo/tall-v3.0-demo/src/utils/request.js":"2"},{"size":335,"mtime":1624344979998,"results":"3","hashOfConfig":"4"},{"size":1742,"mtime":1624344980012,"results":"5","hashOfConfig":"4"},{"filePath":"6","messages":"7","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"178d5hk",{"filePath":"8","messages":"9","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/mnt/c/Users/Administrator/Documents/coding/ccsens/demo/tall-v3.0-demo/src/main.js",[],"/mnt/c/Users/Administrator/Documents/coding/ccsens/demo/tall-v3.0-demo/src/utils/request.js",[]] |
|||
[{"/mnt/c/Users/Administrator/Documents/coding/ccsens/demo/tall-v3.0-demo/src/main.js":"1"},{"size":485,"mtime":1624427196289,"results":"2","hashOfConfig":"3"},{"filePath":"4","messages":"5","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"178d5hk","/mnt/c/Users/Administrator/Documents/coding/ccsens/demo/tall-v3.0-demo/src/main.js",[]] |
|||
@ -1,19 +1,73 @@ |
|||
# tall-mui-cli |
|||
|
|||
## Project setup |
|||
## 项目运行 |
|||
|
|||
### 安装依赖 |
|||
``` |
|||
yarn |
|||
``` |
|||
|
|||
### 本地环境运行 |
|||
+ h5 |
|||
``` |
|||
yarn dev:h5 |
|||
``` |
|||
|
|||
+ 微信小程序 |
|||
``` |
|||
yarn dev:mp-weixin |
|||
``` |
|||
|
|||
+ app |
|||
``` |
|||
yarn install |
|||
yarn dev:app-plus |
|||
``` |
|||
|
|||
### Compiles and hot-reloads for development |
|||
### 生产环境构建 |
|||
|
|||
+ h5 |
|||
``` |
|||
yarn serve |
|||
yarn build:h5 |
|||
``` |
|||
|
|||
### Compiles and minifies for production |
|||
+ app |
|||
``` |
|||
yarn build |
|||
yarn build:app-plus |
|||
``` |
|||
|
|||
+ 微信小程序 |
|||
``` |
|||
yarn build:mp-weixin |
|||
``` |
|||
|
|||
### Customize configuration |
|||
See [Configuration Reference](https://cli.vuejs.org/config/). |
|||
|
|||
## 代码提交 |
|||
|
|||
+ 项目设置了commit lint, commit信息验证;运行`yarn cz` 命令依次填写commit信息即可 |
|||
+ 以及pre-commit钩子执行eslint代码格式检测, 代码格式不符合规则无法提交 |
|||
|
|||
``` |
|||
yarn cz |
|||
``` |
|||
|
|||
## 技术栈 |
|||
|
|||
### UI及工具库 |
|||
+ uni-app的cli构建版本 |
|||
+ vuex vue官方状态管理库 |
|||
+ tailwindcss 公共样式库(注意这个版本不是最新版本, 最新版本安装后报错) |
|||
+ uview-ui uni-app组件库 |
|||
+ alloyfinger 移动端手势库 |
|||
+ dayjs 时间处理库 |
|||
+ pwa 处理缓存, 构建离线应用 |
|||
|
|||
|
|||
### 构建相关 |
|||
+ sass node-sass |
|||
+ prettier 自动格式化代码 |
|||
+ eslint 代码可是校验 |
|||
+ commitlint git commit信息校验 |
|||
+ husky lint-staged git钩子处理commit校验及eslint代码检测 |
|||
+ vue-cli-plugin-mock mock数据 |
|||
|
|||
@ -0,0 +1,49 @@ |
|||
<template> |
|||
<view class="container flex flex-row items-center justify-center"> |
|||
<image |
|||
class="w-1/2" |
|||
mode="aspectFit" |
|||
src="https://lupic.cdn.bcebos.com/20200412/3026529107_14_800_566.jpg" |
|||
v-finger:pinch="handlePinch" |
|||
v-finger:multipoint-start="handlePinchStart" |
|||
:style="{ transform: `scale(${scale})` }" |
|||
id="image" |
|||
></image> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
initScale: 1, |
|||
scale: 1, |
|||
element: null, |
|||
}; |
|||
}, |
|||
|
|||
mounted() { |
|||
this.element = document.getElementById('image'); |
|||
}, |
|||
|
|||
methods: { |
|||
handlePinchStart() { |
|||
console.log(this.element.style.transform); |
|||
// eslint-disable-next-line no-useless-escape |
|||
const reg = /scale\(([0-9]*[\.]?[0-9]*)\)/gi; |
|||
const scale = this.element.style.transform; |
|||
if (reg.test(scale)) { |
|||
this.initScale = RegExp.$1; |
|||
console.log(this.initScale); |
|||
} |
|||
// this.scale = this.element.scaleX; |
|||
}, |
|||
|
|||
handlePinch(event) { |
|||
console.log(typeof event.zoom, typeof this.initScale, this.initScale); |
|||
this.scale = this.initScale * event.zoom; |
|||
console.log('this.scale:', this.scale); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
Loading…
Reference in new issue