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-10vue配合UI组件
创建项目首先使用脚手架搭出项目基本框架,具体方法可以参考前面的文章。1,执行命令创建项目:vue init webpack-simple vue-bootstrap2,下载相关依赖:npm vue-bootstrap3,启动项目:npm run dev出现这个界面就说明项目创建成功了。引入bootstrap1,使用之前需要先在项目中下载bootstrap,在项目根目录执行命...
2024-01-10vue移动组件库Mint UI
官网 http://mint-ui.github.io/#!/zh-cn安装 cnpm install mint-ui -S在main.js中引入改插件Toast效果演示:查看文档在页面中调用插件Message box效果演示: 这是移动端插件,所以调整到移动端演示:底部tabbar演示: 图片位置预览效果...
2024-01-10vue组件实现移动端九宫格转盘抽奖
本文实例为大家分享了vue组件实现移动端九宫格转盘抽奖的具体代码,供大家参考,具体内容如下vue-lucky-draw移动端九宫格转盘抽奖vue组件,中奖的奖品数据由接口决定。效果图抽奖因为中奖的结果是后台返回的,所以要考虑转盘的最终停下来的位置必须是在对应后台返回结果的奖品的位置,也就...
2024-01-10vue组件实现移动端九宫格转盘抽奖
本文实例为大家分享了vue组件实现移动端九宫格转盘抽奖的具体代码,供大家参考,具体内容如下vue-lucky-draw移动端九宫格转盘抽奖vue组件,中奖的奖品数据由接口决定。效果图抽奖因为中奖的结果是后台返回的,所以要考虑转盘的最终停下来的位置必须是在对应后台返回结果的奖品的位置,也就...
2024-01-10vue移动端城市三级联动组件使用详解
本文实例为大家分享了vue移动端城市三级联动组件的具体代码,供大家参考,具体内容如下先看效果图以下组件代码<template> <div class="address"> <div class="addressboxbg" @click="cancel"></div> <div class="addressbox"> <p class="text_btn"><span style="float:left;" @click="cancel">取消</span><span style="float:ri...
2024-01-10移动端vue项目的图片上传插件
有一移动端项目,使用的vant-ui。可是vant自带的Uploader似乎不支持一次选择多张图片上传的功能。于是乎:在https://www.npmjs.com/查找发现找到 vue-upload-component 组件,功能基本都有,评价也不错,目前有1500多个star。因为是国人开发的,所有比较完善的中文文档。完整的例子。使用:1.安装:npm install vu...
2024-01-10vue实现移动端H5数字键盘组件使用详解
本文实例为大家分享了vue实现移动端H5数字键盘组件的使用代码,供大家参考,具体内容如下我们平时扫码付款的时候,经常会输入一些数字进行付款,仔细看了下键盘和系统的键盘有点不一样,于是今天买甘蔗的时候扫码付款就想了一下要怎么去实现一个。话不多说,直接上代码。结果如下:代码...
2024-01-10vue实现移动端省市区选择
本文实例为大家分享了vue实现移动端省市区选择的具体代码,供大家参考,具体内容如下效果:安装:npm install v-distpicker --save组件代码:<template><div><li > <div class="left"> <span>所在地区</span> </div> <div class="right r"> <div class="city" @click="toAddress">{{city}}</div> <i class="arrow-r"> </i> </div></l...
2024-01-10vue实现移动端多格输入框
近来公司提出需求,完成如下图h5页面操作。网上没什么轮子可以使用,就自己徒手撸了一个。不多废话,直接上代码。<div class="verify-tel"> <h1>短信验证</h1> <h2>SMS Verification</h2> <div> <input ref="pwd" :maxlength="digits.length" v-model="msg" style="position: absolute;z-index: -1;opacity: 0"/> ...
2024-01-10Mint UI-基于 Vue.js 的移动端组件库
Mint UI-基于 Vue.js 的移动端组件库npm 安装:npm i mint-ui -S// 1、完整引入import Vue from \'vue\'import MintUI from \'mint-ui\'import \'mint-ui/lib/style.css\'Vue.use(MintUI)// 2、引入部分组件import { MessageBox } from \'mint-ui\' // 弹出式提示框(错误提示)import { Toast } from \'mint-ui\';...
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-10vue移动端实现手指滑动效果
本文实例为大家分享了vue移动端实现手指滑动效果的具体代码,供大家参考,具体内容如下滑动时候黄色块宽度跟着变化通过touch点击实现目前感觉宽度变化有点问题,还在思考中下面上代码:<template lang="html"> <div class="back" ref="back" @touchstart.prevent="touchStart" @touchmove.prevent="touchMove"> <div class="b...
2024-01-10vue实现移动端触屏拖拽功能
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移动UI框架滑动加载数据的方法
前言在我们移动端还有一个很常用的组件,那就是滑动加载更多组件。平常我们看到的很多插件实现相当复杂就觉得这个组件很难,其实不是的!!这个组件其实可以很简单的就实现出来,而且体验也能非常的棒(当然我们没有实现下拉刷新功能)!!下面我们就一起来实现这个组件。效果展示先...
2024-01-10Feui 基于 Vue 的移动端组件库
Feui 是诺诺网前端组(NuoFE)基于WeUI、nuim和Vue(2.x)开发的移动端 UI 组件库,希望借此提高组件价值,减轻工作量,更好的享受生活,享受工作。特点简单基于 Vue 2.0的 Mobile 组件库,撸起代码超简单方便支持自定义主题,移植方便,使用起来超方便可靠支持40+的自定义组件,高复用,按需加载,99种问...
2024-01-10vue移动端预览pdf,读取文件流出现跨域
刚开始是返回的base64转成blob访问不到资源,后来改文件流了接口返回的是文件流,我在拿到文件流之后转换为blob URLurlPdf blob:http://192.168.xx.xx:1234/031...但是url也访问不到资源,后来有人说加上responseType: 'blob',加上之后接口就跨域了。回答:可以参考这个如何预览以及下载pdf文件测试:手机:safari手机:chr...
2024-02-24vue移动端判断手指在屏幕滑动方向
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-10VUX--基于WeUI和Vue(2.x)开发的移动端UI组件库
基于WeUI和Vue(2.x)开发的移动端UI组件库,主要服务于微信页面VUXreact/angularelement其他UI库...
2024-01-10Vant 轻量、可靠的移动端 Vue 组件库
Vant 是有赞前端团队开源的移动端组件库,于 2016 年开源,已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务,对外服务十多万开发者,是业界主流的移动端组件库之一。目前 Vant 官方提供了 Vue 版本和微信小程序版本,并由社区团队维护 React 版本。特点提供 60 多个高质量组件,覆盖移动端各...
2024-01-10Vue常用的UI组件-vant(轻量、可靠的移动端Vue组件库)(推荐)
1.github地址:https://github.com/youzan/vant2.安装:npm i vant -S 安装完成后,会在项目的package.json文件中显示vant插件,如下: "dependencies": { "animate.css": "^3.7.2", "moment": "^2.24.0", "pubsub-js": "^1.8.0", "shortid": "^2.2.15", "vant": "^2.6.3", "vue": "^2...
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-10Vue 移动端一般用到的配置
1.禁止缩放网页 项目目录下的index.html文件添加meta属性:user-scalable=nowidth // 设置 viewport 的宽度,正整数/字符串 device-width height // 设置 viewport 的高度,正整数/字符串 device-height initial-scale // 设置设备宽度与 viewport大小之间的缩放比例,0.0-10.0之间的正数 maximum-scale // 设置最大缩放系数,0.0-10.0之间的正...
2024-01-10