设计思路流程图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...