设计思路流程图1、全局常量 constructor(page,opts){// 初始化全局常量数据this.page = page;this.width = opts.width || 300;this.height = opts.height || 300;this.canvasId = opts.canvasId || lock;this.type = opts.type || 3;this.cleColor = opts.cleColor || rgba(0,136,204,1);this.size = this.width / this.type / 2;//坐标点之间的半间距this.R = this.size / 2;//外圆半径this.r = this.size / 4;//內圆半径// 判断是...
修改官方swiper样式从微信官方微信开发文档中心复制swiper 代码块。wxml定义 <view class="wrap"><swiper class="swipers" autoplay="{{autoplay}}" current="{{currentSwiper}}" bindchange="swiperChange"> <block wx:for="{{imgUrls}}"> <swiper-item> <image src="{{item}}" class="slide-image" width="100%" height="150" ></image> </swiper-item> </block> </swiper> <!--重置小圆点的样式 --><view class="dots"> <block ...
最近在vue项目中遇到需要用树形控件的部分，比如导航目录是不确定的，所以必须要用树形结构，不管导航目录有几级，都可以自动显示出来，我一开始觉得element-ui有树形控件，不需要自己写，调用就可以了，后来才发现，调用完事之后，样式不可控，而且要加东西特别困难，无法满足项目需求，于是，一首《凉凉》送给自己，后来去翻vue官网，发现居然有递归组件，一开始我写了两个组件，互相调用，可以写出来，后来返现，如果项目要用到...
本实例的主要功能是：单击按钮弹出一个半透明的弹出层，在规定的时间后才能激活关闭按钮，关闭弹出层。wxml部分 <view class="wrap"> <view class="btns"> <button formType="submit" class="btn" hover-class=btn_on bindtap=show>使用说明</button> <button formType="submit" class="btn btn2" hover-class=btn_on bindtap=enter>进入举报</button> </view><scroll-view scroll-y="true" style="height:100%;" class="modal-box...
1.Vue隐藏显示 <div style="padding-top:5px;" v-bind:class="{hidden: isHidden }"><label class="inline"><input id="id-button-borders" checked="" v-model="user.userstate" type="checkbox" class="ace ace-switch ace-switch-5" /><span class="lbl"></span></label></div>data:{isHidden: true}?v-bind:class=”{hidden: isHidden }” 可动态设置vm.isHidden值 ?:class=”{hidden: isHidden }” 简写 2.Vue控件只读 <input...
经典的三栏布局效果图如下：三栏布局 ?将布局的各个区块定义成组件 <template id="header"><div class="header bg-primary text-center"><h3>头部区域</h3></div> </template> <template id="left"><div class="left bg-danger col-lg-2"><h3>侧边栏区域</h3></div> </template> <template id="main"><div class="main bg-info col-lg-10"><h3>主体区域</h3></div> </template>?用router-view显示相应的组件 <div id="app"><router...
需要对预约单进行超时计算，但是后台和客户端时间不能保证一定一直，所以后台返回客户提交时间和请求结束时间的时间差进行计算。 效果如下(此处只是demo效果，所以有点丑。)父页面 <template><div><div class="dateDiv" :key="index" v-for="(item,index) in TimeArray"><p>{{item.name}}</p><dateComponent :index="index" :key="item.timeDif" ref="dateComponent" :dateTimeStamp="item.timeDif"></dateComponent><el-button @...
具体内容如下所示： 首先，要在.wxml文件里面创建一个canvas，作用是承载压缩的图片，以供上传的时候获取 这个canvas不能隐藏，否则没效果，可以将其移至屏幕外。<canvas canvas-id=attendCanvasId class=myCanvas></canvas>然后呢，就是.js文件里面的方法了 // 点击加_压缩takePhoto: function () {var that = this;let imgViewList = that.data.imgViewList; //这个是用来承载页面循环展示图片的//拍照、从相册选择上传wx.choose...
项目中需要做数字滚动增加的效果，一开始很懵，研究了一下原理，发现很简单，贴出来分享一下 ^_^ 数字滚动组件： <template> <div class="number-grow-warp"><span ref="numberGrow" :data-time="time" class="number-grow" :data-value="value">0</span></div> </template> <script> export default {props: {time: {type: Number,default: 2},value: {type: Number,default: 720000}},methods: {numberGrow (ele) {let _this = t...
子组件： <template> <span :endTime="endTime" :callback="callback" :endText="endText"> <slot> {{content}} </slot> </span> </template> <script> export default { data(){ return { content: , } }, props:{ endTime:{ type: String, default : }, endText:{ type : String, default:已结束 }, callback : { type : Function, default : } }, mounted () { this.countdowm(this.endTime) }, methods: { countdowm(timesta...
写在前面：在做项目中，经常会用到显示当前日期这个功能，在此，记录下来，方便日后查阅。 先给大家展示下效果图：由于功能较简单，这里就直接将代码搬上来吧 <%--Created by IntelliJ IDEA.User: AdministratorDate: 2018/6/12Time: 8:17 --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <%String scheme = request.getScheme();String serverName = request.getServerName();String contextPath = requ...
element-ui 中验证 一、简单逻辑验证（直接使用rules） 实现思路 ?html中给el-form增加 :rules="rules" ?html中在el-form-item 中增加属性 prop="名称" ?js中直接在data中定义rules:{} ?html部分 <el-form ref="form" :rules="rules" :model="form" label-width="300px"><el-form-item label="发货地址：" prop="fAdderss"><el-input class="inp" v-model="form.fAdderss" auto-complete="true"></el-input><el-button type="prima...
要实现的效果如下：<template><div class="newsList"><div v-for="(items, index) in newsList"><div class="date">{{showDay(index)}}</div><div class="list" ><ul><li class="list-item" v-for="item in items"><span class="text">{{item.title}}</span><img :src="attachImageUrl(item.images[0])" class="image"/></li></ul></div></div><div class="infinite-scroll" v-show="loading"><svg class="loader-circular" viewBo...
template <template><div class=login><div class="loginHeader"><input type="tel" class="loginBtn border-bottom" placeholder="请输入手机号" /><input type="tel" class="codeBtn" placeholder="请输入验证码" /><input type="button" class="getNumber" v-model="codeMsg" @click="getCode" :disabled="codeDisabled" /></div></div> </template>script <script>export default {data() {return {// 是否禁用按钮codeDisable...
element-ui界面非常简洁和美观，提供的组件可以满足绝大多数的应用场景，当表格中显示了图片的缩略图时，想要鼠标浮动在缩略图上时放大图片的效果，该如何实现呢？element-ui虽然没有直接提供图片悬浮放大的组件，但是可以使用Popover弹出框组件，一样实现效果，如下：具体的代码（此处只是图片单元格的代码，其它代码省略）： <el-table-columnprop="picture"header-align="center"align="center"width="150px"label="图片"><temp...