随笔分类 - vue
记录vue mint-ui
摘要：用Nuxt构建，实现一个英文 / 西班牙 / 中文语言的网站，配合vue-i18n去解决切换语言的问题记录 1.安装vue-i18n npm install vue-i18n --save 2.新建locales文件，en-us.js / es-es.js / zh-cn.js ,分别对应 英文 /
阅读全文
摘要：因为项目需求完成一个大转盘抽奖，九宫格抽奖活动，所以推荐一个免费插件https://100px.net/ 1、首先安装插件 npm install vue-luck-draw 2、封装组件 <template> <div class="luckDraw"> <div class="box"> <Lu
阅读全文
摘要：Vue+element 实现表格导出xlsx格式 1、安装 npm install file-saver xlsx --save cnpm install file-saver xlsx --save //淘宝镜像 2、新建一个文件夹daochubiaoge放daochubiaoge.js impo
阅读全文
摘要：element ui 表格没有自带的拖拽排序的功能，只能借助第三方插件Sortablejs来实现,并实现禁止某列被拖拽，用了如下参数handle，filter，preventOnFilter，draggable，配置地址：http://www.sortablejs.com/options.html
阅读全文
摘要：在vue中使用天气插件 中国天气网站 https://cj.weather.com.cn/ 应用： <div id="weater"> <div id="weather-v2-plugin-standard" ref="weather"></div> <remote-script src="http
阅读全文
摘要：在vue创建项目的时候，如果你错误开启了eslint的校验，代码不规范就会有以下报错: 第一种方法：vue cli4项目中会有单独的一个eslintrc.js文件，这个js文件里面就是代码规范的配置项，你可以尝试注释掉'@vue/standard', 即关闭Eslint语法规范， // '@vue/
阅读全文
摘要：如图，最近在做Tabs切换，发现一进来渲染所有Tabs组件时页面卡慢，所以我选择用切换子路由的方式来按需加载子组件的内容 <template> <div> <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick
阅读全文
摘要：最近朋友问如何在vue项目中使用scss样式，想起之前项目是直接在main.js直接import css文件的，然而main.js不可以直接import scss文件。 src/assets/scss.scss 第一步：安装依赖 第二步：配置build/utils.js 发现项目报错：Module
阅读全文
摘要：<router-link></router-link>存在router-link-active属性，那么底部tabbar切换就简单多了。不会再出现刷新回到第一个的bug。
阅读全文
摘要：闲暇时间记录一下如何绑定域名，实现本地及手机调试的过程。我的是微信开发项目，很多功能及操作都是基于微信来开发的，理所当然的就用到微信开发者工具了。 1.首先打开目录C:\Windows\System32\drivers\etc,找到hosts文件，用sublime打开 2.接下来将自己的vue项目
阅读全文
摘要：今天记录一下简单的投票系统，主要实现选中至少五张作品，并提交投票。 思路：选中作品，将作品id存入到数组里。 取消投票，则从数组中移除该作品id。 如图效果：
阅读全文
摘要：由于项目的扩展，新增了很多功能，今天谈一下短信验证码框的实现。 思路：每个小方框其实就是单独的每一个input标签（叫假input标签），每个长度为1，然后上面再写一个大的input标签（叫真实input标签），提高层级定位在上方，最大长度为6，然后将上方真实input标签的值传给每一个单独的假in
阅读全文
摘要：vue微信分享 今天记录一下vue微信分享。 1.先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。这个不多说，见文档，只有绑定了才能进行下一步的动作 2.需要引入js文件 import wx from 'weixin-js-sdk' 3.通过config接口注入权限验证
阅读全文
摘要：今天想起一直没有记录父组件与子组件的传参问题，这在项目中一直用到。 父向子组件传参 Index.vue父组件中 componentA.vue子组件中 子向父组件传参 Index.vue父组件中 componentA.vue子组件中
阅读全文
摘要：HTML5 History模式 项目中我用的是history模式。 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。 如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pu
阅读全文
摘要：生产环境下的一些问题 使用webpack 打包前端应用后，图片和css、js 资源引用会出问题，这源于开发环境的目录和生产环境的路径【url】不同 比如，开发环境的url是：http://localhost:8080/static/img/122.png 而生产环境的url是：http://www.
阅读全文
摘要：闲暇时间，介绍一下我做一个聊天窗口的心得。如图： 首先要考虑的是得判断出是自己的信息还是对方发来的信息，给出如图的布局，切换不同的类。 或许你会看得一脸懵，根据接口拿到的信息，othername就是当前与你聊天的这个人，如果与send_from_id一致那么就是对方的信息，反之是你自己发的信息。 接
阅读全文
摘要：Mint-ui的复选框列表Checklist和Radio 由于我在main.js里已经引用了全部的组件了，这里就不再按需引入了。 一直想着如何将自己的数据添加到 label 和 value里面，后面发现可以用push的方式，如下图： <mt-checklist title="" align="rig
阅读全文
摘要：今天描述的问题估计会有很多人也遇到过。 vue-router多个路由地址绑定一个组件造成created不执行 也就是文档描述的，如下图 我的解决方案: vue之watch用法 项目中刚好也用到了需要检测某值是否发生了变化，获取最新的值。就分享一下 项目中还遇到了需要使用md5加密，分享一个不错的网址
阅读全文
摘要：微信支付 https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6 分享一下vue实现微信支付。在微信浏览器里面打开H5网页中执行JS调起支付。接口输入输出数据格式为JSON。注意：WeixinJSBridge内置对象在
阅读全文
