Vue
文章平均质量分 64
nicepainkiller
念念不忘 必有回响
展开
-
vue 自定义 文字背景
功能背景:有一个标题; 内容变化估计有20+种一般做法:切图也是团队中一部分的主张,切个几十个图也是可以的,但是呢 作为一名老司机,我想试试其他有 挑战的方式:并且以及上车:随着内容的 变化 长度变化;最麻烦的就是 凭借图形的过程!实际上这个背景图是被 分割了好几个块的,有点类似 小时候玩过的 七巧板( 看来小时候 七巧板 没白玩哈哈哈);代码如下: 代码并未整理 大家撮合着看,看看思路就行<template> <view ...原创 2022-04-26 15:33:07 · 2216 阅读 · 0 评论 -
js 动态添加 dom 节点添加动画
项目背景:uniapp h5应用,为了提示用户下载,这里有个 提示下载的dom, 本想来想在 每个 tabbar 中添加(一共添加四个);但是想 尝试换种玩法 如下: 效果如下:直接上代码:function showDownloadTisp() { console.log('--------------------------->showDownloadTisp') // #ifdef H5 const parent = document.querySelector(.原创 2021-08-17 17:10:04 · 2781 阅读 · 0 评论 -
vue 通信 总结
● 什么是 vue 的组件化:任何一个页面我们都可以抽象成 由一堆组件构成的一个 大组件树; 达到一个页面,小到一个按钮 都可以是一个组件,一个页面就是 有很多组件嵌套而成。这就是组件化● 组件化的 好处:复用性强 分工开发 代码好管理 耦合度低● vue 如何创建组件:1.全局组件; 直接在 Vue中声明,然后new Vue() 中都可以使用2.局部组件new Vue({ components:{ '组件名称' :对应的详情对象 ..原创 2021-07-29 10:02:33 · 188 阅读 · 0 评论 -
SCRIPT1002: 语法错误;vue cli4 siwper ie11
前言: 今天 用 vue 开发了 PC 一个静态官网; IE11 今天无法访问;"SCRIPT1002: 语法错误;chunk-vendors.js (1355,1)"上网百度下 说是要兼容 IE需要配置 babel; 但是呢又说 cli4 创建项目自带 babel;回想了下之前的静态页面;就多了个 swiper 组件;后来通过报错找到 错误代码 是一个叫 dom7 的地方 ;解决方法:在 vue.config.js(没有自己创建) 中添加配置module....原创 2021-07-14 19:29:37 · 1375 阅读 · 0 评论 -
vue cli4 浏览器前缀 自动补全
最近做一个 电脑端的 网页; 需要兼容浏览器; 不同浏览器 有不同的前缀;想想头都大! 还有脚手架为我们提供了 postcss-loader 和 autoprefixernpm install postcss-loader autoprefixer --save-dev项目使用 vue cli4 创建的;网上教程都是在 webpack.config.js 中进行配置! 然而我却找不到 webpack.config.js 文件....插件安装完毕之后 会有 browse...原创 2021-05-06 15:07:39 · 561 阅读 · 0 评论 -
uniapp|vue 中的 braintree 支付
参考文档: Braintree-国外支付对接(一) Braintree-国外支付对接(二)前面的两篇文章,有详细介绍了 Braintress 的账号创建;以及 SandBox 测试账号的 详细流程;我们这边项目刚好 要用到 Braintree 支付; 但是需要的是 自定义的 UI Customer UI; 项目主体 是 uniapp; (vue项目)这边的服务器 使用 .net core webapi 创建的 ; 下载地址这一步骤主要用...原创 2021-04-14 09:54:38 · 781 阅读 · 0 评论 -
Uniapp 实现 与 外部 HTML 页面通信
Uniapp 实现 与 外部 HTML 页面通信上节知识在 uniapp 中 经常会 内嵌 html, 并且 有时候会还有 相互通信 的需求 :这里 总结了 两种形式 APP 中 nvue 使用 web-view 实现html 通信; H5 中 vue 使用 iframe...原创 2020-02-24 17:59:30 · 15880 阅读 · 11 评论 -
uniapp vue 和 html 页面通信
uniapp vue 和 html 页面通信https://uniapp.dcloud.io/component/web-view这是 官网解释, 想必大家也遇到了吧. uniapp web-view 通过uni.postMessage({ data: { ...原创 2020-01-13 16:38:18 · 8248 阅读 · 8 评论 -
uniapp vue nvue 模态框遮罩
uniapp vue nvue 模态框遮罩以前 纯 Vue 开发的时候:模态框遮罩就是这么写的.popBack{ position: fixed; top: 0; left: 0; z-index: 999; width: 100%; ...原创 2020-01-09 13:58:26 · 5950 阅读 · 5 评论 -
vue 实现日历功能
vue 实现日历功能说起日历功能,及得以前实现过一次 (C# unity)但是呢 没有记录过程,今天突然又要做一个。所以重新又来一次。 前车之鉴 这次记录下其实就是一个 6行7列 的 一个个 格子,只要知道 每月的总天数 每月一号是星期几 就可...原创 2020-01-08 17:47:01 · 1809 阅读 · 0 评论 -
Vue Class 与 style 动态绑定
Vue Class 与 style 动态绑定出自:https://learning.dcloud.io/#/?vid=7Class 属性的动态绑定1, 对象形式绑定<!DOCTYPE html><html> <head> <meta ...原创 2019-12-09 17:22:59 · 279 阅读 · 0 评论 -
Vue 后期周边学习计划
Vue 后期周边学习计划: 本来是做U3D 客户端开发的,最近从外包团队 接回来一个Vue项目, 以前对 Web 全段几乎没有接触。 通过15天的 Vue学习 开始上手修改Bug. 优化底层的框架。 通过小半年的使用的不断学习,发现 VUE 还不错,做轻度应用的时候 搭配 Hbuilder 表现得还不做. 一套代码 可以三端跑 (WEb,Android,IOS )...原创 2019-08-09 17:13:06 · 359 阅读 · 0 评论 -
Vue input 组件 IOS 设置需要双击 或者 长按 才能获得焦点
Vue input 组件 IOS 设置需要双击 或者 长按 才能获得焦点最近在做 Vue 聊天的时候发现 IOS 端 Input 输入 文字的时候 需要长按 或者 双击 才起 获取焦点,fouse百度之后发现 修改 node_module 里找到 fastClick.js 就能解决...原创 2019-08-09 14:47:33 · 1956 阅读 · 1 评论 -
JS VUE 全局的事件总线
JS VUE 全局的事件总线1: 在 VUE 中各个组件相互调用,可以使用 基于 VUE 的事件总线第一种写法:独立的 .js 文件 比如 eventbus.js, 然后在别的 vue 或者 js 中引用import Vue from 'vue'export cons...原创 2019-07-23 13:47:04 · 2050 阅读 · 0 评论 -
vuex store使用总结 4 (mapState ;mapGetters; mapActions; mapMutations 的 模块化 使用)
vuex store使用总结 4 (mapState ;mapGetters; mapActions; mapMutations 的 模块化 使用)vuex store使用总结 1 ( 简单使用 )vuex store使用总结 2 ( 功能化的使用 )vuex store使用总结 3 (模块化的使用 )请先翻看前 两节 再看这里的内容:这个是我 store 文件夹的结构 分...原创 2019-07-25 11:29:36 · 3541 阅读 · 0 评论 -
Hbuilder (H5+) plus.webview 预加载
Hbuilder (H5+) plus.webview 预加载plus.webview.create 经常会用到 webview 来显示 Web网页,但是有时候 会出现白屏, 而且有些低端机器 时间还挺长。这个时候就需要用到预加载。应为 我们要用的 plus.webview 创建完毕, 关闭不同 ...原创 2019-07-17 17:44:36 · 10432 阅读 · 1 评论 -
vue iframe 内嵌网页
项目有个需求,打开一个资讯 并且可以把当前 资讯页面通过微信或者QQ 分享 给别人。能分享给别人 这个页面必然是一个 独立的 html url 页面。 别人才能通过分享打开所以呢 这个我们需要把这个页面 潜入到 vue。 既能在VUE里面打开, 也能通过 url 分享给别人使用 <div class="content" style="position: ab...原创 2019-06-28 15:46:59 · 9554 阅读 · 14 评论 -
vue plus.webview 实现 类似微信右上角 关闭小程序
vue plus.webview 实现 类似微信右上角 关闭小程序用过微信的人相信都知道 (左图) 我实现的效果(右图)大概总结了下, 一共有两种方案,方案一:保留 plus.webview 的 titleNView 然后设置 titleNView属性 显示 图片按钮titleNView属性 ...原创 2019-04-03 16:52:41 · 3004 阅读 · 0 评论 -
Vue 裁切图片
项目需求做一个 身份证的 裁切功能,原生开发的话 这种功能 挺容易实现的Web的没有做过相关功能,百度了一下 vue-cropper 在 VUE是使用还是蛮方便的1>,安装 vue-croppernpm install vue-cropper2>,编写 .VUE 文件cropper.vue 应为项目本身使用 mui<template>...原创 2019-04-19 17:13:55 · 877 阅读 · 0 评论 -
VUE mint-ui indicator 被遮挡的问题
刚开始有个现象:在使用 indicator 的时候 有可能会被 别的层级遮挡而 toast 却不会 看了下他的源码对比发现 toast 有设置 z-index 而indicator 却没有 那么思路来了在 index.html 中直加上这两句话 .mint-indicator-wrapper { z-index: 1000 !important...原创 2019-04-19 19:02:47 · 4747 阅读 · 3 评论 -
vue 调用微信分享接口 分享截图图片
vue 调用微信分享接口 分享截图图片 现在好多应用 都需要分享 图片等等的需求 。 大体需要 这几个步骤获取分享图片 将获取图片写入本地文件 调用分享接口 分享已经写好的本地图片因为我这边 需要分享的图片实际是在 mui-slider 里面,为了分享的图片清澈(不包含UI)我特意讲Slider 独立出...原创 2019-05-09 11:48:29 · 4679 阅读 · 7 评论 -
.mui-progressbar 切换页面的 not a function
.mui-progressbar 切换页面的 not a function在 项目中 有用到 .mui-progressbar 但是在切换页面的时候 经常报错, 刚开始以为是在切换页面的时候造成 progressbar 为null但是经过几次测试 发现并不是这个原因这里我们将 progressbar 打印出来看下...原创 2019-05-06 18:30:19 · 770 阅读 · 0 评论 -
H5+ Hbuilder 状态栏设置颜色
if (this.isJudge) {//如果是H5+ if (this.currentItem == 11) { //朋友 plus.navigator.setStatusBarStyle('dark'); } else { plus.navigator.setStatusBarStyle('light'); } }设置...原创 2019-03-15 23:52:55 · 7020 阅读 · 2 评论 -
Hbuilder X 版本更新 (热更资源以及安装APK)
Hbuilder X 版本更新 (热更资源以及安装APK)先看下我的服务器配置文件: 是个txt 的JSon 文件之所以这么配置 是应为 有时候 需要版本共存的缘故, 比方说提审等等服务器用的 IIS 的 .因为有 .wgt 和 .apk 文件大家记得 自己添加Index.h...原创 2019-03-07 17:55:29 · 5930 阅读 · 0 评论 -
vue 动画 Velocity 动画的使用
参照了几种 实现动画的方式 还是感觉 velocity-animate 好一些https://cn.vuejs.org/v2/guide/transitions.html在 vue 中怎么安装 velocity 大家自行百度下但是 对比效果发现需要实现 底边向上推起来的一个效果transition<transition @before-e...原创 2019-05-10 14:40:26 · 1213 阅读 · 0 评论 -
vuex store使用总结 1 ( 简单使用 )
vuex 的使用总结 1 ( 简单场景应用 )https://vuex.vuejs.org/zh/前言: 大家在写代码的时候 有没有遇到 数据共享传递 或者 多个界面 共享数据的情况。 vue 本身特性 导致了它 数据传递非常繁琐。 而且对于 兄弟组件之间的 数据交互 无能为利...原创 2019-05-22 11:17:18 · 3244 阅读 · 0 评论 -
vuex store使用总结 2 ( 功能化的使用 )
vuex store使用总结 2 ( 功能化的使用 )vuex store使用总结 1 已经介绍了 vuex 的 一些基本的使用方式,但是仅仅停留在了 认识的层面,在实际生产过程中不可能 只有一个脚本记录 整个项目的 所以数据,接下里我们将 vuex store 中的数据进行优化 进行拆分我们在 store文...原创 2019-05-22 12:02:29 · 2091 阅读 · 0 评论 -
vuex store使用总结 3 (模块化的使用 )
vuex store使用总结 3 (模块化的使用 )vuex store使用总结 1 ( 简单使用 )vuex store使用总结 2 ( 功能化的使用 )请先翻看前 两节 再看这里的内容https://vuex.vuejs.org/zh/guide/modules.html由于使用单一状态树,应用的所...原创 2019-05-22 14:01:12 · 4838 阅读 · 0 评论 -
Vue 引入 mui 组件
由于 我们发的项目 主要是在 移动设备上跑的,为了达到更好的体验 我们将使用 mui 来实现 更接近原生的体验我在集成的时候遇到的坑 在这里和大家一起分享下首先我创建了一个static 文件夹。这个文件夹是用在存在第三方库的一个文件夹。然后我们引入 mui 组件 .js , 以及对应的 .css应为我这边额外 需要 一个 dtpicker 组件所以我引入了 周边的 js...原创 2019-05-27 15:25:21 · 7766 阅读 · 4 评论 -
Vue 复制内容到系统剪切板
Vue 复制内容到系统剪切板板在具体生产环境中,经常会遇到将内容复制到剪切板的 使用情况。由于我们项目是 h5+ 的项目。会打包成App;有时候在网页版中使用该功能是OK的,但是 发布成APP 在 IOS中功能就不好使了。在这里我们 将 复制到剪切板 功能 细分为 在Web中 和APP中两种情况来...原创 2019-05-29 11:32:53 · 1552 阅读 · 0 评论 -
vue svg 进度条的实现
官方文档:https://chenxuan0000.github.io/component-document/index_prod.html#/component/svg-bar-default安装使用:https://www.npmjs.com/package/svg-progress-barnpm install svg-progress-bar --saveVue 中 ...原创 2019-06-28 15:37:05 · 1269 阅读 · 0 评论 -
vue mui mui-scroll 横向 滑动嵌套
vue mui mui-scroll 横向 滑动嵌套页面主要 有三个部分的滑动顶端是一个 "mui-slider" 然后是一个 横向 的 "mui-scroll-wrapper" 然后是一个整体的 的 纵向 "mui-scroll-wrapper"顶端的 "mui-slider" ...原创 2019-04-02 11:32:47 · 1936 阅读 · 0 评论