如下：代码： <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><script src="../lib/vue.min.js"></script><style>.middle::-webkit-scrollbar {height:8px;}/* 滚动槽 */.middle::-webkit-scrollbar-track {border-radius: 10px;}/* 滚动条滑块 */.middle::-webkit-scrollbar-thumb ...
如下所示： <div id="app"> <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm"><el-form-item label="密码" prop="pass"><el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input></el-form-item><el-form-item label="确认密码" prop="checkPass"><el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off"></el-input><...
效果图：代码如下： <template><div class="checkbox"><div class="input"><p v-for="item in inputs"><span>自定义字段：</span><input type="text" v-model="item.val"></p><button @click="addInput()">添加字段</button><button @click="sub()">保存提交</button></div><h1>提交的信息： {{submsg}}</h1></div> </template> <script>export default {name: checkbox,data (){return {inputs:[],submsg:}},methods: {addInput (...
笔者近期在公司的项目中使用自定义指令完成了表单校验。 这里将思路分享给大家，并写了一个小demo。这个自定义指令还需要大家自行完善。 demo可见Github:vue-form-param-check 首先关于自定义指令的介绍可以参考官网。 首先，在github上已经有了一些开源组件可以支持表单校验。但是对于一些小项目而言，引入一个很大的东西实际上并不好。所以这里利用vue的自定义指令对表单校验进行了简单的实现。 分析 在平时我们所见的表单中，常...
HTML： <p><b v-show="show">{{tag}}</b><input v-focus v-model="tag" :hidden="show" type="text"></p>js： 官方例子： directives: {focus: {// 指令的定义inserted: function (el) {el.focus()}}}我的： directives: {focus:function (el) {el.focus();}}在我的项目中使用官方的例子时，input不能自动获取焦点，使用我的js时可自动获取焦点，查询相关资料后知道，insert是一个钩子函数，只要父节点存在，在插入父节点时调用，我...
1.自定义 提示框 组件 src / components / Toast / index.js /*** 自定义 提示框( Toast )组件*/ var Toast = {}; var showToast = false, // 存储toast显示状态showLoad = false, // 存储loading显示状态toastVM = null, // 存储toast vmloadNode = null; // 存储loading节点元素Toast.install = function (Vue, options) {// 参数var opt = {defaultType: bottom,duration: 2500,wordWrap: false};for (var property in options)...
介绍一下，已经有很多的vue分页的组件了，大家都是大同小易，那么我就结合自身的使用，写出了一片文章首先在新建一个分页模块在模块中引入相应的代码，（内有详细的注释） template中<div class="page-bar"><ul><li class="first"><span>共{{dataNum}}条记录 第 {{cur}} / {{all}} 页</span></li><li v-if="cur>1"><a v-on:click="cur--,pageClick()"><</a>//点击上一页</li><li v-if="cur==1"><a class="banclick"><</a>//点击第一...
写了两三天，终于把toast组件写出来了。不敢说是最好的设计，希望有更好思路的朋友可以在评论区给我意见！_(:з」∠)_ 第一步：写toast.vue，将样式之类的先定下来 <template><div v-show="showToast" class="toast" :class="position"><div class="toast_container" v-if="type==success"><div><i class="iconfont icon-check icon"></i></div><div class="msg_container">{{message}}</div></div><div class="toast_container" v...
目标 使用vue2.0实现自定义弹窗指令，当标签有该指令时，点击标签可以弹出弹窗实现 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> </head> <body><div id="app"><button id=...
先看例子，后面有对用到的知识点的总结 效果图：实现代码如下： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>组件练习</title><link rel="stylesheet" type="text/css" href="component.css" rel="external nofollow" /><script src="vue.js"></script> </head> <body> <div id="app"><h2>组件1</h2><custom-select btn="查询" :list="list1"></custom-select><h2>菜单2</h2><custom-select btn="搜索" ...
用法： **HTML** <div id="app" class="box" v-tap="vuetouch" //vuetouch为函数名，如没有参数，可直接写函数名v-longtap="{fn:vuetouch,name:长按}" //如果有参数以对象形式传，fn 为函数名v-swipeleft="{fn:vuetouch,name:左滑}"v-swiperight="{fn:vuetouch,name:右滑}"v-swipeup="{fn:vuetouch,name:上滑}"v-swipedown="{fn:vuetouch,name:下滑}" >{{ name }}</div>**js** kim=new Vue({el:"#app",data:{name:"开始"},methods:...
节流函数是web前端开发中经常用到的一个开发技巧,在input实时搜索,滚动事件等,为了避免过多消耗性能,我们都会使用节流函数.在《JavaScript高级程序设计》一书中有这样的一个例子: function throttle (method, context) {clearTimeout((method.tId))method.tId = setTimeout(function () {method.call(context)}, 100)}function resizeDiv () {var div = document.getElementById(myDiv)div.style.height = div.offsetWidth + px}wi...
这两天在玩mpvue，但是下午如果对着文档大眼瞪小眼的话，肯定会睡着的。 想起昨晚的flag，我就想直接用demo上手吧，一举两得 谁想到我好不容易快做完了，v-model在小程序中不起作用！ 来不及研究为什么，我先直接在原来项目上赶紧建了一个test页面，先赶紧实现我的这种设想： 使用v-model和原生表单也可以实现这么好看且达到需求的效果。 重要的是不用自己跟在用户屁股后面屁颠屁颠的监听人家到底何时用了点击事件，又把点击事件...
本来实现多选单选这个功能，vue组件中在表单方面提供了一个v-model指令，非常的善解“猿”意， 能把我们的多选单选功能很完美的且很强大得双向绑定起来，实现多选单选任意选根本不在话下。 但是，凡事都有一个但是！ 但是奈何这个项目设计稿的缘故，使用原生的表单组件是不可能使用了，请看ui图： 可悲的是，这个项目两个月后，我才来做项目复盘， 话说也就在此时，我才发现有一种更简单的方式来实现并且应用上v-model， 为什么...
.sync修饰组件<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>vue-03</title><!-- 引入Vue --><link href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="stylesheet"><script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script> </head><body><div class="container" style="margin-top: 12px;"><div id="demo" class="...