如下:代码: <!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=...