<?xml version="1.0" encoding="utf-8"?>
<search> 
  
  
    
    <entry>
      <title>vue中不同样式写法的优先级</title>
      <link href="/2020/08/03/vue%E4%B8%AD%E4%B8%8D%E5%90%8C%E6%A0%B7%E5%BC%8F%E5%86%99%E6%B3%95%E7%9A%84%E4%BC%98%E5%85%88%E7%BA%A7/"/>
      <url>/2020/08/03/vue%E4%B8%AD%E4%B8%8D%E5%90%8C%E6%A0%B7%E5%BC%8F%E5%86%99%E6%B3%95%E7%9A%84%E4%BC%98%E5%85%88%E7%BA%A7/</url>
      
        <content type="html"><![CDATA[<h1 id="vue中不同样式写法的优先级"><a href="#vue中不同样式写法的优先级" class="headerlink" title="vue中不同样式写法的优先级"></a>vue中不同样式写法的优先级</h1><h3 id="先直接上代码"><a href="#先直接上代码" class="headerlink" title="先直接上代码"></a>先直接上代码</h3><blockquote><p>html</p></blockquote><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"hello"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">h1</span>&gt;</span>&#123;&#123; msg &#125;&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">h1</span> <span class="attr">class</span>=<span class="string">"style-template"</span>&gt;</span>&#123;&#123; msg &#125;&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">h1</span> <span class="attr">class</span>=<span class="string">"style-template"</span> <span class="attr">style</span>=<span class="string">"color: red;"</span>&gt;</span>&#123;&#123; msg &#125;&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">h1</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span>&gt;</span>&#123;&#123; msg &#125;&#125;<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"style-template"</span>&gt;</span>&#123;&#123; msg &#125;&#125;<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"style-template"</span> <span class="attr">style</span>=<span class="string">"color: red;"</span>&gt;</span>&#123;&#123; msg &#125;&#125;<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><blockquote><p>css</p></blockquote><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">h1</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: green;</span><br><span class="line">  .style-template &#123;</span><br><span class="line">    <span class="selector-tag">color</span>: <span class="selector-tag">brown</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-tag">span</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: chartreuse;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.style-template</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: blue;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h3 id="主要有几种写法："><a href="#主要有几种写法：" class="headerlink" title="主要有几种写法："></a>主要有几种写法：</h3><ol><li>html元素的css</li><li>在元素下设置子元素样式</li><li>元素设置class属性</li><li>元素设置style属性</li></ol><h3 id="代码实际运行结果："><a href="#代码实际运行结果：" class="headerlink" title="代码实际运行结果："></a>代码实际运行结果：</h3><p><img src="/images/WX20200807-102652.png" alt="css-demo"></p><h3 id="根据实验得出结论（优先级从高到底）："><a href="#根据实验得出结论（优先级从高到底）：" class="headerlink" title="根据实验得出结论（优先级从高到底）："></a>根据实验得出结论（优先级从高到底）：</h3><blockquote><p><strong>元素设置style属性 &gt; 元素设置class属性 &gt; 在元素下设置子元素样式 &gt; html元素的css</strong></p></blockquote>]]></content>
      
      
      <categories>
          
          <category> vuejs </category>
          
      </categories>
      
      
        <tags>
            
            <tag> vue </tag>
            
            <tag> css </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>quill-image-resize-module 踩坑</title>
      <link href="/2020/04/21/quill-image-resize-module%20%E8%B8%A9%E5%9D%91/"/>
      <url>/2020/04/21/quill-image-resize-module%20%E8%B8%A9%E5%9D%91/</url>
      
        <content type="html"><![CDATA[<h1 id="quill-image-resize-module-踩坑"><a href="#quill-image-resize-module-踩坑" class="headerlink" title="quill-image-resize-module 踩坑"></a>quill-image-resize-module 踩坑</h1><p>项目中使用了 <a href="https://github.com/surmon-china/vue-quill-editor" target="_blank" rel="noopener">Vue-Quill-Editor</a>，挺好用的，但是对于图片上传并不是我希望的效果。好在有扩展，可以满足我的两个需求：</p><ol><li>上传图片到图床</li><li>调整图片大小</li></ol><p>分别对应两个module：</p><ol><li><a href="https://github.com/NextBoy/quill-image-extend-module" target="_blank" rel="noopener">quill-image-extend-module</a></li><li><a href="https://github.com/kensnyder/quill-image-resize-module" target="_blank" rel="noopener">quill-image-resize-module</a></li></ol><h3 id="quill-image-extend-module"><a href="#quill-image-extend-module" class="headerlink" title="quill-image-extend-module"></a>quill-image-extend-module</h3><p>quill-image-extend-module照着readme一步一步操作即可</p><h3 id="quill-image-resize-module"><a href="#quill-image-resize-module" class="headerlink" title="quill-image-resize-module"></a>quill-image-resize-module</h3><p>这里遇到3个问题：</p><ol><li>imports 问题<br>需要在webpack中手动添加quill插件</li><li>register 问题</li><li>quill Cannot import modules/imageResize. Are you sure it was registered?<blockquote><p>这两个问题是一定要把大小写写对。。。<br><a href="https://github.com/kensnyder/quill-image-resize-module/blob/60a43a2477e9947da78a08877bd18a38bc6476af/src/ImageResize.js#L199" target="_blank" rel="noopener">代码</a>中注册时写了imageResize,所以后面使用时也要写生首字母小写</p></blockquote></li></ol><h5 id="完整的代码如下："><a href="#完整的代码如下：" class="headerlink" title="完整的代码如下："></a>完整的代码如下：</h5><blockquote><p>vue.config.js</p></blockquote><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> webpack = <span class="built_in">require</span>(<span class="string">'webpack'</span>)</span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  chainWebpack(config) &#123;</span><br><span class="line">    config</span><br><span class="line">    .plugin(<span class="string">'Quill'</span>)</span><br><span class="line">    .use(webpack.ProvidePlugin, [&#123;</span><br><span class="line">      <span class="string">'window.Quill'</span>: <span class="string">'quill'</span></span><br><span class="line">      <span class="comment">// 或</span></span><br><span class="line">      <span class="comment">// 'window.Quill': 'quill/dist/quill.js',</span></span><br><span class="line">      <span class="comment">// 'Quill': 'quill/dist/quill.js'</span></span><br><span class="line">    &#125;])</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><blockquote><p>vue</p></blockquote><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; quillEditor, Quill &#125; <span class="keyword">from</span> <span class="string">'vue-quill-editor'</span></span><br><span class="line"><span class="keyword">import</span> &#123; ImageExtend, QuillWatch &#125; <span class="keyword">from</span> <span class="string">'quill-image-extend-module'</span></span><br><span class="line"><span class="keyword">import</span> ImageResize <span class="keyword">from</span> <span class="string">'quill-image-resize-module'</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">'quill/dist/quill.core.css'</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">'quill/dist/quill.snow.css'</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">'quill/dist/quill.bubble.css'</span></span><br><span class="line"></span><br><span class="line">Quill.register(<span class="string">'modules/ImageExtend'</span>, ImageExtend)</span><br><span class="line">Quill.register(<span class="string">'modules/imageResize'</span>, ImageResize)</span><br><span class="line"></span><br><span class="line">...</span><br><span class="line"></span><br><span class="line">  quillEditorOptions: &#123;</span><br><span class="line">    modules: &#123;</span><br><span class="line">      <span class="comment">// 调整图片大小</span></span><br><span class="line">      imageResize: &#123;</span><br><span class="line">        modules: [<span class="string">'Resize'</span>, <span class="string">'DisplaySize'</span>]</span><br><span class="line">      &#125;,</span><br><span class="line">      <span class="comment">// 上传到图床</span></span><br><span class="line">      ImageExtend: &#123;</span><br><span class="line">        loading: <span class="literal">true</span>,</span><br><span class="line">        name: <span class="string">'file'</span>,</span><br><span class="line">        action: <span class="string">'url,</span></span><br><span class="line"><span class="string">        response: (res) =&gt; &#123;</span></span><br><span class="line"><span class="string">          return res.url</span></span><br><span class="line"><span class="string">        &#125;</span></span><br><span class="line"><span class="string">      &#125;,</span></span><br><span class="line"><span class="string">      // 如果不上传图片到服务器，此处不必配置</span></span><br><span class="line"><span class="string">      toolbar: &#123;</span></span><br><span class="line"><span class="string">        // container为工具栏，此次引入了全部工具栏，也可自行配置</span></span><br><span class="line"><span class="string">        container: [</span></span><br><span class="line"><span class="string">          ['</span>bold<span class="string">', '</span>italic<span class="string">', '</span>underline<span class="string">', '</span>strike<span class="string">'],</span></span><br><span class="line"><span class="string">          ['</span>blockquote<span class="string">', '</span>code-block<span class="string">'],</span></span><br><span class="line"><span class="string">          [&#123; '</span>list<span class="string">': '</span>ordered<span class="string">' &#125;, &#123; '</span>list<span class="string">': '</span>bullet<span class="string">' &#125;],</span></span><br><span class="line"><span class="string">          ['</span>link<span class="string">', '</span>image<span class="string">'],</span></span><br><span class="line"><span class="string">          [&#123; '</span>color<span class="string">': [] &#125;, &#123; '</span>background<span class="string">': [] &#125;],</span></span><br><span class="line"><span class="string">          [&#123; '</span>align<span class="string">': [] &#125;]</span></span><br><span class="line"><span class="string">        ],</span></span><br><span class="line"><span class="string">        handlers: &#123;</span></span><br><span class="line"><span class="string">          '</span>image<span class="string">': function() &#123;</span></span><br><span class="line"><span class="string">            // 劫持原来的图片点击按钮事件</span></span><br><span class="line"><span class="string">            QuillWatch.emit(this.quill.id)</span></span><br><span class="line"><span class="string">          &#125;</span></span><br><span class="line"><span class="string">        &#125;</span></span><br><span class="line"><span class="string">      &#125;</span></span><br><span class="line"><span class="string">    &#125;</span></span><br><span class="line"><span class="string">  &#125;</span></span><br></pre></td></tr></table></figure>]]></content>
      
      
      <categories>
          
          <category> vuejs </category>
          
      </categories>
      
      
        <tags>
            
            <tag> quill-image-resize-module </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>给外网nextcloud设置服务器地址</title>
      <link href="/2020/03/24/%E7%BB%99%E5%A4%96%E7%BD%91nextcloud%E8%AE%BE%E7%BD%AE%E6%9C%8D%E5%8A%A1%E5%99%A8%E5%9C%B0%E5%9D%80/"/>
      <url>/2020/03/24/%E7%BB%99%E5%A4%96%E7%BD%91nextcloud%E8%AE%BE%E7%BD%AE%E6%9C%8D%E5%8A%A1%E5%99%A8%E5%9C%B0%E5%9D%80/</url>
      
        <content type="html"><![CDATA[<h1 id="给外网nextcloud设置服务器地址"><a href="#给外网nextcloud设置服务器地址" class="headerlink" title="给外网nextcloud设置服务器地址"></a>给外网nextcloud设置服务器地址</h1><p>最近搭建了自己的nextcloud，但是电脑客户端登录时遇到验证问题，验证时跳转的域名总是localhost，并不是我外网的真实域名。</p><p>查了nextcloud很多设置，终于在侧边栏“手机与电脑”设置中，找到一个“服务器地址”的设置。这里出问题时显示的就是localhost加一个端口号，现在通过修改配置改成了自己外网的域名。<br><img src="/images/server-url.png" alt="服务器地址"></p><h3 id="如何修改服务器地址"><a href="#如何修改服务器地址" class="headerlink" title="如何修改服务器地址"></a>如何修改服务器地址</h3><blockquote><p>我参考了这片文章 <a href="https://blog.haitianhome.com/nextcloud-config-php.html?replytocom=77#respond" target="_blank" rel="noopener">https://blog.haitianhome.com/nextcloud-config-php.html?replytocom=77#respond</a></p></blockquote><p>只修改了两个字段</p><pre><code>&apos;overwritehost&apos; =&gt; &apos;cloud.xxx.xxx&apos;,            #重写地址&apos;overwriteprotocol&apos; =&gt; &apos;https&apos;,          #协议, 可选 : HTTP、HTTPS</code></pre>]]></content>
      
      
      
        <tags>
            
            <tag> nextcloud </tag>
            
            <tag> proxy </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>移动端h5中viewpoint的使用</title>
      <link href="/2019/11/04/%E7%A7%BB%E5%8A%A8%E7%AB%AFh5%E4%B8%ADviewpoint%E7%9A%84%E4%BD%BF%E7%94%A8/"/>
      <url>/2019/11/04/%E7%A7%BB%E5%8A%A8%E7%AB%AFh5%E4%B8%ADviewpoint%E7%9A%84%E4%BD%BF%E7%94%A8/</url>
      
        <content type="html"><![CDATA[<h1 id="移动端h5中viewpoint的使用"><a href="#移动端h5中viewpoint的使用" class="headerlink" title="移动端h5中viewpoint的使用"></a>移动端h5中viewpoint的使用</h1><h2 id="问题的引入"><a href="#问题的引入" class="headerlink" title="问题的引入"></a>问题的引入</h2><p>公司vue前端项目，嵌入到企业微信应用中使用，发现不能双指缩放html页面，在uc浏览器里可以使用双指缩放页面，误以为企业微信设置问题（走了一点弯路）；再使用手机版chrome浏览器发现也不能使用双指 缩放，所以排除是企业微信的问题。网上一搜“vue 禁止 缩放”，一下就定位到viewpoint了。</p><blockquote><p><a href="http://www.sunqizheng.com/blog/798.html" target="_blank" rel="noopener">据说</a>有些移动端浏览器，比如IOS10以上的Safari，安卓系统下的UC浏览器、QQ浏览器等，为了更好的用户体验，并没有遵循开发者禁止缩放的指定，虽然meta标签按如上写法，但依然允许用户双指缩放和双击放大。</p></blockquote><h2 id="问题的解决"><a href="#问题的解决" class="headerlink" title="问题的解决"></a>问题的解决</h2><ol><li><p>找到vue项目的入口index.html，发现里面确实有控制移动端缩放的代码</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"</span>&gt;</span></span><br></pre></td></tr></table></figure></li><li><p>user-scalable = no，表示禁止用户缩放，所以要改成yes或直接删掉user-scalable，同时调整放大倍数</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1, maximum-scale=3, user-scalable=yes"</span>&gt;</span></span><br></pre></td></tr></table></figure></li><li><p>实际测试，可以在移动端企业微信和chrome下缩放</p></li></ol><hr><h2 id="顺便学习一下viewpoint，了解下怎么使用，参数怎么设置"><a href="#顺便学习一下viewpoint，了解下怎么使用，参数怎么设置" class="headerlink" title="顺便学习一下viewpoint，了解下怎么使用，参数怎么设置"></a>顺便学习一下viewpoint，了解下怎么使用，参数怎么设置</h2><p>原文链接：<a href="https://blog.csdn.net/shenlei19911210/article/details/51284910" target="_blank" rel="noopener">https://blog.csdn.net/shenlei19911210/article/details/51284910</a></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- html document --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">content</span>=<span class="string">"</span></span></span><br><span class="line"><span class="tag"><span class="string">        height = [pixel_value | device-height] ,</span></span></span><br><span class="line"><span class="tag"><span class="string">        width = [pixel_value | device-width ] ,</span></span></span><br><span class="line"><span class="tag"><span class="string">        initial-scale = float_value ,</span></span></span><br><span class="line"><span class="tag"><span class="string">        minimum-scale = float_value ,</span></span></span><br><span class="line"><span class="tag"><span class="string">        maximum-scale = float_value ,</span></span></span><br><span class="line"><span class="tag"><span class="string">        user-scalable = [yes | no] ,</span></span></span><br><span class="line"><span class="tag"><span class="string">        target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]</span></span></span><br><span class="line"><span class="tag"><span class="string">    "</span></span></span><br><span class="line"><span class="tag">/&gt;</span></span><br></pre></td></tr></table></figure><h4 id="width"><a href="#width" class="headerlink" title="width"></a>width</h4><p>控制 viewport 的大小，pixel_value表示可以指定的一个值或者特殊的值，而device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。</p><h4 id="height"><a href="#height" class="headerlink" title="height"></a>height</h4><p>和 width 相对应，指定高度。</p><h4 id="target-densitydpi"><a href="#target-densitydpi" class="headerlink" title="target-densitydpi"></a>target-densitydpi</h4><p>一个屏幕像素密度是由屏幕分辨率决定的，通常定义为每英寸点的数量（dpi）。Android支持三种屏幕像素密度：低像素密度，中像素密度，高像素密度。一个低像素密度的屏幕每英寸上的像素点更少，而一个高像素密度的屏幕每英寸上的像素点更多。Android Browser和WebView默认屏幕为中像素密度。</p><p>下面是 target-densitydpi 属性的 取值范围</p><blockquote><ol><li>device-dpi – 使用设备原本的 dpi 作为目标 dp。 不会发生默认缩放。</li><li>high-dpi – 使用hdpi 作为目标 dpi。 中等像素密度和低像素密度设备相应缩小。 </li><li>medium-dpi – 使用mdpi作为目标 dpi。 高像素密度设备相应放大， 像素密度设备相应缩小。 这是默认的target density. </li><li>low-dpi - 使用mdpi作为目标 dpi。中等像素密度和高像素密度设备相应放大。</li><li>dpi_value – 指定一个具体的dpi 值作为target dpi. 这个值的范围必须在<strong>70–400</strong>之间。</li></ol></blockquote><p>为了防止Android Browser和WebView 根据不同屏幕的像素密度对你的页面进行缩放，你可以将viewport的target-densitydpi 设置为 device-dpi。当你这么做了，页面将不会缩放。相反，页面会根据当前屏幕的像素密度进行展示。在这种情形下，你还需要将viewport的width定义为与设备的width匹配，这样你的页面就可以和屏幕相适应。</p><h4 id="initial-scale"><a href="#initial-scale" class="headerlink" title="initial-scale"></a>initial-scale</h4><p>初始缩放。即页面初始缩放程度。这是一个浮点值，是页面大小的一个乘数。例如，如果你设置初始缩放为“1.0”，那么，web页面在展现的时候就会以target density分辨率的1:1来展现。如果你设置为“2.0”，那么这个页面就会放大为2倍。</p><h4 id="maximum-scale"><a href="#maximum-scale" class="headerlink" title="maximum-scale"></a>maximum-scale</h4><p>最大缩放。即允许的最大缩放程度。这也是一个浮点值，用以指出页面大小与屏幕大小相比的最大乘数。例如，如果你将这个值设置为“2.0”，那么这个页面与target size相比，最多能放大2倍。</p><h4 id="user-scalable"><a href="#user-scalable" class="headerlink" title="user-scalable"></a>user-scalable</h4><p>用户调整缩放。即用户是否能改变页面缩放程度。如果设置为yes则是允许用户对其进行改变，反之为no。<strong>默认值是yes</strong>。如果你将其设置为no，那么minimum-scale 和 maximum-scale都将被忽略，因为根本不可能缩放。</p><p>(<strong>所有的缩放值都必须在0.01–10的范围之内。</strong>)</p><h3 id="例："><a href="#例：" class="headerlink" title="例："></a>例：</h3><p>(设置屏幕宽度为设备宽度，禁止用户手动调整缩放)</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"> <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width,user-scalable=no"</span> /&gt;</span></span><br></pre></td></tr></table></figure><p>(设置屏幕密度为高频，中频，低频自动缩放，禁止用户手动调整缩放)</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"</span>/&gt;</span></span><br></pre></td></tr></table></figure>]]></content>
      
      
      
        <tags>
            
            <tag> html5 </tag>
            
            <tag> viewpoint </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>前端一次编译多环境部署</title>
      <link href="/2019/10/30/%E5%89%8D%E7%AB%AF%E4%B8%80%E6%AC%A1%E7%BC%96%E8%AF%91%E5%A4%9A%E7%8E%AF%E5%A2%83%E9%83%A8%E7%BD%B2/"/>
      <url>/2019/10/30/%E5%89%8D%E7%AB%AF%E4%B8%80%E6%AC%A1%E7%BC%96%E8%AF%91%E5%A4%9A%E7%8E%AF%E5%A2%83%E9%83%A8%E7%BD%B2/</url>
      
        <content type="html"><![CDATA[<h1 id="前端一次编译多环境部署"><a href="#前端一次编译多环境部署" class="headerlink" title="前端一次编译多环境部署"></a>前端一次编译多环境部署</h1><h4 id="需求"><a href="#需求" class="headerlink" title="需求:"></a>需求:</h4><blockquote><p>想要只编译一次，能同时发布到staging和prodcution环境！</p></blockquote><h4 id="现状："><a href="#现状：" class="headerlink" title="现状："></a>现状：</h4><blockquote><p>一些配置写在了代码里，有通过环境设置不同变量的，但是环境变量和外网是相同的，所以值也和外网一样了</p></blockquote><h3 id="可以尝试的解决办法"><a href="#可以尝试的解决办法" class="headerlink" title="可以尝试的解决办法"></a>可以尝试的解决办法</h3><ul><li>从接口读取配置，由接口控制不同环境的值</li><li>从本地文件读取可变的配置。代码里可以读取同一个地址的配置文件，但是在docker启动时挂载不同的配置文件</li></ul>]]></content>
      
      
      
        <tags>
            
            <tag> vue </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>ssh保持长链接</title>
      <link href="/2019/08/04/ssh%20%E9%95%BF%E9%93%BE%E6%8E%A5/"/>
      <url>/2019/08/04/ssh%20%E9%95%BF%E9%93%BE%E6%8E%A5/</url>
      
        <content type="html"><![CDATA[<h1 id="ssh-保持长连接"><a href="#ssh-保持长连接" class="headerlink" title="ssh 保持长连接"></a>ssh 保持长连接</h1><p>在不修改sever、client的ssh配置的前提下，可以通过在命令中添加参数来实现</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ssh -o ServerAliveInterval=15 -o ServerAliveCountMax=3 root@xxxxxxx</span><br></pre></td></tr></table></figure><p>每隔15秒重连一下，如果3次都没有返回，才会断开连接</p>]]></content>
      
      
      <categories>
          
          <category> ssh </category>
          
      </categories>
      
      
        <tags>
            
            <tag> ssh </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>vue项目中离开页面时提示功能</title>
      <link href="/2019/05/23/%E9%80%80%E5%87%BA%E9%A1%B5%E9%9D%A2%E6%97%B6%E6%8F%90%E7%A4%BA%EF%BC%88vue%EF%BC%89/"/>
      <url>/2019/05/23/%E9%80%80%E5%87%BA%E9%A1%B5%E9%9D%A2%E6%97%B6%E6%8F%90%E7%A4%BA%EF%BC%88vue%EF%BC%89/</url>
      
        <content type="html"><![CDATA[<h1 id="vue项目中离开页面时提示功能"><a href="#vue项目中离开页面时提示功能" class="headerlink" title="vue项目中离开页面时提示功能"></a>vue项目中离开页面时提示功能</h1><hr><ul><li>当页面刷新、浏览器窗口关闭、页面前进、页面后退，用浏览器自带的confirm</li><li>项目中路由之间的跳转，可以用vue项目引入的组件实现</li></ul><h3 id="路由跳转"><a href="#路由跳转" class="headerlink" title="路由跳转"></a>路由跳转</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">beforeRouteLeave(to, <span class="keyword">from</span>, next) &#123;</span><br><span class="line">  next(<span class="literal">false</span>)</span><br><span class="line">  <span class="keyword">if</span> (to.path !== <span class="string">'xxx'</span> &amp;&amp; someOtherCondition) &#123;</span><br><span class="line">    <span class="keyword">this</span>.$confirm(<span class="string">'您还未保存页面内容，确定需要退出吗?'</span>, <span class="string">'提示'</span>, &#123;</span><br><span class="line">      confirmButtonText: <span class="string">'确定'</span>,</span><br><span class="line">      cancelButtonText: <span class="string">'取消'</span>,</span><br><span class="line">      type: <span class="string">'warning'</span></span><br><span class="line">    &#125;).then(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">      <span class="comment">// 选择确定</span></span><br><span class="line">      next()</span><br><span class="line">    &#125;).catch(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">      <span class="comment">// 选择取消</span></span><br><span class="line">    &#125;)</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="comment">// 不是预期的页面就继续跳转</span></span><br><span class="line">    next()</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h3 id="页面刷新、浏览器窗口关闭、页面前进、页面后退"><a href="#页面刷新、浏览器窗口关闭、页面前进、页面后退" class="headerlink" title="页面刷新、浏览器窗口关闭、页面前进、页面后退"></a>页面刷新、浏览器窗口关闭、页面前进、页面后退</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 这几个事件只能在beforeunload中捕获</span></span><br><span class="line"><span class="built_in">window</span>.addEventListener(<span class="string">'beforeunload'</span>, (event) =&gt; &#123;</span><br><span class="line">  <span class="keyword">if</span> (<span class="keyword">this</span>.$route.name === <span class="string">'xxx'</span> &amp;&amp; someOtherCondition) &#123;</span><br><span class="line">    event.returnValue = <span class="string">'reload'</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>]]></content>
      
      
      
        <tags>
            
            <tag> vue </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>mac下使用plist实现定时任务</title>
      <link href="/2019/02/02/mac%E4%B8%8B%E4%BD%BF%E7%94%A8plist%E5%AE%9E%E7%8E%B0%E5%AE%9A%E6%97%B6%E4%BB%BB%E5%8A%A1/"/>
      <url>/2019/02/02/mac%E4%B8%8B%E4%BD%BF%E7%94%A8plist%E5%AE%9E%E7%8E%B0%E5%AE%9A%E6%97%B6%E4%BB%BB%E5%8A%A1/</url>
      
        <content type="html"><![CDATA[<p>记录下主要步骤：</p><ol><li>新建一个任务脚本文件，如 /Users/username/Downloads/autoRun.sh (里面的具体内容就是到了时间要跑的任务内容)</li><li>chmod 755 autoRun.sh （确保有可执行的权限）</li><li>然后进入到~/Library/LaunchAgents 下建一个plist文件，如com.twh.test.autorun.plist</li><li>plist文件内容可以参考下面的：</li><li>Label 可以随便起，但是要唯一 <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">ProgramArguments 存放需要定时跑的脚本路径+名字</span><br><span class="line">StartCalendarInterval 可以定时到 “时 分 秒”</span><br><span class="line">也可以使用StartInterval 表示间隔多少秒,如</span><br><span class="line">StartInterval 60</span><br></pre></td></tr></table></figure></li></ol><p>6.</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">开始执行定时任务 launchctl load com.twh.test.autorun.plist </span><br><span class="line">取消定时任务 launchctl unload com.twh.test.autorun.plist  </span><br><span class="line">立即执行任务一次 launchctl start com.twh.test.autorun.plist  </span><br><span class="line">停止执行任务 launchctl stop com.twh.test.autorun.plist</span><br></pre></td></tr></table></figure><p><a href="http://my.oschina.net/jackin/blog/263024" target="_blank" rel="noopener">http://my.oschina.net/jackin/blog/263024</a></p><p><a href="http://www.2cto.com/os/201305/215350.html" target="_blank" rel="noopener">http://www.2cto.com/os/201305/215350.html</a></p>]]></content>
      
      
      
        <tags>
            
            <tag> mac </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>opentWrt 流量控制tc</title>
      <link href="/2019/02/02/opentWrt-%E6%B5%81%E9%87%8F%E6%8E%A7%E5%88%B6tc/"/>
      <url>/2019/02/02/opentWrt-%E6%B5%81%E9%87%8F%E6%8E%A7%E5%88%B6tc/</url>
      
        <content type="html"><![CDATA[<h2 id="在openwrt路由上使用tc命令控制网络的带宽、延时、丢包率，来模拟一些弱网络的环境"><a href="#在openwrt路由上使用tc命令控制网络的带宽、延时、丢包率，来模拟一些弱网络的环境" class="headerlink" title="在openwrt路由上使用tc命令控制网络的带宽、延时、丢包率，来模拟一些弱网络的环境"></a>在openwrt路由上使用tc命令控制网络的带宽、延时、丢包率，来模拟一些弱网络的环境</h2><h4 id="1-核心命令"><a href="#1-核心命令" class="headerlink" title="1.核心命令"></a>1.核心命令</h4><p>参考：Network Traffic Control (QOS)</p><p><img src="/images/pasted-0.png" alt="upload successful"></p><h6 id="用opkg安装"><a href="#用opkg安装" class="headerlink" title="用opkg安装"></a>用opkg安装</h6><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">opkg update</span><br><span class="line">opkg install tc iptables-mod-ipopt</span><br></pre></td></tr></table></figure><h6 id="用法"><a href="#用法" class="headerlink" title="用法"></a>用法</h6><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">tc qdisc del dev eth0 root</span><br><span class="line">tc qdisc add dev eth0 root netem rate 1mbit delay 200ms loss 10%​</span><br></pre></td></tr></table></figure><h4 id="2-界面"><a href="#2-界面" class="headerlink" title="2.界面"></a>2.界面</h4><p>光有了命令，每次都要ssh上去，还是很麻烦，所以需要一个快捷执行命令的方法</p><p>这里非常感谢Shuhao Wu分享的Traffic Cop工具，可以方便的在网页上设置网络环境</p><p>安装方法在他的文章末尾有，我主要说下我安装、使用过程中碰到的问题：</p><ul><li><p>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 <strong>解决方法是 命令后加  –force-overwrite</strong></p></li><li><p>安装成功后，启动trafficcop，网页访问后，点了按钮，不能实现限速。原因应该是tc命令中的interface 或参数设置不正确，具体还没仔细看，临时的解决方法是，把 tc命令直接在在 /usr/lib/trafficcop/api/edge 等文件中</p></li><li><p>还可以自己加按钮加配置，按钮的id要和新的配置文件名一样就可以</p></li></ul>]]></content>
      
      
      
        <tags>
            
            <tag> tc </tag>
            
            <tag> openwrt </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>zsh中自定义命令提示符格式、内容</title>
      <link href="/2019/02/01/zsh%E8%87%AA%E5%AE%9A%E4%B9%89/"/>
      <url>/2019/02/01/zsh%E8%87%AA%E5%AE%9A%E4%B9%89/</url>
      
        <content type="html"><![CDATA[<h3 id="修改-zshrc文件"><a href="#修改-zshrc文件" class="headerlink" title="修改 ~/.zshrc文件"></a>修改 ~/.zshrc文件</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br></pre></td><td class="code"><pre><span class="line">添加：</span><br><span class="line">PROMPT = &quot;%n@%m &gt;&gt;&gt;&quot;  #左提示符</span><br><span class="line">RPROMPT = &quot;%/&quot;        #右提示符</span><br><span class="line"></span><br><span class="line">添加颜色：</span><br><span class="line">#导入 colors</span><br><span class="line">autoload -U colors &amp;&amp; colors</span><br><span class="line"></span><br><span class="line">$fg[red]              #颜色改变的开始位置</span><br><span class="line">$reset_color          #颜色改变的结束位置</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">我的~/.zshrc中 PROMPT设置：</span><br><span class="line">PROMPT=$&apos;%&#123;$fg[cyan]%&#125;%* %D%&#123;$reset_color%&#125;|%&#123;$fg[white]%&#125;%U%n%u@%U%m%u%&#123;$reset_color%&#125;|%&#123;$fg[yellow]%&#125;D:%B%~%b &gt;&gt;&gt; %&#123;$reset_color%&#125;\n%# &apos;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">附上一些常用的预定义prompt参数：</span><br><span class="line">! 和%h一样</span><br><span class="line">%B 开始粗体模式</span><br><span class="line">%b 结束粗体模式</span><br><span class="line">%c 当前工作目录名称的最后部分</span><br><span class="line">%C 跟%c类似，但是使用长形式的目录名称</span><br><span class="line">%d 本周的当天</span><br><span class="line">%D 今天是当月中的第几天</span><br><span class="line">%h 当前命令的历史记录编号</span><br><span class="line">%l shell的当前控制终端</span><br><span class="line">%L 清除从提示符末尾到下一行的所有内容</span><br><span class="line">%m 机器的主机名称</span><br><span class="line">%M 机器的完全符合规范的域名</span><br><span class="line">%n 用户名</span><br><span class="line">%p 用精确格式（包括秒）显示的12小时制时间</span><br><span class="line">%P 用精确格式（包括秒）显示的24小时制时间</span><br><span class="line">%S 开始标准输出格式</span><br><span class="line">%s 结束标准输出格式</span><br><span class="line">%t 以12小时制格式显示时间</span><br><span class="line">%T 以24小时制格式显示时间</span><br><span class="line">%U 开始下划线模式</span><br><span class="line">%u 结束下划线模式</span><br><span class="line">%w 当前月的名称</span><br><span class="line">%W 当前月的序数</span><br><span class="line">%y 以2位格式表示的年</span><br><span class="line">%Y 以4位格式表示的年</span><br><span class="line">%% %字符</span><br><span class="line">%! 跟%h相同</span><br><span class="line">%@ 跟%t相同</span><br><span class="line">$# 扩展到&gt;供常规使用，如果用户正以root身份运行的话，就扩展到#</span><br><span class="line">%/ 当前工作目录的完整名称</span><br><span class="line">%- 以短格式表示的当前工作目录</span><br><span class="line">^C 跟C匹配的控制字符：例如^G代表Ctrl+G</span><br><span class="line">\a 使tcsh在任何时候显示提示符时嘟嘟响</span><br><span class="line">\e 终止的escape符0x1B</span><br><span class="line">\f 终止的换页符</span><br><span class="line">\n 在这个位置开始一个新行</span><br><span class="line">\r 回车符</span><br><span class="line">\t Tab制表符</span><br><span class="line">\v 垂直制表符</span><br><span class="line">\nnn 由八进制数字nnn所指定的字符</span><br></pre></td></tr></table></figure>]]></content>
      
      
      <categories>
          
          <category> linux </category>
          
      </categories>
      
      
        <tags>
            
            <tag> zsh </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>ui automonkey（ios）</title>
      <link href="/2019/02/01/ui_automonkey/"/>
      <url>/2019/02/01/ui_automonkey/</url>
      
        <content type="html"><![CDATA[<p>git hub 地址：<a href="https://github.com/jonathanpenn/ui-auto-monkey" target="_blank" rel="noopener">https://github.com/jonathanpenn/ui-auto-monkey</a></p><p>简单步骤：使用ios Instruments中的UIAutomation，然后将已编写好的脚本（UIAutoMonkey.js）导入并运行</p><p>config可自行配置</p><p>uiautomation中元素访问及操作方法：<br><a href="https://github.com/twheastasia/eastasia/blob/master/uiautomationScript/sample.js" target="_blank" rel="noopener">https://github.com/twheastasia/eastasia/blob/master/uiautomationScript/sample.js</a></p>]]></content>
      
      
      <categories>
          
          <category> 自动化 </category>
          
      </categories>
      
      
        <tags>
            
            <tag> ios </tag>
            
            <tag> ui automation </tag>
            
            <tag> automation </tag>
            
        </tags>
      
    </entry>
    
    
  
  
</search>