- 博客(28)
- 收藏
- 关注
RSS订阅原创 vue-cli2使用monaco-editor + 报错处理
一、安装依赖cnpm install monaco-editor -Scnpm install monaco-editor-webpack-plugin -S二、具体使用步骤下载完依赖，首先需要在config/index.js文件下进行配置const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');module.exports = { plugins: [ new MonacoWebpackPl
2020-11-19 11:58:01
8258
8
原创 vue 如何在组件里使用import的工具函数
1.例如：在a.vue组件里引用下面的工具函数import * as util from '@/utils/validate'2.然后就直接在template里使用<p>{{ util.renderHeaderInfo }}</p>3.这时候就会直接出现vue warn解决方法：直接在main.js 里引入工具函数，挂载在vue上main.jsimport * as util from '@/utils/validate'Vue.prototype.$util
2020-11-17 16:10:26
2253
1
原创 炫酷的css loading动画效果
废话不多说，直接上码源，需要的拿到不谢<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css-loading</title> <style>
2020-09-20 14:03:58
286
原创 Vue 为单页面提速----- 性能优化
开发方面：一，路由懒加载当打包构建应用时，所有的js 代码会打包到一个js文件里，会影响到页面加载，可能会导致首页白屏的情况，用户体验感超级差解决方法如下：将不同的路由对应的组件拆分成不同的代码块，只有当路由被访问时才会加载对应的组件（即让路由延迟加载）const HelloWorld= () => import(/* webpackChunkName: "HelloWorld" */'@/views/helloWorld.vue') // 引入组件//在路由里使用HellowWorl
2020-09-18 10:15:34
773
原创 vue工程 --- 动态改变窗口的标题（vue-wechat-title的使用）
安装npm i vue-wechat-title --save引用在main.js里进行全局引用import vueWechatTitle from 'vue-wechat-title'Vue.use(vueWechatTitle)使用前景：一般是进入到一个详情页，通过请求接口数据来动态改变窗口的标题title,这时只需要如下设置就可以了<div class="wrapper" v-wechat-title="$route.meta.title = title"></d
2020-09-10 19:48:14
312
原创 node从8.x 升级到12.x之后，vue工程报错了该怎么处理呢？
一、node 版本更新之后再次运行vue 项目时报错报错信息大概是Node Sass could not find a binding for your current environment: Windows 64-bit with Node.js 12.xFound bindings for the following environments: - Windows 64-bit with Node.js 8.x - Windows 64-bit with Node.js 12.xThi
2020-08-25 20:14:49
517
原创 vue 模拟视频进度条组件（可支持点击，拖拽）
videoProgress.vue<template> <div ref="progressWrapper" class="video-progress" @click="onTrackClick" @mousemove="mouseMove"> <div class="video-progress-track" :style="{ 'width': progress + '%'}">
2020-08-15 16:09:11
2046
3
原创 数组之乱序
随机排序-前景：随机打乱数组里元素的顺序 function shuffle(arr) { for (let i = arr.length; i > 0; i--) { let j = Math.floor(Math.random() * i); [arr[i - 1], arr[j]] = [arr[j], arr[i - 1]] } return arr;
2020-08-15 15:51:38
307
原创 egret 好用的工具类
egret 工具类class GameUtil { /** * 根据name关键字创建一个Bitmap对象。name属性请参考resources/resource.json配置文件的内容。 * Create a Bitmap object according to name keyword.As for the property of name please refer to the configuration file of resources/resource.json.
2020-07-21 19:43:15
287
原创 vue 封装Form表单组件
- 前景在项目中很常见的交互：回显表单信息 + 验证表单 + 提交表单信息,而表单的类型也有很多（复选框，单选框，下拉框，输入框，文本框等等等）如果多个页面都有表单验证的交互且表单的内容不一样，难道我们就要去写多个表单组件吗？？？那该怎么办呢？？？？- 作用根据element-ui 的Form表单组件，写了一个公共的组件，可以满足大多数的表单类型的验证，做的这个组件主要是以弹窗的形式在页面上展示主要的功能：-显示弹窗（根据传入的数据来决定来显示表单）-验证表单信息-提交表单信息- 具体代码
2020-07-07 20:17:09
7240
4
原创 string api: 查看对应的字符串，返回Boolean
startsWith()作用：用来判断当前字符串是否以另外一个给定的字符串开头，并根据判断结果返回true / false语法： str.startsWith(searching, position)参数说明：searching要搜索的子字符串position可选 在str中搜索searching的开始位置，默认值为0，也就是字符串的开头位置注意： position < 0, 默认值为0，从字符串的开头位置开始查找 position > str.length，直接返回false
2020-06-16 19:46:54
299
原创 egret.EventDispatcher(自定义事件的派发与侦听)
一、作用EventDispatcher是egret 的事件派发器类，负责进行过事件的发送和侦听。二、用法EventManager.tsclass EventManager extends egret.EventDispatcher { private static _instance: any; public constructor(target:egret.IEventDispatcher = null) { super(target); } private stati
2020-06-09 15:22:16
1058
2
原创 egret 踩坑日记
1. 页面失去焦点时游戏画面暂停了在Main.ts 里找到如下图所以的代码注释就好了 egret.lifecycle.onPause = () => { egret.ticker.pause(); }2.如何画虚线const drawLine = new egret.Shape();this.addChild(drawLine);// 关键代码开始drawLine....
2020-05-07 20:21:29
644
原创 ts 类与类之间的数据传递
main.tsclass Main { const menu = new Menu(); const draw = new Draw(); // 类的相互引用 menu.setDraw(draw); draw.setMenu(menu);}Menu.ts private draw: Draw; public setDraw(draw: Draw): void { th...
2020-05-07 20:11:18
1377
1
原创 egret 不规则图片涂色，怎么处理呢？
一 游戏的前景交互功能：1.拖拽涂色（在花瓣上按下才可以涂色）2.在指定的花瓣区域内按下才可以涂色，并且不能涂到其他花瓣区域内二 游戏的技术点1.按下鼠标在某一个花瓣内涂色时（就只能在当前区域内涂色），即使移动鼠标到别的区域时，也不会影响到其他区域的颜色要划分要对应的区域把花瓣的svg 转换成对应的坐标 svg转坐标在egret里用egret.Shape根据坐标连线成一个封闭...
2020-05-07 19:56:46
841
4
原创 改写radio 样式
html<div class="select-icon-wrapper"> <input :id="element-id" v-model="selectRadio" type="radio" :value="element-id" /> <label :for="element-id"></label></div>...
2020-01-03 10:22:24
210
原创 react 学习记录（一）
一、react 特点JSX语法1.JSX 即javascript XML,它是对javascript语法扩展。优点：1.快，执行速度更快，因为它在编译为javascript 代码后进行了优化。2.可以使用熟悉的语法仿照HTML来定义虚拟DOM。从而编写模块更加简单快速 ReactDom.render( <div> <h1>{ 2+2 }</h1...
2019-12-24 21:18:38
123
原创 vue-cli3 配置多页面
1.介绍使用vue-cli3之后，会发现之前的配置文件都不见了，应该怎么配置呢？可以在与package.json文件同级目录下新建vue.config.js文件，这是一个可选文件，如果存在就会被@vue/cli-service自动加载。vue.config.js文件的格式如下：module.exports = { //选项}2.多页面的配置vue.config.jsmodule....
2019-10-14 14:48:56
437
原创 webapck1.14升级到3.6踩坑
一、升级原因：webpack版本太低，导致有些依赖文件无法安装（安装了eslint没有生效）二、升级的步骤：1.通过命令行搭建vue-cli，起一个vue项目2.首先根据原来的package.json 来下载一些依赖到现在新项目的package.json里，把原来的src文件复制到新的项目里3.运行项目，会发现有很多报错，开始一个一个处理缺少依赖包，通过tnpm insta...
2019-07-08 16:33:13
311
原创 国际化的vue-i18n
1.下载cookie2.下载i18nnpm install i18n --save3.配置以及使用常常一个项目中，我会以下列的结构来配置语言包:import Vue from 'vue'import VueI18n from 'vue-i18n'import cookie from 'cookie'Vue.use(VueI18n)const localeCookie = ...
2019-07-08 16:15:28
143
原创 vue tree组件的实现
递归组件一个简单的递归组件如下例所示：tree.vue<template> <ul class="child-node"> <li class="vue-tree-item" v-for="(item, index) in treeDataList" :key="index"> <div class="...
2019-07-08 15:48:28
2021
1
原创 js多种方法实现点击空白处关闭面板
1. v-click-outside作用：当鼠标点击了指令所绑定元素的外部时，就会触发绑定方法Installnpm install --save v-click-outsideUseimport vClickOutside from 'v-click-outside'Vue.use(vClickOutside)<template> <p v-click-out...
2019-07-05 17:44:26
2776
原创 cropperjs上传头像组件
avatar.vue<template> <div class="user-head-portrait" :class="{'chang-en': $i18n.locale === 'en'}"> <span class="head">{{$t("m.user['头像']")}}</span> <div...
2019-07-04 16:16:42
403
原创 解决Vue-markdown编辑器加入xss之后，code标签里的代码块会被转义的问题
mavonEditor一、简单的介绍一下关于vue-markdown的使用安装 npm install mavon-editor --save引入（在main.js中全局引入）import Vue from 'vue'import mavonEditor from 'mavon-editor'import 'mavon-editor/dist/css/index.css';...
2019-07-04 15:32:59
2539
原创 __webpack_public_path__动态配置路径
问题： 前端采用的是vue + webpack,项目部署时会动态配置一个相对路径，页面的js，css,img都是通过这种方式引入，但是publicPath是写死的（并没有根据后台传入的url动态去匹配）就会导致页面引用的js，css，img报404的错误OutputOutput用于配置打包输出的文件，包括输出文件的文件名、输出路径、静态资源Eg:Module.exports = {Fil...
2019-05-15 20:01:34
10443
原创 webpack分环境打包 + 踩坑
webpack打包一、分环境打包步骤如下：1.在package.json里要配置不同的环境变量注意：Build-test/bulid-product 与build写成一样的就可以了NODE_ENV需要改成不同的环境变量，方便在打包的时候获取到，从而根据不同的环境进行打包cross-env：解决跨平台设置NODE-ENVDE的问题2.在webpack.base.conf.js的o...
2019-05-13 22:06:17
920
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人