vue移动组件库Mint UI
官网 http://mint-ui.github.io/#!/zh-cn安装 cnpm install mint-ui -S在main.js中引入改插件Toast效果演示：查看文档在页面中调用插件Message box效果演示： 这是移动端插件，所以调整到移动端演示：底部tabbar演示： 图片位置预览效果...
2024-01-10
vue移动端弹框组件的实例
最近做一个移动端项目，弹框写的比较麻烦，查找资料，找到了这个组件，但是说明文档比较少，自己研究了下，把我碰到的错，和详细用法分享给大家！有疑问可以打开组件看一看，这个组件是仿layer-mobile的，很多用法都一样，可以看看哦！一、npm 安装// 当前最新版本 1.2.0 npm install vue-layer-mobile/...
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-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-10
vue实现移动端多格输入框
近来公司提出需求，完成如下图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-10vue移动端实现红包雨效果
本文实例为大家分享了vue实现红包雨效果的具体代码，供大家参考，具体内容如下下面是代码：<template> <div class="ser_home"> <ul class="red_packet" id="red_packet"> <template v-for="(item, index) in liParams"> <li :style="{ left: item.left, animationDuration: item.durTime, webkitAnimationDuration: it...
2024-01-10
移动端无限滚动 TScroll.vue组件
// 先看使用TScroll.vue的几个demo 1. https://sorrowx.github.io/TScroll/#/ 2. https://sorrowx.github.io/TScroll/#/simple-tscroll 3. https://sorrowx.github.io/TScroll/#/xunlei-live 4. https://sorrowx.github.io/TScroll/#/youliao 5. https://sorrowx.github.io/TScr...
2024-01-10
Mint 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移动端实现手指滑动效果
本文实例为大家分享了vue移动端实现手指滑动效果的具体代码，供大家参考，具体内容如下滑动时候黄色块宽度跟着变化通过touch点击实现目前感觉宽度变化有点问题，还在思考中下面上代码：<template lang="html"> <div class="back" ref="back" @touchstart.prevent="touchStart" @touchmove.prevent="touchMove"> <div class="b...
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移动UI框架滑动加载数据的方法
前言在我们移动端还有一个很常用的组件，那就是滑动加载更多组件。平常我们看到的很多插件实现相当复杂就觉得这个组件很难，其实不是的！！这个组件其实可以很简单的就实现出来，而且体验也能非常的棒（当然我们没有实现下拉刷新功能）！！下面我们就一起来实现这个组件。效果展示先...
2024-01-10
vue移动端实现手指滑动效果
本文实例为大家分享了vue移动端实现手指滑动效果的具体代码，供大家参考，具体内容如下滑动时候黄色块宽度跟着变化通过touch点击实现目前感觉宽度变化有点问题，还在思考中下面上代码：<template lang="html"> <div class="back" ref="back" @touchstart.prevent="touchStart" @touchmove.prevent="touchMove"> <div class="b...
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-10
【JS】vue+vant移动端地区级联选择组件
首页专栏javascript文章详情0vue+vant移动端地区级联选择组件quanta发布于 今天 08:25 写在开头：项目的框架是vue+vant，业务需求一个级联的地区选择，写完才发现vant本身也有这组件....后来看vant本身用的逻辑跟我不太一样，觉得还有点思考价值那就发上来当做实现记录吧~总体思路（select与tabs独...
2024-01-10
Feui 基于 Vue 的移动端组件库
Feui 是诺诺网前端组(NuoFE)基于WeUI、nuim和Vue(2.x)开发的移动端 UI 组件库，希望借此提高组件价值，减轻工作量，更好的享受生活，享受工作。特点简单基于 Vue 2.0的 Mobile 组件库，撸起代码超简单方便支持自定义主题，移植方便，使用起来超方便可靠支持40+的自定义组件，高复用，按需加载，99种问...
2024-01-10
vue移动端预览pdf，读取文件流出现跨域
刚开始是返回的base64转成blob访问不到资源，后来改文件流了接口返回的是文件流，我在拿到文件流之后转换为blob URLurlPdf blob:http://192.168.xx.xx:1234/031...但是url也访问不到资源,后来有人说加上responseType: 'blob',加上之后接口就跨域了。回答：可以参考这个如何预览以及下载pdf文件测试：手机：safari手机：chr...
2024-02-24
Vue常用的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-10
Vue+ElementUI 导航组件
创建导航页组件在components目录下新建一个navigation目录，在Navi目录中新建一个名为Navi.vue的组件。至此我们的目录应该是如下图所示： 然后我们修改main.js文件，修改后的文件如下import Vue from \'vue\'//import App from \'./App\'import router from \'./router\'import ElementUI from \'element-ui\';import \'element-ui/lib/theme-ch...
2024-01-10
详解vue移动端 下拉刷新 - 绯色璃
详解vue移动端 下拉刷新 看完这篇文章，相信大伙也一样可以，做出一个自己的刷新，加载的组件说这个功能之前，大家要先了解一下，要怎么触发滚动条事件。 一定要注意，所有滚动事件都必须要满足这个条件，横向滚动条也一样，只要满足子元素宽度大于父元素宽度就可以了...
2024-01-10
我用过的 UI 组件
现在已经是2017年了，我们主推 vue，也不用 jquery 了，UI 库也是自己重构的，借鉴了 bootstrap 的思想，对自己业务合适的，就是最好的。 ...
2024-01-10
vue写的PC端表格，如何在移动端显示？
写了个pc端的页面，基本上是个表格吧！在移动端显示不正常，只能显示部分。不知该如何处理，最后是这样解决的ebody加个样式 min-width: 1200px;然后就真的可以显示了 ，这是在移动端显示的页面解决了一个小问题，真的很开心啊...
2024-01-10
【Web前端问题】vue异步加载组件问题
1.环境说明：通过vue init初始化后项目仅在router/index.js里修改如下import Vue from 'vue'import Router from 'vue-router'// import HelloWorld from '@/components/HelloWorld'Vue.use(Router)const a='@/components/HelloWorld';const HelloWorld = ()=> import(/* webpackChunkName: "group-...
2024-01-10
【Vue】vue菜鸟关于vantUI组件引入的问题。
本菜鸟新建项目，想尝试vue组件，选择了vantUI做为组件开发。参照官方的API文档进行组件引入配置，可是不知道忽略了那个步骤，在引入的过程中报错。报错信息：did you register the component correctly? For recursive components,make sure to provide the "name" option.真的是实在想不出问题出在那里。按照官方文档一步...
2024-01-10
Vue解决移动端弹窗滚动穿透问题
一、问题描述在移动端的H5页面中，我们经常会遇到 “点击按钮-->弹窗-->选择选项” 这样的场景。而在选项过多出现滚动条时，滚动滚动条至容器的底部或者顶部。再往上或往下拖动滚动条时，滚动动作会出现穿透，这时候底部的body也会一起滚动。问题总结：内容在滚动到容器的顶部或者底部时，...
2024-01-10
vue2.0 移动端，下拉刷新，上拉加载更多插件 转：
<template lang="html"> <div class="yo-scroll" :class="{'down':(state===0),'up':(state==1),refresh:(state===2),touch:touching}" @touchstart="touchStart($event)" @touchmove="touchMove($event)" @touchend="touchEnd($event)" @scroll="(onInfinite || infini...
2024-01-10
