在工作当中，遇到了下面这个问题： 测试环境与生产环境中的用户权限不一样，因此，就需要根据测试环境打一个包，生产环境又打一个包。可是，如果每次打包都需要更改权限的配置文件的话，会很麻烦，而且，体现不出一个coder该有的逼格。为了更有逼格地解决这个问题，于是我百度了一番，上天不负有心人，让我找到了解决方案。 在详叙解决方案之前，先简单介绍下解决方案当中使用到的工具：cross-env,webpack.DefinePlugin cross-env是...
实现一个日期组件，如图：components.js代码如下： Vue.component(sc-calendar,{template:<div class="scCalendar"> +<div class="calendar_header"> +<div class="prev" @click="prevMonth"> < </div> +<span class="text_year">{{currentYear}}年</span> +<span class="text_month">{{currentMonth}}月</span> +<div class="next" @click="nextMonth"> > </div> +</div> +<div class="calendar_content"> +<ul class="week"> +<l...
本文实例为大家分享了微信小程序自定义tabBar组件的具体代码，供大家参考，具体内容如下 以下代码保存在github地址 先看一看目录 template文件夹里存放tabbar模板。 template/template.wxml <template name="tabBar"> <view class="tabBar"><block wx:for="{{tabBar}}" wx:for-item="item" wx:key="tabBar"><view class="tabBar-item"><navigator open-type="redirect" url="{{item.pagePath}}"><view><image class="icon" src=...
本文实例为大家分享了微信小程序自定义轮播图展示的具体代码，供大家参考，具体内容如下 默认的swiper面板指示点都是小圆点黑灰的，但这满足不了广大小伙伴需求，比如其他颜色的，椭圆形的，方形的等等。首先当然是要禁用掉（直接删掉）swiper属性indicator-dots，再用view组件模拟dots，对应的代码如下： <view class="swiper-container"><swiper autoplay="auto" interval="5000" duration="500" current="{{swiperCurrent}}" bi...
我使用的element-ui的版本是V1.4.13。如上图所示，如果使用el-button,加颜色是可以通过设置type属性的值，加图标就设置icon属性的值。 现在产品给了一个需求，就是自定义的很多种类别，不同的类别的按钮显示不同的颜色和图标。如下图所示：为了方便开发，目前的解决方案是：添加一个自定义全局指令，同时在element-ui源码中，加入对应的组件。开发人员在开发时只要在type中添加不同的类的值，就能添加上颜色和图标。 1、在element-...
文件上传是我们经常会用到的功能，但是原生的input样式太丑了，能不能自定义一个input文件上传样式呢？ 我这里写了两种方法，form表单提交跟ajax异步提交都没有问题，自动上传或者点击上传按钮上传也都没问题 先看效果：代码贴出来： 方法1 <!--方法1:div : 设置宽高、overflow:hidden;超出的部分被隐藏input : 设置层级z-index = 1;设置透明度opacity:0;设置相对定位position:relative;使两个元素重叠i : 设置层级z-index = 0;（...
我们在做前端表单提交时，经常会遇到要对表单中的数据进行校验的问题。如果用户提交的数据不合法，例如格式不正确、非数字类型、超过最大长度、是否必填项、最大值和最小值等等，我们需要在相应的地方给出提示信息。如果用户修正了数据，我们还要将提示信息隐藏起来。有一些现成的插件可以让你非常方便地实现这一功能，如果你使用的是knockout框架，那么你可以借助于Knockout-Validation这一插件。使用起来很简单，例如我下面的这一...
我们在做前端表单提交时，经常会遇到要对表单中的数据进行校验的问题。如果用户提交的数据不合法，例如格式不正确、非数字类型、超过最大长度、是否必填项、最大值和最小值等等，我们需要在相应的地方给出提示信息。如果用户修正了数据，我们还要将提示信息隐藏起来。 有一些现成的插件可以让你非常方便地实现这一功能，如果你使用的是knockout框架，那么你可以借助于Knockout-Validation这一插件。使用起来很简单，例如我下面的这...
由于微信小程序没有提供类似 Image 这样的 JS 对象，要实现图片的预加载要麻烦一些， wxapp-img-loader自定义组件可以在微信小程序中实现图片预加载功能。 使用 1、下载 wxapp-img-loader项目源代码（https://github.com/o2team/wxa...），将 img-loader 目录拷贝到你的项目中 2、在页面的 WXML 文件中添加以下代码，将组件模板引入 <import src="../../img-loader/img-loader.wxml"/> <template is="img-loader" data="{{ imgLoad...
浏览器自带的原生下拉框不太美观，而且各个浏览器表现也不一致，UI一般给的下拉框也是和原生的下拉框差别比较大的，这就需要自己写一个基本功能的下拉菜单/下拉选择框了。最近，把项目中用到的下拉框组件重新封装了一下，以构造函数的方式进行封装，主要方法和事件定义在原型上，下面是主要的实现代码并添加了比较详细的注释，分享出来供大家参考。代码用了ES6部分写法如需兼容低版本浏览器请把相关代码转成es5写法,或者直接bable转...
想要封装好一个自己的vue组件，一定要熟练掌握这三个技能 父组件 —> 子组件传值（props） 子组件 —> 父组件传值（$emit） 以及插槽（slot） 对于一个独立的组件来说 props是用来为组件内部注入核心的内容； $emit用来使这个独立的组件通过一些逻辑来融入其他组件中。 举个具体点的例子，假如你要做一辆车，车轮是要封装的一个独立组件，props指的就是根据整个车的外形你可以给轮子设置一些你想要的且符合车风格的花纹，图案等； ...
首先我们在pages文件夹下创建components目录用于存放自定义组件。如图所示，以我创建的dialog组件为例，自定义组件的格式与页面一样，分为4个文件。 图1 图2 如上图2所示，假如index页面有一个按钮触发点击事件后弹出dialog，并且当点击某个部门时，将dialog关闭，并将部门名称与红色标题同步。 一、首先把dialog组件的样式写好，并在index页面相应的位置引用。以下就是代码啦（分别为：wxml、wxss、js...
在线demo：http://tangyupeng.top/dist/index.html#/phone<template><div><my-header custom-title="通讯录" custom-fixed ><button @touchstart="backBtn" slot="left">首页</button><button @touchstart="homeBtn" slot="right">+</button></my-header><my-list :user-data="userData"></my-list> <!-- 传递数据 --><my-alert custom-title="呼叫"><div class="alert_btn"><button class="aler_tbn" @touchstart="confirmBtn">确...
小程序原生组件的音频播放时并没有进度条的显示，而此次项目中，鉴于原生的视频进度条样式太丑，产品要求做一个可拖拽的进度条满足需求。 视频和音频提供的api大致是相似的，可以根据以下代码修改为与音频相关的进度条。 wxml的结构如下: <video id="myVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1...
使用自己基于vue-cli 2.X改造的前端多页脚手架有近1年多时间了，一直没机会升级3.0版本 开始零零碎碎开始写一些功能，顺便分享一下 const path = require(path) const glob = require(glob) /** 获取多页的入口脚本和模板 */ const getPages = (() => {const [globPathHtml,globPathJs,pages,tempSet] = [[./src/modules/**/index.html, template], // 入口模板正则[./src/modules/**/main.js, entry], // 入口脚本正则Object.crea...