如下：代码： <!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是一个钩子函数，只要父节点存在，在插入父节点时调用，我...
如下所示： <el-autocompletev-model="state4":fetch-suggestions="querySearchAsync"placeholder="请输入内容"@select="handleSelect" ></el-autocomplete> 这里的 hanleSelect 默认绑定的参数是选中的那条数据。 但是如果一个页面有好几个相同的组件，要想知道选中的是第几个。 @select="handleSelect(item, index)" // 这样肯定不行的解决方法： <el-autocompletev-model="state4":fetch-suggestions="querySearchAsync"placeho...
weui提供的图标比较少，有时我们需要更多的图标，可以使用以下方法自定义图标库： 1，到阿里巴巴矢量图标库(http://iconfont.cn/)生成自己的字体图标，下载代码，解压，打开iconfont.css 2，在wxss文件中引用字体 <style type="less"> @font-face {font-family: iconfont;src: url(data:font/truetype;charset=utf-8;base64,AAEAAAANAIAAAwBQRkZUTYTHwTUAAAfIAAAAHEdERUYAKQAMAAAHqAAAAB5PUy8yVuZh6QAAAVgAAABWY21hcAA8D8sAAAHIAAA...
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>//点击第一...
使用版本 layui-v2.3.0 修改： 打开layui中table.js源码 在 Class.prototype.pullData 这个方法定义内部 //获得数据 Class.prototype.pullData = function(curr, loadIndex){var that = this,options = that.config,request = options.request,response = options.response,sort = function(){if(typeof options.initSort === object){that.sort(options.initSort.field, options.initSort.type);}};that.startTime = new Date().g...
在小程序后台，微信已经提供了强大的数据分析功能，包括实时统计、访问分析、来源分析和用户画像功能，可以说对一般的数据分析已经完全足够了，但有时应用需要做一些更加精准的数据分析，比如具体到某一个页面的分享，页面中某一个button的点击等，这时候就需要用到自定义分析功能。 什么是自定义分析？ 引用下官方文档： 自定义分析支持灵活多维和近实时的用户行为分析，可以通过自定义上报，对用户在小程序内的行为做精细化跟踪，...
写了两三天，终于把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...
在layui里面给了特定几个自定义属性title <select name="aa" lay-filter="sadaS"><option value="">请选择属性</option><option value="1" title="12.32">雪碧</option><option value="2" title="2.01">芬达</option><option value="3" title="34.51">冰糖雪梨</option><option value="4" title="17.46">金贝</option></select> 监听select form.on(select(sadaS), function(data){ console.log(data.elem); //得到select原始DOM对...
本文为大家分享了jQuery实现文字跑马灯效果的具体代码，供大家参考，具体内容如下 一、明确需求 基本需求：最近在工作中接到一个新需求，简单来说就是实现一行文字从右到左跑马灯的效果，并且以固定的时间间隔进行循环。 原本这是一个很容易实现的需求，但是难点是要求很多参数得是用户可自行设置的，包括文字跑马灯的速度和距离下次出现的间隔。具体需求见下图：这样一来实现这个功能就会有点麻烦了，需要烧烧脑细胞了。 二、具体...
目标 使用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=...