vue移动端弹框组件
this.$refs.toast.showToast('提示文案') 一、npm 安装// 当前最新版本 1.2.0 npm install vue-layer-mobile// 如新版遇到问题可回退旧版本 npm install vue-layer-mobile@1.0.0 二、调整配置：因为这个组件中有woff,ttf,eto,svg类型文件，所以要配置一些loader， //在webpack.config.js中配置如下，首先安装url-loader和file-loader...
2024-01-10
vue配合UI组件
创建项目首先使用脚手架搭出项目基本框架，具体方法可以参考前面的文章。1，执行命令创建项目：vue init webpack-simple vue-bootstrap2，下载相关依赖：npm vue-bootstrap3，启动项目：npm run dev出现这个界面就说明项目创建成功了。引入bootstrap1，使用之前需要先在项目中下载bootstrap，在项目根目录执行命...
2024-01-10
vue移动端图片预览组件
安装：npm install -s w-previewimg 或 yarn add w-previewimg在线预览地址： https://wenyuming.github.io/w-demos/dist/index.html#/previewimgDemo预览时请按f12，在移动端模式下预览由于预览网址带宽比较低，加载图片会比较慢，等图片都加载完才能完整体验，耐心等一下哦。操作说明：左滑右滑切换图片，单击预览图片关闭...
2024-01-10
vue中使用Mint-UI移动端组件库
用官方提供的vue-cli来搭建一个vue项目，在我前面的博文中有介绍，这里假定大家已经构建了自己的vue工程。这里是我的项目结构fraudApps：一、Mint-UI移动端组件的安装安装Mint-UI：npm i mint-ui --save安装完成后package.json中可以看到mint-ui的版本号：二、Mint-UI的使用：使用之前我们需要引入组件，引入组...
2024-01-10
vue移动端 有滑动解锁组件吗？
问题描述：找了好多资料都是pc端的回答：类似的有很多呀, 题主说都是PC, 但其实只要根据移动端样式适配一下, 数据调一下, 方法名改一下就行了第一步：npm install --save vue-monoplasty-slide-verify第二步：main.js配置import Vue from 'vue';import SlideVerify from 'vue-monoplasty-...
2024-02-26
vue组件实现移动端九宫格转盘抽奖
本文实例为大家分享了vue组件实现移动端九宫格转盘抽奖的具体代码，供大家参考，具体内容如下vue-lucky-draw移动端九宫格转盘抽奖vue组件，中奖的奖品数据由接口决定。效果图抽奖因为中奖的结果是后台返回的，所以要考虑转盘的最终停下来的位置必须是在对应后台返回结果的奖品的位置，也就...
2024-01-10
vue组件实现移动端九宫格转盘抽奖
本文实例为大家分享了vue组件实现移动端九宫格转盘抽奖的具体代码，供大家参考，具体内容如下vue-lucky-draw移动端九宫格转盘抽奖vue组件，中奖的奖品数据由接口决定。效果图抽奖因为中奖的结果是后台返回的，所以要考虑转盘的最终停下来的位置必须是在对应后台返回结果的奖品的位置，也就...
2024-01-10
vue 移动端环境配置
1，进入项目src2.，App.vue取出template中<img src="./assets/logo.png">3，进入 App.vue 删除默认图片： <div > <!-- <img src="./assets/logo.png"> --> <router-view/> </div> 删除默认样式，修改通用样式：<style> /* #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-fon...
2024-01-10
移动端vue项目的图片上传插件
有一移动端项目，使用的vant-ui。可是vant自带的Uploader似乎不支持一次选择多张图片上传的功能。于是乎：在https://www.npmjs.com/查找发现找到 vue-upload-component 组件，功能基本都有，评价也不错，目前有1500多个star。因为是国人开发的，所有比较完善的中文文档。完整的例子。使用：1.安装：npm install vu...
2024-01-10解决vue移动端适配问题
1，先看看网上关于移动端适配讲解 再聊移动端页面适配，rem和vw适配方案！基础点：rem相对根节点字体的大小。所以不用px;根字体：字体的大小px;px：你就当成cm(厘米)这样的东西吧；基准：750设计稿；这是方案的基础理论，在这个基础上，我们还要搞明白，到底要干一件什么事情！目标一、手机...
2024-01-10
vue实现移动端H5数字键盘组件使用详解
本文实例为大家分享了vue实现移动端H5数字键盘组件的使用代码，供大家参考，具体内容如下我们平时扫码付款的时候，经常会输入一些数字进行付款，仔细看了下键盘和系统的键盘有点不一样，于是今天买甘蔗的时候扫码付款就想了一下要怎么去实现一个。话不多说，直接上代码。结果如下：代码...
2024-01-10
vue实现移动端H5数字键盘组件使用详解
本文实例为大家分享了vue实现移动端H5数字键盘组件的使用代码，供大家参考，具体内容如下我们平时扫码付款的时候，经常会输入一些数字进行付款，仔细看了下键盘和系统的键盘有点不一样，于是今天买甘蔗的时候扫码付款就想了一下要怎么去实现一个。话不多说，直接上代码。结果如下：代码...
2024-01-10vue.js移动端tab组件的封装实践实例
这是vue.js系列文章第二遍，第一篇讲述的是如何搭建vue.js的开发环境，计划按进度做成一款完整的app，当然前提是时间允许的话。本文用到了stylus语法，至于为什么使用stylus而不去用sass，主要是因为stylus来自于Node.js社区。总之stylus是一款高效的CSS预处理器，具体使用不在本文讨论范围。好了，废话...
2024-01-10
vue实现移动端触屏拖拽功能
vue实现移动端可拖拽浮球，供大家参考，具体内容如下1 首先创建一个div<div class="floatball" id="floatball" @mousedown="down" @touchstart.stop="down" @mousemove="move" @touchmove.stop="move" @mouseup="end" @touchend.stop="end" @click="showRewardDesc" :style="{top:position.y+'px', left:pos...
2024-01-10vue+vux实现移动端文件上传样式
样式使用的是vux的cell组件 如下图的官方demo样子上图的样式需要修改一下，把 保护中 修改成一个图片 并且内嵌一个input type=‘file' 就可以拥有好看的样式的文件上传了<!--引入组件-->import { Cell } from 'vux'<!--官网的组件是这么写的--><group> <cell title="title" value="value"></cell></group>下面我们要改造cell...
2024-01-10基于vue实现移动端圆形旋钮插件效果
最近公司有一个项目的需要做出旋钮的效果，旋钮有十个档，根据手指旋转切换，旋转时接近最近的档会有吸附效果，具体效果如下：html部分代码：<div class="_touch"> <div class="round_box" ref="box" @touchstart="touchStart" @touchmove="touchMove"> <div v-if="able" style="position:absolute;width:100%;height:100%;top:0;left:0;"> <...
2024-01-10
vue移动端判断手指在屏幕滑动方向
vue移动端判断手指在屏幕滑动方向，供大家参考，具体内容如下可以据此实现手指滑屏切换tab的功能，例如京东的订单页，这几个tab切换就可以利用这个实现页面<div @touchstart="handleTouchstart" @touchend="handleTouchend" class="slotWrap" >//屏幕滑动//手指按下屏幕 handleTouchstart(event){ this.star...
2024-01-10
vue移动端判断手指在屏幕滑动方向
vue移动端判断手指在屏幕滑动方向，供大家参考，具体内容如下可以据此实现手指滑屏切换tab的功能，例如京东的订单页，这几个tab切换就可以利用这个实现页面<div @touchstart="handleTouchstart" @touchend="handleTouchend" class="slotWrap" >//屏幕滑动//手指按下屏幕 handleTouchstart(event){ this.star...
2024-01-10vue前端框架—Mint UI详解（更适用于移动端）
一、mintUI简介mint是一个基于vue的前端UI框架，而它的样式比较类似于手机的样式，可以说是一个基于vue打包app的UI框架，使用mint框架可以给使用vue打包的app的用户更好的交互体验。mint已支持vue2.0。二、安装和引入mintUI 在安装之前首先要对vue.js有所了解，有一个建立好的vue的项目以及安装好的no...
2024-01-10
VUX--基于WeUI和Vue(2.x)开发的移动端UI组件库
基于WeUI和Vue(2.x)开发的移动端UI组件库，主要服务于微信页面VUXreact/angularelement其他UI库...
2024-01-10
Vant 轻量、可靠的移动端 Vue 组件库
Vant 是有赞前端团队开源的移动端组件库，于 2016 年开源，已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一。目前 Vant 官方提供了 Vue 版本和微信小程序版本，并由社区团队维护 React 版本。特点提供 60 多个高质量组件，覆盖移动端各...
2024-01-10vue使用rem实现 移动端屏幕适配
要想移动端适配 并使用 rem 您需要先看这篇文章，配置好less ➡️ 在vue 中使用 less，就可以使用rem了如果项目已经开发的差不多了，没有用到rem 又要使用rem，您用这招。postcss-pxtorem：转换px为rem的插件安装 postcss-pxtoremnpm install postcss-pxtorem --save 新建rem.js文件const baseSize = 32// 设置 rem 函数functio...
2024-01-10
【造轮子】开发vue组件库MeowMeowUI
项目示例github1. 创建项目# 全局安装 vue-cli$ npm install --global vue-cli# 创建一个基于 webpack 模板的新项目$ vue init webpack meowui# 安装依赖$ cd meowui$ npm install$ npm run dev2. 规划目录结构这里参考element-ui和iview的目录结构|-- examples // 原 src 目录，改成 examples 用作示例展示|-- packages /...
2024-01-10
vue2.0做移动端开发用到的相关插件和经验总结
最近一直在做移动端微信公众号项目的开发，也是我首次用vue来开发移动端项目，前期积累的移动端开发经验较少。经过这个项目的锻炼，加深了对vue相关知识点的理解和运用，同时，在项目中所涉及到的微信api(微信分享，微信支付)，百度地图api(如何实例化地图，给地图添加自定义覆盖物，给地图添...
2024-01-10
VantUI+Vue移动端H5实现仿微信朋友圈功能
相关技术栈：# yarn add vue-photo-preview# npm i vue-photo-preview1、 图片预览切换vue-photo-preview 2、滑动（vant-ui）van-swipe (轮播控制滑块大小)3、关键点：获取对应组的图片地址数组根据图片个数展示不同的布局 （100%，49%，32% 三目运算）没有图片不显示图片预览切换对应的图集（:preview="index"）...
2024-01-10
