一个简单的移动端卡片滑动轮播组件，适用于Vue2.x c-swipe 2.0 全新归来。重写了全部的代码，更靠谱的质量，更优秀的性能English Document 安装 npm install c-swipe --save 使用 注册组件 // main.js // 引入 c-swipe 主文件 import c-swipe/dist/swipe.css; import { Swipe, SwipeItem } from c-swipe; // 全局注册组件 Vue.component(swipe, Swipe); Vue.component(swipe-item, SwipeItem);在 .vue 单文件组件中使用: <swipev-m...
<img :onerror="errpic" class="customerHead" :src="param.customerHead" alt=""> data() {return {param:{ id:"",customerHead: "",}} } let _this = this let files = e.target.files[0] if (files.size/(1024*1024) > 2) { this.open(上传的图片不可大于2M！) return false; } var reader = new FileReader(); reader.onload = function (e) { var base64 = e.target.result; _this.param.customerHead = base64 //console.log...
vue端处理 this.$http.get(this.service + /user/excel,{responseType: blob}).then(({data})=> {console.info(typeof data)var a = document.createElement(a);var url = window.URL.createObjectURL(data);a.href = url;a.download = 用户统计信息.xls;a.click();window.URL.revokeObjectURL(url);})web端处理int total=userBsService.getCount(null);List<UserVo> list=userBsService.getList(null, 1, total);String fileName ...
前言 最近在看vue的教学视频，正好学到的数组对象排序方法，在这跟大家分享一下，如有不足之处，请赐教。普通数组的排序先看代码： <div class="app"><h1>v-for实例</h1><hr><ol><li v-for="number in numbers">{{number}}</li></ol></div> <script>new Vue({el:.app,data:{numbers:[5 ,88, 43, 56, 28, 61, 9],},computed:{numbers:function(){return this.numbers.sort(numbers);},}})原本我以为会出来结果，可结果不一样。。后来...
目标 <template><my-form v-model="form"></my-form> </template> <script>export default {data() {return {form: }}} <script>实现 // my-form组件 <template><form><input v-model="model.val1" /><textarea v-model="model.val2"></textarea><form> </template> <script>export default {model: {prop: model,event: change},props: {model: Object}watch: {model(val){this.$emit(change, val)}}} <script>总结 以上所述是小编...
看看下面的代码吧，具体代码如下所示： <!-- value 格式为13位unix时间戳 --> <!-- 10位unix时间戳可通过value*1000转换为13位格式 --> export function formatDate (date, fmt) {if (/(y+)/.test(fmt)) {fmt = fmt.replace(RegExp.$1, (date.getFullYear() + ).substr(4 - RegExp.$1.length));}let o = {M+: date.getMonth() + 1,d+: date.getDate(),h+: date.getHours(),m+: date.getMinutes(),s+: date.getSeconds()};for (let ...
本文介绍了vue左右侧联动滚动的实现代码，分享给大家，具体如下： 实现功能: 点击左侧,右侧滚动到相应位置,滚动右侧, 左侧滚动到相应位置布局结构:开源滚动库: better-scroll.js技术要点:1.<scroll>是对紧邻的元素生效如: <scroll class=foods-wrapper><ul class=content><li></li></ul></scroll>初始化在<ul>元素上 2.foods-wrapper的高度小于content高度时才会发生滚动 3.点击左侧菜单列表时,只需要计算右侧对应的偏移距离 或是 ...
首先展示一下效果，狠狠点击 https://zhangkunusergit.github.io/vue-component/dist/jitter.html 代码github : https://github.com/zhangKunUserGit/vue-component 先说一下用法： <jitter :start.sync="抖动控制器" :range="{ 包含x,y, z }" :shift-percent="0.1">这里是你要抖动的元素 </jitter>思路： 1.抖动就是摆动，现实中的钟摆可以很形象。 2.当摆动到临界点后，就会向相反的方向摆动。 3.在没有动力时，摆动会慢慢停止。...
下面一段代码给大家分享vue input 校验字母数字组合且长度小于30，具体代码如下所示： <Input v-model="form.glhm" placeholder="请输入关联交易号" style="width:240px" @on-blur="validateJyh(form.glhm)"></Input> validateJyh(glhm){//校验关联交易号 var reg = /^[A-Za-z0-9]{1,30}$/; if(!reg.test(glhm)){ this.$Message.error("请输入字母或数字组成的交易关联号"); this.form.glhm = ; } }, 下面看下在Vue.Js下使用el-inp...
效果如图：代码如下： keyboard.vue <template> <div class="keyboard" v-show="showKeyboard" v-clickoutside="closeModal"> <p v-for="keys in keyList"> <template v-for="key in keys"> <i v-if="key === top" @click.stop="clickKey" class="iconfont icon-zhiding tab-top"></i> <i v-else-if="key === 123" @click.stop="clickKey" class="tab-num">123</i> <i v-else-if="key === del" @click.stop="clickKey" id="del" ...
前端项目中经常会下拉或者选项卡，如果通过if,else或者switch去判断加载的话会产生大量冗余代码和变量定义，而且都写在一起后人很难维护。 Vue核心在于组件，如果有内容通过选项卡或者下拉框切换用动态加载子组件最好不过。如图： selects文件夹中，index只负责公共数据（当然公共数据也可以写在其他文件，只留一个入口文件），而comp文件夹中的几个组件则通过动态加载。 动态加载子组件：component // 给下拉框绑定下拉列表的索引...
业务：消息推送方式有两种，为“微信”和“邮件”，微信发送时需要选择“要发送的应用程序”，邮件发送时不需要 微信发送时，页面如下：邮件发送时，选择器不可用，页面如下：虽然官网上没有给出具体的例子，但可从属性中查到 “disabled”属性，属性说明类型默认值disabled是否禁用Booleanfalse 实现： 添加disabled属性，写成如下红色标记格式；定义一个isAble变量，用来存放TRUE和FALSE值，决定此选择框是否可用。 <Select <s...
1、给父页面跳转的地方设置事件 //原来的页面上展示的信息 <div v-if="!addShow" class="function"> <el-row> <template slot-scope="scope"> <el-button type="success" size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> //带参数进行编辑 <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button> </template> </el-row> </div> //要跳转过去的页面用隐藏来代替 <...
最近使用vue需要实现一个点餐选择商品规格的页面，需要通过vue动态的给被点击的元素添加class名字，使其变色，其他的删除class。如图：开始在网上找了许多办法发现不是太好用，最后找到一个发现还是不错的，记录一下 html： <div class="weui-mask" id="guige"><div class="guigeBox"><p class="guigeTitle">{{guigeName}}</p><p class="guigeP guigeP01">规格</p><div class="indexGuiGe"><span v-for="value,index in guigeList"...
在路由时传递参数，一般有两种形式，一种是拼接在url地址中，另一种是查询参数。如：http://localhost:8080/router/tang/101?type=spor&num=12。下面根据代码看一下，VUE 和 Spring Boot 中各自是如何处理传递和接受参数的。 Spring Boot package com.tang.demo1.controller; import org.springframework.web.bind.annotation.*; @RestController public class RouterController { @RequestMapping(path = {"/router/{name}/{cl...