- 博客(26)
- 收藏
- 关注
RSS订阅原创 webpack5 图片、字体打包等问题
1.图片{ test: /\.(png|jpg|gif)$/, type: 'asset/resource', // (webpack 5) // (webpack 4) // loader: 'url-loader', // options: { // limit: 10 * 1024, // esModule: false, // }},2.字体{ test: /\.(woff|woff2|eot|ttf|otf)$/, type: 'asset
2021-09-03 23:38:48
528
1
原创 flex 宽度自适应，文本溢出隐藏方法
flex 宽度自适应，文本溢出隐藏方法<div class="out"> <div class="left"> 我是图片 </div> <div class="right"> <p>我是文字我是文字我是文字我是文字</p> <div></div>.out { display: flex; width: 200px;}.left { flex-shrink: 0; width:
2021-07-14 21:40:35
4257
原创 nuxt 使用中国地区数据
nuxt 使用地区数据1、安装依赖yarn add china-area-data lodash-es2、创建 area.js/* 来源于 element-china-area-data/src/app.js *//** * 地区数据 */import REGION_DATA from 'china-area-data'import cloneDeep from 'lodash/cloneDeep'// import { cloneDeep } from 'lodash-es'//
2021-07-02 21:46:28
525
2
原创 js文件下载到本地方法总结
js文件下载到本地1、window.location.href// 有些火狐版本不支持window.location.href = url2、window.open// 无法下载图片 文本等window.open(url) 3、创建 a 链接// 获取后缀名 /\.(\w+)$/let aHtml = document.createElement('a')aHtml.href = urlaHtml.download = ''document.querySelector('body
2021-05-10 21:38:48
3893
原创 margin 为负值
margin 为负值margin-left 和 margin-right 为负值1）元素没宽度会增加宽度2）元素有宽度会产生位移margin-top 为负值 （有无高度）1）元素上移margin-bottom 为负值（有无高度）1）减少元素自身高度注意：必须是 块级元素...
2021-04-08 18:06:26
83
原创 uni-app使用 editor 富文本
演示地址github地址<template> <view class="editor-container flex" :class="[position === 'top' ? 'flex-direction' : 'flex-reverse']" > <view class="toolbar" :style="barStyle" @click="format"> <view :class="formats.bold ? 'te.
2021-01-28 08:13:40
1624
5
原创 nuxt 使用 tinymce 富文本编辑器
nuxt 使用 tinymc 富文本编辑器1、安装npm i / yarn add @tinymce/tinymce-vue@2.1.0 tinymce@5.3.22、代码结构<template> <client-only> <div class="tinymce-editor"> <editor v-if="!reloading" v-model="myValue" :init="init" :disabled="disabled
2021-01-27 08:26:06
1368
6
原创 nuxt 中使用 vue-quill-editor 富文本编辑器
nuxt 中使用 vue-quill-editor1、安装npm i /yarn add vue-quill-editor@3.0.62、创建文件 vue-quill-editor.jsimport Vue from 'vue'import VueQuillEditor from 'vue-quill-editor/dist/ssr'Vue.use(VueQuillEditor)3、nuxt.config.js 引入css: ['quill/dist/quill.snow.css','q
2021-01-27 08:21:00
1036
原创 element-ui 初始化变量文件 使用 et-i 报错的解决方法
element-ui 执行et -i 命令的时候,报错:解决方法:cnpm i element-themex -g之后再执行:et -i 就可以全部暴露变量
2021-01-12 14:01:28
1995
2
原创 Node.js 笔记
Node.js笔记目录Node.js 笔记1.Node.js 简介2.Node创建 http 服务3.Node 中的模块3.1Path 路径操作模块3.2 Node中的其它成员4.Node 中的模板引擎5.Node 模块加载规则6.Node 中 exports 和 module.exports 的区别7.npm7.1 package 和 package-lock.json8.渲染区别9.Expre...
2020-12-20 16:19:08
96
原创 JS截屏（页面转图片）插件
JS截屏（页面转图片）插件一、 PhantomJSPhantomJSPuppeteer(chrome headless)PuppeteerSlimerJSSlimerJSdom-to-imagedom-to-imagehtml2canvashtml2canvas
2020-12-16 08:29:24
2354
原创 el-menu路由保存问题
<el-menu class="el_head_menu" mode="horizontal" background-color="#3989e1" text-color="#fff" active-text-color="#ffd04b" router :default-active="$route.path"> <el-menu-item v-for="(item, index) in activePathList" :key="index" :ind
2020-12-10 08:15:46
481
原创 Node安装教程
Node安装教程1、官网下载相应的版本 https://nodejs.org/zh-cn/download/releases/2、安装完成后在当前目录新建 node_global 和 node_cache 两个文件夹3、然后在cmd命令下执行如下两个命令：npm config set prefix "D:\Program Files\nodejs\node_global"npm config set cache "D:\Program Files\nodejs\node_cache"4、执行
2020-12-10 08:11:34
296
原创 echarts基本使用
echarts基本使用echarts官方文档普通文件一、引入 echarts 文件<script src="https://cdn.bootcdn.net/ajax/libs/echarts/2.1.10/echarts.js"></script>二、准备呈现的一个容器<div style="width: 600px; height: 400px"></div>三、初始化 echart实例对象（参数：dom决定最终呈现的位置）var m
2020-12-07 08:25:45
219
原创 echats 折线图效果配置
var myCharts = this.$echarts.init('dom 元素')let options = { xAxis: { type: 'category', data: 'x轴数据', boundaryGap: false // 紧挨边缘 }, yAxis: { type: 'value', scale: true, // 脱离 0 值比例 （不是从 0开始） }, series: [ { name: '销量', type: 'line',
2020-12-07 08:24:25
146
原创 vue 中使用 vue-awesome-swiper
vue-awesome-swiper的使用1.安装2.使用1.SPA 使用2.SSR 使用1.安装npm i / yarn add swiper@4.5.1 vue-awesome-swipe@3.1.32.使用1.SPA 使用<!-- swiper2 Thumbs --><swiper class="swiper gallery-thumbs" :options="swiperOptionThumbs" ref="swiperThumbs"> <swiper
2020-12-07 08:23:46
404
原创 el-cascader 级联选择器回显
el-cascader 级联选择器回显1.不是默认的label 、value和children2.地区选择1.不是默认的label 、value和children<el-cascader :props="customProps" placeholder="请选择" v-model="addServiceForm.serviceTypeId" :options="indexList" :show-all-levels="false" ></el-casca
2020-12-07 08:23:04
2525
原创 yarn的配置
yarn的配置全局配置全局配置1、查看版本yarn -v 2、查看配置yarn config list 3、配置淘宝镜像yarn config set registry https://registry.npm.taobao.org/4.yarn全局安装包yarn global add [package-name]2.配置全局包安装路径yarn config set global-folder "路径"3.配置全局缓存路径yarn config set cache-fol
2020-12-07 08:20:49
2807
原创 css一些属性简写
font 复合属性 简写// 其中 font-size/line-height font-family 必写font: font-style font-weight font-size/line-height font-family块元素、行内元素和行内块元素的比较块元素1、独占一行2、可以设置宽高3、默认宽度是容器的 100%注意：文字类的元素内不能使用块级元素p 标签主要用于存放文字，因此 p 里面不能存放块级元素，特别是不能放 div行内元素1、不独占一行2、不
2020-12-06 18:08:14
224
原创 css 清除浮动方法
清除浮动1、额外标签法（隔墙法）<div style="clear: both"></div>2、父级 overflow: hidden<div style="overflow: hidden"></div>3、父级 after 伪元素.clearfix::after { content: ''; display: block; height: 0; clear: both; visibility: hi
2020-12-06 18:07:27
101
原创 margin （塌陷、合并）重叠问题
margin （塌陷、合并）重叠问题解决方案：父元素定义边框父元素定于padding父元素加 overflow: hidden
2020-12-06 17:50:49
95
原创 moment基本使用
moment基本使用Moment.js 是一个强大到有些不正经的日期处理库。1.常用时间// 过滤时间export const filterTime = time => { return moment(time).format('YYYY-MM-DD')}2.过滤今天、昨天// 过滤今天 昨天 和前天export const filterTextTime = time => { let timeTxt = '' const nowDate = new
2020-11-26 11:24:12
1332
原创 JS 正则表达式
JS 正则表达式*任意字符（除换行符以外：\n,\r,\u2028）/…/.test(‘1a@’)\d数字 0-9/\d\d\d/.test(‘123’)\D非 \d/\D\D\D/.test(‘AB’)\w数字 0-9,或字母a-z及A-Z,或下划线/\w\w\w/.test(‘a11_’)\W非 \w/\W \W \W /.test(’...
2020-03-23 16:52:55
72
原创 JS 数组
JS 数组概述数组是值得有序集合。每个值叫做元素，每个元素在数组中都有数字位置编号，也就是索引。JS 数组是弱类型得，数组中可以含有不同类型的元素。数组元素甚至可以是对象或其它数组。创建数组字面量var arr = [1, 2, 3]// 没有值就是undefinednew Array 构造器方式var arr = new Array()var arr1 = new...
2020-03-23 12:32:22
92
原创 JS 运算符
JS 运算符1.一元运算符+num2.二元运算符a + b3.三元c ? a : b4.赋值运算符x += 1y -= 25.比较运算符a == b6.算术运算符a - b7.位运算符a | b8.逻辑运算符exp1 && exp29.字符串"a" + "b"10.特殊运算符delete obj.x// 例子var o...
2020-03-23 09:43:07
111
原创 JS 严格模式
JS 严格模式严格模式是一种特殊的执行模式，它修复了部分语言上的不足，提供更强的错误检查，并增强安全性。function func() { 'use strict';}'use strict';function func() { }1.严格模式下不能使用 with!function () { 'use strict'; width({x:1}) { conso...
2020-03-23 09:16:17
80
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人