Harriet嘉-CSDN博客

font-family、font-style、font-weight、font-variant、font-stretch、font-size、font-size-adjust、kerning、letter-spacing、word-spacing和text-decoration。线性渐变的stop节点通过指定位置的offset属性和stop-color属性来说明在渐变特定位置上是什么颜色，偏移量应该始终从0%（0）开始到100%（1）结束。如果后面存在额外的字符，耗尽他们最后一个字符之后放置的位置。

2023-03-13 09:11:11 506

原创 vue开发抽取组件方式思路

vue开发经常用到的组件要抽取出统一的组件方便后续使用

2022-09-07 16:31:01 1238

原创 vue中关于后端返回文件流后前端如何下载及自定义名称

前端实现下载excel、img、zip....方法有两种 1. 直接调接口进行下载后端进行处理多GET请求 2. 调取接口返回对应的文件流，前端进行处理多POST请求 axios.get("/dq/task/record/detail/excel/exportDetail2?id=2", { responseType: 'blob' // zip文件流需要添加，不然文件无法...

2022-04-12 10:50:23 3218

原创复习 Javascript模块化

CommonJS：模块加载是同步暴露模块 => module.exports = value => exports.xxx = value暴露的本质都是exports这个对象引入模块 require(xxx) => 第三方模块： xxx为模块名 => 自定义模块： xxx为模块文件路径实现：服务器端实现 => node.js 浏览器端实现 => browserify（...

2021-10-10 15:24:31 120

原创后台配置商品规格sku（vue+element）

效果gif：主要数据结构：规格项：goodsSpecs: [ { attr:"颜色", valueList:[{"title": "红"},{"title": "黄"}]}, { attr:"尺寸", valueList:[{"title": "大"},{"title": "中"},{"title": "小"}] }]table表格头默认的数据：tableHeaderList: ['stock', 'withhold_stock', 'market_pric.

2021-10-10 14:54:05 5293 8

原创图片底部空白缝隙问题

img { vertical-align: bottom;}给图片添加 vertical-align: middle | top | bottom 等。（推荐使用）把图片转换为块级元素 display: block; （转换块级元素可能会影响布局，所以推荐使用第一种）容器 line-height 足够小. 只要半行间距小到字母x的下边缘位置或者再往上, 自然就没有了撑开底部间隙高度空间了. 比如: 容器设置 line-height: 0; 容器 font-size 足够小....

2021-08-23 09:11:53 141

原创 Nuxt.js去除data-n-head属性

在nuxt.config.js添加即可export default { hooks: { 'render:route': (url, result) => { result.html = result.html.replace(/data-n-head=\"ssr\"/gi, ''); } },}

2021-07-12 23:09:06 1067

原创 vue-cli4的浏览器兼容babel的配置

实现方法步骤：1. 下载babel-polyfill以及es6-promisecnpm install --savebabel-polyfilles6-promise2.在main.js顶部进行引入import'babel-polyfill'importpromisefrom'es6-promise'promise.polyfill()3.为防止vue-router在ie中不起作用添加一下代码(可以不写）newVue({router,s...

2021-05-19 23:23:05 1809

原创 vue+Notification（浏览器通知）

created() { if (window.Notification) { // 浏览器通知--window.Notification if (Notification.permission == "granted") { console.log("允许通知") }else if( Notification.permission != "denied"){ console.log("需要通知权限") .

2021-05-17 14:42:55 2940

原创 tinymce编辑器上传本地视频

直接上代码：plugins和toolbar要加上 media，然后通过file_picker_callback和media_url_resolver进行处理 tinymce.init({ file_picker_callback: function(callback, value, meta) { //文件分类 var filetype = '.pdf, .jpg, .jpeg, .png, .gif,

2021-05-06 16:05:30 1398 4

原创 iframe使用

Theiframetag allows us to embed content coming from other origins (other sites) into our web page.iframe标签允许我们将来自其他来源(其他网站)的内容嵌入到我们的网页中。Technically, an iframe creates a new nested browsing context. This means that anything in the iframe does not inte..

2021-04-26 13:47:26 2020

原创 vue ssr服务器渲染笔记

服务器端server 和客户端client服务端渲染主要使用vue-server-renderer插件https://www.cnblogs.com/aliwa/p/8505284.html通过vue-cli3构建一个SSR应用程序https://juejin.cn/post/6844903678646681607#heading-9vue项目迁移nuxthttps://zhuanlan.zhihu.com/p/55129840...

2021-03-28 16:41:20 91

原创实现装修页面组件拖拽（vue）

主要使用了vuedraggable插件和element-ui库每个组件通过按需引入的方式引入到装修页面安装依赖要使用npm 不然会报错 npm run dev运行后打开http://localhost:3001/#/design文件结构分析附上GitHub的demo地址：https://github.com/harrietjia/vue-page-design 可以通过代码进一步分析有帮助的请帮忙点下star...

2021-03-28 16:35:17 3218 5

原创小程序设置页面禁止分享

1、wx.hideShareMenuhttps://developers.weixin.qq.com/miniprogram/dev/api/share/wx.hideShareMenu.html2、删除页面onShareAppMessage方法

2021-03-19 15:08:07 7427

原创 vue 图标简单抖动晃动效果

<div class="fixed-box" > <img class="rotate" :class="[{'r1': shrinkPacket}, {'r2': !shrinkPacket}]" src="../../../assets/images/consume_packet.png"/> </div>.fixed-box { position: fixed; left: 5px; bottom: 6rem; width.

2020-10-26 18:13:53 2571

原创 vue 微信h5页面跳转到小程序 wx-open-launch-weapp（多个）

微信官方文档：微信官方文档微信版本要求为：7.0.12及以上。系统版本要求为：iOS 10.3及以上、Android 5.0及以上。1、先请求接口配置微信需要的一些参数// 需要先请求后端接口 let url = window.location.href.split("#")[0];let shareConfig = await shareViewAPI.getWechatConfig({url});let _this = this;// 将接口返回的信息配置 wx.config(

2020-09-08 13:46:58 2675

原创微信小程序页面上拉触底调用子组件加载更多

当父组件引用了子组件的时候，会遇到父组件执行子组件的方法，比如下拉刷新上拉加载等事件只有在页面中才能检测到，但是获取数据的方法在子组件，这时就可以执行子组件方法。思路很简单，类似于vue中给子组件加ref执行子组件方法道理一样，这里是给子组件加一个属性： id="子组件名称",比如：子组件的父元素不能用wx:if 可以用hidden<showbusiness id="list"></showbusiness>然后在父组件对应的方法中直接this.sele..

2020-08-24 14:04:27 1225

原创小程序使用云调用进行文本过滤

首先点击云开发配置app.json写上“cloud”:true,如图project.config.json写上云函数所在目录"cloudfunctionRoot": "cloudfunctions/",如图没有生成文件的话就在小程序根目录下创建云函数文件夹云函数目录右键新建node.js云函数，填写名字，并确认部署，等命令提示符弄完├─checkContent│ config.json //云调用的权限配置│ index.js //云服...

2020-07-25 14:17:04 481

原创移动端VUE对于PDF图片手势缩放和移动（结合hammer.js）

最后的效果是这样的，关于PDF文件显示就交给后端了，因为这个项目需要显示电子章和后端生成的文字所以直接后端生成图片更省事。首先第一个坑直接引入hammer.js手势没触发要用npm安装"vue2-hammer": "^2.1.2"关于手势启用的方法一定要放在mounted里而且PDF图片要已经返回，这里主要监听pan(移动)和pinch（缩放）// 启动缩放功能 setPinch() { let that = this; let oldSca..

2020-05-12 14:42:54 4967 13

原创 vue拖动改变div宽度

TextWidthChange(e) { let odivParent = e.currentTarget.parentNode; //获取目标父元素 let dx= e.clientX;//当你第一次单击的时候，存储x轴的坐标。 let dw= odivParent.offsetWidth;//存储默认的div的宽度。 docum...

2020-04-14 17:13:49 3078

原创解决弹出层滚动穿透的问题

一个棘手的问题：弹出层的滚动穿透，即弹出层滚动，那么被弹出层覆盖的下面的内容区域也会进行滚动。弹出层我是用的view标签然后使用的position:fixed进行的定位；说一下我的解决思路:一：当弹出层里面无滚动的时候：可以在遮罩的view标签上定义一个防止事件冒泡的方法： 1 2 3 4 5 6 catchtouch...

2020-03-03 19:29:54 1235

原创关于前端PDF显示和盖章（vue）

PDFhttps://www.jianshu.com/p/94cf6ddcb299https://segmentfault.com/a/1190000016963084

2020-02-23 11:55:08 10043 16

原创 vue 翻页组件vue-flip-page

方法change （改变页面）tap （点击）turning （正在翻页）prev （前一页）next （后一页）翻到指定页面：handleSwitchManual(index) { if (index === this.currentIndex) return; this.$refs["turn"].toPage(index); t...

2020-02-04 14:28:24 8057 14

原创 npm 更换源

更换仓库源：淘宝的仓库源：npm config set registry https://registry.npm.taobao.org/npm官方仓库源:npm config set registry http://www.npmjs.org发布包的时候npmjs的网址：npm config set registry http://registry.npmjs.org/参考...

2020-02-03 21:42:28 389

原创 vue 日历组件 vue-calendar-l

方法select （选择日期）monthChanged （滑动移动月份）传入参数： options: { type: Object, default: function() { return { header_bg_color: "#ffffff", //头部颜色 header_font_color: "#ffa300"...

2020-02-01 16:02:47 1322 2

原创 js数组和字符操作

JavaScript中数组元素删除汇总https://www.cnblogs.com/yun1108/p/9505294.htmlJavaScript数组去重https://segmentfault.com/a/1190000016418021?utm_source=tag-newestjs常用的4种截取字符串方法https://blog.csdn.net/u011277123/...

2019-12-19 13:41:14 106

原创 Vue 项目解决微信分享总是首页的bug

// app.vuewatch: {$route: {immediate: true,deep: true,handler(to) {// 微信浏览器判断const WECHAT_BROWSER = navigator.userAgent.toLowerCase().includes('micromessenger')// 解...

2019-12-16 14:07:39 421

原创 mysql.zip版本（5.7.27）的安装整理

参考：https://www.cnblogs.com/lxlin/p/9635350.htmlhttps://www.cnblogs.com/jingjimanbu/p/10974383.htmlmy.ini[client]port=3306default-character-set=utf8[mysql]# 设置mysql客户端默认字符集default-charact...

2019-11-24 15:31:09 177

原创 vue实现路由权限 :router.beforeEach实现路由判断页面未登录跳转到登录页面(路由拦截)

1:在main.js(我是在app.js里面写的)全局文件中判断cookie中是否存在token,存在就按照正常的页面跳转,不存在就跳转到登录界面:router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requireAuth)) { // 判断该路由是否需要登录权...

2019-11-12 13:28:41 1615

原创 vue项目中实现多语言 vue-i18n处理动态加载后端数据语言

项目要求多语言最好是可以根据后台配置的显示首先是安装npm install vue-i18n -S当然也可以这样：<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>然后需要在main.js中引入文件1、添加locales文件夹新建一个locales文件夹，存放...

2019-11-07 18:26:07 10396

原创 vue2.0+ 移动端部分较低版本系统手机出现的白屏问题

最近的项目中遇到了有些低版本系统（如ios<11）会出现白屏问题。首先要知道的时候白屏问题应该是js报错 js运行中断一些router进的页面也没发加载，而这些js大都是因为不支持es6语法而导致的。那知道怎么知道你的js是否报错了呢，因为我们开发调试的时候大都用Chrome，Firefox这样的浏览器，内核较为先进，不会因为不识别es6而报错。所以首先用你的微信pc客户端自带的浏览器...

2019-11-07 10:40:19 1387

原创关于webpack升级和打包

webpack1.0升级（搭配的是vue）首先要了解webpack每个配置的作用，主要参考下面的链接：https://www.cnblogs.com/libin-1/p/6596810.htmlhttps://www.jianshu.com/p/0bd6d0df79fbhttps://juejin.im/post/5bd9838df265da393c06033a因为原本webp...

2019-11-02 21:12:30 288

空空如也

空空如也