一、基于vue的国家区号列表 vue-flag-list包含了大部分国家的区号，点击右边的三角形展开列表可以选择国家区号，若列表中没有区号，也可以自己输入区号。全球区号列表1.1 初始化组件 用的是vue-cli来初始化组件，虽然有很多东西不需要，因为对这个比较熟悉，所以还是按照这个步骤来。 vue init webpack vue-flag-list cd vue-flag-list cnpm install npm run dev1.2 根据自己的需求，实现具体功能，我的主要功能写在vue-flag-list...
Vue中封装input组件 最近有点忙不过来 脱了很久，没有更新 抱歉。今天要将的时如何自定义封装input组件 ，博主知识发个简单的模板 码友们可以更具自己的实际项目添加需要的参数我的项目中的UI图是这样的 代码如下 子组件的模板设置<template><div class="completion-input-box"><span class="input-box-name">{{text}}</span><input type="text" ref="input":value="value" @input="$emit(input, $event.target.value)"></div> </...
在这篇文章打造通用的匀速运动框架(实例讲解)中，封装了一个匀速运动框架，我们在这个框架的基础之上，加上缓冲运动效果，然后用运动框架来做幻灯片（上下，左右）。缓冲运动通常有两种常见的表现：比如让一个div从0运动到500，一种是事件触发的时候，速度很快， 一种是事件触发的时候慢，然后慢慢加快.我们来实现先块后慢的，常见的就是开车，比如刚从高速路上下来的车，就是120km/小时，然后进入匝道，变成40km/时. 或者40km/小时...
详解微信小程序中的页面代码中的模板的封装 最近在进行微信小程序中的页面开发，其实在c++或者说是js中都会出现这种情况，就是相同的代码会反复出现，这就是进行一定的封装，封装的好处就是可以是程序中在于减少一定的代码量，并且可是使代码结构更加清晰。那今天所要记录的就是关于微信小程序中的页面的模板封装。 在微信小程序中的文件名都带有wxml等样式，在wxml中提供了模板，即可以在模板中定义代码片段，然后可以...
本文介绍了vue2.x select2 指令封装，分享给大家，具体如下： 其他的就不说了，说说封装过程的问题吧 1、vue不同版本指令接受参数不一样 2、酱油君对于vue2.x双向绑定的机制不了解（有大神路过望在评论中不吝赐教）上代码：<!DOCTYPE html> <html> <head><title>vue select2 封装</title><link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="external nofollow" rel="stylesheet" /><scr...
如下所示： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div { width: 100px; height: 100px; background-color: pink; position: absolute; left: 0; top: 50px; border-radius: 50%; } </style> </head> <body> <button id="btn200">200</button> <button id="btn400">400</button> <div id="box"></div> </body> </html> <script> var btn200 = document.getElementById("btn200"...
昨天我们说了一下原生JS中常用的兼容性写法，今天我们来说一下运动框架. 正常情况下我们要写一个运动的效果会用到tween.js这么一个插件，这个东西不是一般人写出来的，因为里面涉及的运动效果都是经过一堆数学的函数运算出来的，我们平常人是写不出来的，所有我们就自己封装一个运动框架，有什么问题改起来也方便，下面我们就开始封装. 首先，我们先写一个div，设置一些简单的样式，我们就拿这个div举例子 如下代码： #div{width: ...
话说轮播图效果是前端er学习JS的必经之路啊，很多同学写的第一个JS效果应该就是它了，在各大网站我们都会经常见到，但是无缝滚动运动效果的轮播图，对于小白们来说还是有一定难度的。 我们来看看思路吧~ 首先我们要实现的效果有以下几点： 小圆点：点击小圆点显示与之对应的图片 向左和向右按钮：点击向左按钮图片向后运动，点击向右按钮图片向前运动 定时器：每隔 2s 自动播放 主要难点在于： 当图片运动到最后一张，点击向右的按...
下面的弹出框组件使用的是类来封装的。一个弹窗组件通过new一个实例来生成。 下面直接上代码： html结构： <!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><style>/*基本的样式*/button{width: 1.6rem;height: 0.5rem;font-size: 0.3rem;line-height: 0.5rem;background: red;color: white;font-weight: bold}.hide{display: none;}.js-pop{width: 100%;height: 100%;z-index: 100;position: absol...
微信小程序开发post方法与get方法的封装 第一步：在utils文件夹下创建httpUtil.js文件 第二步：创建函数httpPost方法代码如下: function Post(url, data, cb, isShow, showNetError, that, showLoading) {if (showLoading == true || showLoading == undefined){wx.showNavigationBarLoading();wx.showLoading({title: 加载中...,})} var basicData = {vloginPwd: api.vloginPwd,vtoken: api.vtoken}if (!isEmpty(data)) {for (var...
之前就说过，我想写一个canvas画统计图的插件，现在写好了 先说下实现的功能吧：1.可以通过自定义X轴坐标属性和Y轴坐标属性按比例画出统计图2.可以选择画折现图还是柱形统计图，或者两者都实现3.可以自由定义折现颜色，坐标颜色，柱形图颜色 和canvas边框颜色，当然边框你也可以选择要或者不要4.可以选择是否实现柱形图和折现图的动画实现 实现过程 画坐标——画箭头——做X轴和Y轴的标注——画柱形图——画折现图 话不多说，上代码...
由于项目原因，工作一年多还没用js写过插件，项目太成熟，平时基本都是在使用已经封装好的功能插件。感觉自己好low......这两天想自己抽空写一个canvas画统计图与折现图的插件，所以就去网上学习了下如何封装.....虽然之前看了很多源码，但是感觉就算了解也是野路子..... 什么是封装呢？ 我的理解就是 把一个功能单独做成一个组件，就像做饺子，以前做饺子必须自己先用面粉做饺子皮，再做饺子馅，然后再手工包饺子，但是现在人们发...
组件的好处 当我用vue写页面的时候，大量的数据页面渲染，引入组件简化主页面的代码量，当代码区域块代码差不多相同时，组件封装会更加简化代码。组件是Vue.js最强大的功能之一。 组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义的元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以是原生HTML元素的形式，以is特性扩展。 我用一个读书软件的图书列表例子： 图书展示页 大家可以想想用vue如何实...
vue 封装自定义组件 tabal列表编辑单元格组件 <template><div class="editable-cell"><div class="editable-cell-input-wrapper" v-if=editable><el-input class="editInput" v-model="cellValue" placeholder="请输入内容" v-loading="editLoading" size="small"></el-input><el-button type="text"><i class="el-icon-check" @click=check></i></el-button></div><div class="editable-cell-text-wrapper" v-else>{{cellValue ||...
Wechat JS-API接口 功能： 用于管理和获取微信 JSSDK 生产的access_token、jsapi_ticket和签名（signature） Installationnpm i wechat_interaction_jsapiInitlet Jsapi = require("wechat_interaction_jsapi"); Usage WECHAT_APPID, WECHAT_APPSECRET 分别为开发者 id 和密码，在微信公众平台->开发->基本配置里可找到const jssdk = new Jsapi(WECHAT_APPID, WECHAT_APPSECRET);1、获取 access_token, 返回promise对象，resolve回...