qq_26780317的博客

前言：vue-preview是一个非常好用的移动端图片预览组件，简单易用，支持滑动换图，支持手势缩放，显示当前第几张和总共几张。一、安装到项目中npm i vue-preview -S注：vue-preview版本号：^1.1.3二、在main.js文件中导入该组件，并挂载到Vue身上import VuePreview from 'vue-preview';Vue.use(VuePreview);三、在自己的组件中使用它<div class="picBox"> <v

前言：在一些网站经常可以看到切换语言包，将网站转化成多种语言版本的情况。最近项目中，也涉及到项目语言国际化的需求，在此记录一下。一、实现思路web项目多语言(i18n，即国际化)是比较常见的需求，常规的做法大概有以下几种：1.每种语言单独开发页面，适用于CMS之类的网站；2.多语言文本和页面结构分离，运行时动态替换，适用于单页应用(SPA);3.直接用网页翻译插件，机器翻译。这种效果不太理想，同时也有一些局限性。各个方案遇到的问题：1.现在网上比较通用的，就是使用vue-i18n插件。这个插件

前言：在JavaScript中需要通过document.querySelector('#demo')来获取dom节点，然后，再获取这个节点的值。在vue中，我们不用获取dom节点，元素绑定ref之后，直接通过this.$refs即可调用，这样可以减少获取dom节点的消耗。一、介绍 ref有三种用法： ①ref加在普通的元素上，用this.ref.name获取到的是dom元素； ②ref加在子组件上，用this.ref.name获取到的是组件实例，可以使用组...

背景：由于项目需要，没有应用vue提供的<transition>动画，使用了css3动画，但是出现了在ios环境下动画能运行，但是在android环境动画不能运行的情况。一、css相关代码@keyframes circle_right{ 0%{ -webkit-transform: rotate(-135deg); } 50%,100%{ -webkit-transform: rotate(45deg); }}@key

<div class="div-product-footer" style="position:absolute;bottom:0;width:100%;height:50px;"> <div ng-show="step==0" style="display:inline-flex;width:100%;height:100%;"> <div class="div-foot-btn-group" style="height:50px;"> .

背景：在项目中，我们经常会遇到使用验证码的场景，有时候，我们会使用js的插件解决这个问题，有时候，会调用后台接口，根据后台返回的4个数字生成验证码。本文，我们将介绍后面一种方法。一、html部分<div class="policy-wire"> <div class="policy-line flex_bt"> <div class="flex_st yzmLabel"> <label class="yzmL

背景：在项目中，我们有时候，经常会使用倒计时的功能，这次，我们来制作一个关于短信验证码倒计时的功能。一、页面结构，然后，绑定点击事件<div class="div-cell"> <div class="line-cell"> <label class="weui-label">短信验证码</label> </div> <div class="line-cell-bd">

背景：在前后端分离开发的项目中，一般会有开发环境、测试环境、预上线环境和生产环境。1.在开发环境下调试接口的时候，一般都会有好几个接口地址，需要根据情况手动来切换接口地址；2.打包时要部署项目到不同的环境，而这也需要每次都根据情况切换接口地址。 虽然，手动切换地址可以满足需求，但是这种方式不是一种较为便捷的处理方式。我们可以选择一种较为方便的方式来解决这个问题。...

背景：在vue项目中，我们经常会使用UI组件，有时，我们需要在UI组件中，进行自定义的图标显示。相关情况如下图所示： 点击选择银行，触发选择开户行组件，各个银行列表前，添加自定义的图标，点击任意一个银行列表显示在付款银行列表栏。一、相关页面结构<!--付款银行栏--><div class="div-cell" @click="showBank()"> <div class="line-cell2 cl...

前言：在vue项目中使用jquery插件，需要引入jquery。在无任何配置的情况下，直接引入会报错，具体报错如下所示：一、考虑jquery的引入方式，更改js打包路径 然后，在webpack.dev.conf.js和webpack.prod.conf.js中更改打包的路径： 然后，打包完以后的文件可以在dist文件夹中查看，具体情况如下所示：...

前言：在有些场景下，我们需要把原本img的点击事件，给禁止掉，变成不可点击事件。一、html部分，给img添加class属性 通过三目运算符动态添加img的属性<img src="@assets/images/unRead.png" @click="showDtpicker()" :class="calendarFlag == true?'img-onlyRead':''" /> 关键控制div、img是否可以点击的属性是： pointe...

前言：在使用mint-ui的弹框时，滚动弹框内部分区域，会导致页面滚动。使用datetime picker时，只有ios会出现这个问题；而picker在安卓和ios上都有这个问题。一、解决办法 解决思路：弹出层打开时禁止body的滚动事件，弹出层关闭时回复body的滚动事件。//vue数据变量区data(){/*----------监听函数---------*/ handler:function(e){ e.preventDefault() }...

前言：有时候，在项目中，我们经常需要设置简单的倒计时功能，这个可以通过定时器来实现。一、设置div显示倒计时数字<div class="countCircle"> <span>{{countdown}}</span></div>二、JS中设置方法export default{ data(){ countdown:'5', timer: null, }, methods:{

前言：在vue项目中，子组件是一个弹框，需要在父组件中显示此弹框,其弹框内容来自于父组件。父子组件之间的传值通过props来实现。 A为父组件页面，B为子组件页面。其中父组件页面调用子组件，v-bind绑定要传递的值chargePeriodArr。 A页面设置如下： 而chargePeriodArr是动态的，有一个地方给它赋值。 子组件B页面props接收父组件传过来的数据：子组件接受父组件的值分为--引用类型和普通类型两种；...

https://www.jianshu.com/p/7c3f52f640abhttps://www.jianshu.com/p/36b47d63cdb1https://www.cnblogs.com/linxue/p/9647739.html

有时候，我们在vue项目中，需要处理base64图片的显示：<img :src="'data:image/png;base64,'+imgurl" alt=""> <script>new Vue({ data:{ imgurl:"base64路径" }})</script>

前言：复现bug现象，在ios系统中，input输入框唤出键盘后，键盘消失页面却不回弹，安卓手机无此现象。一、现象图片如下所示：用户输入完姓名和性别后，键盘回弹时，留下空白区域。二、解决方案...

前言：在实际项目中，我们有时会遇到需要显示当前时间的问题，这样可以和数据实时显示相结合，使数据能够比较直观的显示出来。一、html部分<div class="nowDate">更新至当日{{gettime}}时</div>二、script部分<script>export default {created(){//触发定时器，创建当前时间...

前言：在实际的项目中，有时会遇到将data中返回的数据进行累计求和返显。这时，我们就可以使用forEach()方法进行处理。forEach的定义和方法：forEach()方法用于调用数组的每个元素，并将元素传递给回调函数。注意：forEach()对于空数组是不会执行回调函数的。一、html部分<div class="tab-content"> <ta...

前言：平常，我们游览网站的时候，经常会看见tab标签的切换效果，tab切换效果在前端UI框架中也是很常见的。这次，我们在vue项目中，实现一下这个tab切换效果。 tab的切换，一般是点击上方的标题，下方的内容块随之切换，上方的标题栏和下方的内容块是并列的关系，通过标签一一对应，点击相对应的标签id，来实现对应tab的切换。一、HTML结构 tab切换第一...

[收藏]VUE优秀UI组件库合集(来源于https://shimo.im/doc/LkpdnWxM1j40BDJj/)前言：vue作为一款深受广大群众以及尤大崇拜者的喜欢，特此列出在github上开源的vue优秀的UI组件库供大家参考，期待开发者们推出更多优秀的组件库。一、相关框架介绍                                        ---------...