{"meta":{"title":"云之彼端","subtitle":"twh blog","description":"服务器太贵了...","author":"weihai","url":"http://blog.twhlyl.top","root":"/"},"pages":[],"posts":[{"title":"vue中不同样式写法的优先级","slug":"vue中不同样式写法的优先级","date":"2020-08-03T01:45:00.000Z","updated":"2020-08-07T02:43:37.327Z","comments":true,"path":"2020/08/03/vue中不同样式写法的优先级/","link":"","permalink":"http://blog.twhlyl.top/2020/08/03/vue中不同样式写法的优先级/","excerpt":"","text":"vue中不同样式写法的优先级先直接上代码 html 123456789101112<div class=\"hello\"> <h1>{{ msg }}</h1> <h1 class=\"style-template\">{{ msg }}</h1> <h1 class=\"style-template\" style=\"color: red;\">{{ msg }}</h1> <h1> <span>{{ msg }}</span> <br> <span class=\"style-template\">{{ msg }}</span> <br> <span class=\"style-template\" style=\"color: red;\">{{ msg }}</span> </h1></div> css 123456789101112h1 { color: green; .style-template { color: brown; } span { color: chartreuse; }}.style-template { color: blue;} 主要有几种写法： html元素的css 在元素下设置子元素样式 元素设置class属性 元素设置style属性 代码实际运行结果： 根据实验得出结论（优先级从高到底）： 元素设置style属性 > 元素设置class属性 > 在元素下设置子元素样式 > html元素的css","categories":[{"name":"vuejs","slug":"vuejs","permalink":"http://blog.twhlyl.top/categories/vuejs/"}],"tags":[{"name":"vue","slug":"vue","permalink":"http://blog.twhlyl.top/tags/vue/"},{"name":"css","slug":"css","permalink":"http://blog.twhlyl.top/tags/css/"}],"author":"twh"},{"title":"quill-image-resize-module 踩坑","slug":"quill-image-resize-module 踩坑","date":"2020-04-21T01:46:00.000Z","updated":"2020-08-03T02:19:15.997Z","comments":true,"path":"2020/04/21/quill-image-resize-module 踩坑/","link":"","permalink":"http://blog.twhlyl.top/2020/04/21/quill-image-resize-module 踩坑/","excerpt":"","text":"quill-image-resize-module 踩坑项目中使用了 Vue-Quill-Editor，挺好用的，但是对于图片上传并不是我希望的效果。好在有扩展，可以满足我的两个需求： 上传图片到图床 调整图片大小 分别对应两个module： quill-image-extend-module quill-image-resize-module quill-image-extend-modulequill-image-extend-module照着readme一步一步操作即可 quill-image-resize-module这里遇到3个问题： imports 问题需要在webpack中手动添加quill插件 register 问题 quill Cannot import modules/imageResize. Are you sure it was registered? 这两个问题是一定要把大小写写对。。。代码中注册时写了imageResize,所以后面使用时也要写生首字母小写 完整的代码如下： vue.config.js 1234567891011121314const webpack = require('webpack')module.exports = { chainWebpack(config) { config .plugin('Quill') .use(webpack.ProvidePlugin, [{ 'window.Quill': 'quill' // 或 // 'window.Quill': 'quill/dist/quill.js', // 'Quill': 'quill/dist/quill.js' }]) }} vue 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647import { quillEditor, Quill } from 'vue-quill-editor'import { ImageExtend, QuillWatch } from 'quill-image-extend-module'import ImageResize from 'quill-image-resize-module'import 'quill/dist/quill.core.css'import 'quill/dist/quill.snow.css'import 'quill/dist/quill.bubble.css'Quill.register('modules/ImageExtend', ImageExtend)Quill.register('modules/imageResize', ImageResize)... quillEditorOptions: { modules: { // 调整图片大小 imageResize: { modules: ['Resize', 'DisplaySize'] }, // 上传到图床 ImageExtend: { loading: true, name: 'file', action: 'url, response: (res) => { return res.url } }, // 如果不上传图片到服务器，此处不必配置 toolbar: { // container为工具栏，此次引入了全部工具栏，也可自行配置 container: [ ['bold', 'italic', 'underline', 'strike'], ['blockquote', 'code-block'], [{ 'list': 'ordered' }, { 'list': 'bullet' }], ['link', 'image'], [{ 'color': [] }, { 'background': [] }], [{ 'align': [] }] ], handlers: { 'image': function() { // 劫持原来的图片点击按钮事件 QuillWatch.emit(this.quill.id) } } } } }","categories":[{"name":"vuejs","slug":"vuejs","permalink":"http://blog.twhlyl.top/categories/vuejs/"}],"tags":[{"name":"quill-image-resize-module","slug":"quill-image-resize-module","permalink":"http://blog.twhlyl.top/tags/quill-image-resize-module/"}],"author":"twh"},{"title":"给外网nextcloud设置服务器地址","slug":"给外网nextcloud设置服务器地址","date":"2020-03-24T01:47:00.000Z","updated":"2020-03-24T01:57:51.293Z","comments":true,"path":"2020/03/24/给外网nextcloud设置服务器地址/","link":"","permalink":"http://blog.twhlyl.top/2020/03/24/给外网nextcloud设置服务器地址/","excerpt":"","text":"给外网nextcloud设置服务器地址最近搭建了自己的nextcloud，但是电脑客户端登录时遇到验证问题，验证时跳转的域名总是localhost，并不是我外网的真实域名。 查了nextcloud很多设置，终于在侧边栏“手机与电脑”设置中，找到一个“服务器地址”的设置。这里出问题时显示的就是localhost加一个端口号，现在通过修改配置改成了自己外网的域名。 如何修改服务器地址 我参考了这片文章 https://blog.haitianhome.com/nextcloud-config-php.html?replytocom=77#respond 只修改了两个字段 'overwritehost' => 'cloud.xxx.xxx', #重写地址 'overwriteprotocol' => 'https', #协议, 可选 : HTTP、HTTPS","categories":[],"tags":[{"name":"nextcloud","slug":"nextcloud","permalink":"http://blog.twhlyl.top/tags/nextcloud/"},{"name":"proxy","slug":"proxy","permalink":"http://blog.twhlyl.top/tags/proxy/"}],"author":"weihai"},{"title":"移动端h5中viewpoint的使用","slug":"移动端h5中viewpoint的使用","date":"2019-11-04T07:25:00.000Z","updated":"2019-11-04T08:01:52.196Z","comments":true,"path":"2019/11/04/移动端h5中viewpoint的使用/","link":"","permalink":"http://blog.twhlyl.top/2019/11/04/移动端h5中viewpoint的使用/","excerpt":"","text":"移动端h5中viewpoint的使用问题的引入公司vue前端项目，嵌入到企业微信应用中使用，发现不能双指缩放html页面，在uc浏览器里可以使用双指缩放页面，误以为企业微信设置问题（走了一点弯路）；再使用手机版chrome浏览器发现也不能使用双指 缩放，所以排除是企业微信的问题。网上一搜“vue 禁止 缩放”，一下就定位到viewpoint了。 据说有些移动端浏览器，比如IOS10以上的Safari，安卓系统下的UC浏览器、QQ浏览器等，为了更好的用户体验，并没有遵循开发者禁止缩放的指定，虽然meta标签按如上写法，但依然允许用户双指缩放和双击放大。 问题的解决 找到vue项目的入口index.html，发现里面确实有控制移动端缩放的代码 1<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no\"> user-scalable = no，表示禁止用户缩放，所以要改成yes或直接删掉user-scalable，同时调整放大倍数 1<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=3, user-scalable=yes\"> 实际测试，可以在移动端企业微信和chrome下缩放 顺便学习一下viewpoint，了解下怎么使用，参数怎么设置原文链接：https://blog.csdn.net/shenlei19911210/article/details/51284910 123456789101112<!-- html document --><meta name=\"viewport\" content=\" height = [pixel_value | device-height] , width = [pixel_value | device-width ] , initial-scale = float_value , minimum-scale = float_value , maximum-scale = float_value , user-scalable = [yes | no] , target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi] \"/> width控制 viewport 的大小，pixel_value表示可以指定的一个值或者特殊的值，而device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。 height和 width 相对应，指定高度。 target-densitydpi一个屏幕像素密度是由屏幕分辨率决定的，通常定义为每英寸点的数量（dpi）。Android支持三种屏幕像素密度：低像素密度，中像素密度，高像素密度。一个低像素密度的屏幕每英寸上的像素点更少，而一个高像素密度的屏幕每英寸上的像素点更多。Android Browser和WebView默认屏幕为中像素密度。 下面是 target-densitydpi 属性的 取值范围 device-dpi – 使用设备原本的 dpi 作为目标 dp。 不会发生默认缩放。 high-dpi – 使用hdpi 作为目标 dpi。 中等像素密度和低像素密度设备相应缩小。 medium-dpi – 使用mdpi作为目标 dpi。 高像素密度设备相应放大， 像素密度设备相应缩小。 这是默认的target density. low-dpi - 使用mdpi作为目标 dpi。中等像素密度和高像素密度设备相应放大。 dpi_value – 指定一个具体的dpi 值作为target dpi. 这个值的范围必须在70–400之间。 为了防止Android Browser和WebView 根据不同屏幕的像素密度对你的页面进行缩放，你可以将viewport的target-densitydpi 设置为 device-dpi。当你这么做了，页面将不会缩放。相反，页面会根据当前屏幕的像素密度进行展示。在这种情形下，你还需要将viewport的width定义为与设备的width匹配，这样你的页面就可以和屏幕相适应。 initial-scale初始缩放。即页面初始缩放程度。这是一个浮点值，是页面大小的一个乘数。例如，如果你设置初始缩放为“1.0”，那么，web页面在展现的时候就会以target density分辨率的1:1来展现。如果你设置为“2.0”，那么这个页面就会放大为2倍。 maximum-scale最大缩放。即允许的最大缩放程度。这也是一个浮点值，用以指出页面大小与屏幕大小相比的最大乘数。例如，如果你将这个值设置为“2.0”，那么这个页面与target size相比，最多能放大2倍。 user-scalable用户调整缩放。即用户是否能改变页面缩放程度。如果设置为yes则是允许用户对其进行改变，反之为no。默认值是yes。如果你将其设置为no，那么minimum-scale 和 maximum-scale都将被忽略，因为根本不可能缩放。 (所有的缩放值都必须在0.01–10的范围之内。) 例：(设置屏幕宽度为设备宽度，禁止用户手动调整缩放) 1 <meta name=\"viewport\" content=\"width=device-width,user-scalable=no\" /> (设置屏幕密度为高频，中频，低频自动缩放，禁止用户手动调整缩放) 1<meta name=\"viewport\" content=\"width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no\"/>","categories":[],"tags":[{"name":"html5","slug":"html5","permalink":"http://blog.twhlyl.top/tags/html5/"},{"name":"viewpoint","slug":"viewpoint","permalink":"http://blog.twhlyl.top/tags/viewpoint/"}],"author":"weihai"},{"title":"前端一次编译多环境部署","slug":"前端一次编译多环境部署","date":"2019-10-30T11:27:00.000Z","updated":"2019-10-30T11:27:20.455Z","comments":true,"path":"2019/10/30/前端一次编译多环境部署/","link":"","permalink":"http://blog.twhlyl.top/2019/10/30/前端一次编译多环境部署/","excerpt":"","text":"前端一次编译多环境部署需求: 想要只编译一次，能同时发布到staging和prodcution环境！ 现状： 一些配置写在了代码里，有通过环境设置不同变量的，但是环境变量和外网是相同的，所以值也和外网一样了 可以尝试的解决办法 从接口读取配置，由接口控制不同环境的值 从本地文件读取可变的配置。代码里可以读取同一个地址的配置文件，但是在docker启动时挂载不同的配置文件","categories":[],"tags":[{"name":"vue","slug":"vue","permalink":"http://blog.twhlyl.top/tags/vue/"}],"author":"weihai"},{"title":"ssh保持长链接","slug":"ssh 长链接","date":"2019-08-04T04:11:00.000Z","updated":"2019-10-30T11:21:48.850Z","comments":true,"path":"2019/08/04/ssh 长链接/","link":"","permalink":"http://blog.twhlyl.top/2019/08/04/ssh 长链接/","excerpt":"","text":"ssh 保持长连接在不修改sever、client的ssh配置的前提下，可以通过在命令中添加参数来实现 1ssh -o ServerAliveInterval=15 -o ServerAliveCountMax=3 root@xxxxxxx 每隔15秒重连一下，如果3次都没有返回，才会断开连接","categories":[{"name":"ssh","slug":"ssh","permalink":"http://blog.twhlyl.top/categories/ssh/"}],"tags":[{"name":"ssh","slug":"ssh","permalink":"http://blog.twhlyl.top/tags/ssh/"}],"author":"twh"},{"title":"vue项目中离开页面时提示功能","slug":"退出页面时提示（vue）","date":"2019-05-23T02:43:00.000Z","updated":"2019-06-05T07:58:31.178Z","comments":true,"path":"2019/05/23/退出页面时提示（vue）/","link":"","permalink":"http://blog.twhlyl.top/2019/05/23/退出页面时提示（vue）/","excerpt":"","text":"vue项目中离开页面时提示功能 当页面刷新、浏览器窗口关闭、页面前进、页面后退，用浏览器自带的confirm 项目中路由之间的跳转，可以用vue项目引入的组件实现 路由跳转123456789101112131415161718beforeRouteLeave(to, from, next) { next(false) if (to.path !== 'xxx' && someOtherCondition) { this.$confirm('您还未保存页面内容，确定需要退出吗?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { // 选择确定 next() }).catch(() => { // 选择取消 }) } else { // 不是预期的页面就继续跳转 next() }} 页面刷新、浏览器窗口关闭、页面前进、页面后退123456// 这几个事件只能在beforeunload中捕获window.addEventListener('beforeunload', (event) => { if (this.$route.name === 'xxx' && someOtherCondition) { event.returnValue = 'reload' }})","categories":[],"tags":[{"name":"vue","slug":"vue","permalink":"http://blog.twhlyl.top/tags/vue/"}],"author":"weihai"},{"title":"mac下使用plist实现定时任务","slug":"mac下使用plist实现定时任务","date":"2019-02-02T02:43:00.000Z","updated":"2019-05-23T06:58:59.145Z","comments":true,"path":"2019/02/02/mac下使用plist实现定时任务/","link":"","permalink":"http://blog.twhlyl.top/2019/02/02/mac下使用plist实现定时任务/","excerpt":"","text":"记录下主要步骤： 新建一个任务脚本文件，如 /Users/username/Downloads/autoRun.sh (里面的具体内容就是到了时间要跑的任务内容) chmod 755 autoRun.sh （确保有可执行的权限） 然后进入到~/Library/LaunchAgents 下建一个plist文件，如com.twh.test.autorun.plist plist文件内容可以参考下面的： Label 可以随便起，但是要唯一 1234ProgramArguments 存放需要定时跑的脚本路径+名字StartCalendarInterval 可以定时到 “时 分 秒”也可以使用StartInterval 表示间隔多少秒,如StartInterval 60 6. 1234开始执行定时任务 launchctl load com.twh.test.autorun.plist 取消定时任务 launchctl unload com.twh.test.autorun.plist 立即执行任务一次 launchctl start com.twh.test.autorun.plist 停止执行任务 launchctl stop com.twh.test.autorun.plist http://my.oschina.net/jackin/blog/263024 http://www.2cto.com/os/201305/215350.html","categories":[],"tags":[{"name":"mac","slug":"mac","permalink":"http://blog.twhlyl.top/tags/mac/"}],"author":"weihai"},{"title":"opentWrt 流量控制tc","slug":"opentWrt-流量控制tc","date":"2019-02-02T01:48:00.000Z","updated":"2020-03-24T01:57:54.551Z","comments":true,"path":"2019/02/02/opentWrt-流量控制tc/","link":"","permalink":"http://blog.twhlyl.top/2019/02/02/opentWrt-流量控制tc/","excerpt":"","text":"在openwrt路由上使用tc命令控制网络的带宽、延时、丢包率，来模拟一些弱网络的环境1.核心命令参考：Network Traffic Control (QOS) 用opkg安装12opkg updateopkg install tc iptables-mod-ipopt 用法12tc qdisc del dev eth0 roottc qdisc add dev eth0 root netem rate 1mbit delay 200ms loss 10%​ 2.界面光有了命令，每次都要ssh上去，还是很麻烦，所以需要一个快捷执行命令的方法 这里非常感谢Shuhao Wu分享的Traffic Cop工具，可以方便的在网页上设置网络环境 安装方法在他的文章末尾有，我主要说下我安装、使用过程中碰到的问题： Package kmod-sched wants to install file /lib/modules/3.10.49/sch_netem.ko But that file is already provided by package kmod-netem Collected errors 解决方法是 命令后加 –force-overwrite 安装成功后，启动trafficcop，网页访问后，点了按钮，不能实现限速。原因应该是tc命令中的interface 或参数设置不正确，具体还没仔细看，临时的解决方法是，把 tc命令直接在在 /usr/lib/trafficcop/api/edge 等文件中 还可以自己加按钮加配置，按钮的id要和新的配置文件名一样就可以","categories":[],"tags":[{"name":"tc","slug":"tc","permalink":"http://blog.twhlyl.top/tags/tc/"},{"name":"openwrt","slug":"openwrt","permalink":"http://blog.twhlyl.top/tags/openwrt/"}],"author":"weihai"},{"title":"zsh中自定义命令提示符格式、内容","slug":"zsh自定义","date":"2019-02-01T07:45:00.000Z","updated":"2019-05-23T06:58:59.146Z","comments":true,"path":"2019/02/01/zsh自定义/","link":"","permalink":"http://blog.twhlyl.top/2019/02/01/zsh自定义/","excerpt":"","text":"修改 ~/.zshrc文件1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859添加：PROMPT = "%n@%m >>>" #左提示符RPROMPT = "%/" #右提示符添加颜色：#导入 colorsautoload -U colors && colors$fg[red] #颜色改变的开始位置$reset_color #颜色改变的结束位置我的~/.zshrc中 PROMPT设置：PROMPT=$'%{$fg[cyan]%}%* %D%{$reset_color%}|%{$fg[white]%}%U%n%u@%U%m%u%{$reset_color%}|%{$fg[yellow]%}D:%B%~%b >>> %{$reset_color%}\\n%# '附上一些常用的预定义prompt参数：! 和%h一样%B 开始粗体模式%b 结束粗体模式%c 当前工作目录名称的最后部分%C 跟%c类似，但是使用长形式的目录名称%d 本周的当天%D 今天是当月中的第几天%h 当前命令的历史记录编号%l shell的当前控制终端%L 清除从提示符末尾到下一行的所有内容%m 机器的主机名称%M 机器的完全符合规范的域名%n 用户名%p 用精确格式（包括秒）显示的12小时制时间%P 用精确格式（包括秒）显示的24小时制时间%S 开始标准输出格式%s 结束标准输出格式%t 以12小时制格式显示时间%T 以24小时制格式显示时间%U 开始下划线模式%u 结束下划线模式%w 当前月的名称%W 当前月的序数%y 以2位格式表示的年%Y 以4位格式表示的年%% %字符%! 跟%h相同%@ 跟%t相同$# 扩展到>供常规使用，如果用户正以root身份运行的话，就扩展到#%/ 当前工作目录的完整名称%- 以短格式表示的当前工作目录^C 跟C匹配的控制字符：例如^G代表Ctrl+G\\a 使tcsh在任何时候显示提示符时嘟嘟响\\e 终止的escape符0x1B\\f 终止的换页符\\n 在这个位置开始一个新行\\r 回车符\\t Tab制表符\\v 垂直制表符\\nnn 由八进制数字nnn所指定的字符","categories":[{"name":"linux","slug":"linux","permalink":"http://blog.twhlyl.top/categories/linux/"}],"tags":[{"name":"zsh","slug":"zsh","permalink":"http://blog.twhlyl.top/tags/zsh/"}],"author":"twh"},{"title":"ui automonkey（ios）","slug":"ui_automonkey","date":"2019-02-01T07:11:00.000Z","updated":"2019-05-23T06:58:59.145Z","comments":true,"path":"2019/02/01/ui_automonkey/","link":"","permalink":"http://blog.twhlyl.top/2019/02/01/ui_automonkey/","excerpt":"","text":"git hub 地址：https://github.com/jonathanpenn/ui-auto-monkey 简单步骤：使用ios Instruments中的UIAutomation，然后将已编写好的脚本（UIAutoMonkey.js）导入并运行 config可自行配置 uiautomation中元素访问及操作方法：https://github.com/twheastasia/eastasia/blob/master/uiautomationScript/sample.js","categories":[{"name":"自动化","slug":"自动化","permalink":"http://blog.twhlyl.top/categories/自动化/"}],"tags":[{"name":"ios","slug":"ios","permalink":"http://blog.twhlyl.top/tags/ios/"},{"name":"ui automation","slug":"ui-automation","permalink":"http://blog.twhlyl.top/tags/ui-automation/"},{"name":"automation","slug":"automation","permalink":"http://blog.twhlyl.top/tags/automation/"}],"author":"twh"}]}