Vue+WebPack+HBuilder 项目记录 项目搭建完毕了，但是由于是单页应用嵌入HBuilder的时候无法利用它的转场动画，于是找到了vue的转场动画写法，使体验与APP靠近，在此记录； 1.首先我们要监听路由然后判断其是前进还是后退，来实现不同的动画 export default {name: app,data () {return {transitionName: slide-left}},watch: {$route (to, from) {const toDepth = to.path.split(/).lengthconst fromDepth = from.path.split(/).l...
导航守卫 导航守卫即是在路由跳转的时候，根据vue-router提供的导航守卫主要用来通过跳转或取消参数或查询的改变并不会出触发进入/离开的导航守卫 路由跳转前做一些验证，比如登录验证，是网站中的普遍需求。 对此，vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫（navigation-guards）。 导航守卫（navigation-guards）这个名字，听起来怪怪的，但既然官方文档是这样翻译的，就姑且这么叫吧。 贴上文档地址：https:/...
最近项目需要到vue开发单页面，所以就研究一下表单数据的回显，验证及提交如何用vue组件的方式实现。代码如下： <template><div class="index"><!--header-bar></header-bar--><div style="margin:20px;"><div class="item"><p>住户名称:</p><p><input type="text" value="username" v-model="formStatus.username" placeholder="输入名称"></p></div><div class="item"><p>住户类型:</p><p><label v-for="(item, index) in zhuhuT...
效果：代码： <div id="app2"><label>幼儿园入学年龄（3～6）：</label><input type="number" v-model="child.age"> <button @click="older"> + </button> <button @click="younger"> - </button><p v-show="hasErr">{{ errMsg }}</p> </div> <script>var app = new Vue({el:"#app2",data:{child:{age:2},hasErr:false,errMsg:""},methods:{older:function () {this.child.age ++;},younger:function () {this.child.age --;},hide...
1.首先引入 import { Toast } from vant写个小列子 绑定一个click事件2.写事件 在methods写方法 showToast() {this.$toast({message: "今日签到+3",})},3.效果图如下一个简单的toast提示成就好了 下面通过实例代码看下vue 中使用 Toast弹框 import { ToastPlugin,ConfirmPlugin,AlertPlugin} from vux Vue.use(ToastPlugin) Vue.use(ConfirmPlugin) Vue.use(AlertPlugin) //公用的弹窗(全局变量) Vue.prototype.showToast = functi...
写了两三天，终于把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...
饿了么的五角星有三种形状,分别是实星,半星,空星并且组件要能实现,这个五角星不同大小,评分也不一样,比如满分五颗星,四颗半星,四颗星等等.... 所以需要像组件传入一个大小:size,一个分数:score 代码如下: <template><div class="star" :class="starType"><span class="star-item" :class="itemClass" v-for="itemClass in itemClasses"></span></div></template><script type="text/ecmascript-6">const LENGTH=5;const CLS_ON="on...
需求是商品只能选一次,有原价和现价. 大概的效果图是这样:完整代码在这里,直接复制就能用: <!DOCTYPE html> <html lang="zh"> <head><meta charset="UTF-8"><title>Document</title><style type="text/css">html{background: rgb(214,175,209);}/*计算器*/#app{text-align: center;margin-top: 8%;position: relative;}.goods_box{width: 70vw;margin-left:15vw;height: auto;margin-top: 5%;}.goods_box ul{width: 100%;overflow:...
具体代码如下所示； SecondToDate: function(msd) { var time =msd if (null != time && "" != time) { if (time > 60 && time < 60 * 60) { time = parseInt(time / 60.0) + "分钟" + parseInt((parseFloat(time / 60.0) - parseInt(time / 60.0)) * 60) + "秒"; } else if (time >= 60 * 60 && time < 60 * 60 * 24) { time = parseInt(time / 3600.0) + "小时" + parseInt((parseFloat(time / 3600.0) - parseInt(time / 3600.0...
1.静态效果图Chrom移动端浏览模式下可拖动按钮处于任意位置，并且点击可旋转按钮 2.代码 <template><div id="app"><div class="icon-add-50" :style="iconstyle" @click=click @touchmove=touchmove @touchstart=touchstart(this,$event) @touchend=touchend></div></div> </template> <script> export default {name: App,data(){return{/*--------图标样式变量--------------*/iconrotate:45,//旋转degicontranslateX:100,//沿x轴...
vue使用echarts制作圆环图，代码如下所示： <div id="main"></div> <script type="text/ecmascript-6">export default {//从父组件中接收到的数据props:{chartT:{type:Object,required:true}},data () {return {charts: ,totalIncome:,opinionData: [{value: Math.abs(this.chartT.imp_rate)},//取绝对值{value: 100}]}},methods: {drawPie (id) {this.charts = this.$echarts.init(document.getElementById(id));this.charts.setO...
由于是上线的项目且已经按照数据逻辑去渲染了能看懂的看逻辑吧。有点多 效果如图<template><div class="lottery-management-wrapper"><ul><li class="lottery-management-list-wrapper"><div class="lottery-management-list" v-for="(item , index) in activityListData"><div class="lottery-management-list-left" @click="detailOfTheActivity(item)"><dl><dd><h3>{{item.activityName}}</h3><p>活动时间：{{item.beginTime}}至...
Vue 实现组件信息的缓存 当我们在开发vue的项目过程中，避免不了在路由切换到其他的component再返回后该组件数据会重新加载，处理这种情况我们就需要用到keep-alive来缓存vue的组件信息，使其不再重新加载。 一、在app.vue里 <keep-alive><router-view></router-view> </keep-alive>但是这种情况会对所有的组件进行缓存，不能达到单个组件缓存的效果。 那么我们给部分组件加上，实现方法如下： 在app.vue <!--这里是需要keepalive的...
最近在vue项目中遇到需要用树形控件的部分，比如导航目录是不确定的，所以必须要用树形结构，不管导航目录有几级，都可以自动显示出来，我一开始觉得element-ui有树形控件，不需要自己写，调用就可以了，后来才发现，调用完事之后，样式不可控，而且要加东西特别困难，无法满足项目需求，于是，一首《凉凉》送给自己，后来去翻vue官网，发现居然有递归组件，一开始我写了两个组件，互相调用，可以写出来，后来返现，如果项目要用到...
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...