wocwin的博客

本文介绍了一个移动端悬浮框组件的实现方案，支持拖拽和点击跳转功能。组件封装了可见性、尺寸、文字、层级等参数配置，并通过touch事件实现拖拽功能，包含边界检测防止拖出屏幕。代码使用Vue实现，包含模板、逻辑和样式部分，支持自定义样式和事件回调。组件可灵活配置尺寸、位置和显示内容，适用于需要在移动端添加可拖动悬浮按钮的场景。文章还提供了相关组件库文档链接，便于进一步扩展使用。

本文介绍了TTable组件的实现，这是一个基于Vue的表格组件。组件支持可配置的表头(columns)和数据源(data)，提供max-height固定表头、高度调节(height)等功能。表格支持render函数和插槽(slot)两种自定义内容方式，并内置了行点击事件(rowClick)。源码实现包含表头固定、数据渲染、空状态显示等核心功能，采用sticky定位实现表头固定效果。组件设计简洁，支持响应式布局，适合在Vue项目中快速构建数据表格功能。

Vue2移动端（H5项目）项目封装switch组件支持动态设置开启关闭背景色、值及组件内显示文字描述、禁用、switch 的宽度

Vue2移动端（H5项目）项目封装form表单校验组件（支持required必填、min/max最大最小长度、pattern正则、validator事件校验规则）

解决Vue2移动端（H5）项目，手机打开项目侧滑或者按物理返回键，始终是走this.$router.go(-1)

Vue2移动端（H5项目）项目基于vant封装图片上传组件（支持批量上传、单个上传、回显、删除、预览、最大上传数等功能）

Vue2移动端（H5项目）项目封装车牌选择组件

Vue2 移动端（H5）项目封装弹窗组件

Vue 移动端（H5）项目怎么实现页面缓存（即列表页面进入详情返回后列表页面缓存且还原页面滚动条位置）keep-alive缓存及清除keep-alive缓存

Vue H5项目，怎么引入uni.webview sdk，调用uni postMessage实现手机蓝牙连接打印功能（uniapp）

Vue H5项目，怎么引入uni.webview sdk，调用uni postMessage实现手机扫描功能

Vue项目解决van-calendar 显示白色空白，需滑动一下屏幕，才可正常显示

Vue项目商品购物车前端本地缓存逻辑（适用H5/ipad/PC端）——前端实现购物车删除商品、购物车增减数量，清空购物车功能、新增扫码枪扫码添加到购物车功能

vue H5移动端项目使用高德地图定位/标点并点击导航跳第三方app且实现导航路线——实例

一、在utils下新建fetch.jsimport axios from 'axios'import store from '@/store'import router from '@/router'// 创建axios实例const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, // api的base_url timeout: 50000 // 请求超时时间})//

一、全局引入,先安装，在main.js里进行全局引入就可以了// Vue 2 项目，安装 Vant 2：npm i vant -Smain.jsimport Vue from 'vue';import Vant from 'vant';import 'vant/lib/index.css';Vue.use(Vant);二、按需引入1、 先安装babel插件npm i babel-plugin-import -D2、在 babel.config.js 中配置plugins: [

一、安装vue-clinpm install -g @vue/cli查看版本打开cmd 输入vue -V如图是我的版本，后续以此搭建移动端项目并引入vantUI等二、创建项目1、随意找一个盘打开Powershell,我就在桌面创建输入vue create demo-h52、选择配置项3、选择Manually select features(手动选择功能)4、选择Vue2,回车5、选择路由模式，回车；选择node-sass安装SCSS(选择自己想要使用的 css 预处理器)

一、Vue-Cli4搭建项目1、Vue-cli4创建H5移动端项目2、Vue-cli4 H5移动端项目vw适配3、Vue-cli4 H5移动端项目引入vantUi4、Vue-cli4 H5移动端项目封装axios5、Vue-cli4 H5移动端项目使用Vuex二、移动端项目组件封装1、高德地图定位/标点并点击导航跳第三方app并实现导航路线...