-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsearch.json
1 lines (1 loc) · 548 KB
/
search.json
1
[{"title":"vue3 解决 ESLint 各类型错误","url":"https://xiaoniezi.github.io/2022-07-15/vue3-fix-eslint-errors/","content":"<p>前期项目中忽略了 eslint 检查，导致一运行 <code>npm run lint</code> 出现两千多条错误(இдஇ; ) 造孽啊<br>花了两三天搞完，做个错误汇总。<br><span id=\"more\"></span></p>\n<h2 id=\"环境和配置\"><a href=\"#环境和配置\" class=\"headerlink\" title=\"环境和配置\"></a>环境和配置</h2><p>项目用 <a href=\"mailto:[email protected]\">[email protected]</a> + vite + <a href=\"mailto:[email protected]\">[email protected]</a><br>关于eslint 配置的用法可参考：<a href=\"https://cn.eslint.org/docs/user-guide/configuring\">ESLint中文</a><br>eslint 有专门应用于 vue 的插件：<a href=\"https://eslint.vuejs.org/\">eslint-plugin-vue</a><br>大致贴一下版本依赖</p>\n<figure class=\"highlight json\"><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></pre></td><td class=\"code\"><pre><span class=\"line\">devDependencies<span class=\"punctuation\">:</span> <span class=\"punctuation\">{</span></span><br><span class=\"line\"> <span class=\"attr\">"@babel/eslint-parser"</span><span class=\"punctuation\">:</span> <span class=\"string\">"^7.18.2"</span><span class=\"punctuation\">,</span></span><br><span class=\"line\"> <span class=\"attr\">"eslint"</span><span class=\"punctuation\">:</span> <span class=\"string\">"^8.7.0"</span><span class=\"punctuation\">,</span></span><br><span class=\"line\"> <span class=\"attr\">"eslint-config-prettier"</span><span class=\"punctuation\">:</span> <span class=\"string\">"^8.3.0"</span><span class=\"punctuation\">,</span></span><br><span class=\"line\"> <span class=\"attr\">"eslint-import-resolver-alias"</span><span class=\"punctuation\">:</span> <span class=\"string\">"^1.1.2"</span><span class=\"punctuation\">,</span></span><br><span class=\"line\"> <span class=\"attr\">"eslint-plugin-import"</span><span class=\"punctuation\">:</span> <span class=\"string\">"^2.25.4"</span><span class=\"punctuation\">,</span></span><br><span class=\"line\"> <span class=\"attr\">"eslint-plugin-jest"</span><span class=\"punctuation\">:</span> <span class=\"string\">"^25.7.0"</span><span class=\"punctuation\">,</span></span><br><span class=\"line\"> <span class=\"attr\">"eslint-plugin-vue"</span><span class=\"punctuation\">:</span> <span class=\"string\">"^8.3.0"</span><span class=\"punctuation\">,</span></span><br><span class=\"line\"><span class=\"punctuation\">}</span></span><br></pre></td></tr></table></figure>\n<p>eslint 的配置采用 JS 文件格式，经过几次修改已经忘了一开始的内容，只贴基础配置如下：</p>\n<figure class=\"highlight js\"><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\">// .eslintrc.js</span></span><br><span class=\"line\"><span class=\"variable language_\">module</span>.<span class=\"property\">exports</span> = {</span><br><span class=\"line\"> <span class=\"comment\">// 只作用于当前目录</span></span><br><span class=\"line\"> <span class=\"attr\">root</span>: <span class=\"literal\">true</span>,</span><br><span class=\"line\"> <span class=\"comment\">// 运行环境</span></span><br><span class=\"line\"> <span class=\"attr\">env</span>: {</span><br><span class=\"line\"> <span class=\"attr\">node</span>: <span class=\"literal\">true</span>,</span><br><span class=\"line\"> <span class=\"attr\">es6</span>: <span class=\"literal\">true</span>,</span><br><span class=\"line\"> },</span><br><span class=\"line\"> <span class=\"comment\">// 解析器</span></span><br><span class=\"line\"> <span class=\"attr\">parser</span>: <span class=\"string\">'@babel/eslint-parser'</span>,</span><br><span class=\"line\"> <span class=\"comment\">// 解析器选项</span></span><br><span class=\"line\"> <span class=\"attr\">parserOptions</span>: {</span><br><span class=\"line\"> <span class=\"attr\">sourceType</span>: <span class=\"string\">'module'</span>,</span><br><span class=\"line\"> },</span><br><span class=\"line\"> <span class=\"comment\">// 插件</span></span><br><span class=\"line\"> <span class=\"attr\">plugins</span>: [<span class=\"string\">'import'</span>],</span><br><span class=\"line\"> <span class=\"comment\">// 扩展配置</span></span><br><span class=\"line\"> <span class=\"attr\">extends</span>: [</span><br><span class=\"line\"> <span class=\"string\">'plugin:vue/vue3-recommended'</span>,</span><br><span class=\"line\"> <span class=\"string\">'plugin:import/recommended'</span>,</span><br><span class=\"line\"> <span class=\"string\">'prettier'</span>,</span><br><span class=\"line\"> ],</span><br><span class=\"line\"> <span class=\"comment\">// 启用规则</span></span><br><span class=\"line\"> <span class=\"attr\">rules</span>: {},</span><br><span class=\"line\"> <span class=\"comment\">// 全局变量</span></span><br><span class=\"line\"> <span class=\"attr\">globals</span>: {</span><br><span class=\"line\"> <span class=\"attr\">h</span>: <span class=\"literal\">true</span>,</span><br><span class=\"line\"> },</span><br><span class=\"line\"> <span class=\"comment\">// 为指定文件指定处理器</span></span><br><span class=\"line\"> <span class=\"attr\">overrides</span>: [</span><br><span class=\"line\"> {</span><br><span class=\"line\"> <span class=\"attr\">files</span>: [<span class=\"string\">'*.vue'</span>, <span class=\"string\">'*.jsx'</span>],</span><br><span class=\"line\"> <span class=\"attr\">parser</span>: <span class=\"string\">'vue-eslint-parser'</span>,</span><br><span class=\"line\"> <span class=\"attr\">parserOptions</span>: {</span><br><span class=\"line\"> <span class=\"attr\">ecmaVersion</span>: <span class=\"number\">2018</span>,</span><br><span class=\"line\"> },</span><br><span class=\"line\"> <span class=\"attr\">rules</span>: {}</span><br><span class=\"line\"> }</span><br><span class=\"line\"> ],</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n<hr>\n<h2 id=\"ERROR-Parsing-error-Unexpected-token\"><a href=\"#ERROR-Parsing-error-Unexpected-token\" class=\"headerlink\" title=\"ERROR: Parsing error: Unexpected token .\"></a>ERROR: Parsing error: Unexpected token .</h2><p>错误代码：<br><figure class=\"highlight js\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">const</span> isOpen = data?.<span class=\"property\">form</span>?.<span class=\"property\">isOpen</span> || <span class=\"literal\">false</span>;</span><br></pre></td></tr></table></figure></p>\n<p>原来是无法识别可选链操作符（<code>?.</code>），但是扩展运算符没问题，看了eslint 的配置，发现是 ECMAScript 的版本设置了2018（ES9），而可选链操作符是 ES2020（如果没记错），修改配置就可以了<br><figure class=\"highlight js\"><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\">// .eslintrc.js</span></span><br><span class=\"line\"><span class=\"variable language_\">module</span>.<span class=\"property\">exports</span> = {</span><br><span class=\"line\"> <span class=\"attr\">parserOptions</span>: {</span><br><span class=\"line\"> <span class=\"comment\">// ES版本，最新可设置 2022 or "latest"，overrides 中配置了有需要也要同步修改</span></span><br><span class=\"line\"> <span class=\"attr\">ecmaVersion</span>: <span class=\"number\">2020</span>,</span><br><span class=\"line\"> <span class=\"attr\">sourceType</span>: <span class=\"string\">'module'</span>,</span><br><span class=\"line\"> }</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure></p>\n<h2 id=\"ERROR-Unable-to-resolve-path-to-module\"><a href=\"#ERROR-Unable-to-resolve-path-to-module\" class=\"headerlink\" title=\"ERROR: Unable to resolve path to module\"></a>ERROR: Unable to resolve path to module</h2><p>错误代码：<br><figure class=\"highlight js\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> <span class=\"title class_\">Upload</span> <span class=\"keyword\">from</span> <span class=\"string\">'@/components/upload/index.vue'</span></span><br></pre></td></tr></table></figure></p>\n<p>路径引用错误？？看起来没毛病，<code>vite.config.js</code>中明明配置了短链<br><figure class=\"highlight js\"><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">resolve</span>: {</span><br><span class=\"line\"> <span class=\"attr\">alias</span>: {</span><br><span class=\"line\"> <span class=\"string\">'@'</span>: <span class=\"title function_\">pathResolve</span>(<span class=\"string\">'src'</span>),</span><br><span class=\"line\"> }</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure></p>\n<p>但 eslint 并不会自动读取 vite 的配置，因此 eslint 也要加上对应配置：<br><figure class=\"highlight js\"><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\">// .eslintrc.js</span></span><br><span class=\"line\"><span class=\"variable language_\">module</span>.<span class=\"property\">exports</span> = {</span><br><span class=\"line\"> <span class=\"attr\">settings</span>: {</span><br><span class=\"line\"> <span class=\"string\">'import/resolver'</span>: {</span><br><span class=\"line\"> <span class=\"attr\">alias</span>: {</span><br><span class=\"line\"> <span class=\"attr\">map</span>: [<span class=\"string\">'@'</span>: <span class=\"string\">'./src'</span>]</span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure></p>\n<h2 id=\"另外引入-vue-文件需要加上后缀-vue，否则也会报相同错误。\"><a href=\"#另外引入-vue-文件需要加上后缀-vue，否则也会报相同错误。\" class=\"headerlink\" title=\"另外引入 vue 文件需要加上后缀.vue，否则也会报相同错误。\"></a>另外引入 vue 文件需要加上后缀<code>.vue</code>，否则也会报相同错误。</h2><h2 id=\"ERROR-‘ref’-is-not-defined\"><a href=\"#ERROR-‘ref’-is-not-defined\" class=\"headerlink\" title=\"ERROR: ‘ref’ is not defined\"></a>ERROR: ‘ref’ is not defined</h2><p>错误代码：<br><figure class=\"highlight js\"><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=\"title function_\">setup</span>(<span class=\"params\"></span>){</span><br><span class=\"line\"> <span class=\"keyword\">const</span> isOpen = <span class=\"title function_\">ref</span>(<span class=\"literal\">false</span>);</span><br><span class=\"line\"> <span class=\"keyword\">return</span> {</span><br><span class=\"line\"> isOpen,</span><br><span class=\"line\"> }</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure></p>\n<p>运行都没报错，怎么突然 undefined 了？？<br>等等，因为偷懒，vue 的语法糖都是<code>unplugin-auto-import</code>每个文件自动引入的：<br><figure class=\"highlight js\"><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\">// vite.config.js</span></span><br><span class=\"line\"><span class=\"keyword\">import</span> autoImport <span class=\"keyword\">from</span> <span class=\"string\">'unplugin-auto-import/vite'</span>;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"title function_\">autoImport</span>({</span><br><span class=\"line\"> <span class=\"attr\">imports</span>: [</span><br><span class=\"line\"> <span class=\"string\">'vue'</span>,</span><br><span class=\"line\"> <span class=\"string\">'vue-router'</span>,</span><br><span class=\"line\"> ]</span><br><span class=\"line\">})</span><br></pre></td></tr></table></figure></p>\n<p>所以也要让 eslint 知道，先生成一个包含所有变量的文件：<br><figure class=\"highlight js\"><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\">// vite.config.js</span></span><br><span class=\"line\"><span class=\"title function_\">autoImport</span>({</span><br><span class=\"line\"> ...last,</span><br><span class=\"line\"> <span class=\"attr\">eslintrc</span>: {</span><br><span class=\"line\"> <span class=\"comment\">// 已存在文件设置默认 false，需要更新时再打开，防止每次更新都重新生成</span></span><br><span class=\"line\"> <span class=\"attr\">enabled</span>: <span class=\"literal\">false</span>,</span><br><span class=\"line\"> <span class=\"comment\">// 生成文件地址和名称</span></span><br><span class=\"line\"> <span class=\"attr\">filepath</span>: <span class=\"string\">'./.eslintrc-auto-import.json'</span>,</span><br><span class=\"line\"> <span class=\"attr\">globalsPropValue</span>: <span class=\"literal\">true</span>,</span><br><span class=\"line\"> }</span><br><span class=\"line\">})</span><br></pre></td></tr></table></figure></p>\n<p>上面的<code>enabled</code>在生成文件后建议关闭，否则每次更新都会重新生成。<br>扩展到 eslint：</p>\n<figure class=\"highlight js\"><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\">// .eslintrc.js</span></span><br><span class=\"line\"><span class=\"variable language_\">module</span>.<span class=\"property\">exports</span> = {</span><br><span class=\"line\"> <span class=\"attr\">extends</span>: [</span><br><span class=\"line\"> <span class=\"string\">'plugin:vue/vue3-recommended'</span>,</span><br><span class=\"line\"> <span class=\"string\">'plugin:import/recommended'</span>,</span><br><span class=\"line\"> <span class=\"string\">'prettier'</span>,</span><br><span class=\"line\"> <span class=\"string\">'./.eslintrc-auto-import.json'</span></span><br><span class=\"line\"> ],</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n<hr>\n<h2 id=\"ERROR-vue-no-mutating-props\"><a href=\"#ERROR-vue-no-mutating-props\" class=\"headerlink\" title=\"ERROR: vue/no-mutating-props\"></a>ERROR: vue/no-mutating-props</h2><p>错误代码：<br><figure class=\"highlight plaintext\"><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></pre></td><td class=\"code\"><pre><span class=\"line\"><!-- parent.vue --></span><br><span class=\"line\"><template></span><br><span class=\"line\"> <Child v-model:open="openModal" /></span><br><span class=\"line\"></template></span><br><span class=\"line\"><script></span><br><span class=\"line\">export default{</span><br><span class=\"line\"> setup(){</span><br><span class=\"line\"> const openModal = ref(false);</span><br><span class=\"line\"> return {</span><br><span class=\"line\"> openModal,</span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\">}</span><br><span class=\"line\"></script></span><br><span class=\"line\"></span><br><span class=\"line\"><!-- child.vue --></span><br><span class=\"line\"><template></span><br><span class=\"line\"> <a-modal v-model:visible="open"></a-modal></span><br><span class=\"line\"></template></span><br><span class=\"line\"></span><br><span class=\"line\"><script></span><br><span class=\"line\">export default{</span><br><span class=\"line\"> props: {</span><br><span class=\"line\"> open: {</span><br><span class=\"line\"> type: Boolean,</span><br><span class=\"line\"> default: true,</span><br><span class=\"line\"> }</span><br><span class=\"line\"> },</span><br><span class=\"line\">}</span><br><span class=\"line\"></script></span><br></pre></td></tr></table></figure></p>\n<p>这是个低级错误，vue3支持多个参数双向绑定，但是子组件不能直接修改<code>props</code>，需要转换一下：</p>\n<ul>\n<li><p>方法一：用<code>computed</code>代替</p>\n<figure class=\"highlight plaintext\"><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></pre></td><td class=\"code\"><pre><span class=\"line\"><template></span><br><span class=\"line\"> <a-modal v-model:visible="isOpen"></a-modal></span><br><span class=\"line\"></template></span><br><span class=\"line\"></span><br><span class=\"line\"><script></span><br><span class=\"line\">export default{</span><br><span class=\"line\"> props: {</span><br><span class=\"line\"> open: {</span><br><span class=\"line\"> type: Boolean,</span><br><span class=\"line\"> default: true,</span><br><span class=\"line\"> }</span><br><span class=\"line\"> },</span><br><span class=\"line\"> setup(props, { emit }){</span><br><span class=\"line\"> const isOpen = computed({</span><br><span class=\"line\"> get: () => {</span><br><span class=\"line\"> return props.open;</span><br><span class=\"line\"> },</span><br><span class=\"line\"> set: (value) => {</span><br><span class=\"line\"> emit('update:open', value);</span><br><span class=\"line\"> },</span><br><span class=\"line\"> });</span><br><span class=\"line\"></span><br><span class=\"line\"> return {</span><br><span class=\"line\"> isOpen,</span><br><span class=\"line\"> }</span><br><span class=\"line\"> },</span><br><span class=\"line\">}</span><br><span class=\"line\"></script></span><br></pre></td></tr></table></figure>\n</li>\n<li><p>方法二：用<code>watch</code>监听</p>\n<figure class=\"highlight plaintext\"><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></pre></td><td class=\"code\"><pre><span class=\"line\"><template></span><br><span class=\"line\"> <a-modal v-model:visible="isOpen"></a-modal></span><br><span class=\"line\"></template></span><br><span class=\"line\"></span><br><span class=\"line\"><script></span><br><span class=\"line\">export default{</span><br><span class=\"line\"> props: {</span><br><span class=\"line\"> open: {</span><br><span class=\"line\"> type: Boolean,</span><br><span class=\"line\"> default: true,</span><br><span class=\"line\"> }</span><br><span class=\"line\"> },</span><br><span class=\"line\"> setup(props, { emit }){</span><br><span class=\"line\"> const isOpen = ref(props.open);</span><br><span class=\"line\"> </span><br><span class=\"line\"> watch(</span><br><span class=\"line\"> () => isOpen.value,</span><br><span class=\"line\"> (value) => emit('update:open', value)</span><br><span class=\"line\"> );</span><br><span class=\"line\"></span><br><span class=\"line\"> return {</span><br><span class=\"line\"> isOpen,</span><br><span class=\"line\"> }</span><br><span class=\"line\"> },</span><br><span class=\"line\">}</span><br><span class=\"line\"></script></span><br></pre></td></tr></table></figure>\n</li>\n</ul>\n<hr>\n<h2 id=\"ERROR-no-console\"><a href=\"#ERROR-no-console\" class=\"headerlink\" title=\"ERROR: no-console\"></a>ERROR: no-console</h2><p>错误代码：<br><figure class=\"highlight js\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(data);</span><br></pre></td></tr></table></figure></p>\n<p>eslint 的规则设定了不能有<code>console</code>，当然可以改配置：<br><figure class=\"highlight js\"><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\">// .eslintrc.js</span></span><br><span class=\"line\"><span class=\"attr\">rules</span>: {</span><br><span class=\"line\"> <span class=\"string\">'no-console'</span>: <span class=\"string\">'off'</span>,</span><br><span class=\"line\"> <span class=\"comment\">// or:</span></span><br><span class=\"line\"> <span class=\"string\">'no-console'</span>: [<span class=\"number\">2</span>, { <span class=\"attr\">allow</span>: [<span class=\"string\">'warn'</span>, <span class=\"string\">'error'</span>] }],</span><br><span class=\"line\"> <span class=\"comment\">// or:</span></span><br><span class=\"line\"> <span class=\"string\">'no-console'</span>: process.<span class=\"property\">env</span>.<span class=\"property\">NODE_ENV</span> === <span class=\"string\">'production'</span> ? [<span class=\"number\">2</span>, { <span class=\"attr\">allow</span>: [<span class=\"string\">'warn'</span>, <span class=\"string\">'error'</span>] }] : <span class=\"string\">'off'</span></span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure><br>提这个错误是为了引入下面的问题，在某些地方需要打印但不希望 eslint 报错，可以让其忽略检查：<br><figure class=\"highlight js\"><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=\"comment\">// 忽略整个文件在第一行加</span></span><br><span class=\"line\"><span class=\"comment\">/* eslint-disable */</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"comment\">// 忽略一段代码检查</span></span><br><span class=\"line\"><span class=\"comment\">/* eslint-disable */</span></span><br><span class=\"line\">...<span class=\"variable language_\">this</span> our codes;</span><br><span class=\"line\"><span class=\"comment\">/* eslint-enable */</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"comment\">// 忽略一行代码检查</span></span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(data); <span class=\"comment\">// eslint-disable-line</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"comment\">// 忽略下一行代码检查</span></span><br><span class=\"line\"><span class=\"comment\">// eslint-disable-next-line</span></span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(data);</span><br></pre></td></tr></table></figure></p>\n<p>那么在<code><template></code>中呢？<br><figure class=\"highlight plaintext\"><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\"><template></span><br><span class=\"line\"> <!-- eslint-disable --></span><br><span class=\"line\"> <div v-for="item in options">{{ item }}</div></span><br><span class=\"line\"></template></span><br></pre></td></tr></table></figure><br>然后发现不行，会报<code>vue/require-v-for-key</code>错误，注释失败。<br>找了各种文章最后发现是自己的锅Ծ‸Ծ，找不出问题的时候还是要看官方文档，在<a href=\"https://eslint.vuejs.org/rules/comment-directive.html\">eslint-plugin-vue</a>已有说明<code>vue/comment-directive</code>规则就是用于忽略代码检查，一看 eslint 的文件配置果然是关闭了：<br><figure class=\"highlight js\"><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\"><span class=\"comment\">// .eslintrc.js</span></span><br><span class=\"line\"><span class=\"attr\">rules</span>: {</span><br><span class=\"line\"> <span class=\"string\">'vue/comment-directive'</span>: <span class=\"string\">'off'</span>,</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure><br>改为<code>error</code>，完美؏؏☝ᖗ乛◡乛ᖘ☝؏؏</p>\n<hr>\n<p>收工。</p>\n","categories":["Vue"],"tags":["vue","javascript"]},{"title":"为博客增添动画色彩","url":"https://xiaoniezi.github.io/2020-02-27/blog-animation/","content":"<p>有时间捣鼓了一下博客，加了一些个人喜欢的动效，记录备用。<br><span id=\"more\"></span></p>\n<h2 id=\"头像荡秋千动画\"><a href=\"#头像荡秋千动画\" class=\"headerlink\" title=\"头像荡秋千动画\"></a>头像荡秋千动画</h2><p>logo上花功夫必不可少，掘金个人主页的头像旋转就很有特色๑乛◡乛๑。<br>原先logo图用了悬浮放大旋转的效果，觉得不够突出，因此改成荡秋千。<br><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><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"selector-class\">.logo</span>{</span><br><span class=\"line\"> <span class=\"attribute\">transform-origin</span>: <span class=\"number\">50%</span> <span class=\"number\">0</span>;<span class=\"comment\">/* 固定旋转中心点 */</span></span><br><span class=\"line\"> -webkit-<span class=\"attribute\">animation</span>: swinging <span class=\"number\">4s</span> ease-in-out forwards infinite;</span><br><span class=\"line\"> -moz-<span class=\"attribute\">animation</span>: swinging <span class=\"number\">4s</span> ease-in-out forwards infinite;</span><br><span class=\"line\"> <span class=\"attribute\">animation</span>: swinging <span class=\"number\">4s</span> ease-in-out forwards infinite;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"keyword\">@keyframes</span> swinging{</span><br><span class=\"line\"> <span class=\"number\">0%</span>{</span><br><span class=\"line\"> <span class=\"attribute\">transform</span>: <span class=\"built_in\">rotate</span>(-<span class=\"number\">35deg</span>);</span><br><span class=\"line\"> }</span><br><span class=\"line\"> <span class=\"number\">50%</span>{</span><br><span class=\"line\"> <span class=\"attribute\">transform</span>: <span class=\"built_in\">rotate</span>(<span class=\"number\">35deg</span>);</span><br><span class=\"line\"> }</span><br><span class=\"line\"> <span class=\"number\">100%</span>{</span><br><span class=\"line\"> <span class=\"attribute\">transform</span>: <span class=\"built_in\">rotate</span>(-<span class=\"number\">35deg</span>);</span><br><span class=\"line\"> }</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure><br>还可以在悬浮时静止</p>\n<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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"selector-class\">.logo</span><span class=\"selector-pseudo\">:hover</span>{</span><br><span class=\"line\"> <span class=\"attribute\">animation-play-state</span>: paused;</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n<hr>\n<h2 id=\"彩带背景\"><a href=\"#彩带背景\" class=\"headerlink\" title=\"彩带背景\"></a>彩带背景</h2><p>canvas生成一条彩带，每次点击位置颜色自由变化，可以直接下载引用 <a href=\"https://github.com/zproo/canvas-ribbon\">canvas-ribbon</a><br>在hexo博客的head插入时因为还未生成document，所以无法获取body，最好放在footer里。<br>可以在配置文件中加个字段控制</p>\n<figure class=\"highlight xml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><% if (theme.is_ribbon){ %></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">script</span> <span class=\"attr\">id</span>=<span class=\"string\">"ribbon"</span> <span class=\"attr\">size</span>=<span class=\"string\">"70"</span> <span class=\"attr\">alpha</span>=<span class=\"string\">"0.2"</span> <span class=\"attr\">src</span>=<span class=\"string\">"/js/canvas_ribbon.js"</span>></span><span class=\"tag\"></<span class=\"name\">script</span>></span></span><br><span class=\"line\"><% } %></span><br></pre></td></tr></table></figure>\n<hr>\n<h2 id=\"代码块悬浮蛇形边框\"><a href=\"#代码块悬浮蛇形边框\" class=\"headerlink\" title=\"代码块悬浮蛇形边框\"></a>代码块悬浮蛇形边框</h2><p>之前分享过一个<a href=\"/2019-10-16/css-effect-01/\">蛇形边框</a>，但是对宽高都有限制，不利于复用。后来发现一个用更简洁的用背景渐变方法：<a href=\"https://www.jiangweishan.com/article/html1281320938102983.html\">地址</a></p>\n<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><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"selector-tag\">figure</span><span class=\"selector-pseudo\">:before</span>{</span><br><span class=\"line\"> <span class=\"attribute\">content</span>: <span class=\"string\">''</span>;</span><br><span class=\"line\"> <span class=\"attribute\">position</span>: absolute;</span><br><span class=\"line\"> <span class=\"attribute\">left</span>: <span class=\"number\">0</span>;</span><br><span class=\"line\"> <span class=\"attribute\">right</span>: <span class=\"number\">0</span>;</span><br><span class=\"line\"> <span class=\"attribute\">top</span>: <span class=\"number\">0</span>;</span><br><span class=\"line\"> <span class=\"attribute\">bottom</span>: <span class=\"number\">0</span>;</span><br><span class=\"line\"> <span class=\"attribute\">width</span>: <span class=\"number\">100%</span>;</span><br><span class=\"line\"> <span class=\"attribute\">height</span>: <span class=\"number\">100%</span>;</span><br><span class=\"line\"> <span class=\"attribute\">background</span>: <span class=\"built_in\">linear-gradient</span>(<span class=\"number\">0</span>, <span class=\"number\">#61BFAD</span> <span class=\"number\">5px</span>, <span class=\"number\">#61BFAD</span> <span class=\"number\">5px</span>) no-repeat,</span><br><span class=\"line\"> <span class=\"built_in\">linear-gradient</span>(-<span class=\"number\">90deg</span>, <span class=\"number\">#61BFAD</span> <span class=\"number\">5px</span>, <span class=\"number\">#61BFAD</span> <span class=\"number\">5px</span>) no-repeat,</span><br><span class=\"line\"> <span class=\"built_in\">linear-gradient</span>(-<span class=\"number\">180deg</span>, <span class=\"number\">#61BFAD</span> <span class=\"number\">5px</span>, <span class=\"number\">#61BFAD</span> <span class=\"number\">5px</span>) no-repeat,</span><br><span class=\"line\"> <span class=\"built_in\">linear-gradient</span>(-<span class=\"number\">270deg</span>, <span class=\"number\">#61BFAD</span> <span class=\"number\">5px</span>, <span class=\"number\">#61BFAD</span> <span class=\"number\">5px</span>) no-repeat;</span><br><span class=\"line\"> <span class=\"attribute\">background-size</span>: <span class=\"number\">0</span> <span class=\"number\">5px</span>, <span class=\"number\">5px</span> <span class=\"number\">0</span>, <span class=\"number\">0</span> <span class=\"number\">5px</span>, <span class=\"number\">5px</span> <span class=\"number\">0</span>;</span><br><span class=\"line\"> <span class=\"attribute\">background-position</span>: left top, right top, right bottom, left bottom;</span><br><span class=\"line\"> <span class=\"attribute\">transition</span>: all ease-in .<span class=\"number\">3s</span>;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"comment\">/* 悬浮改变大小 */</span></span><br><span class=\"line\"><span class=\"selector-tag\">figure</span><span class=\"selector-pseudo\">:hover</span><span class=\"selector-pseudo\">:before</span>{</span><br><span class=\"line\"> <span class=\"attribute\">background-size</span>: <span class=\"number\">100%</span> <span class=\"number\">5px</span>, <span class=\"number\">5px</span> <span class=\"number\">100%</span>, <span class=\"number\">100%</span> <span class=\"number\">5px</span>, <span class=\"number\">5px</span> <span class=\"number\">100%</span>;</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n<hr>\n<h2 id=\"头像的彩色阴影\"><a href=\"#头像的彩色阴影\" class=\"headerlink\" title=\"头像的彩色阴影\"></a>头像的彩色阴影</h2><p>用伪元素继承父元素的背景图，通过<code>filter</code>生成模糊效果<br>参考<a href=\"https://chokcoco.github.io/CSS-Inspiration/#/./filter/filter-shadow\">使用 filter:blur 生成彩色阴影</a>（这位大神收集了很多常用的动效）<br><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><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"selector-class\">.head-img</span>{</span><br><span class=\"line\"> <span class=\"attribute\">position</span>: relative;</span><br><span class=\"line\"> <span class=\"attribute\">width</span>: <span class=\"number\">100%</span>;</span><br><span class=\"line\"> <span class=\"attribute\">height</span>: <span class=\"number\">100%</span>;</span><br><span class=\"line\"> <span class=\"attribute\">border-radius</span>: <span class=\"number\">50%</span>;</span><br><span class=\"line\"> <span class=\"attribute\">background-image</span>: <span class=\"built_in\">url</span>(<span class=\"string\">imgUrl</span>);</span><br><span class=\"line\"> <span class=\"attribute\">background-repeat</span>: no-repeat;</span><br><span class=\"line\"> <span class=\"attribute\">background-size</span>: <span class=\"number\">100%</span> <span class=\"number\">100%</span>;</span><br><span class=\"line\"> <span class=\"attribute\">background-position</span>: center;</span><br><span class=\"line\"> <span class=\"attribute\">z-index</span>: <span class=\"number\">2</span>;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"selector-class\">.head-img</span><span class=\"selector-pseudo\">:after</span>{</span><br><span class=\"line\"> <span class=\"attribute\">content</span>: <span class=\"string\">''</span>;</span><br><span class=\"line\"> <span class=\"attribute\">position</span>: absolute;</span><br><span class=\"line\"> <span class=\"attribute\">left</span>: <span class=\"number\">0</span>;</span><br><span class=\"line\"> <span class=\"attribute\">right</span>: <span class=\"number\">0</span>;</span><br><span class=\"line\"> <span class=\"attribute\">top</span>: <span class=\"number\">10%</span>;</span><br><span class=\"line\"> <span class=\"attribute\">width</span>: <span class=\"number\">100%</span>;</span><br><span class=\"line\"> <span class=\"attribute\">height</span>: <span class=\"number\">100%</span>;</span><br><span class=\"line\"> <span class=\"attribute\">border-radius</span>: <span class=\"number\">50%</span>;</span><br><span class=\"line\"> <span class=\"attribute\">background</span>: inherit;</span><br><span class=\"line\"> <span class=\"attribute\">transform</span>: <span class=\"built_in\">scale</span>(.<span class=\"number\">95</span>);</span><br><span class=\"line\"> <span class=\"attribute\">filter</span>: <span class=\"built_in\">blur</span>(<span class=\"number\">10px</span>) <span class=\"built_in\">brightness</span>(<span class=\"number\">80%</span>) <span class=\"built_in\">opacity</span>(.<span class=\"number\">8</span>);</span><br><span class=\"line\"> <span class=\"attribute\">z-index</span>: -<span class=\"number\">1</span>;</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure></p>\n","categories":["Others"],"tags":["css"]},{"title":"Share Time ~（第六期）","url":"https://xiaoniezi.github.io/2020-01-02/share-time-06/","content":"<p>上次分享发现平日收藏Vue的资源太少了，这次分享一些文章，关于技巧or实践</p>\n<span id=\"more\"></span>\n<hr>\n<p>一首喜欢了很久的歌，在2019网易云年度歌单霸在了首榜</p>\n<iframe frameborder=\"no\" border=\"0\" marginwidth=\"0\" marginheight=\"0\" width=300 height=86 src=\"//music.163.com/outchain/player?type=2&id=25642125&auto=0&height=66\"></iframe>\n\n\n<ul>\n<li><p><a href=\"https://juejin.im/entry/587599388d6d810058a7a41a\">Vue.js 学习系列三——axios学习实践</a><br>刚开始学vue的时候用的是全家桶里的<code>vue-resource</code>，后来发现<code>axios</code>延展性更强。这篇文章简单梳理了axios的API，简洁清晰明了。</p>\n</li>\n<li><p><a href=\"https://juejin.im/post/5b55c118f265da0f6f1aa354\">vue中Axios的封装和API接口的管理</a><br>了解完axios后下一步就是封装成适应项目的方法，比如拦截请求、状态码相应跳转提示、接口模块化等。个人而言由于项目较复杂，所以用了vuex，接口放在store采用moduls分模块管理。顺便拓展一下：<a href=\"http://www.itomtan.com/2017/10/17/vue-axios-timeout-retry-callback\">axios请求超时,设置重新请求的完美解决方法</a></p>\n</li>\n<li><p><a href=\"https://juejin.im/post/5ca20e426fb9a05e42555d1d\">this.$toast() 了解一下？</a><br>教你如何写一个自定义组件，此处用到了<code>Vue.extend()</code>。没有很惊艳，但是能让你思路眼前一亮or瞬间醍醐灌顶，就像打通任督二脉，都是好文章。</p>\n</li>\n<li><p><a href=\"https://juejin.im/post/5c92ff94f265da6128275a85\">手摸手，带你用vue撸后台 系列五(v4.0新版本)</a><br><a href=\"https://github.com/PanJiaChen/vue-element-admin\">vue-element-admin</a>的作者，vue后台的系列文章有很多值得参考的地方，尤其是统筹和模块管理方面。</p>\n</li>\n<li><p><a href=\"https://segmentfault.com/a/1190000014085613\">Vue.js最佳实践（五招让你成为Vue.js大师）</a><br>五个有用的小技巧，原文在YouTube，评论区有人贴出，可看原视频。</p>\n</li>\n<li><p><a href=\"https://juejin.im/post/5d9d386fe51d45784d3f8637\">Vue 开发必须知道的 36 个技巧【近1W字】</a><br>文章繁复，值得参考的地方不多，适合新手看。对于实践过几个项目的人来说，基本api已经熟能生巧。</p>\n</li>\n<li><p><a href=\"https://juejin.im/post/5cde0b43f265da03867e78d3\">Vue 组件间通信六种方式（完整版）</a><br>祖孙、父子、兄弟、隔代信息传递，比较常用的都归纳了。大项目用vuex方便很多，小项目附上一个<code>EventBus</code>的介绍：<a href=\"https://juejin.im/post/5bb355dae51d450ea4020b42\">vue篇之事件总线（EventBus）</a></p>\n</li>\n<li><p><a href=\"https://juejin.im/post/5d0259f2518825405d15ae62\">Vue3.0 前的 TypeScript 最佳入门实践</a><br>3.0用的是<code>TypeScript</code>，当然要跟紧发展的脚步。这篇写的比较基础，对于我这种新手容易理解，学<code>TypeScript</code>建议还是回归到官方文档，能发现自己的宝藏。</p>\n</li>\n<li><p><a href=\"https://juejin.im/post/5a7278dc6fb9a01c9c1f59e7\">震惊！喝个茶的时间就学会了vuex</a><br>关于vuex的用法官网已经清晰，加上实践出真知，所以收藏里没有关于vuex的文章，在掘金找了个简单易懂的。</p>\n</li>\n</ul>\n<hr>\n<p>来几篇面试题，最考验基础了</p>\n<ul>\n<li><a href=\"https://juejin.im/post/5d59f2a451882549be53b170\">30 道 Vue 面试题，内含详细讲解（涵盖入门到精通，自测 Vue 掌握程度）</a></li>\n<li><a href=\"https://juejin.im/post/5e04411f6fb9a0166049a073\">12道vue高频原理面试题,你能答出几道?</a></li>\n<li><a href=\"https://juejin.im/post/5adf0085518825673123da9a\">当面试官问你Vue响应式原理，你可以这么回答他</a></li>\n<li><a href=\"https://segmentfault.com/a/1190000017103048\">vue面试题总结</a></li>\n</ul>\n<hr>\n<p>平日没有收藏的习惯（大概知道自己收藏了猴年马月才会看），以上能在收藏找到都是对自身有启发的key。</p>\n","categories":["Share"],"tags":["vue","javascript"]},{"title":"肺炎——住院后篇","url":"https://xiaoniezi.github.io/2019-12-15/get-sick-in-2019-part-02/","content":"<p>当病人对医生失去了信任……<br><span id=\"more\"></span></p>\n<hr>\n<p>第二天姐姐陪同拿了支原体抗体的报告，去了附近的人民医院，医生询问后先做了CT，左胸很明显的一块白色，没有意外地上了五楼住院部。<br><br>量身高血压后，一个年轻的主治医师进来，看过所有报告后跟我们说肺炎也有很多种，举例了几种不同的类型，然后建议先打点滴，过两天看下炎症有没有好转再对症治疗。我下意识觉得哪里不对劲，又觉得她说的言之有理。把报告拿走后，开始了从下午一点至晚上七点的点滴。有点可笑的是，吊了几瓶后，主治医师拿着那张支原体的报告匆匆过来，说她刚留意到中医院那边已经检查出了是支原体肺炎，所以只要针对治疗就可以了，然后开始了支原体的科普。我面上应答，心底只觉愤怒。如果不是那份报告，医院要在我身上用多少药才检查出这是支原体肺炎？这是医院治疗肺炎的流程吗？我不知道，只能按捺住，安慰自己要相信医生。<br><br>第二天姐妹都过来探望。由于支原体肺炎比一般肺炎难好，还容易复发，医生建议至少治疗七天才照CT复查，所以姐妹们决定轮流过来照顾。第三天见到主任医师过来巡房，身后跟着四五个医师，询问了病情，心中有谱略略颔首，转身去拷问几个医师，应该如果治疗。几个人低着头默默无言，主任医师候了片刻又问了句，“人家都检查出是支原体抗体了，你们还不知道啊？”终于有个男生小声应答，“阿奇霉素。”主任才叹声鼓励了一句。终于明白为何那么多人不惜排号几天求经验老到的医生。<br><br>我默默看几人走出了病房，不可抑止地被失望吞没。<br><br>这是什么辣鸡医院？<br><br>我特么脑子有洞才选了这家！<br><br>在姐妹的陪伴下这可有可无的住院时间不那么难熬，吊水的时间趋于稳定，咳嗽停止，呼吸带来的疼痛也渐渐好转。除了偶尔出没的蟑螂，除了越来越虚的身体，一切相安无事。一直住到第八天，再去照CT，很明显好转，胸部的一片白只剩下微末。我迫不及待跟医生提出出院。<br><br>拔掉留置针的时候，憋了多天终于松了一口气，每次去洗头被小哥哥问手背上是什么的时候总是难免沧桑，年轻人还是不懂的好。<br><br>经医嘱，出院后四天要连续吃上三天的阿奇霉素，主要注意不能感冒。或许是打了太多抗体，刚出院的一周做什么都力不从心，搭地铁还会咳嗽不止，最后只能坐公交。主治医师后来打电话通知，出院前检查的支原体抗体值依旧很高，阿奇霉素还要连续吃一周。连续吃了七天后感觉状态不好，我擅自停了药，跑去中医院复查。还是那个老奶奶，预约得早，等了许久，注意到她待病人都是不急不缓的严肃厉声，大概那天遇到的是她为数不多的温言。老奶奶知道我连吃了七天阿奇霉素后大为吃惊，因为这个抗生素一般吃三天停四天。<br><br>老奶奶开了一堆药，一周后的复查终于听到了好消息。<br><br>到如今听到咳嗽声还会胆战心惊，通勤时间口罩不离身，穿的总比常人厚——前两天挤公交还被两个小妹妹吐槽穿太厚挤不下车——总算是逐渐回到正轨。</p>\n","categories":["Personal"],"tags":["2019"]},{"title":"肺炎——住院前篇","url":"https://xiaoniezi.github.io/2019-11-23/get-sick-in-2019-part-01/","content":"<p>生病大概是个讲理又忠诚的身体预警。<br>在你疏忽的时候提个醒，没有例外和侥幸。<br><span id=\"more\"></span></p>\n<hr>\n<p>九月底刚开始微咳那周我并未在意，周末时突发高热整晚咳嗽不止，第二天请假去药店咨询过店员后买了一堆药回去。几天未见好转还是去了医院，医生询问后做了血检，是细菌感染引起的支气管炎。然而吃了药当晚还是整夜反复咳醒，第二天又去一趟，换了个医生值班，听闻我将近一周没有睡好觉，很是贴心开了助眠的药。<br><br>或许是这细菌太强大，又或许是多年没运动的身体太孱弱，情况依旧如此。此时我已经对医生的诊断怀疑，如果真是细菌，为什么开的药物毫无作用，还加剧了病情。<br><br>还好迎来了国庆假期，我想，终于能回家喘口气了吧。<br><br>在家里看的小诊所，没有先进的机器，靠医生多年的经验望闻问切。第一个医生说是因为受凉引起的支气管炎，做了雾化吃了药。那个晚上终于只咳醒了两次，将近十天以来最好眠的一个晚上。我想，看来有希望了。然而第二天依旧如此。于是换了第二个医生，信誓旦旦诊断是热气引起的。隔两天没用，又换回第一个医生，继续雾化治疗。遇上重阳节，家里祭祖，或许是晒了太阳，回来后忍不住干呕，当时只觉这病遥遥无期，或许在治好前已被睡眠不足折磨疯。以前看过一篇小说，男主七八岁开始十几年没有睡好一觉——因为神经衰弱，丁点声响都会梦醒——而患上了躁狂症，当时自己还觉得挺神奇，这不是相对于普通人有了双倍的时间努力，难怪成了男主。<br><br>偏题了。饭前母亲见我眼眶微红还笑嗔，生病就是不舒服呀，有什么好哭的。我瞬间就委屈了，眼泪吧嗒吧嗒地掉。觉得自己脆弱，又羞愧，这么大还要母亲担心。在得知我生病就开始担心，常问今日睡眠如何，每日换着菜式，凉了热了都不敢做。当天又带着我换了第三个医生，这次是社区医院，说凉还是热引起的我忘了，那天开始猪肉是我唯一能吃的荤菜。<br><br>此时我已经习惯咳嗽伴随似梦似醒的日子。本想回去那周换个医院（既然西医不行那就试试中医），遇上一个重要朋友的婚期，就改为参加婚礼后再看。去之前还找了家药店，期望能吃些中成药缓缓白日的咳嗽。<br><br>没想到这次真的缓解了，白日已经很少会咳，晚上最多醒来两次。我开始相信药店老板娘的话了，是因为刚开始受凉没好全，又受了热气，所以外热内寒互相影响。——这时候的我精神上已经病入膏肓，只要能稍微治愈微末我都无条件相信那个人，深刻体会了什么叫急病乱投医。像个嗑了长生药的老皇帝，只要沉珂少了一分都是朕年轻了十岁，朕的国师炼丹有道。<br><br>期间新人来敬酒的时候，鉴于这破身体，我只含着一小口，没想到酒气一下子冲进了喉咙，当下咳嗽不止。我自以为好转，隔了一周才去的中医院，但那时已经咳太久，深呼吸肋骨都疼。于是预约了一个预约量最多的呼吸内科医生，六七十岁的老奶奶，预约了也很多人排队，十一点多才轮到我。医生听我开始叙述病情，不可置信地再次询问我是否咳了将近一个月，确认后说咳嗽这么久要照个肺才行。问了我几个问题，就让我去照胸片和血检，还有个第二天才能拿结果的支原体抗体检查。<br><br>胸片结果诊断肺部感染，医生看到连声说来得太迟了，要住院打点滴。因为那个中医院没住院部，她温柔地谆谆安慰这情况什么医院都会收，让我别担心。我反而觉得更怕了，对于未知，从小到大最严重只烧到39°，“住院”这个词不亚于“你患了癌症”。<br><br>那天我从医院出来，在隔壁小区的树下坐了一个小时，千愁万绪。<br><br>有那么一刻，我想好了怎么让家人继承我那存款微末的支付宝。<br><br>跟姐妹说情况的时候还乱糟糟，前言不搭后语，姐姐匆忙请假买了晚上的票就要过来，还问我怕不怕。我说怕啊。太直接怕她担心，又补了一句玩笑，怕以后不能吃辣条。</p>\n","categories":["Personal"],"tags":["2019"]},{"title":"收藏CSS：Hover下划线收缩、蛇形边框","url":"https://xiaoniezi.github.io/2019-10-16/css-effect-01/","content":"<ol>\n<li>hover下划线收缩</li>\n<li>蛇形边框<span id=\"more\"></span>\n</li>\n</ol>\n<h3 id=\"hover下划线收缩\"><a href=\"#hover下划线收缩\" class=\"headerlink\" title=\"hover下划线收缩\"></a>hover下划线收缩</h3><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\"><<span class=\"name\">div</span> <span class=\"attr\">class</span>=<span class=\"string\">"hover-line"</span>></span>Daily practice is the trick in learning a foreign language.<span class=\"tag\"></<span class=\"name\">div</span>></span></span><br></pre></td></tr></table></figure>\n<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><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"selector-class\">.hover-line</span>{</span><br><span class=\"line\"> <span class=\"attribute\">display</span>: inline-block;</span><br><span class=\"line\"> <span class=\"attribute\">position</span>: relative;</span><br><span class=\"line\"> <span class=\"attribute\">line-height</span>: <span class=\"number\">34px</span>;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"comment\">/* 伪元素作下划线 */</span></span><br><span class=\"line\"><span class=\"selector-class\">.hover-line</span><span class=\"selector-pseudo\">:after</span>{</span><br><span class=\"line\"> <span class=\"attribute\">content</span>: <span class=\"string\">''</span>;</span><br><span class=\"line\"> <span class=\"attribute\">position</span>: absolute;</span><br><span class=\"line\"> <span class=\"attribute\">width</span>: <span class=\"number\">100%</span>;</span><br><span class=\"line\"> <span class=\"attribute\">height</span>: <span class=\"number\">2px</span>;</span><br><span class=\"line\"> <span class=\"attribute\">left</span>: <span class=\"number\">0</span>;</span><br><span class=\"line\"> <span class=\"attribute\">bottom</span>: <span class=\"number\">0</span>;</span><br><span class=\"line\"> <span class=\"attribute\">background-color</span>: green;</span><br><span class=\"line\"> <span class=\"attribute\">transform</span>: <span class=\"built_in\">scaleX</span>(<span class=\"number\">0</span>);</span><br><span class=\"line\"> <span class=\"attribute\">transform-origin</span>: bottom right;</span><br><span class=\"line\"> <span class=\"attribute\">transition</span>: transform .<span class=\"number\">3s</span> ease-out;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"comment\">/* 浮动效果 */</span></span><br><span class=\"line\"><span class=\"selector-class\">.hover-line</span><span class=\"selector-pseudo\">:hover</span><span class=\"selector-pseudo\">:after</span>{</span><br><span class=\"line\"> <span class=\"attribute\">transform</span>: <span class=\"built_in\">scaleX</span>(<span class=\"number\">1</span>);</span><br><span class=\"line\"> <span class=\"attribute\">transform-origin</span>: bottom left;</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n<h3 id=\"蛇形边框\"><a href=\"#蛇形边框\" class=\"headerlink\" title=\"蛇形边框\"></a>蛇形边框</h3><p>源码出自<a href=\"https://juejin.im/post/5d9ec8b0518825651b1dffa3\">掘金-你未必知道的CSS知识点（第二季）</a><br>这个作者还有很多优秀的CSS效果</p>\n<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\"><<span class=\"name\">div</span> <span class=\"attr\">class</span>=<span class=\"string\">"snake"</span>></span><span class=\"tag\"></<span class=\"name\">div</span>></span></span><br></pre></td></tr></table></figure>\n<p>需要注意的是：整体容器 = clientWidth(190px)+leftBorder(5px)+rightBorder(5px) = offsetWidth(200px)<br><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><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"selector-class\">.snake</span>{</span><br><span class=\"line\"> <span class=\"attribute\">position</span>: relative;</span><br><span class=\"line\"> <span class=\"attribute\">width</span>: <span class=\"number\">190px</span>;</span><br><span class=\"line\"> <span class=\"attribute\">height</span>: <span class=\"number\">190px</span>;</span><br><span class=\"line\"> <span class=\"attribute\">background-color</span>: coral;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"selector-class\">.snake</span><span class=\"selector-pseudo\">:before</span>,</span><br><span class=\"line\"><span class=\"selector-class\">.snake</span><span class=\"selector-pseudo\">:after</span>{</span><br><span class=\"line\"> <span class=\"attribute\">content</span>: <span class=\"string\">''</span>;</span><br><span class=\"line\"> <span class=\"attribute\">position</span>: absolute;</span><br><span class=\"line\"> <span class=\"attribute\">top</span>: -<span class=\"number\">5px</span>;</span><br><span class=\"line\"> <span class=\"attribute\">bottom</span>: -<span class=\"number\">5px</span>;</span><br><span class=\"line\"> <span class=\"attribute\">left</span>: -<span class=\"number\">5px</span>;</span><br><span class=\"line\"> <span class=\"attribute\">right</span>: -<span class=\"number\">5px</span>;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"selector-class\">.snake</span><span class=\"selector-pseudo\">:before</span>{</span><br><span class=\"line\"> <span class=\"attribute\">border</span>: <span class=\"number\">5px</span> solid green;</span><br><span class=\"line\"> <span class=\"attribute\">animation</span>: snakeMove <span class=\"number\">5s</span> linear infinite;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"selector-class\">.snake</span><span class=\"selector-pseudo\">:after</span>{</span><br><span class=\"line\"> <span class=\"attribute\">border</span>: <span class=\"number\">5px</span> solid red;</span><br><span class=\"line\"> <span class=\"attribute\">animation</span>: snakeMove <span class=\"number\">5s</span> linear infinite -<span class=\"number\">2.5s</span>;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"keyword\">@keyframes</span> snakeMove{</span><br><span class=\"line\"> <span class=\"number\">0%</span>, <span class=\"number\">100%</span>{</span><br><span class=\"line\"> <span class=\"attribute\">clip</span>: <span class=\"built_in\">rect</span>(<span class=\"number\">0px</span>, <span class=\"number\">200px</span>, <span class=\"number\">5px</span>, <span class=\"number\">0px</span>);</span><br><span class=\"line\"> }</span><br><span class=\"line\"> <span class=\"number\">25%</span>{</span><br><span class=\"line\"> <span class=\"attribute\">clip</span>: <span class=\"built_in\">rect</span>(<span class=\"number\">0px</span>, <span class=\"number\">200px</span>, <span class=\"number\">200px</span>, <span class=\"number\">195px</span>);</span><br><span class=\"line\"> }</span><br><span class=\"line\"> <span class=\"number\">50%</span>{</span><br><span class=\"line\"> <span class=\"attribute\">clip</span>: <span class=\"built_in\">rect</span>(<span class=\"number\">195px</span>, <span class=\"number\">200px</span>, <span class=\"number\">200px</span>, <span class=\"number\">0px</span>);</span><br><span class=\"line\"> }</span><br><span class=\"line\"> <span class=\"number\">75%</span>{</span><br><span class=\"line\"> <span class=\"attribute\">clip</span>: <span class=\"built_in\">rect</span>(<span class=\"number\">0px</span>, <span class=\"number\">5px</span> <span class=\"number\">200px</span>, <span class=\"number\">0px</span>);</span><br><span class=\"line\"> }</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure></p>\n","categories":["CSS"],"tags":["css"]},{"title":"防抖和节流","url":"https://xiaoniezi.github.io/2019-10-16/debounce-and-throttle/","content":"<p>一直以为这么高端的两个名字，实际意义理解起来也很难。<br>然而几行代码已经足以概况，或许项目中已经运用而不自知。<br><span id=\"more\"></span></p>\n<hr>\n<h3 id=\"防抖\"><a href=\"#防抖\" class=\"headerlink\" title=\"防抖\"></a>防抖</h3><p>概况：在事件触发后一定时间再执行，这段时间内再次触发事件就重新计时。<br><figure class=\"highlight js\"><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">function</span> <span class=\"title function_\">debounce</span>(<span class=\"params\">fn</span>){</span><br><span class=\"line\"> <span class=\"keyword\">let</span> timer = <span class=\"literal\">null</span>;</span><br><span class=\"line\"> <span class=\"keyword\">return</span> <span class=\"keyword\">function</span>(<span class=\"params\"></span>){</span><br><span class=\"line\"> <span class=\"comment\">// 触发时重置</span></span><br><span class=\"line\"> <span class=\"built_in\">clearTimeout</span>(timer);</span><br><span class=\"line\"> timer = <span class=\"built_in\">setTimeout</span>(<span class=\"function\">() =></span> {</span><br><span class=\"line\"> fn.<span class=\"title function_\">apply</span>(<span class=\"variable language_\">this</span>, <span class=\"variable language_\">arguments</span>)</span><br><span class=\"line\"> }, <span class=\"number\">500</span>)</span><br><span class=\"line\"> }</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure></p>\n<p>监听一个输入框连续输入不触发，停止输入后进行搜索<br><figure class=\"highlight js\"><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\"><span class=\"keyword\">let</span> bounceInput = <span class=\"variable language_\">document</span>.<span class=\"title function_\">getElementById</span>(<span class=\"string\">"DeBounce"</span>);</span><br><span class=\"line\">bounceInput.<span class=\"title function_\">addEventListener</span>(<span class=\"string\">"input"</span>, <span class=\"title function_\">debounce</span>(<span class=\"keyword\">function</span>(<span class=\"params\"></span>){</span><br><span class=\"line\"> <span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(<span class=\"string\">"debounce success!"</span>)</span><br><span class=\"line\">}))</span><br></pre></td></tr></table></figure></p>\n<h3 id=\"节流\"><a href=\"#节流\" class=\"headerlink\" title=\"节流\"></a>节流</h3><p>概况：在一定时间内无论触发多少次事件都只执行一次。<br><figure class=\"highlight js\"><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=\"keyword\">function</span> <span class=\"title function_\">throttle</span>(<span class=\"params\">fn</span>){</span><br><span class=\"line\"> <span class=\"comment\">// 当前是否可触发</span></span><br><span class=\"line\"> <span class=\"keyword\">let</span> isOpen = <span class=\"literal\">true</span>;</span><br><span class=\"line\"> <span class=\"keyword\">return</span> <span class=\"keyword\">function</span>(<span class=\"params\"></span>){</span><br><span class=\"line\"> <span class=\"keyword\">if</span>(!isOpen) <span class=\"keyword\">return</span>;</span><br><span class=\"line\"> isOpen = <span class=\"literal\">false</span>;</span><br><span class=\"line\"> <span class=\"built_in\">setTimeout</span>(<span class=\"function\">() =></span> {</span><br><span class=\"line\"> fn.<span class=\"title function_\">apply</span>(<span class=\"variable language_\">this</span>, <span class=\"variable language_\">arguments</span>);</span><br><span class=\"line\"> isOpen = <span class=\"literal\">true</span>;</span><br><span class=\"line\"> }, <span class=\"number\">500</span>)</span><br><span class=\"line\"> }</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure></p>\n<p>监听窗口大小变化在一定时间内只触发一次，避免高频执行<br><figure class=\"highlight js\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"variable language_\">window</span>.<span class=\"title function_\">addEventListener</span>(<span class=\"string\">"resize"</span>, <span class=\"title function_\">throttle</span>(<span class=\"keyword\">function</span>(<span class=\"params\"></span>){</span><br><span class=\"line\"> <span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(<span class=\"string\">"throttle success~"</span>)</span><br><span class=\"line\">}))</span><br></pre></td></tr></table></figure></p>\n","categories":["JS"],"tags":["javascript"]},{"title":"Share Time ~（第五期）","url":"https://xiaoniezi.github.io/2019-08-21/share-time-05/","content":"<p>关于Vue的资源做个合集，可能会有重复</p>\n<span id=\"more\"></span>\n<hr>\n<p>自从在KTV听了朋友唱毛不易的歌后越来越喜欢了——是金子总会发光的</p>\n<iframe frameborder=\"no\" border=\"0\" marginwidth=\"0\" marginheight=\"0\" width=300 height=86 src=\"//music.163.com/outchain/player?type=2&id=569200213&auto=0&height=66\"></iframe>\n\n\n<ul>\n<li><p><a href=\"https://github.com/vuejs/awesome-vue\">Github Awesome Vue</a><br>基本上集合了所有Vue相关的资源了。</p>\n</li>\n<li><p><a href=\"https://vuejsexamples.com/\">Vue Examples——各种各样的组件</a><br>常见如表格、表单、菜单，少用的拖拽、播放器、图表等都能找到相应功能，提供了demo和源码。遇到项目紧急功能开发的时候，可以到此挖掘搬运。</p>\n</li>\n<li><p><a href=\"https://madewithvuejs.com/\">Make With Vuejs</a><br>跟上一个比范围更为广阔，除了组件（不会提供demo）还有Vue书籍、用到Vuejs技术的APP和游戏。大概一项技术的热门总是少不了扫雷？</p>\n</li>\n</ul>\n<hr>\n<p>介绍几个单一的组件：</p>\n<ul>\n<li><p><a href=\"https://zhanziyang.github.io/vue-croppa/#/demos\">图片裁剪</a><br>功能全面，还没用上，先收藏。</p>\n</li>\n<li><p><a href=\"https://github.com/baianat/vee-validate\">Vee表单验证</a><br>用惯了ElementUI的表单验证，但每次更新总会有各种各样的bug，留个备选。</p>\n</li>\n<li><p><a href=\"https://surmon-china.github.io/vue-quill-editor/\">Quill Editor</a><br>一个简洁的文本编辑器。</p>\n</li>\n<li><p><a href=\"https://github.com/hilongjw/vue-dragging\">Vue Dragging</a><br>一个很好用的列表拖拽插件。</p>\n</li>\n<li><p><a href=\"https://github.com/xlsdg/vue-countup-v2\">计数器</a><br>一个简单又方便的计数器。</p>\n</li>\n</ul>\n<hr>\n<p>写这篇文章的时候才深刻感受到收藏的Vue资源太少了，一方面是因为看过的知识点容易理解，现学现用（说vue是最简单的框架不是没理由），另一方面全靠平时积累，技巧零散，一个个小功能都收集起来会比较费功夫。</p>\n","categories":["Share"],"tags":["vue","javascript"]},{"title":"常用日期操作集合（持续更新08.22）","url":"https://xiaoniezi.github.io/2019-06-18/operate-on-date/","content":"<p>项目中常用到对于日期的处理事件<br><span id=\"more\"></span></p>\n<hr>\n<h2 id=\"1-时间戳转换成日期\"><a href=\"#1-时间戳转换成日期\" class=\"headerlink\" title=\"1. 时间戳转换成日期\"></a>1. 时间戳转换成日期</h2><figure class=\"highlight js\"><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">let</span> <span class=\"title function_\">Timer</span> = (<span class=\"params\">_chuo, has_time, has_second</span>) => {<span class=\"comment\">// 时间戳转换</span></span><br><span class=\"line\"> <span class=\"comment\">/*</span></span><br><span class=\"line\"><span class=\"comment\"> * @param {number} *_chuo 时间戳</span></span><br><span class=\"line\"><span class=\"comment\"> * @param {boolean} has_time 是否具体到时分</span></span><br><span class=\"line\"><span class=\"comment\"> * @param {boolean} has_second 是否具体到秒</span></span><br><span class=\"line\"><span class=\"comment\"> */</span></span><br><span class=\"line\"> <span class=\"keyword\">if</span> (!_chuo) {</span><br><span class=\"line\"> <span class=\"keyword\">return</span> _chuo</span><br><span class=\"line\"> }</span><br><span class=\"line\"> <span class=\"keyword\">let</span> times = <span class=\"keyword\">new</span> <span class=\"title class_\">Date</span>(<span class=\"built_in\">parseInt</span>(_chuo));</span><br><span class=\"line\"> <span class=\"keyword\">let</span> time_y = times.<span class=\"title function_\">getFullYear</span>(),</span><br><span class=\"line\"> time_M = (times.<span class=\"title function_\">getMonth</span>() + <span class=\"number\">1</span> < <span class=\"number\">10</span> ? <span class=\"string\">'0'</span> + (times.<span class=\"title function_\">getMonth</span>() + <span class=\"number\">1</span>) : times.<span class=\"title function_\">getMonth</span>() + <span class=\"number\">1</span>),</span><br><span class=\"line\"> time_d = (times.<span class=\"title function_\">getDate</span>() < <span class=\"number\">10</span> ? <span class=\"string\">'0'</span> + times.<span class=\"title function_\">getDate</span>() : times.<span class=\"title function_\">getDate</span>()),</span><br><span class=\"line\"> time_h = (times.<span class=\"title function_\">getHours</span>() < <span class=\"number\">10</span> ? <span class=\"string\">'0'</span> + times.<span class=\"title function_\">getHours</span>() : times.<span class=\"title function_\">getHours</span>()),</span><br><span class=\"line\"> time_m = (times.<span class=\"title function_\">getMinutes</span>() < <span class=\"number\">10</span> ? <span class=\"string\">'0'</span> + times.<span class=\"title function_\">getMinutes</span>() : times.<span class=\"title function_\">getMinutes</span>()),</span><br><span class=\"line\"> time_s = (times.<span class=\"title function_\">getSeconds</span>() < <span class=\"number\">10</span> ? <span class=\"string\">'0'</span> + times.<span class=\"title function_\">getSeconds</span>() : times.<span class=\"title function_\">getSeconds</span>());</span><br><span class=\"line\"> <span class=\"keyword\">let</span> str = time_y + <span class=\"string\">"-"</span> + time_M + <span class=\"string\">"-"</span> + time_d;</span><br><span class=\"line\"> <span class=\"keyword\">if</span> (has_time) {</span><br><span class=\"line\"> <span class=\"keyword\">let</span> t = str + <span class=\"string\">" "</span> + time_h + <span class=\"string\">":"</span> + time_m;</span><br><span class=\"line\"> <span class=\"keyword\">return</span> has_second ? t + <span class=\"string\">":"</span> + time_s : t</span><br><span class=\"line\"> } <span class=\"keyword\">else</span> {</span><br><span class=\"line\"> <span class=\"keyword\">return</span> str;</span><br><span class=\"line\"> }</span><br><span class=\"line\">};</span><br></pre></td></tr></table></figure>\n<hr>\n<h2 id=\"2-两个日期相差天数\"><a href=\"#2-两个日期相差天数\" class=\"headerlink\" title=\"2. 两个日期相差天数\"></a>2. 两个日期相差天数</h2><figure class=\"highlight js\"><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\">// 初始化日期</span></span><br><span class=\"line\"><span class=\"keyword\">let</span> startTime = <span class=\"string\">'2019-05-10'</span>,</span><br><span class=\"line\"> endTime = <span class=\"string\">'2019-06-18'</span>;</span><br><span class=\"line\"><span class=\"keyword\">let</span> <span class=\"title function_\">getDiffDays</span> = (<span class=\"params\">_start, _end</span>) => {</span><br><span class=\"line\"> <span class=\"comment\">// 获取时间戳事件</span></span><br><span class=\"line\"> <span class=\"keyword\">let</span> <span class=\"title function_\">get_timer</span> = (<span class=\"params\">str</span>) => {</span><br><span class=\"line\"> <span class=\"keyword\">return</span> <span class=\"keyword\">new</span> <span class=\"title class_\">Date</span>(str).<span class=\"title function_\">getTime</span>();</span><br><span class=\"line\"> };</span><br><span class=\"line\"> <span class=\"keyword\">let</span> t1 = <span class=\"title function_\">get_timer</span>(_start),</span><br><span class=\"line\"> t2 = <span class=\"title function_\">get_timer</span>(_end),</span><br><span class=\"line\"> oneDayTime = <span class=\"number\">1000</span>*<span class=\"number\">60</span>*<span class=\"number\">60</span>*<span class=\"number\">24</span>,<span class=\"comment\">// 一天的毫秒数</span></span><br><span class=\"line\"> diffDays = <span class=\"title class_\">Math</span>.<span class=\"title function_\">floor</span>((t1 - t2)/oneDayTime);<span class=\"comment\">// 相差天数</span></span><br><span class=\"line\"> <span class=\"keyword\">return</span> <span class=\"title class_\">Math</span>.<span class=\"title function_\">abs</span>(diffDays);<span class=\"comment\">// 返回绝对值</span></span><br><span class=\"line\">};</span><br><span class=\"line\"><span class=\"title function_\">getDiffDays</span>(startTime, endTime)</span><br></pre></td></tr></table></figure>\n<hr>\n<h2 id=\"3-获取几天后的日期\"><a href=\"#3-获取几天后的日期\" class=\"headerlink\" title=\"3. 获取几天后的日期\"></a>3. 获取几天后的日期</h2><figure class=\"highlight js\"><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"title class_\">Date</span>.<span class=\"property\"><span class=\"keyword\">prototype</span></span>.<span class=\"property\">offDays</span> = <span class=\"keyword\">function</span>(<span class=\"params\">days</span>){</span><br><span class=\"line\"> <span class=\"keyword\">let</span> _date = <span class=\"keyword\">new</span> <span class=\"title class_\">Date</span>(<span class=\"variable language_\">this</span>.<span class=\"title function_\">valueOf</span>());<span class=\"comment\">// 当前日期</span></span><br><span class=\"line\"> _date.<span class=\"title function_\">setDate</span>(_date.<span class=\"title function_\">getDate</span>() + days);</span><br><span class=\"line\"> <span class=\"keyword\">return</span> _date;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"comment\">// 示例</span></span><br><span class=\"line\"><span class=\"keyword\">new</span> <span class=\"title class_\">Date</span>().<span class=\"title function_\">offDays</span>(<span class=\"number\">3</span>)<span class=\"comment\">// 三天后</span></span><br><span class=\"line\"><span class=\"keyword\">new</span> <span class=\"title class_\">Date</span>().<span class=\"title function_\">offDays</span>(-<span class=\"number\">3</span>)<span class=\"comment\">// 三天前</span></span><br><span class=\"line\"><span class=\"keyword\">new</span> <span class=\"title class_\">Date</span>(<span class=\"string\">"2019-06-18"</span>).<span class=\"title function_\">offDays</span>(-<span class=\"number\">10</span>)<span class=\"comment\">//2019-06-18的十天后</span></span><br></pre></td></tr></table></figure>\n<hr>\n<h2 id=\"4-当天是本月第几周\"><a href=\"#4-当天是本月第几周\" class=\"headerlink\" title=\"4. 当天是本月第几周\"></a>4. 当天是本月第几周</h2><p>在网上找的两种方法，但是都会有点误差，相对来说用第一种</p>\n<p>action 1：<br><figure class=\"highlight js\"><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\">let</span> <span class=\"title function_\">getMonthWeek</span> = (<span class=\"params\">str</span>) => {</span><br><span class=\"line\"> <span class=\"comment\">/*</span></span><br><span class=\"line\"><span class=\"comment\"> y = s = 当前日期</span></span><br><span class=\"line\"><span class=\"comment\"> m = 6 - w = 当前周的还有几天过完(不算今天)</span></span><br><span class=\"line\"><span class=\"comment\"> y + m 的和在除以7 就是当天是当前月份的第几周 </span></span><br><span class=\"line\"><span class=\"comment\"> */</span></span><br><span class=\"line\"> <span class=\"keyword\">let</span> arr = str.<span class=\"title function_\">split</span>(<span class=\"string\">"-"</span>);</span><br><span class=\"line\"> <span class=\"keyword\">let</span> [y, m, d] = arr;<span class=\"comment\">// 分别对应年，月，日</span></span><br><span class=\"line\"> <span class=\"keyword\">let</span> _date = <span class=\"keyword\">new</span> <span class=\"title class_\">Date</span>(y, <span class=\"built_in\">parseInt</span>(m) - <span class=\"number\">1</span>, d),</span><br><span class=\"line\"> w = _date.<span class=\"title function_\">getDay</span>(),</span><br><span class=\"line\"> s = _date.<span class=\"title function_\">getDate</span>();</span><br><span class=\"line\"> <span class=\"keyword\">return</span> <span class=\"title class_\">Math</span>.<span class=\"title function_\">ceil</span>((s + <span class=\"number\">6</span> - w) / <span class=\"number\">7</span>)</span><br><span class=\"line\">};</span><br><span class=\"line\"><span class=\"title function_\">getMonthWeek</span>(<span class=\"string\">"2019-06-18"</span>)</span><br></pre></td></tr></table></figure></p>\n<p>action 2：<br><figure class=\"highlight js\"><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">let</span> <span class=\"title function_\">getMonthWeek</span> = (<span class=\"params\">str</span>) => {</span><br><span class=\"line\"> <span class=\"keyword\">let</span> week = <span class=\"title class_\">Math</span>.<span class=\"title function_\">ceil</span>(str.<span class=\"title function_\">getDate</span>()/<span class=\"number\">7</span>),</span><br><span class=\"line\"> month = str.<span class=\"title function_\">getMonth</span>() + <span class=\"number\">1</span>;<span class=\"comment\">// 该日期为第几周</span></span><br><span class=\"line\"> <span class=\"comment\">// 判断这个月前7天是周几，如果不是周一，则计入上个月</span></span><br><span class=\"line\"> <span class=\"keyword\">if</span>(str.<span class=\"title function_\">getDate</span>() < <span class=\"number\">7</span>){</span><br><span class=\"line\"> <span class=\"keyword\">if</span>(str.<span class=\"title function_\">getDay</span>() !== <span class=\"number\">1</span>){</span><br><span class=\"line\"> week = <span class=\"number\">5</span>;</span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\"> <span class=\"keyword\">return</span> week;</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure></p>\n<hr>\n<h2 id=\"5-所在月的最后一天\"><a href=\"#5-所在月的最后一天\" class=\"headerlink\" title=\"5. 所在月的最后一天\"></a>5. 所在月的最后一天</h2><p>有个瑕疵，如果当前是1月份末尾几天，对应的下个月就会跳到3月份，所以获取到的日期是2月份的最后一天<br><figure class=\"highlight js\"><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=\"keyword\">let</span> <span class=\"title function_\">getMonthLast</span> = (<span class=\"params\">str</span>) => {</span><br><span class=\"line\"> <span class=\"keyword\">let</span> _end = <span class=\"keyword\">new</span> <span class=\"title class_\">Date</span>(str);</span><br><span class=\"line\"> _end.<span class=\"title function_\">setMonth</span>(_end.<span class=\"property\">getMonth</span> + <span class=\"number\">1</span>);<span class=\"comment\">// 设置成下一个月的同一天</span></span><br><span class=\"line\"> _end.<span class=\"title function_\">setDate</span>(<span class=\"number\">0</span>);<span class=\"comment\">// 设0 =》 起始天 =》 上个月最后一天</span></span><br><span class=\"line\"> <span class=\"keyword\">return</span> _end;</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure></p>\n<hr>\n<h2 id=\"6-两个日期相隔月份\"><a href=\"#6-两个日期相隔月份\" class=\"headerlink\" title=\"6. 两个日期相隔月份\"></a>6. 两个日期相隔月份</h2><figure class=\"highlight js\"><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">function</span> <span class=\"title function_\">getMonthInterval</span>(<span class=\"params\">_date</span>){</span><br><span class=\"line\"> <span class=\"comment\">// _date为两个日期的数组，如：['2019-05-11', '2019-08-22']</span></span><br><span class=\"line\"> <span class=\"keyword\">let</span> _start = <span class=\"keyword\">new</span> <span class=\"title class_\">Date</span>(_date[<span class=\"number\">0</span>]),</span><br><span class=\"line\"> _end = <span class=\"keyword\">new</span> <span class=\"title class_\">Date</span>(_date[<span class=\"number\">1</span>]);</span><br><span class=\"line\"> <span class=\"keyword\">let</span> yearToMonth = (_end.<span class=\"title function_\">getFullYear</span>() - _start.<span class=\"title function_\">getFullYear</span>())*<span class=\"number\">12</span>,<span class=\"comment\">// 相隔年份 * 12</span></span><br><span class=\"line\"> monthToMonth = _end.<span class=\"title function_\">getMonth</span>() - _start.<span class=\"title function_\">getMonth</span>();<span class=\"comment\">// 单独月份相差</span></span><br><span class=\"line\"> <span class=\"keyword\">return</span> <span class=\"built_in\">parseInt</span>(yearToMonth + monthToMonth);</span><br><span class=\"line\">};</span><br></pre></td></tr></table></figure>","categories":["JS"],"tags":["javascript","date"]},{"title":"自定义导航栏菜单失焦","url":"https://xiaoniezi.github.io/2019-06-08/blur-custom-nav-menu/","content":"<p>一个简单的效果，点击导航栏弹出菜单后，在菜单外点击触发失焦，自动关闭菜单<br><span id=\"more\"></span></p>\n<p>本文采用<a href=\"https://youzan.github.io/vant/#/zh-CN/nav-bar\">Vant</a>组件<br>核心：通过触发菜单内的<code>input</code>聚焦失焦控制显示/隐藏</p>\n<h2 id=\"导航栏：\"><a href=\"#导航栏：\" class=\"headerlink\" title=\"导航栏：\"></a>导航栏：</h2><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">van-nav-bar</span> <span class=\"attr\">title</span>=<span class=\"string\">"导航栏"</span> <span class=\"attr\">left-arrow</span> @<span class=\"attr\">click</span>=<span class=\"string\">"handleRight"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">van-icon</span> <span class=\"attr\">name</span>=<span class=\"string\">"ellipsis"</span> <span class=\"attr\">v-slot:right</span> /></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">van-nav-bar</span>></span></span><br></pre></td></tr></table></figure>\n<h2 id=\"菜单：\"><a href=\"#菜单：\" class=\"headerlink\" title=\"菜单：\"></a>菜单：</h2><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">div</span> <span class=\"attr\">v-show</span>=<span class=\"string\">"isShowMenu"</span> <span class=\"attr\">class</span>=<span class=\"string\">"nav-menu"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">ul</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">li</span> <span class=\"attr\">v-for</span>=<span class=\"string\">"item in menuList"</span> </span></span><br><span class=\"line\"><span class=\"tag\"> <span class=\"attr\">:key</span>=<span class=\"string\">"item"</span></span></span><br><span class=\"line\"><span class=\"tag\"> @<span class=\"attr\">click</span>=<span class=\"string\">"handleMenu(item)"</span>></span>{{ item }}<span class=\"tag\"></<span class=\"name\">li</span>></span></span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">ul</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">input</span> <span class=\"attr\">ref</span>=<span class=\"string\">"MenuInput"</span> <span class=\"attr\">type</span>=<span class=\"string\">"text"</span> @<span class=\"attr\">blur</span>=<span class=\"string\">"menuBlur"</span> /></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">div</span>></span></span><br></pre></td></tr></table></figure>\n<figure class=\"highlight scss\"><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"selector-class\">.nav-menu</span>{</span><br><span class=\"line\"> <span class=\"attribute\">position</span>: fixed;</span><br><span class=\"line\"> <span class=\"attribute\">top</span>: <span class=\"number\">40px</span>;</span><br><span class=\"line\"> <span class=\"attribute\">right</span>: <span class=\"number\">5px</span>;</span><br><span class=\"line\"> <span class=\"selector-tag\">input</span>{</span><br><span class=\"line\"> <span class=\"attribute\">position</span>: absolute;</span><br><span class=\"line\"> <span class=\"attribute\">left</span>: <span class=\"number\">0</span>;</span><br><span class=\"line\"> <span class=\"attribute\">bottom</span>: <span class=\"number\">0</span>;</span><br><span class=\"line\"> <span class=\"attribute\">width</span>: <span class=\"number\">0</span>;</span><br><span class=\"line\"> <span class=\"attribute\">height</span>: <span class=\"number\">0</span>;</span><br><span class=\"line\"> <span class=\"attribute\">margin</span>: <span class=\"number\">0</span>;</span><br><span class=\"line\"> <span class=\"attribute\">border</span>: none;</span><br><span class=\"line\"> <span class=\"attribute\">outline</span>: <span class=\"number\">0</span>;</span><br><span class=\"line\"> <span class=\"attribute\">opacity</span>: <span class=\"number\">0</span>;</span><br><span class=\"line\"> -webkit-appearence: none;</span><br><span class=\"line\"> }</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n<h2 id=\"事件：\"><a href=\"#事件：\" class=\"headerlink\" title=\"事件：\"></a>事件：</h2><figure class=\"highlight js\"><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">export</span> <span class=\"keyword\">default</span>{</span><br><span class=\"line\"> <span class=\"attr\">name</span>: <span class=\"string\">'custom-nav'</span>,</span><br><span class=\"line\"> <span class=\"title function_\">data</span>(<span class=\"params\"></span>){</span><br><span class=\"line\"> <span class=\"keyword\">return</span> {</span><br><span class=\"line\"> <span class=\"attr\">isShowMenu</span>: <span class=\"literal\">false</span>,<span class=\"comment\">// 控制菜单</span></span><br><span class=\"line\"> <span class=\"attr\">menuList</span>: [<span class=\"string\">'操作1'</span>, <span class=\"string\">'操作2'</span>],<span class=\"comment\">// 菜单</span></span><br><span class=\"line\"> }</span><br><span class=\"line\"> },</span><br><span class=\"line\"> <span class=\"attr\">methods</span>: {</span><br><span class=\"line\"> <span class=\"title function_\">handleMenu</span>(<span class=\"params\">item</span>){<span class=\"comment\">// 点击菜单项</span></span><br><span class=\"line\"> <span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(item)</span><br><span class=\"line\"> },</span><br><span class=\"line\"> <span class=\"title function_\">menuBlur</span>(<span class=\"params\"></span>){<span class=\"comment\">// 输入框失焦 =》 隐藏菜单</span></span><br><span class=\"line\"> <span class=\"variable language_\">this</span>.<span class=\"property\">isShowMenu</span> = <span class=\"literal\">false</span></span><br><span class=\"line\"> },</span><br><span class=\"line\"> <span class=\"title function_\">handleRight</span>(<span class=\"params\"></span>){<span class=\"comment\">// 点击导航栏右侧</span></span><br><span class=\"line\"> <span class=\"variable language_\">this</span>.<span class=\"property\">isShowMenu</span> = !<span class=\"variable language_\">this</span>.<span class=\"property\">isShowMenu</span></span><br><span class=\"line\"> <span class=\"comment\">// trigger焦点</span></span><br><span class=\"line\"> <span class=\"variable language_\">this</span>.$nextTick(<span class=\"function\">() =></span> {</span><br><span class=\"line\"> <span class=\"keyword\">if</span>(<span class=\"variable language_\">this</span>.<span class=\"property\">$refs</span>.<span class=\"property\">MenuInput</span>){</span><br><span class=\"line\"> <span class=\"variable language_\">this</span>.<span class=\"property\">$refs</span>.<span class=\"property\">MenuInput</span>.<span class=\"title function_\">focus</span>()</span><br><span class=\"line\"> }<span class=\"keyword\">else</span>{</span><br><span class=\"line\"> <span class=\"variable language_\">this</span>.<span class=\"property\">$refs</span>.<span class=\"property\">MenuInput</span>.<span class=\"title function_\">blur</span>()</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\">}</span><br></pre></td></tr></table></figure>\n<h2 id=\"问题：\"><a href=\"#问题：\" class=\"headerlink\" title=\"问题：\"></a>问题：</h2><ol>\n<li><p>菜单栏点击事件<code>handleMenu</code>与输入框失焦<code>menuBlur</code>冲突<br>由于js是单线程，所以两者无法同时进行，加个延迟</p>\n<figure class=\"highlight js\"><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"title function_\">menuBlur</span>(<span class=\"params\"></span>){</span><br><span class=\"line\"> <span class=\"built_in\">setTimeout</span>(<span class=\"function\">() =></span> {</span><br><span class=\"line\"> <span class=\"variable language_\">this</span>.<span class=\"property\">isShowMenu</span> = <span class=\"literal\">false</span>;</span><br><span class=\"line\"> }, <span class=\"number\">100</span>)</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n</li>\n<li><p>输入框聚焦同时弹出键盘<br>如果把input类型设置为hidden反而不能聚焦，所以加个只读属性<code>readonly</code></p>\n<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\"><<span class=\"name\">input</span> <span class=\"attr\">ref</span>=<span class=\"string\">"MenuInput"</span> <span class=\"attr\">readonly</span> <span class=\"attr\">type</span>=<span class=\"string\">"text"</span> @<span class=\"attr\">blur</span>=<span class=\"string\">"menuBlur"</span> /></span></span><br></pre></td></tr></table></figure>\n</li>\n<li><p>其他组件同时出发失焦事件<br>在用ElementUI的日期选择器时，其自带的<code>@blur</code>会上浮，不知道算不算bug。<br>此处带上事件修饰符可解决</p>\n<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\"><<span class=\"name\">el-date-picker</span> @<span class=\"attr\">blur.native.capture</span>=<span class=\"string\">"pickerBlur"</span>></span><span class=\"tag\"></<span class=\"name\">el-date-picker</span>></span></span><br></pre></td></tr></table></figure>\n</li>\n</ol>\n","categories":["Vue"],"tags":["vue","javascript","input"]},{"title":"在Vue中用canvas实现二维码和图片合成海报","url":"https://xiaoniezi.github.io/2019-06-04/qrcode-in-poster-with-vue/","content":"<p>在项目中经常会遇到需要将不同的二维码放到一张通用图片上，提供用户下载<br>简单来说，就是利用canvas将同等比例的二维码在图片上叠加，生成海报<br><span id=\"more\"></span></p>\n<h2 id=\"1-设置相应比例\"><a href=\"#1-设置相应比例\" class=\"headerlink\" title=\"1. 设置相应比例\"></a>1. 设置相应比例</h2><p>一般来说海报背景都是固定的，可以直接放在public文件夹，二维码可根据后台返回数据，也可用canvas生成，在此不多赘述<br><figure class=\"highlight js\"><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> posterBgImg <span class=\"keyword\">from</span> <span class=\"string\">'../public/images/poster_bg.png'</span>;<span class=\"comment\">// 海报底图</span></span><br><span class=\"line\"><span class=\"keyword\">import</span> qrcodeImg <span class=\"keyword\">from</span> <span class=\"string\">'../public/images/qrcode.png'</span>;<span class=\"comment\">// 二维码</span></span><br><span class=\"line\"><span class=\"keyword\">export</span> <span class=\"keyword\">default</span>{</span><br><span class=\"line\"> <span class=\"attr\">name</span>: <span class=\"string\">'qrcode-in-poster'</span>,</span><br><span class=\"line\"> <span class=\"title function_\">data</span>(<span class=\"params\"></span>){</span><br><span class=\"line\"> <span class=\"keyword\">return</span> {</span><br><span class=\"line\"> posterBgImg,</span><br><span class=\"line\"> qrcodeImg,</span><br><span class=\"line\"> <span class=\"attr\">posterSize</span>: <span class=\"number\">930</span>/<span class=\"number\">650</span>,<span class=\"comment\">// 海报高宽比例</span></span><br><span class=\"line\"> <span class=\"attr\">qrCodeSize</span>: {<span class=\"comment\">// 二维码与海报对应比例 =》 用于设置二维码在海报中的位置</span></span><br><span class=\"line\"> <span class=\"attr\">width</span>: <span class=\"number\">270</span>/<span class=\"number\">650</span>,</span><br><span class=\"line\"> <span class=\"attr\">height</span>: <span class=\"number\">270</span>/<span class=\"number\">930</span>,</span><br><span class=\"line\"> <span class=\"attr\">left</span>: <span class=\"number\">190</span>/<span class=\"number\">650</span>,</span><br><span class=\"line\"> <span class=\"attr\">top</span>: <span class=\"number\">448</span>/<span class=\"number\">650</span></span><br><span class=\"line\"> },</span><br><span class=\"line\"> <span class=\"attr\">poster</span>: <span class=\"string\">''</span>,<span class=\"comment\">// 合成图片</span></span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\">};</span><br></pre></td></tr></table></figure></p>\n<h2 id=\"2-获取屏幕宽度\"><a href=\"#2-获取屏幕宽度\" class=\"headerlink\" title=\"2. 获取屏幕宽度\"></a>2. 获取屏幕宽度</h2><p>限定移动端最大宽度为 480px<br><figure class=\"highlight jsx\"><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=\"attr\">computed</span>: {</span><br><span class=\"line\"> <span class=\"title function_\">screenWidth</span>(<span class=\"params\"></span>){</span><br><span class=\"line\"> <span class=\"keyword\">let</span> w = <span class=\"variable language_\">document</span>.<span class=\"property\">body</span>.<span class=\"property\">clientWidt</span> || <span class=\"variable language_\">document</span>.<span class=\"property\">documentElement</span>.<span class=\"property\">clientWidth</span> || <span class=\"number\">375</span>;</span><br><span class=\"line\"> <span class=\"keyword\">return</span> w > <span class=\"number\">480</span> ? <span class=\"number\">480</span> : w ;</span><br><span class=\"line\"> }</span><br><span class=\"line\">};</span><br></pre></td></tr></table></figure></p>\n<h2 id=\"3-组合图片\"><a href=\"#3-组合图片\" class=\"headerlink\" title=\"3. 组合图片\"></a>3. 组合图片</h2><figure class=\"highlight js\"><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><span class=\"line\">60</span><br><span class=\"line\">61</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">methods</span>: {</span><br><span class=\"line\"> <span class=\"title function_\">combinedPoster</span>(<span class=\"params\">_url</span>){</span><br><span class=\"line\"> <span class=\"keyword\">let</span> that = <span class=\"variable language_\">this</span>,</span><br><span class=\"line\"> qrcode = <span class=\"variable language_\">this</span>.<span class=\"property\">qrcodeImg</span>; <span class=\"comment\">// 二维码地址</span></span><br><span class=\"line\"> </span><br><span class=\"line\"> <span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(<span class=\"string\">"open draw: "</span>, _url, qrcode)</span><br><span class=\"line\"> <span class=\"keyword\">let</span> base64 = <span class=\"string\">''</span>,</span><br><span class=\"line\"> canvas = <span class=\"variable language_\">document</span>.<span class=\"title function_\">createElement</span>(<span class=\"string\">'canvas'</span>),</span><br><span class=\"line\"> ctx = canvas.<span class=\"title function_\">getContext</span>(<span class=\"string\">"2d"</span>),</span><br><span class=\"line\"> _w = <span class=\"variable language_\">this</span>.<span class=\"property\">screenWidth</span> * <span class=\"number\">2</span>, <span class=\"comment\">// 图片宽度： 由于手机屏幕时retina屏，都会多倍渲染，在此只设置2倍，如果直接设置等于手机屏幕，会导致生成的图片分辨率不够而模糊</span></span><br><span class=\"line\"> _h = <span class=\"variable language_\">this</span>.<span class=\"property\">posterSize</span> * _w, <span class=\"comment\">// 图片高度</span></span><br><span class=\"line\"> _qr_w = <span class=\"variable language_\">this</span>.<span class=\"property\">qrCodeSize</span>.<span class=\"property\">width</span> * _w, <span class=\"comment\">// 二维码宽 = 比例 * 宽度</span></span><br><span class=\"line\"> _qr_h = <span class=\"variable language_\">this</span>.<span class=\"property\">qrCodeSize</span>.<span class=\"property\">height</span> * _h, <span class=\"comment\">// 二维码高 = 比例 * 高度</span></span><br><span class=\"line\"> _qr_t = <span class=\"variable language_\">this</span>.<span class=\"property\">qrCodeSize</span>.<span class=\"property\">top</span> * _w, <span class=\"comment\">// 二维码顶部距离 = 比例 * 宽度</span></span><br><span class=\"line\"> _qr_l = <span class=\"variable language_\">this</span>.<span class=\"property\">qrCodeSize</span>.<span class=\"property\">left</span> * _w; <span class=\"comment\">// 二维码左侧距离 = 比例 * 宽度</span></span><br><span class=\"line\"> <span class=\"comment\">// 设置canvas宽高 </span></span><br><span class=\"line\"> canvas.<span class=\"property\">width</span> = _w; </span><br><span class=\"line\"> canvas.<span class=\"property\">height</span> = _h;</span><br><span class=\"line\"> ctx.<span class=\"title function_\">rect</span>(<span class=\"number\">0</span>, <span class=\"number\">0</span>, _w, _h);</span><br><span class=\"line\"> ctx.<span class=\"property\">fillStyle</span> = <span class=\"string\">'#fff'</span>; <span class=\"comment\">// 填充颜色</span></span><br><span class=\"line\"> ctx.<span class=\"title function_\">fill</span>();</span><br><span class=\"line\"> <span class=\"comment\">// 迭代生成： 第一层（底图）+ 第二层（二维码）</span></span><br><span class=\"line\"> <span class=\"comment\">// file：文件，size：[顶部距离，左侧距离，宽度，高度]</span></span><br><span class=\"line\"> <span class=\"keyword\">let</span> _list = [ </span><br><span class=\"line\"> {</span><br><span class=\"line\"> <span class=\"attr\">file</span>: _url,</span><br><span class=\"line\"> <span class=\"attr\">size</span>: [<span class=\"number\">0</span>, <span class=\"number\">0</span>, _w, _h]</span><br><span class=\"line\"> }, {</span><br><span class=\"line\"> <span class=\"attr\">file</span>: qrcode,</span><br><span class=\"line\"> <span class=\"attr\">size</span>: [_qr_l, _qr_t, _qr_w, _qr_h]</span><br><span class=\"line\"> }</span><br><span class=\"line\"> ];</span><br><span class=\"line\"> <span class=\"comment\">// 开始绘画</span></span><br><span class=\"line\"> <span class=\"keyword\">let</span> <span class=\"title function_\">drawing</span> = (<span class=\"params\">_index</span>) => {</span><br><span class=\"line\"> <span class=\"comment\">// 判断当前索引 =》 是否已绘制完毕</span></span><br><span class=\"line\"> <span class=\"keyword\">if</span> (_index < _list.<span class=\"property\">length</span>) {</span><br><span class=\"line\"> <span class=\"comment\">// 等图片预加载后画图</span></span><br><span class=\"line\"> <span class=\"keyword\">let</span> img = <span class=\"keyword\">new</span> <span class=\"title class_\">Image</span>(),</span><br><span class=\"line\"> timeStamp = <span class=\"keyword\">new</span> <span class=\"title class_\">Date</span>().<span class=\"title function_\">getTime</span>();</span><br><span class=\"line\"> <span class=\"comment\">// 防止跨域</span></span><br><span class=\"line\"> img.<span class=\"title function_\">setAttribute</span>(<span class=\"string\">'crossOrigin'</span>, <span class=\"string\">'anonymous'</span>)</span><br><span class=\"line\"> <span class=\"comment\">// 链接加上时间戳</span></span><br><span class=\"line\"> img.<span class=\"property\">src</span> = _list[_index].<span class=\"property\">file</span> + <span class=\"string\">'?'</span> + timeStamp</span><br><span class=\"line\"> img.<span class=\"property\">onload</span> = <span class=\"keyword\">function</span>(<span class=\"params\"></span>) {</span><br><span class=\"line\"> <span class=\"comment\">// 画图</span></span><br><span class=\"line\"> ctx.<span class=\"title function_\">drawImage</span>(img, ..._list[_index].<span class=\"property\">size</span>)</span><br><span class=\"line\"> <span class=\"comment\">// 递归_list</span></span><br><span class=\"line\"> <span class=\"title function_\">drawing</span>(_index + <span class=\"number\">1</span>)</span><br><span class=\"line\"> }</span><br><span class=\"line\"> } <span class=\"keyword\">else</span> {</span><br><span class=\"line\"> <span class=\"comment\">// 生成图片</span></span><br><span class=\"line\"> base64 = canvas.<span class=\"title function_\">toDataURL</span>(<span class=\"string\">"image/png"</span>)</span><br><span class=\"line\"> <span class=\"keyword\">if</span> (base64) {</span><br><span class=\"line\"> <span class=\"comment\">// 赋值相应海报上</span></span><br><span class=\"line\"> <span class=\"variable language_\">this</span>.$set(that, <span class=\"string\">'poster'</span>, base64)</span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\"> <span class=\"title function_\">drawing</span>(<span class=\"number\">0</span>)</span><br><span class=\"line\"> }</span><br><span class=\"line\">};</span><br></pre></td></tr></table></figure>\n<figure class=\"highlight js\"><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\"><span class=\"title function_\">mounted</span>(<span class=\"params\"></span>){</span><br><span class=\"line\"> <span class=\"comment\">// 需要合成海报的图片</span></span><br><span class=\"line\"> <span class=\"variable language_\">this</span>.<span class=\"title function_\">draw</span>(<span class=\"variable language_\">this</span>.<span class=\"property\">posterBgImg</span>)</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n<h2 id=\"4-下载\"><a href=\"#4-下载\" class=\"headerlink\" title=\"4. 下载\"></a>4. 下载</h2><p>点击下载合成图片</p>\n<figure class=\"highlight js\"><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">methods</span>: {</span><br><span class=\"line\"> <span class=\"title function_\">handleDownload</span>(<span class=\"params\"></span>){</span><br><span class=\"line\"> <span class=\"keyword\">if</span>(<span class=\"variable language_\">this</span>.<span class=\"property\">poster</span>){</span><br><span class=\"line\"> <span class=\"keyword\">let</span> a = <span class=\"variable language_\">document</span>.<span class=\"title function_\">createElement</span>(<span class=\"string\">"a"</span>),</span><br><span class=\"line\"> name = <span class=\"string\">`海报下载 - <span class=\"subst\">${<span class=\"keyword\">new</span> <span class=\"built_in\">Date</span>().getTime()}</span>`</span>;<span class=\"comment\">// 文件名</span></span><br><span class=\"line\"> <span class=\"keyword\">if</span>(<span class=\"variable language_\">window</span>.<span class=\"property\">navigator</span>.<span class=\"property\">msSaveOrOpenBlob</span>){</span><br><span class=\"line\"> <span class=\"comment\">// ie浏览器</span></span><br><span class=\"line\"> <span class=\"keyword\">let</span> s = <span class=\"title function_\">atob</span>(<span class=\"variable language_\">this</span>.<span class=\"property\">poster</span>.<span class=\"title function_\">split</span>(<span class=\"string\">","</span>)[<span class=\"number\">1</span>]),</span><br><span class=\"line\"> n = s.<span class=\"property\">length</span>,</span><br><span class=\"line\"> u8_arr = <span class=\"keyword\">new</span> <span class=\"title class_\">Uint8Array</span>(n);</span><br><span class=\"line\"> <span class=\"keyword\">while</span>(n--){</span><br><span class=\"line\"> u8_arr[n] = s.<span class=\"title function_\">charCodeAt</span>(n)</span><br><span class=\"line\"> }</span><br><span class=\"line\"> <span class=\"keyword\">let</span> blob = <span class=\"keyword\">new</span> <span class=\"title class_\">Blob</span>([u8_arr]);</span><br><span class=\"line\"> <span class=\"variable language_\">window</span>.<span class=\"property\">navigator</span>.<span class=\"title function_\">msSaveOrOpenBlob</span>(blob, name+<span class=\"string\">'.png'</span>)</span><br><span class=\"line\"> }<span class=\"keyword\">else</span>{</span><br><span class=\"line\"> <span class=\"comment\">// 常规浏览器</span></span><br><span class=\"line\"> <span class=\"keyword\">let</span> _event = <span class=\"variable language_\">document</span>.<span class=\"title function_\">createEvent</span>(<span class=\"string\">"HTMLEvents"</span>);</span><br><span class=\"line\"> _event.<span class=\"title function_\">initEvent</span>(<span class=\"string\">"click"</span>, <span class=\"literal\">true</span>, <span class=\"literal\">true</span>)<span class=\"comment\">// 兼容火狐浏览器，是否冒泡and是否阻止浏览器默认行为</span></span><br><span class=\"line\"> a.<span class=\"title function_\">setAttribute</span>(<span class=\"string\">"download"</span>, name)</span><br><span class=\"line\"> a.<span class=\"property\">href</span> = <span class=\"variable language_\">this</span>.<span class=\"property\">poster</span></span><br><span class=\"line\"> <span class=\"comment\">// a.click()</span></span><br><span class=\"line\"> a.<span class=\"title function_\">dispatchEvent</span>(<span class=\"keyword\">new</span> <span class=\"title class_\">MouseEvent</span>(<span class=\"string\">'click'</span>, {<span class=\"attr\">bubbles</span>: <span class=\"literal\">true</span>, <span class=\"attr\">cancelable</span>: <span class=\"literal\">true</span>, <span class=\"attr\">view</span>: <span class=\"variable language_\">window</span>}));</span><br><span class=\"line\"> }</span><br><span class=\"line\"> }<span class=\"keyword\">else</span>{</span><br><span class=\"line\"> <span class=\"variable language_\">this</span>.<span class=\"property\">$message</span>.<span class=\"title function_\">warning</span>(<span class=\"string\">"图片出错，请联系管理员！"</span>)</span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n<p>tips：不适用于微信浏览器，只能提示用户长按保存。</p>\n","categories":["Vue"],"tags":["vue","javascript","qrcode"]},{"title":"Share Time ~（第四期）","url":"https://xiaoniezi.github.io/2019-04-19/share-time-04/","content":"<p>分享几个日常划水的网站(＾－＾)V<br><span id=\"more\"></span></p>\n<hr>\n<p>还是德语中毒的我</p>\n<iframe frameborder=\"no\" border=\"0\" marginwidth=\"0\" marginheight=\"0\" width=300 height=86 src=\"//music.163.com/outchain/player?type=2&id=32174338&auto=0&height=66\"></iframe>\n\n<ul>\n<li><p><a href=\"https://juejin.im/pins/recommended\">掘金</a><br>喵喵喵这里有日常程序员鼓励师登场，也有等待挖掘的小技巧，and必不可少的八卦</p>\n</li>\n<li><p><a href=\"https://www.geekpark.net/\">极客公园</a><br>每天获取最新科技资讯（这个大佬又咋了，哪个公司又倒了……）<br>emmm就是偶尔会有打广告的文章<br>还有个专业一点的：<a href=\"https://www.infoq.cn/\">InfoQ</a></p>\n</li>\n<li><p><a href=\"https://segmentfault.com/\">SegmentFault思否</a><br>技术类文章，个人觉得最有用的应该是问答的功能，类似国外的Stack Overflow，只是如今问的问题越来越小白了，用户流失</p>\n</li>\n<li><p><a href=\"https://weekly.manong.io/issues/\">码农周刊</a><br>这个是真·IT技术周刊，除了编程外，人工智能单独分出一个tab</p>\n</li>\n<li><p><a href=\"https://www.oschina.net/tweets\">开源中国</a><br>下雨了，发个动弹；明星出轨了，发个动弹；又怼产品了，发个动弹；解决了一个bug，发个动弹；宝宝出生了，发个动弹，大家来帮忙想个名字啊……</p>\n</li>\n<li><p><a href=\"https://freefrontend.com/\">Free Frontend</a><br>看地址就知道了，这里都是与前端相关的技巧，比如loading的效果，button悬浮效果<br>可以用来优化日常项目</p>\n</li>\n<li><p><a href=\"https://www.awesomes.cn/repos\">Awesomes</a><br>优秀的github库or工具分享，偶尔能找到意想不到的东西<br>还有一个类似不过更详细的： <a href=\"https://www.ctolib.com/\">CTOLib码库</a></p>\n</li>\n</ul>\n","categories":["Share"],"tags":["css","javascript","website","科技"]},{"title":"Share Time ~（第三期）","url":"https://xiaoniezi.github.io/2019-04-19/share-time-03/","content":"<p>分享四个学习的网站<br><span id=\"more\"></span></p>\n<hr>\n<iframe frameborder=\"no\" border=\"0\" marginwidth=\"0\" marginheight=\"0\" width=300 height=86 src=\"//music.163.com/outchain/player?type=2&id=17635351&auto=0&height=66\"></iframe>\n\n<ul>\n<li><p><a href=\"https://www.duolingo.com\">多邻国</a><br>偶然听了网易云推荐的德语歌，发现并不像电影里日常对话 = 吵架的气氛，反而很温柔，突然就想学学这门语言。<br>so，多邻国包含了世界上的主要语种，从基础的语句开始引导，入门简单，学的比较浅显。而且基本上是英语版面（我这英语渣……）</p>\n</li>\n<li><p><a href=\"https://zh.khanacademy.org/\">可汗学院</a><br>这个网站涉及的种类繁多，囊括从小学到大学的部分知识<br>之前为了了解金融试了下水，短视频教学，一个概念两三分钟，很容易理解<br>分享的中文版面可学的东西比较少，这也说明学好英语真的是个利器</p>\n</li>\n<li><p><a href=\"https://learn.lingvist.com\">Lingvist</a><br>有计划背英文单词的网址<br>当然不止英文，还有少数几个语种</p>\n</li>\n<li><p><a href=\"https://study.163.com/\">网易云课堂</a><br>当然不能漏了这个，用的比较少，但了解计算机基础的时候还是会优先选择</p>\n</li>\n</ul>\n<hr>\n<p>四个都是比较基础简单，深层次的我也不造啊~</p>\n","categories":["Share"],"tags":["life"]},{"title":"Share Time ~（第二期）","url":"https://xiaoniezi.github.io/2018-07-26/share-time-02/","content":"<p>这周来点js<br><span id=\"more\"></span></p>\n<hr>\n<iframe frameborder=\"no\" border=\"0\" marginwidth=\"0\" marginheight=\"0\" width=330 height=86 src=\"//music.163.com/outchain/player?type=2&id=17282489&auto=0&height=66\"></iframe>\n\n<ul>\n<li><p><a href=\"https://www.codewars.com\">codewars.com</a><br>一个有很多练习题的外国网站，不止<code>javascript</code>，还有<code>C</code>、<code>Python</code>、<code>Java</code>等后端语言。在这里你可以由浅入深，既思考了如何答题，也可以看到一些大神的简练答案。<br>这个网站帮我熟悉了ES6的用法，觉得挺有用，所以放第一位。</p>\n</li>\n<li><p><a href=\"https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000\">廖雪峰javascript教程</a><br>写得很精简，时不时找出来看一下。也很喜欢他的Python教程。</p>\n</li>\n<li><p><a href=\"https://30secondsofcode.org/\">30 seconds of code</a><br>一个教你用最精简的代码实现你想要效果的网站。<br>还有一篇文章只列举了19个，但是比较常用的：<a href=\"https://www.sitepoint.com/shorthand-javascript-techniques/\">shorthand coding techniques</a></p>\n</li>\n<li><p><a href=\"http://www.ruanyifeng.com/blog/2009/09/find_element_s_position_using_javascript.html\">获取元素高宽</a><br>获取元素的高度、宽度总对不上，尤其是滚动到底部刷新数据时，<code>scollHeight</code>、<code>clientHeight</code>、<code>offsetHeight</code>傻傻分不清。对于这三者，阮一峰老师的这篇博客已经很详细说明。</p>\n</li>\n<li><p><a href=\"https://harttle.land/2015/10/01/javascript-dom-api.html\">原生操作DOM</a><br>用熟悉了jquery后反而不知道怎么用javascript操作DOM，当然，还是没有jquery来的便捷。<br>还有一个比较详细的：<a href=\"https://www.ctolib.com/You-Dont-Need-jQuery.html\">原生代替jquery操作DOM</a></p>\n</li>\n<li><p><a href=\"https://segmentfault.com/a/1190000014700549\">JS常用代码片段</a><br>比如图片上传预览、简单的正则表达式、验证码倒计时等。<br>这里还有一个：<a href=\"https://jsnwork.kiiuo.com/archives/2258/jquery-javascript-%E6%95%99%E4%BD%A0%E5%A6%82%E4%BD%95%E8%A3%BD%E4%BD%9C%E5%9C%96%E7%89%87%E4%B8%8A%E5%82%B3%E5%89%8D%E7%9A%84%E9%A0%90%E8%A6%BD%E5%9C%96/\">jquery图片上传预览</a></p>\n</li>\n<li><p><a href=\"https://juejin.im/post/5965943ff265da6c30653879\">正则表达教程</a><br>这篇可以说很详细了。</p>\n</li>\n<li><p><a href=\"https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills\">HTML5 Cross Browser Polyfills</a><br>浏览器兼容大全</p>\n</li>\n</ul>\n","categories":["Share"],"tags":["javascript"]},{"title":"Share Time ~（第一期）","url":"https://xiaoniezi.github.io/2018-07-20/share-time-01/","content":"<p>看到有意思的网站总会点个收藏，但是会再次去浏览的却不多<br>今天空出些时间归纳了一下，先分享几个CSS相关的网站<br><span id=\"more\"></span></p>\n<hr>\n<iframe frameborder=\"no\" border=\"0\" marginwidth=\"0\" marginheight=\"0\" width=300 height=86 src=\"//music.163.com/outchain/player?type=2&id=25706282&auto=0&height=66\"></iframe>\n\n<ul>\n<li><p><a href=\"http://zh.learnlayout.com\">CSS超基础</a><br>这是个“小白”网站，目前只有19页，简单讲述了css的一些属性。<br>为啥放第一位，因为它可爱呀。</p>\n</li>\n<li><p><a href=\"https://codemyui.com/\">Code My UI</a><br>一个有各种各样CSS效果的网站，按钮、菜单栏、图片、输入框等等<br>偶尔想要给自己的博客装饰一下看起来不那么乏味，这个网站不会让你失望</p>\n</li>\n<li><p><a href=\"https://css-tricks.com/\">css-tricks</a><br>如网站名，CSS技巧。想要怎么实现一个css效果，在google时这个网站常常排在前几位。</p>\n</li>\n<li><p><a href=\"https://bttn.surge.sh/\">bttn.css</a><br>轻量级的按钮效果，压缩后只有4KB</p>\n</li>\n<li><p><a href=\"https://penjs.net/animate/\">gallery.animate.css</a><br>各种各样的动画效果，还有一个类似更出名的动画<a href=\"https://daneden.github.io/animate.css/\">daneden animate</a></p>\n</li>\n<li><p><a href=\"https://www.cssmatic.com/gradient-generator\">linear-gradient</a><br>一个可以调试<code>linear-gradient</code>属性并且做兼容的网站</p>\n</li>\n<li><p><a href=\"http://autoprefixer.github.io/\">autoprefixer</a><br>也是关于兼容的网站，可以帮你自动填充css属性前缀。不过当下很多第三方工具都可以实现，比如<code>webpack</code>，所以作用并不大</p>\n</li>\n<li><p>还有几个关于CSS技巧or布局方面的</p>\n<ul>\n<li><a href=\"http://www.html-js.com/article/1866\">BFC布局</a>：<code>Block fomatting context</code>，或许对你理解<code>float</code>溢出有帮助</li>\n<li><a href=\"https://github.com/jawil/blog/issues/29\">黑魔法技巧</a>：在github的文章，主旨是少写js，以css达到相同的效果</li>\n<li><a href=\"https://javascript.ctolib.com/docs/sfile/FEND-Note/chapter4/02_layout.html\">垂直水平居中</a>：老生常谈，这里归纳了几种和对应的兼容</li>\n</ul>\n</li>\n</ul>\n","categories":["Share"],"tags":["css"]},{"title":"Vue使用element-ui所遇BUG与需求集结（二）","url":"https://xiaoniezi.github.io/2018-05-14/vue-ElementUI-extend-02/","content":"<p>第二版啦(＾Ｕ＾)ノ~ＹＯ<br>由于项目的功能越来越多，开始注重细节的优化和可延展性，<br>主要方向是将复用的代码集成一个组件。</p>\n<span id=\"more\"></span>\n<blockquote>\n<p>以下数据都是在vue(^2.5)+vuex(^2.3)+element-ui(^2.3)+webpack(^3.7)+axios(v0.16)环境下测试。</p>\n</blockquote>\n<h2 id=\"混入（Mixins）\"><a href=\"#混入（Mixins）\" class=\"headerlink\" title=\"混入（Mixins）\"></a>混入（Mixins）</h2><p>由于有很多table都是要请求列表总数，包括请求列表也是千篇一律。一开始用的是<code>Eventbus</code>注册了共用组件，后来感觉对非列表的组件来说是累赘，才改用mixins，既做到了通用，还能复写。<br>虽然这个方法个人还是不太满意。。。求更好idea</p>\n<p>in <code>@/componens/mixins/TableList.js</code><br><figure class=\"highlight js\"><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">export</span> <span class=\"keyword\">default</span>{</span><br><span class=\"line\"> <span class=\"title function_\">data</span>(<span class=\"params\"></span>){</span><br><span class=\"line\"> <span class=\"keyword\">return</span> {</span><br><span class=\"line\"> <span class=\"attr\">isLoading</span>: <span class=\"literal\">false</span></span><br><span class=\"line\"> }</span><br><span class=\"line\"> },</span><br><span class=\"line\"> <span class=\"attr\">methods</span>: {</span><br><span class=\"line\"> <span class=\"title function_\">getTotal</span>(<span class=\"params\">response</span>){</span><br><span class=\"line\"> <span class=\"comment\">// 加个loading状态</span></span><br><span class=\"line\"> <span class=\"variable language_\">this</span>.<span class=\"property\">isLoading</span> = !<span class=\"variable language_\">this</span>.<span class=\"property\">isLoading</span></span><br><span class=\"line\"> <span class=\"comment\">// 开始请求列表</span></span><br><span class=\"line\"> <span class=\"variable language_\">this</span>.<span class=\"title function_\">getTableList</span>()</span><br><span class=\"line\"> },</span><br><span class=\"line\"> <span class=\"title function_\">getList</span>(<span class=\"params\">response</span>){</span><br><span class=\"line\"> <span class=\"comment\">// 结束loading状态</span></span><br><span class=\"line\"> <span class=\"variable language_\">this</span>.<span class=\"property\">isLoading</span> = !<span class=\"variable language_\">this</span>.<span class=\"property\">isLoading</span></span><br><span class=\"line\"> },</span><br><span class=\"line\"> <span class=\"title function_\">getTableListCount</span>(<span class=\"params\">total</span>){</span><br><span class=\"line\"> <span class=\"variable language_\">this</span>.<span class=\"property\">$http</span>.<span class=\"title function_\">get</span>(total.<span class=\"property\">api</span>[<span class=\"number\">0</span>],{}).<span class=\"title function_\">then</span>(<span class=\"function\">(<span class=\"params\">response</span>) =></span> {</span><br><span class=\"line\"> <span class=\"keyword\">if</span>(response.<span class=\"property\">data</span> && <span class=\"keyword\">typeof</span> response.<span class=\"property\">data</span> === <span class=\"string\">'object'</span>){</span><br><span class=\"line\"> <span class=\"comment\">// 成功获取数量回调</span></span><br><span class=\"line\"> <span class=\"variable language_\">this</span>.<span class=\"title function_\">getTotal</span>(response)</span><br><span class=\"line\"> }</span><br><span class=\"line\"> }).<span class=\"title function_\">catch</span>(<span class=\"function\">() =></span> {})</span><br><span class=\"line\"> },</span><br><span class=\"line\"> <span class=\"title function_\">getTableList</span>(<span class=\"params\"></span>){</span><br><span class=\"line\"> <span class=\"variable language_\">this</span>.<span class=\"property\">$http</span>.<span class=\"title function_\">get</span>(total.<span class=\"property\">api</span>[<span class=\"number\">1</span>],{}).<span class=\"title function_\">then</span>(<span class=\"function\">(<span class=\"params\">response</span>) =></span> {</span><br><span class=\"line\"> <span class=\"keyword\">if</span>(response.<span class=\"property\">data</span> && <span class=\"keyword\">typeof</span> response.<span class=\"property\">data</span> === <span class=\"string\">'object'</span>){</span><br><span class=\"line\"> <span class=\"comment\">// 成功获取列表回调</span></span><br><span class=\"line\"> <span class=\"variable language_\">this</span>.<span class=\"title function_\">getList</span>(response)</span><br><span class=\"line\"> }</span><br><span class=\"line\"> }).<span class=\"title function_\">catch</span>(<span class=\"function\">() =></span> {})</span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\">};</span><br></pre></td></tr></table></figure><br>在组件内引用：<br><figure class=\"highlight js\"><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> <span class=\"title class_\">TableListMX</span> <span class=\"keyword\">from</span> <span class=\"string\">'@/components/mixins/TableList'</span>;</span><br><span class=\"line\"><span class=\"keyword\">export</span> <span class=\"keyword\">default</span>{</span><br><span class=\"line\"> <span class=\"attr\">mixins</span>: [<span class=\"title class_\">TableListMX</span>],</span><br><span class=\"line\"> <span class=\"attr\">methods</span>: {</span><br><span class=\"line\"> <span class=\"title function_\">getStart</span>(<span class=\"params\"></span>){</span><br><span class=\"line\"> <span class=\"variable language_\">this</span>.<span class=\"title function_\">getTableListCount</span>({</span><br><span class=\"line\"> <span class=\"attr\">api</span>: [<span class=\"string\">'list_count'</span>, <span class=\"string\">'list'</span>]</span><br><span class=\"line\"> })</span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure></p>\n<hr>\n<h2 id=\"自定义指令\"><a href=\"#自定义指令\" class=\"headerlink\" title=\"自定义指令\"></a>自定义指令</h2><p>项目后台当然少不了表单，联系到数据输入，这时候限制输入内容显得尤为必要。如果每个输入框都在输入时做提示就显得累赘，所以用了指令去限制输入。<br>这里举例一个限制小数点位数的自定义指令（<a href=\"https://juejin.im/post/5b6b9308f265da0f4e62fecc\">参考大佬地址</a>）</p>\n<p>in <code>@directives/InputNumDigit</code><br><figure class=\"highlight js\"><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><span class=\"line\">60</span><br><span class=\"line\">61</span><br><span class=\"line\">62</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\">/*</span></span><br><span class=\"line\"><span class=\"comment\"> @directive 输入框限制范围：小数点个数 or 整数</span></span><br><span class=\"line\"><span class=\"comment\"> @param {data-index} 如果是数组要加入index</span></span><br><span class=\"line\"><span class=\"comment\"> @param {data-dotrange}</span></span><br><span class=\"line\"><span class=\"comment\">*/</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"comment\">// 寻找当前dom</span></span><br><span class=\"line\"><span class=\"keyword\">let</span> <span class=\"title function_\">FindElement</span> = (<span class=\"params\">parent, selector</span>) => {</span><br><span class=\"line\"> <span class=\"keyword\">return</span> parent.<span class=\"property\">tagName</span>.<span class=\"title function_\">toLowerCase</span>() === selector ? parent : parent.<span class=\"title function_\">querySelector</span>(selector);</span><br><span class=\"line\">};</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"comment\">// 设置组件中的指定属性的值</span></span><br><span class=\"line\"><span class=\"keyword\">let</span> setValue = <span class=\"keyword\">function</span>(<span class=\"params\">exp, value, context</span>) {</span><br><span class=\"line\"> value = <span class=\"built_in\">isNaN</span>(value) ? <span class=\"string\">''</span> : value</span><br><span class=\"line\"> <span class=\"keyword\">new</span> <span class=\"title class_\">Function</span>(<span class=\"string\">'context'</span>, <span class=\"string\">'value'</span>, <span class=\"string\">`context.<span class=\"subst\">${exp}</span> = value`</span>)(context, value)</span><br><span class=\"line\">};</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">export</span> <span class=\"keyword\">default</span>{</span><br><span class=\"line\"> <span class=\"attr\">bind</span>: <span class=\"keyword\">function</span>(<span class=\"params\">el, { expression }, { context }</span>){</span><br><span class=\"line\"> <span class=\"keyword\">let</span> $input = <span class=\"title class_\">FindElement</span>(el, <span class=\"string\">'input'</span>);</span><br><span class=\"line\"> el.<span class=\"property\">$input</span> = $input;</span><br><span class=\"line\"></span><br><span class=\"line\"> <span class=\"comment\">// 初始化lastValue</span></span><br><span class=\"line\"> $input.<span class=\"property\">lastValue</span> = $input.<span class=\"property\">value</span></span><br><span class=\"line\"></span><br><span class=\"line\"> <span class=\"comment\">// 通过dataset 判断是否允许小数点</span></span><br><span class=\"line\"> <span class=\"keyword\">let</span> allowDot = !!$input.<span class=\"property\">dataset</span>.<span class=\"property\">dotrange</span>,</span><br><span class=\"line\"> keys = $input.<span class=\"property\">dataset</span>.<span class=\"property\">keys</span> || -<span class=\"number\">1</span>,<span class=\"comment\">// 如果是数组则加入索引</span></span><br><span class=\"line\"> dotRange = $input.<span class=\"property\">dataset</span>.<span class=\"property\">dotrange</span> || <span class=\"string\">`{0,2}`</span>, <span class=\"comment\">// 默认</span></span><br><span class=\"line\"> pattern = <span class=\"string\">`^[0-9]+<span class=\"subst\">${allowDot ? <span class=\"string\">`(.[0-9]<span class=\"subst\">${dotRange}</span>)?`</span> : <span class=\"string\">''</span>}</span>$`</span>,</span><br><span class=\"line\"> new_expression = expression;</span><br><span class=\"line\"> <span class=\"keyword\">if</span> (!expression) {</span><br><span class=\"line\"> <span class=\"keyword\">throw</span> <span class=\"keyword\">new</span> <span class=\"title class_\">TypeError</span>(<span class=\"string\">'请绑定expression'</span>)</span><br><span class=\"line\"> }</span><br><span class=\"line\"> <span class=\"comment\">// 循环</span></span><br><span class=\"line\"> <span class=\"keyword\">if</span>(keys !== -<span class=\"number\">1</span>){</span><br><span class=\"line\"> new_expression = expression.<span class=\"title function_\">replace</span>(<span class=\"regexp\">/\\[.*?\\]/</span>, <span class=\"string\">`[<span class=\"subst\">${keys}</span>]`</span>)</span><br><span class=\"line\"> }</span><br><span class=\"line\"> <span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(new_expression)</span><br><span class=\"line\"> $input.<span class=\"property\">handleInputEvent</span> = <span class=\"keyword\">function</span>(<span class=\"params\">e</span>) {</span><br><span class=\"line\"> <span class=\"built_in\">setTimeout</span>(<span class=\"function\">() =></span> {</span><br><span class=\"line\"> <span class=\"keyword\">if</span> (e.<span class=\"property\">target</span>.<span class=\"property\">value</span> === <span class=\"string\">''</span>) {</span><br><span class=\"line\"> <span class=\"title function_\">setValue</span>(new_expression, <span class=\"string\">''</span>, context)</span><br><span class=\"line\"> <span class=\"comment\">// 遇到非法数值，则重置</span></span><br><span class=\"line\"> e.<span class=\"property\">target</span>.<span class=\"property\">value</span> = <span class=\"string\">''</span></span><br><span class=\"line\"> } <span class=\"keyword\">else</span> <span class=\"keyword\">if</span> (e.<span class=\"property\">target</span>.<span class=\"property\">value</span> !== <span class=\"string\">''</span> && !<span class=\"keyword\">new</span> <span class=\"title class_\">RegExp</span>(pattern).<span class=\"title function_\">test</span>(e.<span class=\"property\">target</span>.<span class=\"property\">value</span>)) {</span><br><span class=\"line\"> <span class=\"title function_\">setValue</span>(new_expression, <span class=\"built_in\">parseFloat</span>(e.<span class=\"property\">target</span>.<span class=\"property\">lastValue</span>), context)</span><br><span class=\"line\"> <span class=\"comment\">// 遇到非法数值，则重置为lastValue</span></span><br><span class=\"line\"> e.<span class=\"property\">target</span>.<span class=\"property\">value</span> = e.<span class=\"property\">target</span>.<span class=\"property\">lastValue</span></span><br><span class=\"line\"> <span class=\"keyword\">if</span> (allowDot) {</span><br><span class=\"line\"> $input.<span class=\"property\">title</span> = <span class=\"string\">`小数点后最多<span class=\"subst\">${dotRange.replace(/[}</span>{]/g, '').split(',')[1]}位`</span></span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\"> e.<span class=\"property\">target</span>.<span class=\"property\">lastValue</span> = e.<span class=\"property\">target</span>.<span class=\"property\">value</span></span><br><span class=\"line\"> }, <span class=\"number\">0</span>)</span><br><span class=\"line\"> }</span><br><span class=\"line\"> $input.<span class=\"title function_\">addEventListener</span>(<span class=\"string\">'input'</span>, $input.<span class=\"property\">handleInputEvent</span>, <span class=\"literal\">false</span>)</span><br><span class=\"line\"> },</span><br><span class=\"line\"> <span class=\"title function_\">unbind</span>(<span class=\"params\">el</span>) {</span><br><span class=\"line\"> el && el.<span class=\"property\">$input</span>.<span class=\"title function_\">removeEventListener</span>(<span class=\"string\">'input'</span>, el.<span class=\"property\">$input</span>.<span class=\"property\">handleInputEvent</span>, <span class=\"literal\">false</span>)</span><br><span class=\"line\"> }</span><br><span class=\"line\">};</span><br></pre></td></tr></table></figure><br>全局注册：<br><figure class=\"highlight js\"><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\"><span class=\"keyword\">import</span> <span class=\"title class_\">InputNumDigit</span> <span class=\"keyword\">from</span> <span class=\"string\">'@/directives/InputNumDigit'</span></span><br><span class=\"line\"><span class=\"title class_\">Vue</span>.<span class=\"title function_\">directive</span>(<span class=\"string\">'num-digit'</span>, <span class=\"title class_\">InputNumDigit</span>)</span><br></pre></td></tr></table></figure></p>\n<p>引用：<br><figure class=\"highlight html\"><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\"><span class=\"comment\"><!-- 最多只能输入三位小数 --></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">el-input</span> <span class=\"attr\">v-model.number.trim</span>=<span class=\"string\">"rate"</span> <span class=\"attr\">v-num-digit</span>=<span class=\"string\">"setForm.rate"</span> <span class=\"attr\">data-dotrange</span>=<span class=\"string\">"{0,3}"</span> <span class=\"attr\">type</span>=<span class=\"string\">"number"</span>></span><span class=\"tag\"></<span class=\"name\">el-input</span>></span></span><br></pre></td></tr></table></figure></p>\n<blockquote>\n<p>有个瑕疵，这个指令只兼容了第一层for循环时的情况，没有考虑到更复杂的情况</p>\n</blockquote>\n<hr>\n<h2 id=\"自定义过滤器\"><a href=\"#自定义过滤器\" class=\"headerlink\" title=\"自定义过滤器\"></a>自定义过滤器</h2><p>比如，将数字转换成千分位<br><figure class=\"highlight js\"><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\"><span class=\"keyword\">let</span> <span class=\"title function_\">ToThousands</span> = (<span class=\"params\">val</span>) => {<span class=\"comment\">// 数字转换成千分位</span></span><br><span class=\"line\"> <span class=\"keyword\">if</span>(!val || val === <span class=\"number\">0</span> || <span class=\"built_in\">isNaN</span>(val)){</span><br><span class=\"line\"> <span class=\"keyword\">return</span> val</span><br><span class=\"line\"> }<span class=\"keyword\">else</span>{</span><br><span class=\"line\"> <span class=\"keyword\">let</span> num = <span class=\"number\">0</span>;</span><br><span class=\"line\"> <span class=\"keyword\">if</span>(val.<span class=\"title function_\">toString</span>().<span class=\"property\">indexOf</span> (<span class=\"string\">'.'</span>) !== -<span class=\"number\">1</span>){<span class=\"comment\">// 带小数点</span></span><br><span class=\"line\"> num = val.<span class=\"title function_\">toLocaleString</span>()</span><br><span class=\"line\"> }<span class=\"keyword\">else</span>{</span><br><span class=\"line\"> num = val.<span class=\"title function_\">toString</span>().<span class=\"title function_\">replace</span>(<span class=\"regexp\">/(\\d)(?=(?:\\d{3})+$)/g</span>, <span class=\"string\">'$1,'</span>);</span><br><span class=\"line\"> }</span><br><span class=\"line\"> <span class=\"keyword\">return</span> num;</span><br><span class=\"line\"> }</span><br><span class=\"line\">};</span><br><span class=\"line\"><span class=\"title class_\">Vue</span>.<span class=\"title function_\">filter</span>(<span class=\"string\">'ToThousands'</span>, <span class=\"title class_\">ToThousands</span>);</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"comment\">// or 全局通用</span></span><br><span class=\"line\"><span class=\"title class_\">Vue</span>.<span class=\"property\"><span class=\"keyword\">prototype</span></span>.<span class=\"property\">$toThousands</span> = <span class=\"title class_\">ToThousands</span>;</span><br><span class=\"line\"></span><br></pre></td></tr></table></figure></p>\n<hr>\n<h2 id=\"常用表单验证\"><a href=\"#常用表单验证\" class=\"headerlink\" title=\"常用表单验证\"></a>常用表单验证</h2><p>表单验证少不了，列几个在后台常用的，放在store可以随时调用<br><figure class=\"highlight js\"><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">let</span> validator = {<span class=\"comment\">// 验证信息</span></span><br><span class=\"line\"> <span class=\"attr\">mobile</span>: <span class=\"function\">(<span class=\"params\">rule, value, callback</span>) =></span> {<span class=\"comment\">// 手机号码</span></span><br><span class=\"line\"> <span class=\"keyword\">let</span> reg = <span class=\"regexp\">/^1[3|4|5|6|7|8|9][0-9]{9}$/</span>;</span><br><span class=\"line\"> <span class=\"keyword\">if</span>(!reg.<span class=\"title function_\">test</span>(value)){</span><br><span class=\"line\"> <span class=\"title function_\">callback</span>(<span class=\"keyword\">new</span> <span class=\"title class_\">Error</span>(<span class=\"string\">"请输入正确手机号码"</span>))</span><br><span class=\"line\"> }<span class=\"keyword\">else</span>{</span><br><span class=\"line\"> <span class=\"title function_\">callback</span>()</span><br><span class=\"line\"> }</span><br><span class=\"line\"> },</span><br><span class=\"line\"> <span class=\"attr\">idcard</span>: <span class=\"function\">(<span class=\"params\">rule, value, callback</span>) =></span> {<span class=\"comment\">// 身份证号码</span></span><br><span class=\"line\"> <span class=\"keyword\">let</span> dalu_reg = <span class=\"regexp\">/(^\\d{15}$)|(^\\d{18}$)|(^\\d{17}(\\d|X|x)$)/</span>,<span class=\"comment\">// 大陆</span></span><br><span class=\"line\"> xianggang_reg = <span class=\"regexp\">/[A-Z]{1,2}[0-9]{6}([0-9A])/</span>,<span class=\"comment\">// 香港</span></span><br><span class=\"line\"> aomen_reg = <span class=\"regexp\">/^[1|5|7][0-9]{6}\\([0-9Aa]\\)/</span>,<span class=\"comment\">// 澳门</span></span><br><span class=\"line\"> taiwan_reg = <span class=\"regexp\">/[A-Z][0-9]{9}/</span>;<span class=\"comment\">// 台湾</span></span><br><span class=\"line\"> <span class=\"keyword\">if</span>(!dalu_reg.<span class=\"title function_\">test</span>(value) && !xianggang_reg.<span class=\"title function_\">test</span>(value) && !aomen_reg.<span class=\"title function_\">test</span>(value) && !taiwan_reg.<span class=\"title function_\">test</span>(value)){</span><br><span class=\"line\"> <span class=\"title function_\">callback</span>(<span class=\"keyword\">new</span> <span class=\"title class_\">Error</span>(<span class=\"string\">"请输入正确身份证号码"</span>))</span><br><span class=\"line\"> }<span class=\"keyword\">else</span>{</span><br><span class=\"line\"> <span class=\"title function_\">callback</span>()</span><br><span class=\"line\"> }</span><br><span class=\"line\"> },</span><br><span class=\"line\"> <span class=\"attr\">noChinese</span>: <span class=\"function\">(<span class=\"params\">rule, value, callback</span>) =></span> {<span class=\"comment\">// 英文和数字</span></span><br><span class=\"line\"> <span class=\"keyword\">let</span> reg = <span class=\"regexp\">/^[A-Za-z0-9]+$/g</span>;</span><br><span class=\"line\"> <span class=\"keyword\">if</span>(!reg.<span class=\"title function_\">test</span>(value)){</span><br><span class=\"line\"> <span class=\"title function_\">callback</span>(<span class=\"keyword\">new</span> <span class=\"title class_\">Error</span>(<span class=\"string\">"不能输入中文！"</span>))</span><br><span class=\"line\"> }<span class=\"keyword\">else</span>{</span><br><span class=\"line\"> <span class=\"title function_\">callback</span>()</span><br><span class=\"line\"> }</span><br><span class=\"line\"> },</span><br><span class=\"line\"> <span class=\"attr\">limitNumber</span>: <span class=\"function\">(<span class=\"params\">rule, value, callback</span>) =></span> {<span class=\"comment\">// 限制数字大小</span></span><br><span class=\"line\"> <span class=\"keyword\">if</span>(value < <span class=\"number\">0</span> || value >= <span class=\"number\">10000000</span>){</span><br><span class=\"line\"> <span class=\"title function_\">callback</span>(<span class=\"keyword\">new</span> <span class=\"title class_\">Error</span>(<span class=\"string\">"最多输入7位有效数字"</span>))</span><br><span class=\"line\"> }<span class=\"keyword\">else</span> <span class=\"keyword\">if</span>(<span class=\"built_in\">isNaN</span>(value)){</span><br><span class=\"line\"> <span class=\"title function_\">callback</span>(<span class=\"keyword\">new</span> <span class=\"title class_\">Error</span>(<span class=\"string\">"请输入数字"</span>))</span><br><span class=\"line\"> }<span class=\"keyword\">else</span>{</span><br><span class=\"line\"> <span class=\"title function_\">callback</span>()</span><br><span class=\"line\"> }</span><br><span class=\"line\"> },</span><br><span class=\"line\"> <span class=\"attr\">limitPercent</span>: <span class=\"function\">(<span class=\"params\">rule, value, callback</span>) =></span> {<span class=\"comment\">// 限制百分比</span></span><br><span class=\"line\"> <span class=\"keyword\">if</span>(value < <span class=\"number\">0</span> || value > <span class=\"number\">100</span>){</span><br><span class=\"line\"> <span class=\"title function_\">callback</span>(<span class=\"keyword\">new</span> <span class=\"title class_\">Error</span>(<span class=\"string\">"请输入0~100之间的数字"</span>))</span><br><span class=\"line\"> }<span class=\"keyword\">else</span>{</span><br><span class=\"line\"> <span class=\"title function_\">callback</span>()</span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\">};</span><br></pre></td></tr></table></figure></p>\n<hr>\n<h3 id=\"常用日期限制范围\"><a href=\"#常用日期限制范围\" class=\"headerlink\" title=\"常用日期限制范围\"></a>常用日期限制范围</h3><figure class=\"highlight js\"><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">let</span> dateLimit = {</span><br><span class=\"line\"> <span class=\"attr\">beforeToday</span>: {<span class=\"comment\">// 今天之前：不包含今天</span></span><br><span class=\"line\"> <span class=\"title function_\">disabledDate</span>(<span class=\"params\">time</span>) {</span><br><span class=\"line\"> <span class=\"keyword\">return</span> time.<span class=\"title function_\">getTime</span>() > <span class=\"title class_\">Date</span>.<span class=\"title function_\">now</span>() - <span class=\"number\">8.64e7</span>;</span><br><span class=\"line\"> }</span><br><span class=\"line\"> },</span><br><span class=\"line\"> <span class=\"attr\">beforeTomorrow</span>: {<span class=\"comment\">// 明天之前：包含今天</span></span><br><span class=\"line\"> <span class=\"title function_\">disabledDate</span>(<span class=\"params\">time</span>) {</span><br><span class=\"line\"> <span class=\"keyword\">return</span> time.<span class=\"title function_\">getTime</span>() > <span class=\"title class_\">Date</span>.<span class=\"title function_\">now</span>();</span><br><span class=\"line\"> }</span><br><span class=\"line\"> },</span><br><span class=\"line\"> <span class=\"attr\">afterToday</span>: {<span class=\"comment\">// 今天之后：包含今天</span></span><br><span class=\"line\"> <span class=\"title function_\">disabledDate</span>(<span class=\"params\">time</span>) {</span><br><span class=\"line\"> <span class=\"keyword\">return</span> time.<span class=\"title function_\">getTime</span>() < <span class=\"title class_\">Date</span>.<span class=\"title function_\">now</span>() - <span class=\"number\">8.64e7</span>;</span><br><span class=\"line\"> }</span><br><span class=\"line\"> },</span><br><span class=\"line\"> <span class=\"attr\">afterTomorrow</span>: {<span class=\"comment\">// 明天之后：不包含今天</span></span><br><span class=\"line\"> <span class=\"title function_\">disabledDate</span>(<span class=\"params\">time</span>) {</span><br><span class=\"line\"> <span class=\"keyword\">return</span> time.<span class=\"title function_\">getTime</span>() < <span class=\"title class_\">Date</span>.<span class=\"title function_\">now</span>();</span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\">};</span><br></pre></td></tr></table></figure>\n<hr>\n<h2 id=\"分页自定义页数\"><a href=\"#分页自定义页数\" class=\"headerlink\" title=\"分页自定义页数\"></a>分页自定义页数</h2><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><span class=\"line\">13</span><br><span class=\"line\">14</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\"><!-- 通过`page-size`与输入框同一个参数控制 --></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">el-pagination</span> <span class=\"attr\">class</span>=<span class=\"string\">"sl-page"</span></span></span><br><span class=\"line\"><span class=\"tag\"><span class=\"attr\">layout</span>=<span class=\"string\">"prev, pager, next, jumper, total, slot"</span></span></span><br><span class=\"line\"><span class=\"tag\">@<span class=\"attr\">current-change</span>=<span class=\"string\">"handleCurrentChange"</span></span></span><br><span class=\"line\"><span class=\"tag\"><span class=\"attr\">:current-page.sync</span>=<span class=\"string\">"params.pager"</span></span></span><br><span class=\"line\"><span class=\"tag\"><span class=\"attr\">:page-size</span>=<span class=\"string\">"params.count"</span></span></span><br><span class=\"line\"><span class=\"tag\"><span class=\"attr\">:total</span>=<span class=\"string\">"TOTAL"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">span</span> <span class=\"attr\">class</span>=<span class=\"string\">"resize"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">span</span>></span>每页记录数：<span class=\"tag\"></<span class=\"name\">span</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">el-input</span> <span class=\"attr\">type</span>=<span class=\"string\">"number"</span> <span class=\"attr\">size</span>=<span class=\"string\">"small"</span> </span></span><br><span class=\"line\"><span class=\"tag\"> <span class=\"attr\">v-model.number</span>=<span class=\"string\">"params.count"</span> </span></span><br><span class=\"line\"><span class=\"tag\"> @<span class=\"attr\">change</span>=<span class=\"string\">"handleSearch"</span>></span><span class=\"tag\"></<span class=\"name\">el-input</span>></span></span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">span</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">el-pagination</span>></span></span><br></pre></td></tr></table></figure>\n<figure class=\"highlight js\"><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">export</span> defalt{</span><br><span class=\"line\"> <span class=\"title function_\">data</span>(<span class=\"params\"></span>){</span><br><span class=\"line\"> <span class=\"keyword\">return</span> {</span><br><span class=\"line\"> <span class=\"attr\">TOTAL</span>: <span class=\"number\">100</span>,</span><br><span class=\"line\"> <span class=\"attr\">params</span>: {</span><br><span class=\"line\"> <span class=\"attr\">pager</span>: <span class=\"number\">1</span>,</span><br><span class=\"line\"> <span class=\"attr\">count</span>: <span class=\"number\">10</span></span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\"> },</span><br><span class=\"line\"> <span class=\"attr\">methods</span>: {</span><br><span class=\"line\"> <span class=\"title function_\">handleSearch</span>(<span class=\"params\"></span>){<span class=\"comment\">//页数改变</span></span><br><span class=\"line\"> <span class=\"keyword\">if</span>(<span class=\"variable language_\">this</span>.<span class=\"property\">parmas</span>.<span class=\"property\">count</span> <= <span class=\"number\">0</span> || !<span class=\"variable language_\">this</span>.<span class=\"property\">parmas</span>.<span class=\"property\">count</span> || <span class=\"title class_\">String</span>(<span class=\"variable language_\">this</span>.<span class=\"property\">parmas</span>.<span class=\"property\">count</span>).<span class=\"title function_\">indexOf</span>(<span class=\"string\">"."</span>) !== -<span class=\"number\">1</span>){</span><br><span class=\"line\"> <span class=\"comment\">//小于等于零or为空or小数点时不刷新数据</span></span><br><span class=\"line\"> <span class=\"keyword\">return</span> <span class=\"literal\">false</span>;</span><br><span class=\"line\"> }</span><br><span class=\"line\"> <span class=\"variable language_\">this</span>.<span class=\"property\">parmas</span>.<span class=\"property\">pager</span> = <span class=\"number\">1</span>;</span><br><span class=\"line\"> <span class=\"variable language_\">this</span>.<span class=\"title function_\">getList</span>()</span><br><span class=\"line\"> },</span><br><span class=\"line\"> <span class=\"title function_\">handleCurrentChange</span>(<span class=\"params\"></span>){<span class=\"comment\">//页码改变</span></span><br><span class=\"line\"> <span class=\"variable language_\">this</span>.<span class=\"title function_\">getList</span>()</span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\">};</span><br></pre></td></tr></table></figure>\n<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><span class=\"line\">13</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"selector-class\">.sl-page</span> {</span><br><span class=\"line\"> <span class=\"attribute\">text-align</span>: center;</span><br><span class=\"line\"> <span class=\"attribute\">padding-top</span>: <span class=\"number\">20px</span>;</span><br><span class=\"line\">}</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"selector-class\">.sl-page</span> <span class=\"selector-class\">.resize</span> {</span><br><span class=\"line\"> <span class=\"attribute\">width</span>: <span class=\"number\">60px</span>;</span><br><span class=\"line\">}</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"selector-class\">.sl-page</span> <span class=\"selector-class\">.resize</span> <span class=\"selector-class\">.el-input__inner</span> {</span><br><span class=\"line\"> <span class=\"attribute\">height</span>: <span class=\"number\">28px</span>;</span><br><span class=\"line\"> <span class=\"attribute\">padding</span>: <span class=\"number\">0</span> <span class=\"number\">5px</span>;</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n<hr>\n<h2 id=\"伪Radio-·-真-·-CheckBox\"><a href=\"#伪Radio-·-真-·-CheckBox\" class=\"headerlink\" title=\"伪Radio · 真 · CheckBox\"></a>伪Radio · 真 · CheckBox</h2><blockquote>\n<p>单个radio可以不勾选效果</p>\n</blockquote>\n<p>复合：<br><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">div</span> <span class=\"attr\">class</span>=<span class=\"string\">"fake-checkbox"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">el-radio</span> <span class=\"attr\">v-model</span>=<span class=\"string\">"isCheck"</span> <span class=\"attr\">:label</span>=<span class=\"string\">"1"</span>></span>是否勾选<span class=\"tag\"></<span class=\"name\">el-radio</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">el-checkbox</span> <span class=\"attr\">v-model</span>=<span class=\"string\">"isCheck"</span> <span class=\"attr\">:false-label</span>=<span class=\"string\">"0"</span> <span class=\"attr\">:true-label</span>=<span class=\"string\">"1"</span> @<span class=\"attr\">change</span>=<span class=\"string\">"handleSearch"</span>></span>是否勾选<span class=\"tag\"></<span class=\"name\">el-checkbox</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">div</span>></span></span><br></pre></td></tr></table></figure></p>\n<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><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"selector-class\">.fake-checkbox</span>{</span><br><span class=\"line\"> <span class=\"attribute\">position</span>: relative;</span><br><span class=\"line\"> <span class=\"attribute\">display</span>: inline-block;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"selector-class\">.fake-checkbox</span> <span class=\"selector-class\">.el-checkbox</span>,</span><br><span class=\"line\"><span class=\"selector-class\">.fake-checkbox</span> <span class=\"selector-class\">.el-radio</span>{</span><br><span class=\"line\"> <span class=\"attribute\">width</span>: <span class=\"number\">55px</span>;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"selector-class\">.fake-checkbox</span> <span class=\"selector-class\">.el-radio__label</span>{</span><br><span class=\"line\"> <span class=\"attribute\">padding-left</span>: <span class=\"number\">5px</span>;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"selector-class\">.fake-checkbox</span> <span class=\"selector-class\">.el-checkbox</span>{</span><br><span class=\"line\"> <span class=\"attribute\">position</span>: absolute;</span><br><span class=\"line\"> <span class=\"attribute\">top</span>: <span class=\"number\">0</span>;</span><br><span class=\"line\"> <span class=\"attribute\">right</span>: <span class=\"number\">0</span>;</span><br><span class=\"line\"> <span class=\"attribute\">opacity</span>: <span class=\"number\">0</span>;</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n<hr>\n<h2 id=\"样式修改\"><a href=\"#样式修改\" class=\"headerlink\" title=\"样式修改\"></a>样式修改</h2><h3 id=\"1-下拉箭头位置偏差\"><a href=\"#1-下拉箭头位置偏差\" class=\"headerlink\" title=\"1. 下拉箭头位置偏差\"></a>1. 下拉箭头位置偏差</h3><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"selector-class\">.el-select-dropdown</span> <span class=\"selector-class\">.popper__arrow</span> {</span><br><span class=\"line\"> <span class=\"attribute\">transform</span>: none <span class=\"meta\">!important</span>;</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n<h3 id=\"2-表单伪必填\"><a href=\"#2-表单伪必填\" class=\"headerlink\" title=\"2. 表单伪必填\"></a>2. 表单伪必填</h3><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"selector-class\">.sl-required</span> <span class=\"selector-class\">.el-form-item__label</span><span class=\"selector-pseudo\">:before</span> {</span><br><span class=\"line\"> <span class=\"attribute\">content</span>: <span class=\"string\">'*'</span>;</span><br><span class=\"line\"> <span class=\"attribute\">color</span>: <span class=\"number\">#fa5555</span>;</span><br><span class=\"line\"> <span class=\"attribute\">margin-right</span>: <span class=\"number\">4px</span>;</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n<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\"><<span class=\"name\">el-form-item</span> <span class=\"attr\">class</span>=<span class=\"string\">"sl-required"</span>></span>...<span class=\"tag\"></<span class=\"name\">el-form-item</span>></span></span><br></pre></td></tr></table></figure>\n<h3 id=\"3-去除输入框number类型的箭头\"><a href=\"#3-去除输入框number类型的箭头\" class=\"headerlink\" title=\"3. 去除输入框number类型的箭头\"></a>3. 去除输入框number类型的箭头</h3><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"selector-class\">.non-arrow</span> <span class=\"selector-tag\">input</span><span class=\"selector-attr\">[type=<span class=\"string\">"number"</span>]</span>::-webkit-outer-spin-button,</span><br><span class=\"line\">.non-arrow input[type=<span class=\"string\">"number"</span>]::-webkit-inner-spin-button {</span><br><span class=\"line\"> -webkit-appearance: none;</span><br><span class=\"line\"> <span class=\"attribute\">margin</span>: <span class=\"number\">0</span>;</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n<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\"><<span class=\"name\">el-input</span> <span class=\"attr\">class</span>=<span class=\"string\">"non-arrow"</span> <span class=\"attr\">type</span>=<span class=\"string\">"number"</span>></span><span class=\"tag\"></<span class=\"name\">el-input</span>></span></span><br></pre></td></tr></table></figure>\n","categories":["Vue"],"tags":["vue","javascript","elementUI"]},{"title":"vue相关（持续更新01.31）","url":"https://xiaoniezi.github.io/2018-05-11/common-in-vue/","content":"<p>Vue相关设置和基础用法<br><span id=\"more\"></span></p>\n<h2 id=\"零碎集\"><a href=\"#零碎集\" class=\"headerlink\" title=\"零碎集\"></a>零碎集</h2><h3 id=\"1-多个锚点\"><a href=\"#1-多个锚点\" class=\"headerlink\" title=\"1. 多个锚点\"></a>1. 多个锚点</h3><p>有时候页面内容过多，要在侧栏做个导航栏：<a href=\"https://blog.csdn.net/iceking66/article/details/78211213\">参考地址</a></p>\n<h3 id=\"2-监听页面滚动\"><a href=\"#2-监听页面滚动\" class=\"headerlink\" title=\"2. 监听页面滚动\"></a>2. 监听页面滚动</h3><figure class=\"highlight js\"><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=\"attr\">methods</span>: {</span><br><span class=\"line\">\t<span class=\"title function_\">handleScroll</span>(<span class=\"params\"></span>){</span><br><span class=\"line\">\t\t<span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(<span class=\"string\">"I am scroll !!!"</span>)</span><br><span class=\"line\">\t}</span><br><span class=\"line\">},</span><br><span class=\"line\"><span class=\"title function_\">created</span>(<span class=\"params\"></span>){</span><br><span class=\"line\">\t<span class=\"variable language_\">window</span>.<span class=\"title function_\">addEventListener</span>(<span class=\"string\">"scroll"</span>, <span class=\"variable language_\">this</span>.<span class=\"property\">handleScroll</span>)</span><br><span class=\"line\">},</span><br><span class=\"line\"><span class=\"title function_\">destroyed</span>(<span class=\"params\"></span>){</span><br><span class=\"line\">\t<span class=\"variable language_\">window</span>.<span class=\"title function_\">removeEventListener</span>(<span class=\"string\">"scroll"</span>, <span class=\"variable language_\">this</span>.<span class=\"property\">handleScroll</span>)</span><br><span class=\"line\">}</span><br><span class=\"line\">;</span><br></pre></td></tr></table></figure>\n<h3 id=\"3-图片相对地址\"><a href=\"#3-图片相对地址\" class=\"headerlink\" title=\"3. 图片相对地址\"></a>3. 图片相对地址</h3><p>如果用<code>../../assets/example.png</code>插入<code>.vue</code>文件，一旦文件变动，地址可能也要改。所以用<code>vue-loader</code>的转换规则<br><code>@</code>在<code>build/webpack.base.config.js</code>中可配置</p>\n<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\"><<span class=\"name\">img</span> <span class=\"attr\">src</span>=<span class=\"string\">"~@/assets/example.png"</span>></span></span><br></pre></td></tr></table></figure>\n<hr>\n<h2 id=\"ElementUI\"><a href=\"#ElementUI\" class=\"headerlink\" title=\"ElementUI\"></a>ElementUI</h2><figure class=\"highlight js\"><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> <span class=\"title class_\">ElementUI</span> <span class=\"keyword\">from</span> <span class=\"string\">"element-ui"</span></span><br><span class=\"line\"><span class=\"keyword\">import</span> <span class=\"string\">"element-ui/lib/theme-chalk/index.css"</span></span><br><span class=\"line\"><span class=\"comment\">//修改ElementUI默认值</span></span><br><span class=\"line\"><span class=\"title class_\">ElementUI</span>.<span class=\"property\">Dialog</span>.<span class=\"property\">props</span>.<span class=\"property\">appendToBody</span>.<span class=\"property\">default</span> = <span class=\"literal\">true</span>;</span><br><span class=\"line\"><span class=\"title class_\">Vue</span>.<span class=\"title function_\">use</span>(<span class=\"title class_\">ElementUI</span>);</span><br></pre></td></tr></table></figure>\n<p>内容较多，另开文章说明：<a href=\"/2017-11-07/vue-ElementUI-extend-01/\">第一版</a>、<a href=\"/2018-05-14/vue-ElementUI-extend-02/\">第二版</a></p>\n<hr>\n<h2 id=\"VCharts\"><a href=\"#VCharts\" class=\"headerlink\" title=\"VCharts\"></a>VCharts</h2><p>单个引入</p>\n<figure class=\"highlight js\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\">//折线图</span></span><br><span class=\"line\"><span class=\"keyword\">import</span> <span class=\"title class_\">VeLine</span> <span class=\"keyword\">from</span> <span class=\"string\">'v-charts/lib/line'</span></span><br><span class=\"line\"><span class=\"title class_\">Vue</span>.<span class=\"title function_\">component</span>(<span class=\"title class_\">VeLine</span>.<span class=\"property\">name</span>,<span class=\"title class_\">VeLine</span>);</span><br></pre></td></tr></table></figure>\n<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\"><<span class=\"name\">ve-line</span> <span class=\"attr\">:data</span>=<span class=\"string\">"chartData"</span> <span class=\"attr\">:settings</span>=<span class=\"string\">"chartSettings"</span> <span class=\"attr\">:extend</span>=<span class=\"string\">"chartExtend"</span> <span class=\"attr\">:grid</span>=<span class=\"string\">"chartGrid"</span> <span class=\"attr\">:colors</span>=<span class=\"string\">"chartColor0"</span>></span><span class=\"tag\"></<span class=\"name\">ve-line</span>></span></span><br></pre></td></tr></table></figure>\n<p>所遇到相关问题：<a href=\"/2018-05-08/working-with-v-charts/\">不点不知道</a></p>\n<hr>\n<h2 id=\"Emojify\"><a href=\"#Emojify\" class=\"headerlink\" title=\"Emojify\"></a>Emojify</h2><figure class=\"highlight js\"><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=\"keyword\">import</span> <span class=\"title class_\">Emojify</span> <span class=\"keyword\">from</span> <span class=\"string\">'emojify.js'</span></span><br><span class=\"line\"><span class=\"comment\">// import 'emojify.js/dist/css/basic/emojify.min.css'//emoji单个图</span></span><br><span class=\"line\"><span class=\"keyword\">import</span> <span class=\"string\">'emojify.js/dist/css/sprites/emojify.min.css'</span><span class=\"comment\">//emoji雪碧图</span></span><br><span class=\"line\"><span class=\"title class_\">Emojify</span>.<span class=\"title function_\">setConfig</span>({ <span class=\"attr\">mode</span>: <span class=\"string\">'sprite'</span> })<span class=\"comment\">//雪碧图模式</span></span><br><span class=\"line\"><span class=\"title class_\">Emojify</span>.<span class=\"title function_\">run</span>()</span><br><span class=\"line\"><span class=\"title class_\">Vue</span>.<span class=\"property\"><span class=\"keyword\">prototype</span></span>.<span class=\"property\">$emoji</span> = <span class=\"title class_\">Emojify</span>;</span><br><span class=\"line\"><span class=\"comment\">// => 栗子</span></span><br><span class=\"line\"><span class=\"keyword\">let</span> code = <span class=\"string\">":rose:"</span>,</span><br><span class=\"line\">\tthat = <span class=\"variable language_\">this</span>,</span><br><span class=\"line\">\temojify = code.<span class=\"title function_\">replace</span>(<span class=\"regexp\">/\\:\\w+\\:/g</span>,<span class=\"function\">(<span class=\"params\">str</span>) =></span> {</span><br><span class=\"line\">\t\t<span class=\"keyword\">return</span> that.<span class=\"property\">$emoji</span>.<span class=\"title function_\">replace</span>(str)</span><br><span class=\"line\">\t});</span><br></pre></td></tr></table></figure>\n<hr>\n<h2 id=\"引入自定义组件\"><a href=\"#引入自定义组件\" class=\"headerlink\" title=\"引入自定义组件\"></a>引入自定义组件</h2><figure class=\"highlight js\"><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\"><span class=\"keyword\">import</span> <span class=\"title class_\">ReturnBack</span> <span class=\"keyword\">from</span> <span class=\"string\">'@/components/returnback'</span></span><br><span class=\"line\"><span class=\"title class_\">Vue</span>.<span class=\"title function_\">component</span>(<span class=\"string\">'sl-back'</span>,<span class=\"title class_\">ReturnBack</span>);</span><br></pre></td></tr></table></figure>\n<hr>\n<h2 id=\"全局过滤器\"><a href=\"#全局过滤器\" class=\"headerlink\" title=\"全局过滤器\"></a>全局过滤器</h2><h3 id=\"1-时间戳转换\"><a href=\"#1-时间戳转换\" class=\"headerlink\" title=\"1. 时间戳转换\"></a>1. 时间戳转换</h3><figure class=\"highlight js\"><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"title class_\">Vue</span>.<span class=\"title function_\">filter</span>(<span class=\"string\">"Timer"</span>, <span class=\"function\">(<span class=\"params\">val, is_time, is_second</span>) =></span> {</span><br><span class=\"line\">\t<span class=\"comment\">/*</span></span><br><span class=\"line\"><span class=\"comment\">\t*\t@param {is_time} Boolean 是否返回时分</span></span><br><span class=\"line\"><span class=\"comment\">\t*\t\t {is_second} Boolean 是否返回秒</span></span><br><span class=\"line\"><span class=\"comment\">\t*/</span></span><br><span class=\"line\">\t<span class=\"keyword\">if</span>(!val){</span><br><span class=\"line\">\t\t<span class=\"keyword\">return</span> val</span><br><span class=\"line\">\t}</span><br><span class=\"line\">\t<span class=\"keyword\">let</span> stamp = <span class=\"keyword\">new</span> <span class=\"title class_\">Date</span>(<span class=\"built_in\">parseInt</span>(val)),</span><br><span class=\"line\">\t\tyear = stamp.<span class=\"title function_\">getFullYear</span>(),</span><br><span class=\"line\">\t\tmonth = (stamp.<span class=\"title function_\">getMonth</span>()+<span class=\"number\">1</span> < <span class=\"number\">10</span> ? <span class=\"string\">'0'</span>+(stamp.<span class=\"title function_\">getMonth</span>()+<span class=\"number\">1</span>) : stamp.<span class=\"title function_\">getMonth</span>()+<span class=\"number\">1</span>),</span><br><span class=\"line\">\t\tday = (stamp.<span class=\"title function_\">getDate</span>() < <span class=\"number\">10</span> ? <span class=\"string\">'0'</span>+stamp.<span class=\"title function_\">getDate</span>() : stamp.<span class=\"title function_\">getDate</span>()),</span><br><span class=\"line\">\t\thour = (stamp.<span class=\"title function_\">getHours</span>() < <span class=\"number\">10</span> ? <span class=\"string\">'0'</span>+stamp.<span class=\"title function_\">getHours</span>() : stamp.<span class=\"title function_\">getHours</span>()),</span><br><span class=\"line\">\t\tminute = (stamp.<span class=\"title function_\">getMinutes</span>() < <span class=\"number\">10</span> ? <span class=\"string\">'0'</span>+stamp.<span class=\"title function_\">getMinutes</span>() : stamp.<span class=\"title function_\">getMinutes</span>()),</span><br><span class=\"line\">\t\tsecond = (stamp.<span class=\"title function_\">getSeconds</span>() <<span class=\"number\">10</span> ? <span class=\"string\">'0'</span> + stamp.<span class=\"title function_\">getSeconds</span>() : stamp.<span class=\"title function_\">getSeconds</span>()),</span><br><span class=\"line\">\t\ttims = year+<span class=\"string\">"-"</span>+month+<span class=\"string\">"-"</span>+day;</span><br><span class=\"line\">\t<span class=\"keyword\">if</span>(is_time){</span><br><span class=\"line\">\t\ttims += <span class=\"string\">" "</span>+hour+<span class=\"string\">":"</span>+minute;</span><br><span class=\"line\">\t\ttims = is_second ? times+<span class=\"string\">":"</span>+second : times;</span><br><span class=\"line\">\t}</span><br><span class=\"line\">\t<span class=\"keyword\">return</span> times;</span><br><span class=\"line\">});</span><br></pre></td></tr></table></figure>\n<h3 id=\"2-筛选键值对\"><a href=\"#2-筛选键值对\" class=\"headerlink\" title=\"2. 筛选键值对\"></a>2. 筛选键值对</h3><figure class=\"highlight js\"><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"title class_\">Vue</span>.<span class=\"title function_\">filter</span>(<span class=\"string\">"ValueToName"</span>, <span class=\"function\">(<span class=\"params\">val, list, key, name</span>) =></span> {</span><br><span class=\"line\">\t<span class=\"comment\">/*</span></span><br><span class=\"line\"><span class=\"comment\">\t\t@param {list} Array 筛选的列表</span></span><br><span class=\"line\"><span class=\"comment\">\t\t\t {key} String 与val对应的键值</span></span><br><span class=\"line\"><span class=\"comment\">\t\t\t {name} String 返回内容的键值</span></span><br><span class=\"line\"><span class=\"comment\">\t*/</span></span><br><span class=\"line\">\t<span class=\"keyword\">if</span>(val || val == <span class=\"number\">0</span>){</span><br><span class=\"line\">\t\t<span class=\"keyword\">let</span> arr = list.<span class=\"title function_\">filter</span>(<span class=\"function\">(<span class=\"params\">v</span>) =></span> v[key] == val);</span><br><span class=\"line\">\t\t<span class=\"keyword\">return</span> arr.<span class=\"property\">length</span> !== <span class=\"number\">0</span> ? arr[<span class=\"number\">0</span>][name] : val;</span><br><span class=\"line\">\t}<span class=\"keyword\">else</span>{</span><br><span class=\"line\">\t\t<span class=\"keyword\">return</span> val</span><br><span class=\"line\">\t}</span><br><span class=\"line\">});</span><br></pre></td></tr></table></figure>\n<p>=> 栗子<br><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\"><<span class=\"name\">div</span>></span>{{ params.levelNo | ValueToName(levellist,'levelNo','levelName') }}<span class=\"tag\"></<span class=\"name\">div</span>></span></span><br></pre></td></tr></table></figure></p>\n<h3 id=\"3-手机号码部分隐藏\"><a href=\"#3-手机号码部分隐藏\" class=\"headerlink\" title=\"3. 手机号码部分隐藏\"></a>3. 手机号码部分隐藏</h3><figure class=\"highlight js\"><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"title class_\">Vue</span>.<span class=\"title function_\">filter</span>(<span class=\"string\">"BlurMobile"</span>, <span class=\"function\">(<span class=\"params\">val</span>) =></span> {</span><br><span class=\"line\">\t<span class=\"keyword\">if</span>(val.<span class=\"property\">length</span> == <span class=\"number\">11</span>){</span><br><span class=\"line\">\t\t<span class=\"keyword\">return</span> val.<span class=\"title function_\">substr</span>(<span class=\"number\">0</span>, <span class=\"number\">3</span>) + <span class=\"string\">'****'</span> + val.<span class=\"title function_\">substr</span>(<span class=\"number\">7</span>)</span><br><span class=\"line\">\t}<span class=\"keyword\">else</span>{</span><br><span class=\"line\">\t\t<span class=\"keyword\">return</span> val</span><br><span class=\"line\">\t}</span><br><span class=\"line\">});</span><br></pre></td></tr></table></figure>\n<h3 id=\"4-数字转换成千分位\"><a href=\"#4-数字转换成千分位\" class=\"headerlink\" title=\"4. 数字转换成千分位\"></a>4. 数字转换成千分位</h3><figure class=\"highlight js\"><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"title class_\">Vue</span>.<span class=\"title function_\">filter</span>(<span class=\"string\">"ToThousands"</span>, <span class=\"function\">(<span class=\"params\">val</span>) =></span> {</span><br><span class=\"line\"> <span class=\"comment\">// 转换数字类型</span></span><br><span class=\"line\"> <span class=\"keyword\">if</span>(<span class=\"keyword\">typeof</span> val !== <span class=\"string\">'number'</span> && !<span class=\"built_in\">isNaN</span>(val)){</span><br><span class=\"line\"> val = <span class=\"title class_\">Number</span>(val)</span><br><span class=\"line\"> }</span><br><span class=\"line\"> <span class=\"keyword\">if</span>(!val || val === <span class=\"number\">0</span> || <span class=\"built_in\">isNaN</span>(val)){</span><br><span class=\"line\"> <span class=\"keyword\">return</span> val</span><br><span class=\"line\"> }<span class=\"keyword\">else</span>{</span><br><span class=\"line\"> <span class=\"keyword\">let</span> num = <span class=\"number\">0</span>;</span><br><span class=\"line\"> <span class=\"keyword\">if</span>(val.<span class=\"title function_\">toString</span>().<span class=\"property\">indexOf</span> (<span class=\"string\">'.'</span>) !== -<span class=\"number\">1</span>){<span class=\"comment\">// 带小数点</span></span><br><span class=\"line\"> num = val.<span class=\"title function_\">toLocaleString</span>()</span><br><span class=\"line\"> }<span class=\"keyword\">else</span>{</span><br><span class=\"line\"> num = val.<span class=\"title function_\">toString</span>().<span class=\"title function_\">replace</span>(<span class=\"regexp\">/(\\d)(?=(?:\\d{3})+$)/g</span>, <span class=\"string\">'$1,'</span>);</span><br><span class=\"line\"> }</span><br><span class=\"line\"> <span class=\"keyword\">return</span> num;</span><br><span class=\"line\"> }</span><br><span class=\"line\">});</span><br></pre></td></tr></table></figure>\n<hr>\n<h2 id=\"全局指令\"><a href=\"#全局指令\" class=\"headerlink\" title=\"全局指令\"></a>全局指令</h2><h3 id=\"1-限制输入小数位数\"><a href=\"#1-限制输入小数位数\" class=\"headerlink\" title=\"1. 限制输入小数位数\"></a>1. 限制输入小数位数</h3><figure class=\"highlight js\"><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><span class=\"line\">60</span><br><span class=\"line\">61</span><br><span class=\"line\">62</span><br><span class=\"line\">63</span><br><span class=\"line\">64</span><br><span class=\"line\">65</span><br><span class=\"line\">66</span><br><span class=\"line\">67</span><br><span class=\"line\">68</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\">/*</span></span><br><span class=\"line\"><span class=\"comment\"> @directive 输入框限制范围：小数点个数 or 整数</span></span><br><span class=\"line\"><span class=\"comment\"> \t\t@param {data-index} 如果是数组要加入index</span></span><br><span class=\"line\"><span class=\"comment\"> \t\t@param {data-dotrange}</span></span><br><span class=\"line\"><span class=\"comment\">*/</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">let</span> <span class=\"title function_\">FindElement</span> = (<span class=\"params\">parent, selector</span>) => {</span><br><span class=\"line\">\t<span class=\"keyword\">return</span> parent.<span class=\"property\">tagName</span>.<span class=\"title function_\">toLowerCase</span>() === selector ? parent : parent.<span class=\"title function_\">querySelector</span>(selector);</span><br><span class=\"line\">}</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"comment\">// 设置组件中的指定属性的值</span></span><br><span class=\"line\"><span class=\"keyword\">let</span> setValue = <span class=\"keyword\">function</span>(<span class=\"params\">exp, value, context</span>) {</span><br><span class=\"line\"> value = <span class=\"built_in\">isNaN</span>(value) ? <span class=\"string\">''</span> : value</span><br><span class=\"line\"> <span class=\"keyword\">new</span> <span class=\"title class_\">Function</span>(<span class=\"string\">'context'</span>, <span class=\"string\">'value'</span>, <span class=\"string\">`context.<span class=\"subst\">${exp}</span> = value`</span>)(context, value)</span><br><span class=\"line\">}</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">let</span> <span class=\"title class_\">InputNumDigit</span> = {</span><br><span class=\"line\">\t<span class=\"attr\">bind</span>: <span class=\"keyword\">function</span>(<span class=\"params\">el, { expression }, { context }</span>){</span><br><span class=\"line\">\t\t<span class=\"keyword\">let</span> $input = <span class=\"title class_\">FindElement</span>(el, <span class=\"string\">'input'</span>);</span><br><span class=\"line\">\t\tel.<span class=\"property\">$input</span> = $input;</span><br><span class=\"line\"></span><br><span class=\"line\">\t\t<span class=\"comment\">// 初始化lastValue</span></span><br><span class=\"line\"> $input.<span class=\"property\">lastValue</span> = $input.<span class=\"property\">value</span></span><br><span class=\"line\"></span><br><span class=\"line\"> <span class=\"comment\">// 通过dataset 判断是否允许小数点</span></span><br><span class=\"line\"> <span class=\"keyword\">let</span> allowDot = !!$input.<span class=\"property\">dataset</span>.<span class=\"property\">dotrange</span>,</span><br><span class=\"line\"> \tkeys = $input.<span class=\"property\">dataset</span>.<span class=\"property\">keys</span> || -<span class=\"number\">1</span>,<span class=\"comment\">// 如果是数组则加入索引</span></span><br><span class=\"line\"> \tdotRange = $input.<span class=\"property\">dataset</span>.<span class=\"property\">dotrange</span> || <span class=\"string\">`{0,2}`</span>, <span class=\"comment\">// 默认</span></span><br><span class=\"line\"> \tpattern = <span class=\"string\">`^[0-9]+<span class=\"subst\">${allowDot ? <span class=\"string\">`(.[0-9]<span class=\"subst\">${dotRange}</span>)?`</span> : <span class=\"string\">''</span>}</span>$`</span>,</span><br><span class=\"line\"> \tnew_expression = expression;</span><br><span class=\"line\"> <span class=\"keyword\">if</span> (!expression) {</span><br><span class=\"line\"> <span class=\"keyword\">throw</span> <span class=\"keyword\">new</span> <span class=\"title class_\">TypeError</span>(<span class=\"string\">'请绑定expression'</span>)</span><br><span class=\"line\"> }</span><br><span class=\"line\"></span><br><span class=\"line\"> <span class=\"comment\">// 循环</span></span><br><span class=\"line\"> <span class=\"keyword\">if</span>(keys !== -<span class=\"number\">1</span>){</span><br><span class=\"line\"> \tnew_expression = expression.<span class=\"title function_\">replace</span>(<span class=\"regexp\">/\\[.*?\\]/</span>, <span class=\"string\">`[<span class=\"subst\">${keys}</span>]`</span>)</span><br><span class=\"line\"> }</span><br><span class=\"line\"> <span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(new_expression)</span><br><span class=\"line\"></span><br><span class=\"line\"> $input.<span class=\"property\">handleInputEvent</span> = <span class=\"keyword\">function</span>(<span class=\"params\">e</span>) {</span><br><span class=\"line\"> <span class=\"built_in\">setTimeout</span>(<span class=\"function\">() =></span> {</span><br><span class=\"line\"> <span class=\"keyword\">if</span> (e.<span class=\"property\">target</span>.<span class=\"property\">value</span> === <span class=\"string\">''</span>) {</span><br><span class=\"line\"> <span class=\"title function_\">setValue</span>(new_expression, <span class=\"string\">''</span>, context)</span><br><span class=\"line\"> <span class=\"comment\">// 遇到非法数值，则重置</span></span><br><span class=\"line\"> e.<span class=\"property\">target</span>.<span class=\"property\">value</span> = <span class=\"string\">''</span></span><br><span class=\"line\"> } <span class=\"keyword\">else</span> <span class=\"keyword\">if</span> (e.<span class=\"property\">target</span>.<span class=\"property\">value</span> !== <span class=\"string\">''</span> && !<span class=\"keyword\">new</span> <span class=\"title class_\">RegExp</span>(pattern).<span class=\"title function_\">test</span>(e.<span class=\"property\">target</span>.<span class=\"property\">value</span>)) {</span><br><span class=\"line\"> <span class=\"title function_\">setValue</span>(new_expression, <span class=\"built_in\">parseFloat</span>(e.<span class=\"property\">target</span>.<span class=\"property\">lastValue</span>), context)</span><br><span class=\"line\"> <span class=\"comment\">// 遇到非法数值，则重置为lastValue</span></span><br><span class=\"line\"> e.<span class=\"property\">target</span>.<span class=\"property\">value</span> = e.<span class=\"property\">target</span>.<span class=\"property\">lastValue</span></span><br><span class=\"line\"> <span class=\"keyword\">if</span> (allowDot) {</span><br><span class=\"line\"> <span class=\"comment\">// 这个时候，根据业务逻辑，可以收起键盘，给出吐司提示</span></span><br><span class=\"line\"> <span class=\"keyword\">let</span> num = dotRange.<span class=\"title function_\">replace</span>(<span class=\"regexp\">/[}{]/g</span>, <span class=\"string\">''</span>).<span class=\"title function_\">split</span>(<span class=\"string\">','</span>)[<span class=\"number\">1</span>];</span><br><span class=\"line\"> <span class=\"keyword\">if</span>(num || num === <span class=\"number\">0</span>){</span><br><span class=\"line\"> $input.<span class=\"property\">title</span> = <span class=\"string\">`小数点后最多<span class=\"subst\">${num}</span>位`</span></span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\"> e.<span class=\"property\">target</span>.<span class=\"property\">lastValue</span> = e.<span class=\"property\">target</span>.<span class=\"property\">value</span></span><br><span class=\"line\"> }, <span class=\"number\">0</span>)</span><br><span class=\"line\"> }</span><br><span class=\"line\"> $input.<span class=\"title function_\">addEventListener</span>(<span class=\"string\">'input'</span>, $input.<span class=\"property\">handleInputEvent</span>, <span class=\"literal\">false</span>)</span><br><span class=\"line\">\t},</span><br><span class=\"line\">\t<span class=\"title function_\">unbind</span>(<span class=\"params\">el</span>) {</span><br><span class=\"line\"> el && el.<span class=\"property\">$input</span>.<span class=\"title function_\">removeEventListener</span>(<span class=\"string\">'input'</span>, el.<span class=\"property\">$input</span>.<span class=\"property\">handleInputEvent</span>, <span class=\"literal\">false</span>)</span><br><span class=\"line\"> }</span><br><span class=\"line\">};</span><br><span class=\"line\"><span class=\"title class_\">Vue</span>.<span class=\"title function_\">directive</span>(<span class=\"string\">'num-digit'</span>, <span class=\"title class_\">InputNumDigit</span>)</span><br></pre></td></tr></table></figure>\n<p>=> 栗子：<br><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">el-input</span> <span class=\"attr\">v-model.number</span>=<span class=\"string\">"setForm.price"</span></span></span><br><span class=\"line\"><span class=\"tag\"> <span class=\"attr\">v-num-digit</span>=<span class=\"string\">"setForm.price"</span> </span></span><br><span class=\"line\"><span class=\"tag\"> <span class=\"attr\">data-dotrange</span>=<span class=\"string\">"{0,2}"</span></span></span><br><span class=\"line\"><span class=\"tag\"> <span class=\"attr\">type</span>=<span class=\"string\">"number"</span> </span></span><br><span class=\"line\"><span class=\"tag\"> <span class=\"attr\">class</span>=<span class=\"string\">"non-arrow"</span>></span><span class=\"tag\"></<span class=\"name\">el-input</span>></span></span><br></pre></td></tr></table></figure></p>\n<h3 id=\"2-防止按钮重复点击\"><a href=\"#2-防止按钮重复点击\" class=\"headerlink\" title=\"2. 防止按钮重复点击\"></a>2. 防止按钮重复点击</h3><figure class=\"highlight js\"><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">const</span> deafultClock = <span class=\"number\">1000</span>;<span class=\"comment\">// 默认可点击时长</span></span><br><span class=\"line\"><span class=\"keyword\">let</span> <span class=\"title class_\">StopDoubleClick</span> = {</span><br><span class=\"line\">\t<span class=\"attr\">inserted</span>: <span class=\"keyword\">function</span>(<span class=\"params\">el, binding</span>){</span><br><span class=\"line\">\t\tel.<span class=\"title function_\">addEventListener</span>(<span class=\"string\">"click"</span>, <span class=\"function\">() =></span> {</span><br><span class=\"line\">\t\t\t<span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(<span class=\"string\">"———— stop double click ————"</span>)</span><br><span class=\"line\">\t\t\t<span class=\"keyword\">if</span>(!el.<span class=\"property\">disabled</span>){</span><br><span class=\"line\">\t\t\t\tel.<span class=\"property\">disabled</span> = <span class=\"literal\">true</span></span><br><span class=\"line\">\t\t\t\t<span class=\"built_in\">setTimeout</span>(<span class=\"function\">() =></span> {</span><br><span class=\"line\">\t\t\t\t\tel.<span class=\"property\">disabled</span> = <span class=\"literal\">false</span></span><br><span class=\"line\">\t\t\t\t}, binding.<span class=\"property\">value</span> || deafultClock)</span><br><span class=\"line\">\t\t\t}</span><br><span class=\"line\">\t\t})</span><br><span class=\"line\">\t}</span><br><span class=\"line\">};</span><br><span class=\"line\"><span class=\"title class_\">Vue</span>.<span class=\"title function_\">directive</span>(<span class=\"string\">'stop-dbclick'</span>, <span class=\"title class_\">StopDoubleClick</span>)</span><br></pre></td></tr></table></figure>\n<p>=> 栗子<br><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\"><<span class=\"name\">el-button</span> <span class=\"attr\">v-stop-dbclick</span>></span>保存<span class=\"tag\"></<span class=\"name\">el-button</span>></span></span><br></pre></td></tr></table></figure></p>\n<hr>\n<h2 id=\"Cookie\"><a href=\"#Cookie\" class=\"headerlink\" title=\"Cookie\"></a>Cookie</h2><figure class=\"highlight js\"><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> <span class=\"title function_\">getCookie</span> = (<span class=\"params\">name</span>) => {</span><br><span class=\"line\">\t<span class=\"keyword\">let</span> arr, reg = <span class=\"keyword\">new</span> <span class=\"title class_\">RegExp</span>(<span class=\"string\">"(^| )"</span> + name + <span class=\"string\">"=([^;]*)(;|$)"</span>);</span><br><span class=\"line\">\tarr = <span class=\"variable language_\">document</span>.<span class=\"property\">cookie</span>.<span class=\"title function_\">match</span>(reg);</span><br><span class=\"line\">\t<span class=\"keyword\">return</span> arr !== <span class=\"literal\">null</span> ? <span class=\"built_in\">decodeURIComponent</span>(arr[<span class=\"number\">2</span>]) : <span class=\"literal\">null</span>;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"title class_\">Vue</span>.<span class=\"property\"><span class=\"keyword\">prototype</span></span>.<span class=\"property\">getCookie</span> = getCookie;</span><br><span class=\"line\"><span class=\"title class_\">Vue</span>.<span class=\"property\"><span class=\"keyword\">prototype</span></span>.<span class=\"property\">setCookie</span> = <span class=\"function\">(<span class=\"params\">name,val,expir</span>) =></span> {</span><br><span class=\"line\">\t<span class=\"keyword\">let</span> _date = <span class=\"keyword\">new</span> <span class=\"title class_\">Date</span>();</span><br><span class=\"line\">\t_date.<span class=\"title function_\">setDate</span>(_date.<span class=\"title function_\">getDate</span>() + expir);</span><br><span class=\"line\">\t<span class=\"variable language_\">document</span>.<span class=\"property\">cookie</span> = name + <span class=\"string\">"="</span> + <span class=\"built_in\">encodeURIComponent</span>(val) + ((expir == <span class=\"literal\">null</span>) ? <span class=\"string\">""</span> : <span class=\"string\">";expires="</span>+_date.<span class=\"title function_\">toGMTString</span>());</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"title class_\">Vue</span>.<span class=\"property\"><span class=\"keyword\">prototype</span></span>.<span class=\"property\">delCookie</span> = <span class=\"function\">(<span class=\"params\">name</span>) =></span> {</span><br><span class=\"line\">\t<span class=\"keyword\">let</span> val = <span class=\"title function_\">getCookie</span>(name);</span><br><span class=\"line\">\t<span class=\"keyword\">if</span>(val !== <span class=\"literal\">null</span>){</span><br><span class=\"line\">\t\t<span class=\"variable language_\">document</span>.<span class=\"property\">cookie</span> = name + <span class=\"string\">"="</span> + val + <span class=\"string\">";expires=Thu, 01 Jan 1970 00:00:01 GMT;"</span>;</span><br><span class=\"line\">\t}</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"comment\">// => 栗子</span></span><br><span class=\"line\"><span class=\"variable language_\">this</span>.<span class=\"title function_\">setCookie</span>(<span class=\"string\">"TOKEN"</span>,response.<span class=\"property\">data</span>);</span><br><span class=\"line\"><span class=\"variable language_\">this</span>.<span class=\"title function_\">getCookie</span>(<span class=\"string\">"TOKEN"</span>);</span><br><span class=\"line\"><span class=\"variable language_\">this</span>.<span class=\"title function_\">delCookie</span>(<span class=\"string\">"TOKEN"</span>);</span><br></pre></td></tr></table></figure>\n<hr>\n<h2 id=\"Vuex\"><a href=\"#Vuex\" class=\"headerlink\" title=\"Vuex\"></a>Vuex</h2><figure class=\"highlight js\"><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> <span class=\"title class_\">Vuex</span> <span class=\"keyword\">from</span> <span class=\"string\">'vuex'</span></span><br><span class=\"line\"><span class=\"keyword\">import</span> { <span class=\"title class_\">Axios</span> } <span class=\"keyword\">from</span> <span class=\"string\">'@/axios'</span></span><br><span class=\"line\"><span class=\"title class_\">Vue</span>.<span class=\"title function_\">use</span>(<span class=\"title class_\">Vuex</span>)</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">let</span> <span class=\"variable constant_\">GET_LIST</span> = <span class=\"string\">'GET_LIST'</span>;<span class=\"comment\">//定义全局</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"comment\">/* 模块命名空间 */</span></span><br><span class=\"line\"><span class=\"keyword\">const</span> <span class=\"title class_\">Setting</span> = {</span><br><span class=\"line\">\t<span class=\"attr\">namespaced</span>: <span class=\"literal\">true</span>,</span><br><span class=\"line\">\t<span class=\"attr\">state</span>: {</span><br><span class=\"line\">\t\t<span class=\"attr\">userlist</span>: []</span><br><span class=\"line\">\t},</span><br><span class=\"line\">\t<span class=\"attr\">mutations</span>: {</span><br><span class=\"line\">\t\t<span class=\"title function_\">SET_USER</span>(<span class=\"params\">state, list</span>){</span><br><span class=\"line\">\t\t\tstate.<span class=\"property\">userlist</span> = list</span><br><span class=\"line\">\t\t}</span><br><span class=\"line\">\t}</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"keyword\">export</span> <span class=\"keyword\">default</span> <span class=\"keyword\">new</span> <span class=\"title class_\">Vuex</span>.<span class=\"title class_\">Store</span>({</span><br><span class=\"line\">\t<span class=\"attr\">state</span>: {</span><br><span class=\"line\">\t\t<span class=\"attr\">api</span>: {</span><br><span class=\"line\">\t\t\t<span class=\"attr\">city</span>: <span class=\"string\">'/city.act'</span></span><br><span class=\"line\">\t\t},</span><br><span class=\"line\">\t\t<span class=\"attr\">citylist</span>: []</span><br><span class=\"line\">\t},</span><br><span class=\"line\">\t<span class=\"attr\">modules</span>: {</span><br><span class=\"line\">\t\t<span class=\"title class_\">Setting</span>,</span><br><span class=\"line\">\t},</span><br><span class=\"line\">\t<span class=\"attr\">mutations</span>: {</span><br><span class=\"line\">\t\t[<span class=\"variable constant_\">GET_LIST</span>](state, { context, val }){</span><br><span class=\"line\">\t\t\t<span class=\"title class_\">Axios</span>.<span class=\"title function_\">get</span>(state.<span class=\"property\">api</span>[val.<span class=\"property\">apiName</span>], val.<span class=\"property\">params</span>).<span class=\"title function_\">then</span>(<span class=\"function\">(<span class=\"params\">response</span>) =></span> {</span><br><span class=\"line\">\t\t\t\t<span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(response)</span><br><span class=\"line\">\t\t\t\t<span class=\"keyword\">if</span>(response.<span class=\"property\">code</span>){</span><br><span class=\"line\">\t\t\t\t\tstate[listName] = response.<span class=\"property\">data</span></span><br><span class=\"line\">\t\t\t\t}</span><br><span class=\"line\">\t\t\t})</span><br><span class=\"line\">\t\t}</span><br><span class=\"line\">\t},</span><br><span class=\"line\">\t<span class=\"attr\">actions</span>: {</span><br><span class=\"line\">\t\t[<span class=\"variable constant_\">GET_LIST</span>](context, val){</span><br><span class=\"line\">\t\t\tcontext.<span class=\"title function_\">commit</span>(<span class=\"variable constant_\">GET_LIST</span>, { context, val })</span><br><span class=\"line\">\t\t}</span><br><span class=\"line\">\t}</span><br><span class=\"line\">});</span><br></pre></td></tr></table></figure>\n<ol>\n<li><p>栗子 => 模块命名空间</p>\n<figure class=\"highlight js\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"variable language_\">this</span>.<span class=\"property\">$store</span>.<span class=\"title function_\">commit</span>(<span class=\"string\">"Setting/SET_USER"</span>, []);</span><br></pre></td></tr></table></figure>\n</li>\n<li><p>栗子 => 异步分发</p>\n<figure class=\"highlight js\"><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"variable language_\">this</span>.<span class=\"property\">$store</span>.<span class=\"title function_\">dispatch</span>(<span class=\"string\">'GET_LIST'</span>, {</span><br><span class=\"line\">\t<span class=\"attr\">params</span>: {<span class=\"attr\">enable</span>: <span class=\"literal\">true</span>},</span><br><span class=\"line\">\t<span class=\"attr\">apiName</span>: <span class=\"string\">'city'</span>,</span><br><span class=\"line\">\t<span class=\"attr\">listName</span>: <span class=\"string\">'citylist'</span></span><br><span class=\"line\">});</span><br></pre></td></tr></table></figure>\n</li>\n</ol>\n<hr>\n<h2 id=\"VueRouter\"><a href=\"#VueRouter\" class=\"headerlink\" title=\"VueRouter\"></a>VueRouter</h2><figure class=\"highlight js\"><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> <span class=\"title class_\">Router</span> <span class=\"keyword\">from</span> <span class=\"string\">'vue-router'</span></span><br><span class=\"line\"><span class=\"title class_\">Vue</span>.<span class=\"title function_\">use</span>(<span class=\"title class_\">Router</span>)</span><br><span class=\"line\"><span class=\"keyword\">export</span> <span class=\"keyword\">default</span> <span class=\"keyword\">new</span> <span class=\"title class_\">Router</span>({</span><br><span class=\"line\">\t<span class=\"attr\">mode</span>: <span class=\"string\">'history'</span>,<span class=\"comment\">//路由模式</span></span><br><span class=\"line\">\t<span class=\"attr\">base</span>: <span class=\"string\">'/home/'</span>,<span class=\"comment\">//路由初始位置</span></span><br><span class=\"line\">\t<span class=\"comment\">/* 控制滚动条位置 */</span></span><br><span class=\"line\">\t<span class=\"title function_\">scrollBehavior</span>(<span class=\"params\">to, <span class=\"keyword\">from</span>, savedPosition</span>){</span><br><span class=\"line\">\t\t<span class=\"keyword\">if</span>(savedPosition){</span><br><span class=\"line\">\t\t\t<span class=\"keyword\">return</span> savedPosition</span><br><span class=\"line\">\t\t}<span class=\"keyword\">else</span>{</span><br><span class=\"line\">\t\t\t<span class=\"keyword\">if</span>(to.<span class=\"property\">hash</span>){<span class=\"comment\">//锚点</span></span><br><span class=\"line\">\t\t\t\t<span class=\"keyword\">return</span> { <span class=\"attr\">selector</span>: to.<span class=\"property\">hash</span> }</span><br><span class=\"line\">\t\t\t}<span class=\"keyword\">else</span>{</span><br><span class=\"line\">\t\t\t\t<span class=\"keyword\">return</span> { <span class=\"attr\">x</span>: <span class=\"number\">0</span>, <span class=\"attr\">y</span>: <span class=\"number\">0</span> }</span><br><span class=\"line\">\t\t\t}</span><br><span class=\"line\">\t\t}</span><br><span class=\"line\">\t},</span><br><span class=\"line\">\t<span class=\"attr\">routes</span>: [{</span><br><span class=\"line\">\t\t<span class=\"attr\">path</span>: <span class=\"string\">''</span>,</span><br><span class=\"line\">\t\t<span class=\"attr\">name</span>: <span class=\"string\">'login'</span>,</span><br><span class=\"line\">\t\t<span class=\"comment\">//懒加载 type1</span></span><br><span class=\"line\">\t\t<span class=\"attr\">component</span>: <span class=\"function\">(<span class=\"params\">resolve</span>) =></span> <span class=\"built_in\">require</span>([<span class=\"string\">'@/view/login'</span>], resolve)</span><br><span class=\"line\">\t},{</span><br><span class=\"line\">\t\t<span class=\"attr\">path</span>: <span class=\"string\">'password'</span>,</span><br><span class=\"line\">\t\t<span class=\"attr\">name</span>: <span class=\"string\">'password'</span>,</span><br><span class=\"line\">\t\t<span class=\"comment\">//懒加载 type2</span></span><br><span class=\"line\">\t\t<span class=\"attr\">component</span>: <span class=\"function\">() =></span> <span class=\"title function_\">import</span>(<span class=\"comment\">/* webpackChunkName: 'password' */</span><span class=\"string\">'@/view/password'</span>)</span><br><span class=\"line\">\t},{</span><br><span class=\"line\">\t\t<span class=\"attr\">path</span>: <span class=\"string\">'container'</span>,</span><br><span class=\"line\">\t\t<span class=\"attr\">name</span>: <span class=\"string\">'container'</span>,</span><br><span class=\"line\">\t\t<span class=\"attr\">component</span>: <span class=\"function\">(<span class=\"params\">resolve</span>) =></span> <span class=\"built_in\">require</span>([<span class=\"string\">'@/view/container'</span>], resolve),</span><br><span class=\"line\">\t\t<span class=\"comment\">//控制路由缓存</span></span><br><span class=\"line\">\t\t<span class=\"attr\">meta</span>: {</span><br><span class=\"line\">\t\t\t<span class=\"attr\">keepAlive</span>: <span class=\"literal\">true</span></span><br><span class=\"line\">\t\t},</span><br><span class=\"line\">\t\t<span class=\"comment\">//控制路由跳转，检测是否已登录</span></span><br><span class=\"line\">\t\t<span class=\"attr\">beforeEnter</span>: <span class=\"function\">(<span class=\"params\">to, <span class=\"keyword\">from</span>, next</span>) =></span> {</span><br><span class=\"line\">\t\t\t<span class=\"keyword\">if</span>(!<span class=\"variable language_\">localStorage</span>.<span class=\"property\">ACCOUNT</span> || <span class=\"variable language_\">localStorage</span>.<span class=\"property\">ACCOUNT</span> == <span class=\"string\">''</span>){</span><br><span class=\"line\">\t\t\t\t<span class=\"title function_\">next</span>({ <span class=\"attr\">name</span>: <span class=\"string\">'login'</span> })</span><br><span class=\"line\">\t\t\t}<span class=\"keyword\">else</span>{</span><br><span class=\"line\">\t\t\t\t<span class=\"title function_\">next</span>()</span><br><span class=\"line\">\t\t\t}</span><br><span class=\"line\">\t\t}</span><br><span class=\"line\">\t}]</span><br><span class=\"line\">});</span><br></pre></td></tr></table></figure>\n<ol>\n<li><p>栗子 => 路由缓存</p>\n<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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">keep-alive</span>></span></span><br><span class=\"line\">\t<span class=\"tag\"><<span class=\"name\">router-view</span> <span class=\"attr\">v-if</span>=<span class=\"string\">"$route.meta.keepAlive"</span>></span><span class=\"tag\"></<span class=\"name\">router-view</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">keep-alive</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">router-view</span> <span class=\"attr\">v-if</span>=<span class=\"string\">"!$route.meta.keepAlive"</span>></span><span class=\"tag\"></<span class=\"name\">router-view</span>></span></span><br></pre></td></tr></table></figure>\n</li>\n<li><p>栗子 => 缓存登录信息</p>\n<figure class=\"highlight js\"><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=\"variable language_\">this</span>.<span class=\"property\">$http</span>.<span class=\"title function_\">post</span>(<span class=\"string\">'login.api'</span>,userparam).<span class=\"title function_\">then</span>(<span class=\"function\">(<span class=\"params\">response</span>) =></span> {</span><br><span class=\"line\">\t<span class=\"keyword\">if</span>(response.<span class=\"property\">data</span>){</span><br><span class=\"line\">\t\t<span class=\"variable language_\">localStorage</span>.<span class=\"title function_\">removeItem</span>(<span class=\"string\">"ACCOUNT"</span>);<span class=\"comment\">//删除旧数据</span></span><br><span class=\"line\">\t\t<span class=\"variable language_\">localStorage</span>.<span class=\"title function_\">setItem</span>(<span class=\"string\">"ACCOUNT"</span>,<span class=\"title class_\">JSON</span>.<span class=\"title function_\">stringify</span>(userparam));</span><br><span class=\"line\">\t}</span><br><span class=\"line\">});</span><br></pre></td></tr></table></figure>\n</li>\n<li><p>添加百度统计</p>\n<figure class=\"highlight js\"><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\">router.<span class=\"title function_\">afterEach</span>(<span class=\"function\">(<span class=\"params\">to, <span class=\"keyword\">from</span>, next</span>) =></span> {</span><br><span class=\"line\">\t<span class=\"built_in\">setTimeout</span>(<span class=\"function\">() =></span> {</span><br><span class=\"line\">\t\t<span class=\"keyword\">var</span> _hmt = _hmt || [];</span><br><span class=\"line\">\t\t(<span class=\"keyword\">function</span>(<span class=\"params\"></span>) {</span><br><span class=\"line\">\t\t\t<span class=\"comment\">//先清空页面已有的统计连接</span></span><br><span class=\"line\">\t\t\t<span class=\"variable language_\">document</span>.<span class=\"title function_\">getElementById</span>(<span class=\"string\">"BaiduStatis"</span>) && <span class=\"variable language_\">document</span>.<span class=\"title function_\">getElementById</span>(<span class=\"string\">"BaiduStatis"</span>).<span class=\"title function_\">remove</span>();</span><br><span class=\"line\">\t\t\t<span class=\"keyword\">var</span> hm = <span class=\"variable language_\">document</span>.<span class=\"title function_\">createElement</span>(<span class=\"string\">"script"</span>);</span><br><span class=\"line\">\t\t\thm.<span class=\"property\">id</span> = <span class=\"string\">"BaiduStatis"</span>;</span><br><span class=\"line\">\t\t\thm.<span class=\"property\">src</span> = <span class=\"string\">"https://hm.baidu.com/hm.js?id"</span>;</span><br><span class=\"line\">\t\t\t<span class=\"keyword\">var</span> s = <span class=\"variable language_\">document</span>.<span class=\"title function_\">getElementsByTagName</span>(<span class=\"string\">"script"</span>)[<span class=\"number\">0</span>]; </span><br><span class=\"line\">\t\t\ts.<span class=\"property\">parentNode</span>.<span class=\"title function_\">insertBefore</span>(hm, s);</span><br><span class=\"line\">\t\t})();</span><br><span class=\"line\">\t},<span class=\"number\">0</span>)</span><br><span class=\"line\">});</span><br></pre></td></tr></table></figure>\n</li>\n</ol>\n<hr>\n<h2 id=\"Webpack\"><a href=\"#Webpack\" class=\"headerlink\" title=\"Webpack\"></a>Webpack</h2><h3 id=\"1-打包后移除console\"><a href=\"#1-打包后移除console\" class=\"headerlink\" title=\"1. 打包后移除console\"></a>1. 打包后移除console</h3><p>in build/webpack.prod.conf.js<br><figure class=\"highlight js\"><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">new</span> webpack.<span class=\"property\">optimize</span>.<span class=\"title class_\">UglifyJsPlugin</span>({</span><br><span class=\"line\">\t<span class=\"attr\">compress</span>: {</span><br><span class=\"line\">\t\t<span class=\"attr\">warning</span>: <span class=\"literal\">false</span>,<span class=\"comment\">//移除warning警告</span></span><br><span class=\"line\">\t\t<span class=\"attr\">dead_code</span>: <span class=\"literal\">true</span>,<span class=\"comment\">//移除没被引用代码</span></span><br><span class=\"line\">\t\t<span class=\"attr\">pure_funcs</span>: [<span class=\"string\">'console.log'</span>],<span class=\"comment\">//不打包的函数</span></span><br><span class=\"line\">\t\t<span class=\"comment\">// drop_debugger: true,//移除debugger</span></span><br><span class=\"line\">\t\t<span class=\"comment\">// drop_console: true//移除console，包括报错类型</span></span><br><span class=\"line\">\t},</span><br><span class=\"line\">\t<span class=\"attr\">sourceMap</span>: <span class=\"literal\">true</span></span><br><span class=\"line\">});</span><br></pre></td></tr></table></figure></p>\n<h3 id=\"2-本机IP可访问项目\"><a href=\"#2-本机IP可访问项目\" class=\"headerlink\" title=\"2. 本机IP可访问项目\"></a>2. 本机IP可访问项目</h3><p>in build/webpack.dev.conf.js<br><figure class=\"highlight js\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">devServer</span>: {</span><br><span class=\"line\">\t<span class=\"attr\">host</span>: <span class=\"string\">'0.0.0.0'</span></span><br><span class=\"line\">};</span><br></pre></td></tr></table></figure></p>\n<h3 id=\"3-打包时不包含-map文件\"><a href=\"#3-打包时不包含-map文件\" class=\"headerlink\" title=\"3. 打包时不包含.map文件\"></a>3. 打包时不包含.map文件</h3><p>in config/index.js<br><figure class=\"highlight js\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">build</span>: {</span><br><span class=\"line\">\t<span class=\"attr\">productionSourceMap</span>: <span class=\"literal\">false</span></span><br><span class=\"line\">};</span><br></pre></td></tr></table></figure></p>\n<h3 id=\"4-第三方组件单独打包DLLPlugin\"><a href=\"#4-第三方组件单独打包DLLPlugin\" class=\"headerlink\" title=\"4. 第三方组件单独打包DLLPlugin\"></a>4. 第三方组件单独打包DLLPlugin</h3><h4 id=\"1-新增文件\"><a href=\"#1-新增文件\" class=\"headerlink\" title=\"1. 新增文件\"></a>1. 新增文件</h4><p>new build/webpack.dll.config.js <a href=\"https://juejin.im/post/5a622613f265da3e5342475c\">参考文章</a><br><figure class=\"highlight js\"><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> path = <span class=\"built_in\">require</span>(<span class=\"string\">'path'</span>);</span><br><span class=\"line\"><span class=\"keyword\">var</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=\"variable language_\">module</span>.<span class=\"property\">exports</span> = {</span><br><span class=\"line\">\t<span class=\"attr\">entry</span>: {</span><br><span class=\"line\">\t\t<span class=\"attr\">vendor</span>: [<span class=\"string\">'vue/dist/vue.esm.js'</span>, <span class=\"string\">'axios'</span>, <span class=\"string\">'vue-router'</span>, <span class=\"string\">'element-ui'</span>, <span class=\"string\">'emojify.js'</span>, <span class=\"string\">'awe-dnd'</span>, <span class=\"string\">'echarts'</span>]</span><br><span class=\"line\">\t},</span><br><span class=\"line\">\t<span class=\"attr\">output</span>: {</span><br><span class=\"line\">\t\t<span class=\"attr\">path</span>: path.<span class=\"title function_\">join</span>(__dirname, <span class=\"string\">'../static/js'</span>),</span><br><span class=\"line\">\t\t<span class=\"attr\">filename</span>: <span class=\"string\">'[name].dll.js'</span>,</span><br><span class=\"line\">\t\t<span class=\"attr\">library</span>: <span class=\"string\">'[name]_library'</span></span><br><span class=\"line\">\t},</span><br><span class=\"line\">\t<span class=\"attr\">plugins</span>: [</span><br><span class=\"line\">\t\t<span class=\"keyword\">new</span> webpack.<span class=\"title class_\">DllPlugin</span>({</span><br><span class=\"line\">\t\t\t<span class=\"attr\">path</span>: path.<span class=\"title function_\">join</span>(__dirname, <span class=\"string\">'.'</span>, <span class=\"string\">'[name]-manifest.json'</span>),</span><br><span class=\"line\">\t\t\t<span class=\"attr\">name</span>: <span class=\"string\">'[name]_library'</span>,</span><br><span class=\"line\">\t\t\t<span class=\"attr\">context</span>: __dirname</span><br><span class=\"line\">\t\t}),</span><br><span class=\"line\">\t\t<span class=\"keyword\">new</span> webpack.<span class=\"property\">optimize</span>.<span class=\"title class_\">UglifyJsPlugin</span>({</span><br><span class=\"line\">\t\t\t<span class=\"attr\">compress</span>: {</span><br><span class=\"line\">\t\t\t\t<span class=\"attr\">warnings</span>: <span class=\"literal\">false</span>,</span><br><span class=\"line\">\t\t\t\t<span class=\"attr\">dead_code</span>: <span class=\"literal\">true</span>,<span class=\"comment\">//移除没被引用的代码</span></span><br><span class=\"line\">\t\t\t\t<span class=\"attr\">pure_funcs</span>: [<span class=\"string\">'console.log'</span>]<span class=\"comment\">//发布时不被打包的函数</span></span><br><span class=\"line\">\t\t\t}</span><br><span class=\"line\">\t\t})</span><br><span class=\"line\">\t]</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure></p>\n<h4 id=\"2-新增插件\"><a href=\"#2-新增插件\" class=\"headerlink\" title=\"2. 新增插件\"></a>2. 新增插件</h4><p>in build/webpack.dev.conf.js and build/webpack.prod.conf.js<br><figure class=\"highlight js\"><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=\"attr\">plugins</span>: [</span><br><span class=\"line\">\t<span class=\"keyword\">new</span> webpack.<span class=\"title class_\">DllReferencePlugin</span>({</span><br><span class=\"line\">\t\t<span class=\"attr\">context</span>: __dirname,</span><br><span class=\"line\">\t\t<span class=\"attr\">manifest</span>: <span class=\"built_in\">require</span>(<span class=\"string\">'./vendor-manifest.json'</span>)</span><br><span class=\"line\">\t})</span><br><span class=\"line\">]</span><br></pre></td></tr></table></figure></p>\n<h4 id=\"3-新增命令\"><a href=\"#3-新增命令\" class=\"headerlink\" title=\"3. 新增命令\"></a>3. 新增命令</h4><p>in package.json<br><figure class=\"highlight js\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"string\">"scripts"</span>: {</span><br><span class=\"line\">\t<span class=\"string\">"dll"</span>: <span class=\"string\">"webpack --config ./build/webpack.dll.config.js"</span></span><br><span class=\"line\">};</span><br></pre></td></tr></table></figure></p>\n<h4 id=\"4-引入DLL文件\"><a href=\"#4-引入DLL文件\" class=\"headerlink\" title=\"4. 引入DLL文件\"></a>4. 引入DLL文件</h4><p>in index.html<br><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\"><<span class=\"name\">script</span> <span class=\"attr\">src</span>=<span class=\"string\">"/static/js/vendor.dll.js"</span>></span><span class=\"tag\"></<span class=\"name\">script</span>></span></span><br></pre></td></tr></table></figure></p>\n<h4 id=\"5-打包构建\"><a href=\"#5-打包构建\" class=\"headerlink\" title=\"5. 打包构建\"></a>5. 打包构建</h4><figure class=\"highlight bash\"><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\">npm run dll</span><br><span class=\"line\">npm run dev / npm run build</span><br></pre></td></tr></table></figure>\n<hr>\n<h2 id=\"Vue\"><a href=\"#Vue\" class=\"headerlink\" title=\"Vue\"></a>Vue</h2><figure class=\"highlight js\"><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> <span class=\"title class_\">Vue</span> <span class=\"keyword\">from</span> <span class=\"string\">'vue'</span></span><br><span class=\"line\"><span class=\"keyword\">import</span> <span class=\"title class_\">App</span> <span class=\"keyword\">from</span> <span class=\"string\">'./App'</span></span><br><span class=\"line\"><span class=\"keyword\">new</span> <span class=\"title class_\">Vue</span>({</span><br><span class=\"line\">\t<span class=\"attr\">el</span>: <span class=\"string\">"#app"</span>,</span><br><span class=\"line\">\trouter,</span><br><span class=\"line\">\tstore,</span><br><span class=\"line\">\t<span class=\"attr\">render</span>: <span class=\"function\"><span class=\"params\">h</span> =></span> <span class=\"title function_\">h</span>(<span class=\"title class_\">App</span>),</span><br><span class=\"line\">\t<span class=\"attr\">watch</span>: {</span><br><span class=\"line\">\t\t<span class=\"comment\">/* 监听路由变化 */</span></span><br><span class=\"line\">\t\t<span class=\"string\">'$route'</span>: <span class=\"string\">'handleRouter'</span></span><br><span class=\"line\">\t},</span><br><span class=\"line\">\t<span class=\"attr\">methods</span>: {</span><br><span class=\"line\">\t\t<span class=\"title function_\">handleRouter</span>(<span class=\"params\"></span>){</span><br><span class=\"line\">\t\t\t<span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(<span class=\"string\">"路由变化..."</span>)</span><br><span class=\"line\">\t\t}</span><br><span class=\"line\">\t}</span><br><span class=\"line\">});</span><br></pre></td></tr></table></figure>\n","categories":["Vue"],"tags":["vue"]},{"title":"使用v-charts所遇问题及解决方法（持续更新06.14）","url":"https://xiaoniezi.github.io/2018-05-08/working-with-v-charts/","content":"<p>最近在做一个数据统计的需求要用到图表，偶然发现饿了么团队也有集成百度Echarts，索性直接使用。<br>期间遇到些问题，Mark一下<br><span id=\"more\"></span></p>\n<h2 id=\"1-颜色渐变\"><a href=\"#1-颜色渐变\" class=\"headerlink\" title=\"1. 颜色渐变\"></a>1. 颜色渐变</h2><p>在项目中引用echarts：</p>\n<figure class=\"highlight js\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> echarts <span class=\"keyword\">from</span> <span class=\"string\">'echarts/lib/echarts'</span></span><br></pre></td></tr></table></figure>\n<p>直接修改颜色参数：</p>\n<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><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">ve-line</span> <span class=\"attr\">:data</span>=<span class=\"string\">"chartData"</span> <span class=\"attr\">:colors</span>=<span class=\"string\">"chartColor"</span>></span><span class=\"tag\"></<span class=\"name\">ve-line</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">script</span>></span><span class=\"language-javascript\"></span></span><br><span class=\"line\"><span class=\"language-javascript\"><span class=\"keyword\">export</span> <span class=\"keyword\">default</span>{</span></span><br><span class=\"line\"><span class=\"language-javascript\">\t<span class=\"title function_\">data</span>(<span class=\"params\"></span>){</span></span><br><span class=\"line\"><span class=\"language-javascript\">\t\t<span class=\"keyword\">return</span> {</span></span><br><span class=\"line\"><span class=\"language-javascript\">\t\t\t<span class=\"attr\">chartColor</span>: [<span class=\"keyword\">new</span> echarts.<span class=\"property\">graphic</span>.<span class=\"title class_\">LinearGradient</span>(</span></span><br><span class=\"line\"><span class=\"language-javascript\">\t\t\t\t\t<span class=\"number\">0</span>,<span class=\"number\">0</span>,<span class=\"number\">0</span>,<span class=\"number\">1</span>,[{</span></span><br><span class=\"line\"><span class=\"language-javascript\">\t\t\t\t\t<span class=\"attr\">offset</span>: <span class=\"number\">0</span>, <span class=\"attr\">color</span>: <span class=\"string\">'rgb(25,212,174)'</span></span></span><br><span class=\"line\"><span class=\"language-javascript\">\t\t\t\t},{</span></span><br><span class=\"line\"><span class=\"language-javascript\">\t\t\t\t\t<span class=\"attr\">offset</span>: <span class=\"number\">1</span>, <span class=\"attr\">color</span>: <span class=\"string\">'rgba(25,212,174,0.3)'</span></span></span><br><span class=\"line\"><span class=\"language-javascript\">\t\t\t\t}]),</span></span><br><span class=\"line\"><span class=\"language-javascript\">\t\t\t\t<span class=\"keyword\">new</span> echarts.<span class=\"property\">graphic</span>.<span class=\"title class_\">LinearGradient</span>(</span></span><br><span class=\"line\"><span class=\"language-javascript\">\t\t\t\t\t<span class=\"number\">0</span>,<span class=\"number\">0</span>,<span class=\"number\">0</span>,<span class=\"number\">1</span>,[{</span></span><br><span class=\"line\"><span class=\"language-javascript\">\t\t\t\t\t<span class=\"attr\">offset</span>: <span class=\"number\">0</span>, <span class=\"attr\">color</span>: <span class=\"string\">'rgb(90,177,239)'</span></span></span><br><span class=\"line\"><span class=\"language-javascript\">\t\t\t\t},{</span></span><br><span class=\"line\"><span class=\"language-javascript\">\t\t\t\t\t<span class=\"attr\">offset</span>: <span class=\"number\">1</span>, <span class=\"attr\">color</span>: <span class=\"string\">'rgba(90,177,239,0.3)'</span></span></span><br><span class=\"line\"><span class=\"language-javascript\">\t\t\t\t}]),</span></span><br><span class=\"line\"><span class=\"language-javascript\">\t\t\t\t<span class=\"keyword\">new</span> echarts.<span class=\"property\">graphic</span>.<span class=\"title class_\">LinearGradient</span>(</span></span><br><span class=\"line\"><span class=\"language-javascript\">\t\t\t\t\t<span class=\"number\">0</span>,<span class=\"number\">0</span>,<span class=\"number\">0</span>,<span class=\"number\">1</span>,[{</span></span><br><span class=\"line\"><span class=\"language-javascript\">\t\t\t\t\t<span class=\"attr\">offset</span>: <span class=\"number\">0</span>, <span class=\"attr\">color</span>: <span class=\"string\">'rgb(250,110,134)'</span></span></span><br><span class=\"line\"><span class=\"language-javascript\">\t\t\t\t},{</span></span><br><span class=\"line\"><span class=\"language-javascript\">\t\t\t\t\t<span class=\"attr\">offset</span>: <span class=\"number\">1</span>, <span class=\"attr\">color</span>: <span class=\"string\">'rgba(250,110,134,0.3)'</span></span></span><br><span class=\"line\"><span class=\"language-javascript\">\t\t\t\t}]</span></span><br><span class=\"line\"><span class=\"language-javascript\">\t\t\t)],</span></span><br><span class=\"line\"><span class=\"language-javascript\">\t\t}</span></span><br><span class=\"line\"><span class=\"language-javascript\">\t}</span></span><br><span class=\"line\"><span class=\"language-javascript\">}</span></span><br><span class=\"line\"><span class=\"language-javascript\"></span><span class=\"tag\"></<span class=\"name\">script</span>></span></span><br></pre></td></tr></table></figure>\n<p>或者修改<code>itemStyle</code>，这个不知怎么设置两个色值以上→_ →</p>\n<figure class=\"highlight js\"><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"variable language_\">this</span>.<span class=\"property\">chartSetting</span> = {</span><br><span class=\"line\">\t<span class=\"attr\">itemStyle</span>: {</span><br><span class=\"line\">\t\t<span class=\"attr\">normal</span>: {</span><br><span class=\"line\">\t\t\t<span class=\"attr\">color</span>: <span class=\"keyword\">new</span> echarts.<span class=\"property\">graphic</span>.<span class=\"title class_\">LinearGradient</span>(<span class=\"number\">0</span>,<span class=\"number\">0</span>,<span class=\"number\">1</span>,<span class=\"number\">0</span>,[{</span><br><span class=\"line\">\t\t\t\t<span class=\"attr\">offset</span>: <span class=\"number\">0</span>, <span class=\"attr\">color</span>: <span class=\"string\">'#2FDE80'</span></span><br><span class=\"line\">\t\t\t},{</span><br><span class=\"line\">\t\t\t\t<span class=\"attr\">offset</span>: <span class=\"number\">1</span>, <span class=\"attr\">color</span>: <span class=\"string\">'red'</span></span><br><span class=\"line\">\t\t\t}])</span><br><span class=\"line\">\t\t}</span><br><span class=\"line\">\t}</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n<p>详细：<br><a href=\"https://jsfiddle.net/xiaoniezi/Lmfjg492/\">折线图</a><br><a href=\"https://jsfiddle.net/xiaoniezi/grLtedt7/\">柱状图</a></p>\n<hr>\n<h2 id=\"2-双轴对齐\"><a href=\"#2-双轴对齐\" class=\"headerlink\" title=\"2. 双轴对齐\"></a>2. 双轴对齐</h2><p>双轴对齐关键是限定y轴最大最小值和间隔值（interval）<br><figure class=\"highlight js\"><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"variable language_\">this</span>.<span class=\"property\">chartData</span> = {</span><br><span class=\"line\">\t<span class=\"attr\">rows</span>: [...]</span><br><span class=\"line\">}</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"comment\">//以下两者是倍数双轴的值才不会出现小数点</span></span><br><span class=\"line\"><span class=\"variable language_\">this</span>.<span class=\"property\">yAxisMultiple</span> = <span class=\"number\">10</span>;<span class=\"comment\">//双轴对齐数据处理倍数</span></span><br><span class=\"line\"><span class=\"variable language_\">this</span>.<span class=\"property\">yAxisSplitNumber</span> = <span class=\"number\">5</span>;<span class=\"comment\">//双轴分段数</span></span><br><span class=\"line\"></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"comment\">//分别获取左右两轴的列表</span></span><br><span class=\"line\"><span class=\"keyword\">let</span> left_list = <span class=\"variable language_\">this</span>.<span class=\"property\">chartData</span>.<span class=\"property\">rows</span>.<span class=\"title function_\">map</span>(<span class=\"function\"><span class=\"params\">c</span> =></span> c.<span class=\"property\">left</span>),</span><br><span class=\"line\">\tright_list = <span class=\"variable language_\">this</span>.<span class=\"property\">chartData</span>.<span class=\"property\">rows</span>.<span class=\"title function_\">map</span>(<span class=\"function\"><span class=\"params\">c</span> =></span> c.<span class=\"property\">right</span>);</span><br><span class=\"line\"></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"comment\">//获取列表内的最大值并向上取整</span></span><br><span class=\"line\"><span class=\"keyword\">let</span> left_max = <span class=\"title class_\">Math</span>.<span class=\"title function_\">ceil</span>(<span class=\"title class_\">Math</span>.<span class=\"title function_\">max</span>(...let_list)/<span class=\"variable language_\">this</span>.<span class=\"property\">yAxisMultiple</span>)*<span class=\"variable language_\">this</span>.<span class=\"property\">yAxisMultiple</span>,</span><br><span class=\"line\">\tright_max = <span class=\"title class_\">Math</span>.<span class=\"title function_\">ceil</span>(<span class=\"title class_\">Math</span>.<span class=\"title function_\">max</span>(...right_list)/<span class=\"variable language_\">this</span>.<span class=\"property\">yAxisMultiple</span>)*<span class=\"variable language_\">this</span>.<span class=\"property\">yAxisMultiple</span>;</span><br><span class=\"line\"></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"comment\">//引用yAxis提供的默认参数设置最大最小值和间隔值</span></span><br><span class=\"line\"><span class=\"keyword\">let</span> that = <span class=\"variable language_\">this</span>;</span><br><span class=\"line\"><span class=\"variable language_\">this</span>.<span class=\"property\">chartExtend</span> = {</span><br><span class=\"line\">\t<span class=\"title function_\">yAxis</span>(<span class=\"params\">item</span>){</span><br><span class=\"line\">\t\titem.<span class=\"title function_\">map</span>(<span class=\"function\"><span class=\"params\">c</span> =></span> { c.<span class=\"property\">min</span> = <span class=\"number\">0</span> })</span><br><span class=\"line\">\t\titem[<span class=\"number\">0</span>].<span class=\"property\">max</span> = left_max</span><br><span class=\"line\">\t\titem[<span class=\"number\">0</span>].<span class=\"property\">interval</span> = left_max/that.<span class=\"property\">yAxisSplitNumber</span></span><br><span class=\"line\">\t\titem[<span class=\"number\">1</span>].<span class=\"property\">max</span> = right_max</span><br><span class=\"line\">\t\titem[<span class=\"number\">1</span>].<span class=\"property\">interval</span> = right_max/that.<span class=\"property\">yAxisSplitNumber</span></span><br><span class=\"line\">\t}</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure></p>\n<p>详情： <a href=\"https://jsfiddle.net/xiaoniezi/2q5udkkt/\">jsfiddle地址</a></p>\n<h2 id=\"3-折线图Y轴数值倍数\"><a href=\"#3-折线图Y轴数值倍数\" class=\"headerlink\" title=\"3.折线图Y轴数值倍数\"></a>3.折线图Y轴数值倍数</h2><figure class=\"highlight js\"><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\"><span class=\"variable language_\">this</span>.<span class=\"property\">chartExtend</span> = {</span><br><span class=\"line\">\t<span class=\"title function_\">yAxis</span>(<span class=\"params\">item</span>){</span><br><span class=\"line\">\t\t<span class=\"keyword\">let</span> obj = {</span><br><span class=\"line\">\t\t\t<span class=\"attr\">splitNumber</span>: <span class=\"number\">5</span>,</span><br><span class=\"line\">\t\t\t<span class=\"attr\">min</span>: <span class=\"number\">0</span>,</span><br><span class=\"line\">\t\t\t<span class=\"attr\">max</span>: <span class=\"function\">(<span class=\"params\">val</span>) =></span> {</span><br><span class=\"line\">\t\t\t\t<span class=\"keyword\">if</span>(val.<span class=\"property\">max</span> < <span class=\"number\">5</span>){</span><br><span class=\"line\">\t\t\t\t\t<span class=\"keyword\">return</span> <span class=\"number\">5</span></span><br><span class=\"line\">\t\t\t\t}<span class=\"keyword\">else</span>{</span><br><span class=\"line\">\t\t\t\t\t<span class=\"keyword\">return</span> <span class=\"title class_\">Math</span>.<span class=\"title function_\">ceil</span>(val.<span class=\"property\">max</span>/<span class=\"number\">10</span>)*<span class=\"number\">10</span></span><br><span class=\"line\">\t\t\t\t}</span><br><span class=\"line\">\t\t\t}</span><br><span class=\"line\">\t\t};</span><br><span class=\"line\">\t\tobj.<span class=\"title function_\">max</span>(item[<span class=\"number\">0</span>])</span><br><span class=\"line\">\t\t<span class=\"title class_\">Object</span>.<span class=\"title function_\">assign</span>(item[<span class=\"number\">0</span>], obj)</span><br><span class=\"line\">\t\t<span class=\"keyword\">return</span> item;</span><br><span class=\"line\">\t}</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n<h2 id=\"4-地图\"><a href=\"#4-地图\" class=\"headerlink\" title=\"4.地图\"></a>4.地图</h2>","categories":["Vue"],"tags":["vue","javascript","v-charts","echarts"]},{"title":"常用css（持续更新07.19）","url":"https://xiaoniezi.github.io/2018-04-08/common-in-css/","content":"<p>常用样式集合<br><span id=\"more\"></span></p>\n<h2 id=\"斑马纹表格\"><a href=\"#斑马纹表格\" class=\"headerlink\" title=\"斑马纹表格\"></a>斑马纹表格</h2><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\"><<span class=\"name\">table</span> <span class=\"attr\">class</span>=<span class=\"string\">"sl-table-inside is-zebras"</span>></span><span class=\"tag\"></<span class=\"name\">table</span>></span></span><br></pre></td></tr></table></figure>\n<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><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"selector-class\">.sl-table-inside</span> * {</span><br><span class=\"line\"> <span class=\"attribute\">box-sizing</span>: border-box;</span><br><span class=\"line\">}</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"selector-class\">.sl-table-inside</span> {</span><br><span class=\"line\"> <span class=\"attribute\">padding</span>: <span class=\"number\">0</span>;</span><br><span class=\"line\"> <span class=\"attribute\">margin</span>: <span class=\"number\">0</span>;</span><br><span class=\"line\"> <span class=\"attribute\">width</span>: <span class=\"number\">100%</span>;</span><br><span class=\"line\"> <span class=\"attribute\">max-width</span>: <span class=\"number\">100%</span>;</span><br><span class=\"line\"> <span class=\"attribute\">border-spacing</span>: <span class=\"number\">0</span>;</span><br><span class=\"line\"> <span class=\"attribute\">background-color</span>: <span class=\"number\">#fff</span>;</span><br><span class=\"line\"> <span class=\"attribute\">border</span>: <span class=\"number\">1px</span> solid <span class=\"number\">#dfe6ec</span>;</span><br><span class=\"line\"> <span class=\"attribute\">border-right</span>: <span class=\"number\">0</span>;</span><br><span class=\"line\"> <span class=\"attribute\">border-bottom</span>: <span class=\"number\">0</span>;</span><br><span class=\"line\"> <span class=\"attribute\">font-size</span>: <span class=\"number\">14px</span>;</span><br><span class=\"line\"> <span class=\"attribute\">color</span>: <span class=\"number\">#1f2d3d</span>;</span><br><span class=\"line\"> <span class=\"attribute\">overflow</span>: hidden;</span><br><span class=\"line\"> <span class=\"attribute\">box-sizing</span>: border-box;</span><br><span class=\"line\"> <span class=\"attribute\">position</span>: relative;</span><br><span class=\"line\">}</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"selector-class\">.sl-table-inside</span> <span class=\"selector-tag\">tr</span> {</span><br><span class=\"line\"> <span class=\"attribute\">background-color</span>: <span class=\"number\">#fff</span>;</span><br><span class=\"line\">}</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"selector-class\">.sl-table-inside</span> <span class=\"selector-tag\">th</span> {</span><br><span class=\"line\"> <span class=\"attribute\">background-color</span>: <span class=\"number\">#eef1f6</span>;</span><br><span class=\"line\"> <span class=\"attribute\">font-weight</span>: normal;</span><br><span class=\"line\">}</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"selector-class\">.sl-table-inside</span> <span class=\"selector-tag\">th</span>,</span><br><span class=\"line\"><span class=\"selector-class\">.sl-table-inside</span> <span class=\"selector-tag\">td</span> {</span><br><span class=\"line\"> <span class=\"attribute\">padding</span>: <span class=\"number\">0</span> <span class=\"number\">8px</span>;</span><br><span class=\"line\"> <span class=\"attribute\">box-sizing</span>: border-box;</span><br><span class=\"line\"> <span class=\"attribute\">position</span>: relative;</span><br><span class=\"line\"> <span class=\"attribute\">height</span>: <span class=\"number\">40px</span>;</span><br><span class=\"line\"> <span class=\"attribute\">text-overflow</span>: ellipsis;</span><br><span class=\"line\"> <span class=\"attribute\">vertical-align</span>: middle;</span><br><span class=\"line\"> <span class=\"attribute\">border-right</span>: <span class=\"number\">1px</span> solid <span class=\"number\">#dfe6ec</span>;</span><br><span class=\"line\"> <span class=\"attribute\">border-bottom</span>: <span class=\"number\">1px</span> solid <span class=\"number\">#dfe6ec</span>;</span><br><span class=\"line\"> <span class=\"attribute\">transition</span>: all .<span class=\"number\">25s</span> ease;</span><br><span class=\"line\"> <span class=\"attribute\">overflow</span>: hidden;</span><br><span class=\"line\">}</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"selector-class\">.sl-table-inside</span><span class=\"selector-class\">.is-zebras</span> <span class=\"selector-tag\">tr</span><span class=\"selector-pseudo\">:nth-child</span>(even)><span class=\"selector-tag\">td</span> {</span><br><span class=\"line\"> <span class=\"attribute\">background-color</span>: <span class=\"number\">#FAFAFA</span>;</span><br><span class=\"line\"> <span class=\"comment\">/*background-color:#eef1f6;*/</span></span><br><span class=\"line\">}</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"selector-class\">.sl-table-inside</span> <span class=\"selector-tag\">tr</span><span class=\"selector-pseudo\">:hover</span>><span class=\"selector-tag\">td</span>,</span><br><span class=\"line\"><span class=\"selector-class\">.sl-table-inside</span><span class=\"selector-class\">.is-zebras</span> <span class=\"selector-tag\">tr</span><span class=\"selector-pseudo\">:hover</span>><span class=\"selector-tag\">td</span> {</span><br><span class=\"line\"> <span class=\"attribute\">background-color</span>: <span class=\"number\">#eef1f6</span>;</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n<h2 id=\"按钮效果\"><a href=\"#按钮效果\" class=\"headerlink\" title=\"按钮效果\"></a>按钮效果</h2><ol>\n<li><p>hover亮片</p>\n<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\"><<span class=\"name\">button</span> <span class=\"attr\">class</span>=<span class=\"string\">"flash-btn"</span>></span>click me<span class=\"tag\"></<span class=\"name\">button</span>></span></span><br></pre></td></tr></table></figure>\n<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><span class=\"line\">13</span><br><span class=\"line\">14</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"selector-class\">.flash-btn</span><span class=\"selector-pseudo\">:before</span>{</span><br><span class=\"line\"> <span class=\"attribute\">content</span>:<span class=\"string\">''</span>;</span><br><span class=\"line\"> <span class=\"attribute\">background</span>:<span class=\"built_in\">rgba</span>(<span class=\"number\">255</span>,<span class=\"number\">255</span>,<span class=\"number\">255</span>,.<span class=\"number\">5</span>);</span><br><span class=\"line\"> <span class=\"attribute\">position</span>:absolute;</span><br><span class=\"line\"> <span class=\"attribute\">height</span>:<span class=\"number\">100%</span>;</span><br><span class=\"line\"> <span class=\"attribute\">width</span>:<span class=\"number\">2em</span>;</span><br><span class=\"line\"> <span class=\"attribute\">left</span>:-<span class=\"number\">4em</span>;</span><br><span class=\"line\"> <span class=\"attribute\">top</span>:<span class=\"number\">0</span>;</span><br><span class=\"line\"> <span class=\"attribute\">transform</span>:<span class=\"built_in\">skewX</span>(-<span class=\"number\">45deg</span>) <span class=\"built_in\">translateX</span>(<span class=\"number\">0</span>);</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"selector-class\">.flash-btn</span><span class=\"selector-pseudo\">:hover</span><span class=\"selector-pseudo\">:before</span>{</span><br><span class=\"line\"> <span class=\"attribute\">transition</span>:all .<span class=\"number\">7s</span> ease-in-out;</span><br><span class=\"line\"> <span class=\"attribute\">transform</span>:<span class=\"built_in\">skewX</span>(-<span class=\"number\">45deg</span>) <span class=\"built_in\">translateX</span>(<span class=\"number\">10em</span>);</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n</li>\n<li><p>click水纹</p>\n<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\"><<span class=\"name\">button</span> <span class=\"attr\">class</span>=<span class=\"string\">"ripple-btn"</span>></span>click me<span class=\"tag\"></<span class=\"name\">button</span>></span></span><br></pre></td></tr></table></figure>\n<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><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"selector-class\">.ripple-btn</span>{</span><br><span class=\"line\"> <span class=\"attribute\">overflow</span>: hidden;</span><br><span class=\"line\"> user-select: none;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"selector-class\">.ripple</span>{</span><br><span class=\"line\"> <span class=\"attribute\">position</span>: absolute;</span><br><span class=\"line\"> <span class=\"attribute\">background-color</span>: <span class=\"built_in\">rgba</span>(<span class=\"number\">0</span>, <span class=\"number\">0</span>, <span class=\"number\">0</span>, .<span class=\"number\">15</span>);</span><br><span class=\"line\"> <span class=\"attribute\">border-radius</span>: <span class=\"number\">100%</span>;</span><br><span class=\"line\"> <span class=\"attribute\">transform</span>: <span class=\"built_in\">scale</span>(<span class=\"number\">0</span>);</span><br><span class=\"line\"> <span class=\"attribute\">pointer-events</span>: none;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"selector-class\">.ripple</span><span class=\"selector-class\">.show</span>{</span><br><span class=\"line\"> <span class=\"attribute\">animation-name</span>: ripple;</span><br><span class=\"line\"> <span class=\"attribute\">animation-duration</span>: .<span class=\"number\">75s</span>;</span><br><span class=\"line\"> <span class=\"attribute\">animation-timing-function</span>: ease-out;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"keyword\">@keyframes</span> ripple{</span><br><span class=\"line\"> <span class=\"selector-tag\">to</span>{</span><br><span class=\"line\"> <span class=\"attribute\">transform</span>: <span class=\"built_in\">scale</span>(<span class=\"number\">2</span>);</span><br><span class=\"line\"> <span class=\"attribute\">opacity</span>: <span class=\"number\">0</span>;</span><br><span class=\"line\"> }</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n<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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> addRippleEffect = <span class=\"keyword\">function</span>(<span class=\"params\">e</span>) {</span><br><span class=\"line\"> <span class=\"keyword\">var</span> target = e.<span class=\"property\">target</span>;</span><br><span class=\"line\"> <span class=\"keyword\">if</span>(target.<span class=\"property\">tagName</span>.<span class=\"title function_\">toLowerCase</span>() !== <span class=\"string\">"button"</span>) <span class=\"keyword\">return</span> <span class=\"literal\">false</span>;</span><br><span class=\"line\"> <span class=\"keyword\">var</span> rect = target.<span class=\"title function_\">getBoundingClientRect</span>();</span><br><span class=\"line\"> <span class=\"keyword\">var</span> ripple = target.<span class=\"title function_\">querySelector</span>(<span class=\"string\">".ripple"</span>);</span><br><span class=\"line\"> <span class=\"keyword\">if</span>(!ripple){<span class=\"comment\">//水纹是否已存在</span></span><br><span class=\"line\"> ripple = <span class=\"variable language_\">document</span>.<span class=\"title function_\">createElement</span>(<span class=\"string\">"span"</span>);</span><br><span class=\"line\"> ripple.<span class=\"property\">className</span> = <span class=\"string\">'ripple'</span>;</span><br><span class=\"line\"> ripple.<span class=\"property\">style</span>.<span class=\"property\">height</span> = ripple.<span class=\"property\">style</span>.<span class=\"property\">width</span> = <span class=\"title class_\">Math</span>.<span class=\"title function_\">max</span>(rect.<span class=\"property\">width</span>, rect.<span class=\"property\">height</span>) + <span class=\"string\">'px'</span>;</span><br><span class=\"line\"> target.<span class=\"title function_\">appendChild</span>(ripple)</span><br><span class=\"line\"> }</span><br><span class=\"line\"> ripple.<span class=\"property\">classList</span>.<span class=\"title function_\">remove</span>(<span class=\"string\">"show"</span>);</span><br><span class=\"line\"> <span class=\"keyword\">var</span> top = e.<span class=\"property\">pageY</span> - rect.<span class=\"property\">top</span> - ripple.<span class=\"property\">offsetHeight</span> / <span class=\"number\">2</span> - <span class=\"variable language_\">document</span>.<span class=\"property\">body</span>.<span class=\"property\">scrollTop</span>;</span><br><span class=\"line\"> <span class=\"keyword\">var</span> left = e.<span class=\"property\">pageX</span> - rect.<span class=\"property\">left</span> - ripple.<span class=\"property\">offsetWidth</span> /<span class=\"number\">2</span> - <span class=\"variable language_\">document</span>.<span class=\"property\">body</span>.<span class=\"property\">scrollLeft</span>;</span><br><span class=\"line\"> ripple.<span class=\"property\">style</span>.<span class=\"property\">top</span> = top + <span class=\"string\">'px'</span>;</span><br><span class=\"line\"> ripple.<span class=\"property\">style</span>.<span class=\"property\">left</span> = left + <span class=\"string\">'px'</span>;</span><br><span class=\"line\"> ripple.<span class=\"property\">classList</span>.<span class=\"title function_\">add</span>(<span class=\"string\">"show"</span>)</span><br><span class=\"line\"> <span class=\"keyword\">return</span> <span class=\"literal\">false</span></span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"comment\">//点击时给按钮添加水纹效果</span></span><br><span class=\"line\"><span class=\"variable language_\">document</span>.<span class=\"title function_\">addEventListener</span>(<span class=\"string\">"click"</span>, addRippleEffect, <span class=\"literal\">false</span>);</span><br></pre></td></tr></table></figure>\n</li>\n</ol>\n<p>详细：<a href=\"https://jsfiddle.net/xiaoniezi/6egb0bby/\">jsfiddle地址</a></p>\n<hr>\n<h2 id=\"背景颜色渐变\"><a href=\"#背景颜色渐变\" class=\"headerlink\" title=\"背景颜色渐变\"></a>背景颜色渐变</h2><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\"><<span class=\"name\">div</span> <span class=\"attr\">class</span>=<span class=\"string\">"linear-color"</span>></span>linear color change<span class=\"tag\"></<span class=\"name\">div</span>></span></span><br></pre></td></tr></table></figure>\n<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><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"selector-class\">.linear-color</span>{</span><br><span class=\"line\"> <span class=\"attribute\">width</span>: <span class=\"number\">300px</span>;</span><br><span class=\"line\"> <span class=\"attribute\">height</span>: <span class=\"number\">200px</span>;</span><br><span class=\"line\"> <span class=\"attribute\">color</span>: <span class=\"number\">#fff</span>;</span><br><span class=\"line\">}</span><br><span class=\"line\">\t<span class=\"comment\">/* 渐变效果 type1 */</span></span><br><span class=\"line\"><span class=\"selector-class\">.linear-color</span>{</span><br><span class=\"line\"> <span class=\"attribute\">background</span>: olive <span class=\"built_in\">linear-gradient</span>(to right, <span class=\"built_in\">rgba</span>(<span class=\"number\">0</span>,<span class=\"number\">255</span>,<span class=\"number\">0</span>,<span class=\"number\">0</span>), <span class=\"built_in\">rgba</span>(<span class=\"number\">0</span>,<span class=\"number\">255</span>,<span class=\"number\">0</span>,.<span class=\"number\">5</span>));</span><br><span class=\"line\"> <span class=\"attribute\">transition</span>: all .<span class=\"number\">5s</span>;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"selector-class\">.linear-color</span><span class=\"selector-pseudo\">:hover</span>{</span><br><span class=\"line\"> <span class=\"attribute\">background-color</span>: purple;</span><br><span class=\"line\">}</span><br><span class=\"line\">\t<span class=\"comment\">/* 渐变效果 type2 */</span></span><br><span class=\"line\"><span class=\"selector-class\">.linear-color</span>{</span><br><span class=\"line\"> <span class=\"attribute\">background</span>: <span class=\"built_in\">linear-gradient</span>(to right, olive, green);</span><br><span class=\"line\"> <span class=\"attribute\">position</span>: relative;</span><br><span class=\"line\"> <span class=\"attribute\">z-index</span>: <span class=\"number\">0</span>;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"selector-class\">.linear-color</span><span class=\"selector-pseudo\">::before</span>{</span><br><span class=\"line\"> <span class=\"attribute\">content</span>: <span class=\"string\">''</span>;</span><br><span class=\"line\"> <span class=\"attribute\">position</span>: absolute;</span><br><span class=\"line\"> <span class=\"attribute\">left</span>: <span class=\"number\">0</span>;</span><br><span class=\"line\"> <span class=\"attribute\">top</span>: <span class=\"number\">0</span>;</span><br><span class=\"line\"> <span class=\"attribute\">right</span>: <span class=\"number\">0</span>;</span><br><span class=\"line\"> <span class=\"attribute\">bottom</span>: <span class=\"number\">0</span>;</span><br><span class=\"line\"> <span class=\"attribute\">background</span>: <span class=\"built_in\">linear-gradient</span>(to right, green, purple);</span><br><span class=\"line\"> <span class=\"attribute\">opacity</span>: <span class=\"number\">0</span>;</span><br><span class=\"line\"> <span class=\"attribute\">transition</span>: all .<span class=\"number\">5s</span>;</span><br><span class=\"line\"> <span class=\"attribute\">z-index</span>: -<span class=\"number\">1</span>;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"selector-class\">.linear-color</span><span class=\"selector-pseudo\">:hover</span><span class=\"selector-pseudo\">::before</span>{</span><br><span class=\"line\"> <span class=\"attribute\">opacity</span>: <span class=\"number\">1</span>;</span><br><span class=\"line\">}</span><br><span class=\"line\">\t<span class=\"comment\">/* 渐变效果 type3 */</span></span><br><span class=\"line\"><span class=\"selector-class\">.linear-color</span>{</span><br><span class=\"line\"> <span class=\"attribute\">background</span>: <span class=\"built_in\">linear-gradient</span>(to right, olive, green, purple);</span><br><span class=\"line\"> <span class=\"attribute\">background-size</span>: <span class=\"number\">200%</span>;</span><br><span class=\"line\"> <span class=\"attribute\">transition</span>: all .<span class=\"number\">5s</span>;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"selector-class\">.linear-color</span><span class=\"selector-pseudo\">:hover</span>{</span><br><span class=\"line\"> <span class=\"attribute\">background-position</span>: <span class=\"number\">100%</span>;</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n<p>详细：<a href=\"https://jsfiddle.net/xiaoniezi/dr510rct/\">jsfiddle地址</a></p>\n<hr>\n<h2 id=\"随光标移动的下划线\"><a href=\"#随光标移动的下划线\" class=\"headerlink\" title=\"随光标移动的下划线\"></a>随光标移动的下划线</h2><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">ul</span> <span class=\"attr\">class</span>=<span class=\"string\">"moving-line"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">li</span>></span>tab 1<span class=\"tag\"></<span class=\"name\">li</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">li</span>></span>tab 2<span class=\"tag\"></<span class=\"name\">li</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">li</span>></span>tab 3<span class=\"tag\"></<span class=\"name\">li</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">li</span>></span>tab 4<span class=\"tag\"></<span class=\"name\">li</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">li</span>></span>tab 5<span class=\"tag\"></<span class=\"name\">li</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">ul</span>></span></span><br></pre></td></tr></table></figure>\n<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><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"selector-class\">.moving-line</span>{</span><br><span class=\"line\"> <span class=\"attribute\">display</span>: table;</span><br><span class=\"line\"> <span class=\"attribute\">width</span>: <span class=\"number\">80%</span>;</span><br><span class=\"line\"> <span class=\"attribute\">margin</span>: <span class=\"number\">0</span> auto;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"selector-class\">.moving-line</span> <span class=\"selector-tag\">li</span>{</span><br><span class=\"line\"> <span class=\"attribute\">list-style</span>: none;</span><br><span class=\"line\"> <span class=\"attribute\">display</span>: inline-block;</span><br><span class=\"line\"> <span class=\"attribute\">width</span>: <span class=\"number\">20%</span>;</span><br><span class=\"line\"> <span class=\"attribute\">float</span>: none;</span><br><span class=\"line\"> <span class=\"attribute\">position</span>: relative;</span><br><span class=\"line\"> <span class=\"attribute\">text-align</span>: center;</span><br><span class=\"line\"> <span class=\"attribute\">padding</span>: <span class=\"number\">10px</span> <span class=\"number\">0</span>;</span><br><span class=\"line\"> <span class=\"attribute\">cursor</span>: pointer;</span><br><span class=\"line\"> <span class=\"attribute\">transition</span>: all .<span class=\"number\">2s</span> linear;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"selector-class\">.moving-line</span> <span class=\"selector-tag\">li</span><span class=\"selector-pseudo\">::before</span>{</span><br><span class=\"line\"> <span class=\"attribute\">content</span>: <span class=\"string\">''</span>;</span><br><span class=\"line\"> <span class=\"attribute\">position</span>: absolute;</span><br><span class=\"line\"> <span class=\"attribute\">top</span>: <span class=\"number\">0</span>;</span><br><span class=\"line\"> <span class=\"attribute\">left</span>: <span class=\"number\">100%</span>;</span><br><span class=\"line\"> <span class=\"attribute\">width</span>: <span class=\"number\">0</span>;</span><br><span class=\"line\"> <span class=\"attribute\">height</span>: <span class=\"number\">100%</span>;</span><br><span class=\"line\"> <span class=\"attribute\">border-bottom</span>: <span class=\"number\">2px</span> solid <span class=\"number\">#000</span>;</span><br><span class=\"line\"> <span class=\"attribute\">transition</span>: all .<span class=\"number\">2s</span> linear;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"selector-class\">.moving-line</span> <span class=\"selector-tag\">li</span><span class=\"selector-pseudo\">:hover</span><span class=\"selector-pseudo\">::before</span>{</span><br><span class=\"line\"> <span class=\"attribute\">left</span>: <span class=\"number\">0</span>;</span><br><span class=\"line\"> <span class=\"attribute\">width</span>: <span class=\"number\">100%</span>;</span><br><span class=\"line\"> <span class=\"attribute\">transition-delay</span>: .<span class=\"number\">2s</span>;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"selector-class\">.moving-line</span> <span class=\"selector-tag\">li</span><span class=\"selector-pseudo\">:hover</span> ~ <span class=\"selector-tag\">li</span><span class=\"selector-pseudo\">::before</span>{</span><br><span class=\"line\"> <span class=\"attribute\">left</span>: <span class=\"number\">0</span>;</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n<p>详细：<a href=\"https://jsfiddle.net/xiaoniezi/h6z3kyjg/\">jsfiddle地址</a></p>\n<hr>\n<h2 id=\"表格内容垂直居中\"><a href=\"#表格内容垂直居中\" class=\"headerlink\" title=\"表格内容垂直居中\"></a>表格内容垂直居中</h2><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">div</span> <span class=\"attr\">class</span>=<span class=\"string\">"sl-table"</span>></span></span><br><span class=\"line\">\t<span class=\"tag\"><<span class=\"name\">div</span> <span class=\"attr\">class</span>=<span class=\"string\">"sl-table-cell cell-half"</span>></span>我是内容<span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\">\t<span class=\"tag\"><<span class=\"name\">div</span> <span class=\"attr\">class</span>=<span class=\"string\">"sl-table-cell cell-33"</span>></span>我是特别特别多的内容啊啊啊啊啊啊啊啊啊啊<span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">div</span>></span></span><br></pre></td></tr></table></figure>\n<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><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"selector-class\">.sl-table</span>{</span><br><span class=\"line\">\t<span class=\"attribute\">display</span>: table;</span><br><span class=\"line\">\t<span class=\"attribute\">width</span>: <span class=\"number\">100%</span>;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"selector-class\">.sl-table-cell</span>{</span><br><span class=\"line\">\t<span class=\"attribute\">display</span>: table-cell;</span><br><span class=\"line\">\t<span class=\"attribute\">float</span>: none;</span><br><span class=\"line\">\t<span class=\"attribute\">vertical-align</span>: middle;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"selector-class\">.sl-table-cell</span><span class=\"selector-class\">.cell-half</span>{</span><br><span class=\"line\">\t<span class=\"attribute\">width</span>: <span class=\"number\">50%</span>;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"selector-class\">.sl-table-cell</span><span class=\"selector-class\">.cell-33</span>{</span><br><span class=\"line\">\t<span class=\"attribute\">width</span>: <span class=\"number\">33%</span>;</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n<p>详细：<a href=\"https://jsfiddle.net/xiaoniezi/f25Lf47x/\">jsfiddle地址</a></p>\n<hr>\n<h2 id=\"单个内容垂直居中\"><a href=\"#单个内容垂直居中\" class=\"headerlink\" title=\"单个内容垂直居中\"></a>单个内容垂直居中</h2><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"selector-class\">.vertical-middle</span>{</span><br><span class=\"line\">\t<span class=\"attribute\">position</span>:relative;</span><br><span class=\"line\">\t<span class=\"attribute\">top</span>:<span class=\"number\">50%</span>;</span><br><span class=\"line\">\t-webkit-<span class=\"attribute\">transform</span>:<span class=\"built_in\">translate</span>(<span class=\"number\">0</span>,-<span class=\"number\">50%</span>);</span><br><span class=\"line\">\t<span class=\"attribute\">transform</span>:<span class=\"built_in\">translate</span>(<span class=\"number\">0</span>,-<span class=\"number\">50%</span>);</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n<hr>\n<h2 id=\"表单左右两边拓展\"><a href=\"#表单左右两边拓展\" class=\"headerlink\" title=\"表单左右两边拓展\"></a>表单左右两边拓展</h2><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><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\"><!-- 带icon输入类型 --></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">div</span> <span class=\"attr\">class</span>=<span class=\"string\">"form-item is-tips"</span>></span></span><br><span class=\"line\">\t<span class=\"tag\"><<span class=\"name\">div</span> <span class=\"attr\">class</span>=<span class=\"string\">"form-item-prepend"</span>></span><span class=\"tag\"><<span class=\"name\">span</span>></span>手机号<span class=\"tag\"></<span class=\"name\">span</span>></span><span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\">\t<span class=\"tag\"><<span class=\"name\">input</span> <span class=\"attr\">type</span>=<span class=\"string\">"number"</span> <span class=\"attr\">placeholder</span>=<span class=\"string\">"请输入手机号"</span>></span></span><br><span class=\"line\">\t<span class=\"tag\"><<span class=\"name\">div</span> <span class=\"attr\">class</span>=<span class=\"string\">"form-item-prepend"</span>></span><span class=\"tag\"><<span class=\"name\">span</span>></span>icon<span class=\"tag\"></<span class=\"name\">span</span>></span><span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\">\t<span class=\"tag\"><<span class=\"name\">div</span> <span class=\"attr\">class</span>=<span class=\"string\">"form-item-tips"</span>></span>我是报错提示<span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\"><span class=\"comment\"><!-- 手机验证码类型 --></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">div</span> <span class=\"attr\">class</span>=<span class=\"string\">"form-item"</span>></span></span><br><span class=\"line\">\t<span class=\"tag\"><<span class=\"name\">div</span> <span class=\"attr\">class</span>=<span class=\"string\">"form-item-prepend"</span>></span><span class=\"tag\"><<span class=\"name\">span</span>></span>验证码<span class=\"tag\"></<span class=\"name\">span</span>></span><span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\">\t<span class=\"tag\"><<span class=\"name\">input</span> <span class=\"attr\">type</span>=<span class=\"string\">"number"</span> <span class=\"attr\">placeholder</span>=<span class=\"string\">"请输入短信验证码"</span>></span></span><br><span class=\"line\">\t<span class=\"tag\"><<span class=\"name\">div</span> <span class=\"attr\">class</span>=<span class=\"string\">"form-item-append"</span>></span></span><br><span class=\"line\">\t\t<span class=\"tag\"><<span class=\"name\">a</span> <span class=\"attr\">id</span>=<span class=\"string\">"GetCode"</span> <span class=\"attr\">class</span>=<span class=\"string\">"form-item-code sl-btn"</span>></span>获取验证码<span class=\"tag\"></<span class=\"name\">a</span>></span></span><br><span class=\"line\">\t<span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">div</span>></span></span><br></pre></td></tr></table></figure>\n<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><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><span class=\"line\">60</span><br><span class=\"line\">61</span><br><span class=\"line\">62</span><br><span class=\"line\">63</span><br><span class=\"line\">64</span><br><span class=\"line\">65</span><br><span class=\"line\">66</span><br><span class=\"line\">67</span><br><span class=\"line\">68</span><br><span class=\"line\">69</span><br><span class=\"line\">70</span><br><span class=\"line\">71</span><br><span class=\"line\">72</span><br><span class=\"line\">73</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"selector-class\">.form-item</span>{</span><br><span class=\"line\">\t<span class=\"attribute\">width</span>:<span class=\"number\">100%</span>;</span><br><span class=\"line\">\t<span class=\"attribute\">position</span>:relative;</span><br><span class=\"line\">\t<span class=\"attribute\">display</span>:table;</span><br><span class=\"line\">\t<span class=\"attribute\">padding</span>:<span class=\"number\">5px</span> <span class=\"number\">0</span>;</span><br><span class=\"line\">\t<span class=\"attribute\">border-bottom</span>:<span class=\"number\">1px</span> solid <span class=\"number\">#e6e6e6</span>;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"selector-class\">.form-item</span> <span class=\"selector-tag\">input</span>,</span><br><span class=\"line\"><span class=\"selector-class\">.form-item</span> select{</span><br><span class=\"line\">\t<span class=\"attribute\">display</span>:table-cell;</span><br><span class=\"line\">\t<span class=\"attribute\">vertical-align</span>:middle;</span><br><span class=\"line\">\t<span class=\"attribute\">width</span>:<span class=\"number\">100%</span>;</span><br><span class=\"line\">\t<span class=\"attribute\">line-height</span>:inherit;</span><br><span class=\"line\">\t<span class=\"attribute\">height</span>:<span class=\"number\">40px</span>;</span><br><span class=\"line\">\t<span class=\"attribute\">padding-right</span>:<span class=\"number\">8px</span>;</span><br><span class=\"line\">\t<span class=\"attribute\">border</span>:none;</span><br><span class=\"line\">\t<span class=\"attribute\">outline</span>:none;</span><br><span class=\"line\">\t-webkit-appearance:none;</span><br><span class=\"line\">\t<span class=\"attribute\">background-color</span>:transparent;</span><br><span class=\"line\">\t<span class=\"attribute\">padding</span>:<span class=\"number\">10px</span> <span class=\"number\">0</span>;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"selector-class\">.form-item</span> <span class=\"selector-class\">.form-item-prepend</span>,</span><br><span class=\"line\"><span class=\"selector-class\">.form-item</span> <span class=\"selector-class\">.form-item-append</span>{</span><br><span class=\"line\">\t<span class=\"attribute\">display</span>:table-cell;</span><br><span class=\"line\">\t<span class=\"attribute\">vertical-align</span>:middle;</span><br><span class=\"line\">\t<span class=\"attribute\">white-space</span>:nowrap;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"selector-class\">.form-item</span> <span class=\"selector-class\">.form-item-prepend</span>{</span><br><span class=\"line\">\t<span class=\"attribute\">padding</span>:<span class=\"number\">0</span> <span class=\"number\">5px</span> <span class=\"number\">0</span> <span class=\"number\">10px</span>;</span><br><span class=\"line\">\t<span class=\"attribute\">width</span>:<span class=\"number\">85px</span>;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"selector-class\">.form-item</span> <span class=\"selector-class\">.form-item-code</span>{</span><br><span class=\"line\">\t<span class=\"attribute\">width</span>:<span class=\"number\">120px</span>;</span><br><span class=\"line\">\t<span class=\"attribute\">font-size</span>:<span class=\"number\">1em</span>;</span><br><span class=\"line\">\t<span class=\"attribute\">text-align</span>:center;</span><br><span class=\"line\">\t<span class=\"attribute\">background</span>:none;</span><br><span class=\"line\">\t<span class=\"attribute\">background-color</span>:<span class=\"number\">#fff</span>;</span><br><span class=\"line\">\t<span class=\"attribute\">color</span>:<span class=\"number\">#f85032</span>;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"selector-class\">.form-item</span> <span class=\"selector-class\">.form-item-code</span><span class=\"selector-class\">.active</span>{</span><br><span class=\"line\">\t<span class=\"attribute\">color</span>:<span class=\"number\">#bbbbbb</span>;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"selector-class\">.form-item</span><span class=\"selector-class\">.is-tips</span>{</span><br><span class=\"line\">\t<span class=\"attribute\">padding-bottom</span>:<span class=\"number\">25px</span>;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"selector-class\">.form-item</span> <span class=\"selector-class\">.form-item-tips</span>{</span><br><span class=\"line\">\t<span class=\"attribute\">font-size</span>:<span class=\"number\">0.9em</span>;</span><br><span class=\"line\">\t<span class=\"attribute\">position</span>:absolute;</span><br><span class=\"line\">\t<span class=\"attribute\">left</span>:<span class=\"number\">0</span>;</span><br><span class=\"line\">\t<span class=\"attribute\">right</span>:<span class=\"number\">0</span>;</span><br><span class=\"line\">\t<span class=\"attribute\">bottom</span>:<span class=\"number\">5px</span>;</span><br><span class=\"line\">\t<span class=\"attribute\">padding-left</span>:<span class=\"number\">10px</span>;</span><br><span class=\"line\">\t<span class=\"attribute\">color</span>:red;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"selector-class\">.sl-btn</span>{</span><br><span class=\"line\">\t<span class=\"attribute\">display</span>:inline-block;</span><br><span class=\"line\">\t<span class=\"attribute\">width</span>:<span class=\"number\">100%</span>;</span><br><span class=\"line\">\t<span class=\"attribute\">text-decoration</span>:none;</span><br><span class=\"line\">\t<span class=\"attribute\">color</span>:<span class=\"number\">#fff</span>;</span><br><span class=\"line\">\t<span class=\"attribute\">font-size</span>:<span class=\"number\">1.2em</span>;</span><br><span class=\"line\">\t<span class=\"attribute\">background</span>:<span class=\"number\">#f85032</span>;</span><br><span class=\"line\">\t<span class=\"attribute\">padding</span>:<span class=\"number\">10px</span> <span class=\"number\">0</span>;</span><br><span class=\"line\">\t<span class=\"attribute\">text-align</span>:center;</span><br><span class=\"line\">\t<span class=\"attribute\">cursor</span>: pointer;</span><br><span class=\"line\">\t<span class=\"attribute\">background</span>:<span class=\"built_in\">-webkit-linear-gradient</span>(left, <span class=\"number\">#f85032</span> <span class=\"number\">0%</span>, <span class=\"number\">#e73827</span> <span class=\"number\">100%</span>);</span><br><span class=\"line\">\t<span class=\"attribute\">background</span>: <span class=\"built_in\">-moz-linear-gradient</span>(left, <span class=\"number\">#f85032</span> <span class=\"number\">0%</span>, <span class=\"number\">#e73827</span> <span class=\"number\">100%</span>);</span><br><span class=\"line\">\t<span class=\"attribute\">background</span>: <span class=\"built_in\">-ms-linear-gradient</span>(left, <span class=\"number\">#f85032</span> <span class=\"number\">0%</span>, <span class=\"number\">#e73827</span> <span class=\"number\">100%</span>);</span><br><span class=\"line\">\t<span class=\"attribute\">background</span>: <span class=\"built_in\">-o-linear-gradient</span>(left, <span class=\"number\">#f85032</span> <span class=\"number\">0%</span>, <span class=\"number\">#e73827</span> <span class=\"number\">100%</span>);</span><br><span class=\"line\">\t<span class=\"attribute\">background</span>: <span class=\"built_in\">linear-gradient</span>(to right, <span class=\"number\">#f85032</span> <span class=\"number\">0%</span>, <span class=\"number\">#e73827</span> <span class=\"number\">100%</span>);</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"selector-class\">.sl-btn</span><span class=\"selector-class\">.radius</span>{</span><br><span class=\"line\">\t<span class=\"attribute\">border-radius</span>:<span class=\"number\">5px</span>;</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n<p>详细：<a href=\"https://jsfiddle.net/xiaoniezi/9mdry18y/\">jsfiddle地址</a></p>\n<hr>\n<h2 id=\"上传excel文件类型\"><a href=\"#上传excel文件类型\" class=\"headerlink\" title=\"上传excel文件类型\"></a>上传excel文件类型</h2><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\"><<span class=\"name\">input</span> <span class=\"attr\">type</span>=<span class=\"string\">"file"</span> <span class=\"attr\">name</span>=<span class=\"string\">"file"</span> <span class=\"attr\">accept</span>=<span class=\"string\">".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"</span>></span></span><br></pre></td></tr></table></figure>\n<hr>\n<h2 id=\"选中\"><a href=\"#选中\" class=\"headerlink\" title=\"选中\"></a>选中</h2><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"selector-pseudo\">::selection</span>{</span><br><span class=\"line\">\t<span class=\"attribute\">background-color</span>:<span class=\"number\">#16a085</span>;</span><br><span class=\"line\">\t<span class=\"attribute\">color</span>:<span class=\"number\">#fff</span>;</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n<hr>\n<h2 id=\"重绘scroll\"><a href=\"#重绘scroll\" class=\"headerlink\" title=\"重绘scroll\"></a>重绘scroll</h2><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><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></pre></td><td class=\"code\"><pre><span class=\"line\">\t<span class=\"comment\">/* type 1 */</span></span><br><span class=\"line\"><span class=\"selector-class\">.over-scroll</span>{</span><br><span class=\"line\">\t<span class=\"attribute\">overflow-y</span>: auto;</span><br><span class=\"line\">\t<span class=\"attribute\">overflow-x</span>: auto;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"selector-class\">.over-scroll</span>::-webkit-scrollbar-track{</span><br><span class=\"line\">\t<span class=\"comment\">/*box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);*/</span></span><br><span class=\"line\">\t<span class=\"attribute\">border-radius</span>: <span class=\"number\">3px</span>;</span><br><span class=\"line\">\t<span class=\"attribute\">border</span>:<span class=\"number\">1px</span> solid <span class=\"built_in\">rgba</span>(<span class=\"number\">0</span>,<span class=\"number\">0</span>,<span class=\"number\">0</span>,.<span class=\"number\">3</span>);</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"selector-class\">.over-scroll</span>::-webkit-scrollbar-thumb{</span><br><span class=\"line\">\t<span class=\"attribute\">background-color</span>: <span class=\"built_in\">rgba</span>(<span class=\"number\">50</span>, <span class=\"number\">65</span>, <span class=\"number\">87</span>, <span class=\"number\">0.5</span>);</span><br><span class=\"line\">\t<span class=\"attribute\">outline</span>: <span class=\"number\">1px</span> solid slategrey;</span><br><span class=\"line\">\t<span class=\"attribute\">border-radius</span>: <span class=\"number\">5px</span>;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"selector-class\">.over-scroll</span>::-webkit-scrollbar{</span><br><span class=\"line\">\t<span class=\"attribute\">width</span>: <span class=\"number\">8px</span>;</span><br><span class=\"line\">\t<span class=\"attribute\">height</span>:<span class=\"number\">8px</span>;</span><br><span class=\"line\">}</span><br><span class=\"line\">\t<span class=\"comment\">/* type 2 */</span></span><br><span class=\"line\">::-webkit-scrollbar{</span><br><span class=\"line\"> <span class=\"attribute\">width</span>: <span class=\"number\">10px</span>;</span><br><span class=\"line\"> <span class=\"attribute\">height</span>: <span class=\"number\">10px</span>;</span><br><span class=\"line\"> <span class=\"attribute\">background-color</span>: <span class=\"built_in\">rgba</span>(<span class=\"number\">0</span>,<span class=\"number\">0</span>,<span class=\"number\">0</span>,.<span class=\"number\">1</span>);</span><br><span class=\"line\">}</span><br><span class=\"line\">::-webkit-scrollbar-button{</span><br><span class=\"line\"> <span class=\"attribute\">width</span>: <span class=\"number\">0</span>;</span><br><span class=\"line\"> <span class=\"attribute\">height</span>: <span class=\"number\">0</span>;</span><br><span class=\"line\">}</span><br><span class=\"line\">::-webkit-scrollbar-corner{</span><br><span class=\"line\"> <span class=\"attribute\">display</span>: block;</span><br><span class=\"line\">}</span><br><span class=\"line\">::-webkit-scrollbar-track,</span><br><span class=\"line\">::-webkit-scrollbar-thumb{</span><br><span class=\"line\"> <span class=\"attribute\">border-right</span>: <span class=\"number\">1px</span> solid transparent;</span><br><span class=\"line\"> <span class=\"attribute\">border-left</span>: <span class=\"number\">1px</span> solid transparent;</span><br><span class=\"line\">}</span><br><span class=\"line\">::-webkit-scrollbar-thumb{</span><br><span class=\"line\"> <span class=\"attribute\">border-radius</span>: <span class=\"number\">8px</span>;</span><br><span class=\"line\"> <span class=\"attribute\">background-color</span>: <span class=\"built_in\">rgba</span>(<span class=\"number\">0</span>,<span class=\"number\">0</span>,<span class=\"number\">0</span>,.<span class=\"number\">3</span>);</span><br><span class=\"line\">}</span><br><span class=\"line\">::-webkit-scrollbar-thumb:hover{</span><br><span class=\"line\"> <span class=\"attribute\">background-color</span>: <span class=\"built_in\">rgba</span>(<span class=\"number\">0</span>,<span class=\"number\">0</span>,<span class=\"number\">0</span>,.<span class=\"number\">5</span>);</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n<hr>\n<h2 id=\"重绘radio\"><a href=\"#重绘radio\" class=\"headerlink\" title=\"重绘radio\"></a>重绘radio</h2><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">div</span> <span class=\"attr\">class</span>=<span class=\"string\">"label-radio"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">input</span> <span class=\"attr\">type</span>=<span class=\"string\">"radio"</span> <span class=\"attr\">name</span>=<span class=\"string\">"radio"</span> <span class=\"attr\">id</span>=<span class=\"string\">"rad0"</span> <span class=\"attr\">value</span>=<span class=\"string\">"rad0"</span> <span class=\"attr\">checked</span>=<span class=\"string\">"checked"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">label</span> <span class=\"attr\">for</span>=<span class=\"string\">"rad0"</span>></span>check radio 0<span class=\"tag\"></<span class=\"name\">label</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">div</span> <span class=\"attr\">class</span>=<span class=\"string\">"label-radio"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">input</span> <span class=\"attr\">type</span>=<span class=\"string\">"radio"</span> <span class=\"attr\">name</span>=<span class=\"string\">"radio"</span> <span class=\"attr\">id</span>=<span class=\"string\">"rad2"</span> <span class=\"attr\">value</span>=<span class=\"string\">"rad2"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">label</span> <span class=\"attr\">for</span>=<span class=\"string\">"rad2"</span>></span>check radio 2<span class=\"tag\"></<span class=\"name\">label</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">div</span>></span></span><br></pre></td></tr></table></figure>\n<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><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"selector-class\">.label-radio</span>{</span><br><span class=\"line\"> <span class=\"attribute\">display</span>: inline-block;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"selector-class\">.label-radio</span> + <span class=\"selector-class\">.label-radio</span>{</span><br><span class=\"line\"> <span class=\"attribute\">margin-left</span>: <span class=\"number\">10px</span>;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"selector-class\">.label-radio</span> <span class=\"selector-tag\">input</span>{</span><br><span class=\"line\"> <span class=\"attribute\">position</span>: absolute;</span><br><span class=\"line\"> <span class=\"attribute\">display</span>: none;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"selector-class\">.label-radio</span> <span class=\"selector-tag\">label</span>{</span><br><span class=\"line\"> <span class=\"attribute\">position</span>: relative;</span><br><span class=\"line\"> <span class=\"attribute\">display</span>: block;</span><br><span class=\"line\"> <span class=\"attribute\">padding-left</span>: <span class=\"number\">30px</span>;</span><br><span class=\"line\"> <span class=\"attribute\">vertical-align</span>: middle;</span><br><span class=\"line\"> <span class=\"attribute\">cursor</span>: pointer;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"selector-class\">.label-radio</span> <span class=\"selector-tag\">label</span><span class=\"selector-pseudo\">:before</span>{</span><br><span class=\"line\"> <span class=\"attribute\">content</span>: <span class=\"string\">''</span>;</span><br><span class=\"line\"> <span class=\"attribute\">position</span>: absolute;</span><br><span class=\"line\"> <span class=\"attribute\">top</span>: <span class=\"number\">0</span>;</span><br><span class=\"line\"> <span class=\"attribute\">left</span>: <span class=\"number\">0</span>;</span><br><span class=\"line\"> <span class=\"attribute\">display</span>: inline-block;</span><br><span class=\"line\"> <span class=\"attribute\">width</span>: <span class=\"number\">20px</span>;</span><br><span class=\"line\"> <span class=\"attribute\">height</span>: <span class=\"number\">20px</span>;</span><br><span class=\"line\"> <span class=\"attribute\">border-radius</span>: <span class=\"number\">50%</span>;</span><br><span class=\"line\"> <span class=\"attribute\">border</span>: <span class=\"number\">1px</span> solid <span class=\"number\">#c0c0c0</span>;</span><br><span class=\"line\"> <span class=\"attribute\">transition</span>: all .<span class=\"number\">3s</span>;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"selector-class\">.label-radio</span> <span class=\"selector-tag\">label</span><span class=\"selector-pseudo\">:after</span>{</span><br><span class=\"line\"> <span class=\"attribute\">content</span>: <span class=\"string\">''</span>;</span><br><span class=\"line\"> <span class=\"attribute\">position</span>: absolute;</span><br><span class=\"line\"> <span class=\"attribute\">top</span>: <span class=\"number\">7px</span>;</span><br><span class=\"line\"> <span class=\"attribute\">left</span>: <span class=\"number\">7px</span>;</span><br><span class=\"line\"> <span class=\"attribute\">width</span>: <span class=\"number\">8px</span>;</span><br><span class=\"line\"> <span class=\"attribute\">height</span>: <span class=\"number\">8px</span>;</span><br><span class=\"line\"> <span class=\"attribute\">border-radius</span>: <span class=\"number\">50%</span>;</span><br><span class=\"line\"> <span class=\"attribute\">background-color</span>: <span class=\"number\">#3e97eb</span>;</span><br><span class=\"line\"> <span class=\"comment\">/*display: none;*/</span></span><br><span class=\"line\"> <span class=\"attribute\">opacity</span>: <span class=\"number\">0</span>;</span><br><span class=\"line\"> <span class=\"attribute\">transition</span>: all .<span class=\"number\">3s</span>;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"selector-class\">.label-radio</span> <span class=\"selector-tag\">label</span><span class=\"selector-pseudo\">:hover</span><span class=\"selector-pseudo\">:before</span>{</span><br><span class=\"line\"> <span class=\"attribute\">border-color</span>: <span class=\"number\">#3e97eb</span>;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"selector-class\">.label-radio</span> <span class=\"selector-tag\">input</span><span class=\"selector-pseudo\">:checked</span>+<span class=\"selector-tag\">label</span><span class=\"selector-pseudo\">:after</span>{</span><br><span class=\"line\"> <span class=\"comment\">/*display: block;*/</span></span><br><span class=\"line\"> <span class=\"attribute\">opacity</span>: <span class=\"number\">1</span>;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"selector-class\">.label-radio</span> <span class=\"selector-tag\">input</span><span class=\"selector-pseudo\">:checked</span>+<span class=\"selector-tag\">label</span><span class=\"selector-pseudo\">:before</span>{</span><br><span class=\"line\"> <span class=\"attribute\">border</span>: <span class=\"number\">1px</span> solid <span class=\"number\">#3e97eb</span>;</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n<p>详细：<a href=\"https://jsfiddle.net/xiaoniezi/r6db8b5e/\">jsfiddle地址</a></p>\n<hr>\n<h2 id=\"重绘checkbox\"><a href=\"#重绘checkbox\" class=\"headerlink\" title=\"重绘checkbox\"></a>重绘checkbox</h2><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">label</span> <span class=\"attr\">class</span>=<span class=\"string\">"label-checkbox"</span> <span class=\"attr\">for</span>=<span class=\"string\">"land"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">input</span> <span class=\"attr\">id</span>=<span class=\"string\">"land"</span> <span class=\"attr\">type</span>=<span class=\"string\">"checkbox"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">label</span> <span class=\"attr\">for</span>=<span class=\"string\">"land"</span>></span><span class=\"tag\"></<span class=\"name\">label</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">label</span>></span></span><br></pre></td></tr></table></figure>\n<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><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"selector-class\">.label-checkbox</span>{</span><br><span class=\"line\">\t<span class=\"attribute\">margin-bottom</span>:<span class=\"number\">0</span>;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"selector-class\">.label-checkbox</span> <span class=\"selector-tag\">input</span>{</span><br><span class=\"line\"> <span class=\"attribute\">width</span>:<span class=\"number\">0</span>;</span><br><span class=\"line\"> <span class=\"attribute\">visibility</span>:hidden;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"selector-class\">.label-checkbox</span> <span class=\"selector-tag\">label</span>{</span><br><span class=\"line\"> <span class=\"attribute\">width</span>:<span class=\"number\">15px</span>;</span><br><span class=\"line\"> <span class=\"attribute\">height</span>:<span class=\"number\">15px</span>;</span><br><span class=\"line\"> <span class=\"attribute\">cursor</span>:pointer;</span><br><span class=\"line\"> <span class=\"attribute\">margin-bottom</span>:<span class=\"number\">0</span>;</span><br><span class=\"line\"> <span class=\"attribute\">border</span>:<span class=\"number\">1px</span> solid <span class=\"number\">#a9a9a9</span>;</span><br><span class=\"line\"> <span class=\"attribute\">background-color</span>:transparent;</span><br><span class=\"line\"> <span class=\"attribute\">display</span>:inline-block;</span><br><span class=\"line\"> <span class=\"attribute\">position</span>:relative;</span><br><span class=\"line\"> <span class=\"attribute\">vertical-align</span>:middle;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"selector-class\">.label-checkbox</span> <span class=\"selector-tag\">label</span><span class=\"selector-pseudo\">:after</span>{</span><br><span class=\"line\"> <span class=\"attribute\">content</span>:<span class=\"string\">''</span>;</span><br><span class=\"line\"> <span class=\"attribute\">width</span>:<span class=\"number\">9px</span>;</span><br><span class=\"line\"> <span class=\"attribute\">height</span>:<span class=\"number\">6px</span>;</span><br><span class=\"line\"> <span class=\"attribute\">top</span>:<span class=\"number\">2px</span>;</span><br><span class=\"line\"> <span class=\"attribute\">left</span>:<span class=\"number\">2px</span>;</span><br><span class=\"line\"> <span class=\"attribute\">position</span>:absolute;</span><br><span class=\"line\"> <span class=\"attribute\">border</span>:<span class=\"number\">2px</span> solid <span class=\"number\">#e60012</span>;</span><br><span class=\"line\"> <span class=\"attribute\">border-top</span>:none;</span><br><span class=\"line\"> <span class=\"attribute\">border-right</span>:none;</span><br><span class=\"line\"> -webkit-<span class=\"attribute\">transform</span>:<span class=\"built_in\">rotate</span>(-<span class=\"number\">45deg</span>);</span><br><span class=\"line\"> -moz-<span class=\"attribute\">transform</span>:<span class=\"built_in\">rotate</span>(-<span class=\"number\">45deg</span>);</span><br><span class=\"line\"> <span class=\"attribute\">transform</span>:<span class=\"built_in\">rotate</span>(-<span class=\"number\">45deg</span>);</span><br><span class=\"line\"> <span class=\"attribute\">opacity</span>:<span class=\"number\">0</span>;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"selector-class\">.label-checkbox</span>><span class=\"selector-tag\">input</span><span class=\"selector-pseudo\">:checked</span>+<span class=\"selector-tag\">label</span><span class=\"selector-pseudo\">:after</span>{</span><br><span class=\"line\"> <span class=\"attribute\">opacity</span>:<span class=\"number\">1</span>;</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n<p>详细：<a href=\"https://jsfiddle.net/xiaoniezi/tz377agj/\">jsfiddle地址</a></p>\n<hr>\n<h2 id=\"自定义圆or球\"><a href=\"#自定义圆or球\" class=\"headerlink\" title=\"自定义圆or球\"></a>自定义圆or球</h2><figure class=\"highlight html\"><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\"><span class=\"tag\"><<span class=\"name\">div</span> <span class=\"attr\">class</span>=<span class=\"string\">"sl-circle"</span>></span><span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">div</span> <span class=\"attr\">class</span>=<span class=\"string\">"sl-ball"</span>></span><span class=\"tag\"></<span class=\"name\">div</span>></span></span><br></pre></td></tr></table></figure>\n<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><span class=\"line\">13</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"selector-class\">.sl-circle</span>{</span><br><span class=\"line\">\t<span class=\"attribute\">width</span>:<span class=\"number\">50px</span>;</span><br><span class=\"line\">\t<span class=\"attribute\">height</span>:<span class=\"number\">40px</span>;</span><br><span class=\"line\">\t<span class=\"attribute\">position</span>:relative;</span><br><span class=\"line\">\t<span class=\"attribute\">background</span>:<span class=\"built_in\">radial-gradient</span>(circle at <span class=\"number\">25px</span> <span class=\"number\">20px</span> , <span class=\"number\">#4abc9c</span> <span class=\"number\">15px</span>, <span class=\"built_in\">rgba</span>(<span class=\"number\">0</span>, <span class=\"number\">0</span>, <span class=\"number\">0</span>, <span class=\"number\">0</span>) <span class=\"number\">4px</span>);</span><br><span class=\"line\">\t<span class=\"comment\">/*radial-gradient(circle at (圆心坐标),圆颜色 圆半径,背景色 圆光晕半径)*/</span></span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"selector-class\">.sl-ball</span>{</span><br><span class=\"line\">\t<span class=\"attribute\">width</span>:<span class=\"number\">50px</span>;</span><br><span class=\"line\">\t<span class=\"attribute\">height</span>:<span class=\"number\">50px</span>;</span><br><span class=\"line\">\t<span class=\"attribute\">border-radius</span>:<span class=\"number\">50%</span>;</span><br><span class=\"line\">\t<span class=\"attribute\">background</span>:<span class=\"built_in\">radial-gradient</span>(ellipse at <span class=\"number\">30px</span> <span class=\"number\">10px</span>, <span class=\"number\">#fff</span> <span class=\"number\">0%</span>, red <span class=\"number\">25%</span>,<span class=\"number\">#000</span> <span class=\"number\">90%</span>);</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n<p>详细：<a href=\"https://jsfiddle.net/xiaoniezi/refnkc95/\">jsfiddle地址</a></p>\n<hr>\n<h2 id=\"confirm对话框\"><a href=\"#confirm对话框\" class=\"headerlink\" title=\"confirm对话框\"></a>confirm对话框</h2><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><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\"><!-- first type: --></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">div</span>></span></span><br><span class=\"line\">\t<span class=\"tag\"><<span class=\"name\">div</span> <span class=\"attr\">class</span>=<span class=\"string\">"layer-mask"</span>></span><span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\">\t<span class=\"tag\"><<span class=\"name\">div</span> <span class=\"attr\">class</span>=<span class=\"string\">"layer-dialog"</span>></span></span><br><span class=\"line\">\t\t<span class=\"tag\"><<span class=\"name\">div</span> <span class=\"attr\">class</span>=<span class=\"string\">"layer-dialog-content"</span>></span>提示内容<span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\">\t\t<span class=\"tag\"><<span class=\"name\">div</span> <span class=\"attr\">class</span>=<span class=\"string\">"layer-dialog-btn"</span>></span></span><br><span class=\"line\">\t\t\t<span class=\"tag\"><<span class=\"name\">a</span>></span>确定<span class=\"tag\"></<span class=\"name\">a</span>></span></span><br><span class=\"line\">\t\t<span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\">\t<span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"comment\"><!-- second type: --></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">div</span>></span></span><br><span class=\"line\">\t<span class=\"tag\"><<span class=\"name\">div</span> <span class=\"attr\">class</span>=<span class=\"string\">"layer-mask"</span>></span><span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\">\t<span class=\"tag\"><<span class=\"name\">div</span> <span class=\"attr\">class</span>=<span class=\"string\">"layer-dialog"</span>></span></span><br><span class=\"line\">\t\t<span class=\"tag\"><<span class=\"name\">div</span> <span class=\"attr\">class</span>=<span class=\"string\">"layer-dialog-content"</span>></span>提示内容<span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\">\t\t<span class=\"tag\"><<span class=\"name\">div</span> <span class=\"attr\">class</span>=<span class=\"string\">"layer-dialog-btn is-cancel"</span>></span></span><br><span class=\"line\">\t\t\t<span class=\"tag\"><<span class=\"name\">a</span> <span class=\"attr\">class</span>=<span class=\"string\">"layer-cancel"</span>></span>取消<span class=\"tag\"></<span class=\"name\">a</span>></span></span><br><span class=\"line\">\t\t\t<span class=\"tag\"><<span class=\"name\">a</span>></span>确定<span class=\"tag\"></<span class=\"name\">a</span>></span></span><br><span class=\"line\">\t\t<span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\">\t<span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">div</span>></span></span><br></pre></td></tr></table></figure>\n<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><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"selector-class\">.layer-mask</span>{</span><br><span class=\"line\">\t<span class=\"attribute\">position</span>:fixed;</span><br><span class=\"line\">\t<span class=\"attribute\">z-index</span>:<span class=\"number\">20</span>;</span><br><span class=\"line\">\t<span class=\"attribute\">top</span>:<span class=\"number\">0</span>;</span><br><span class=\"line\">\t<span class=\"attribute\">right</span>:<span class=\"number\">0</span>;</span><br><span class=\"line\">\t<span class=\"attribute\">left</span>:<span class=\"number\">0</span>;</span><br><span class=\"line\">\t<span class=\"attribute\">bottom</span>:<span class=\"number\">0</span>;</span><br><span class=\"line\">\t<span class=\"attribute\">background</span>:<span class=\"built_in\">rgba</span>(<span class=\"number\">0</span>,<span class=\"number\">0</span>,<span class=\"number\">0</span>,<span class=\"number\">0.6</span>);</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"selector-class\">.layer-dialog</span>{</span><br><span class=\"line\">\t<span class=\"attribute\">position</span>:fixed;</span><br><span class=\"line\">\t<span class=\"attribute\">z-index</span>:<span class=\"number\">30</span>;</span><br><span class=\"line\">\t<span class=\"attribute\">width</span>:<span class=\"number\">80%</span>;</span><br><span class=\"line\">\t<span class=\"attribute\">max-width</span>:<span class=\"number\">300px</span>;</span><br><span class=\"line\">\t<span class=\"attribute\">top</span>:<span class=\"number\">50%</span>;</span><br><span class=\"line\">\t<span class=\"attribute\">left</span>:<span class=\"number\">50%</span>;</span><br><span class=\"line\">\t-webkit-<span class=\"attribute\">transform</span>:<span class=\"built_in\">translate</span>(-<span class=\"number\">50%</span>,-<span class=\"number\">50%</span>);</span><br><span class=\"line\">\t<span class=\"attribute\">transform</span>:<span class=\"built_in\">translate</span>(-<span class=\"number\">50%</span>,-<span class=\"number\">50%</span>);</span><br><span class=\"line\">\t<span class=\"attribute\">background</span>:<span class=\"number\">#fff</span>;</span><br><span class=\"line\">\t<span class=\"attribute\">text-align</span>:center;</span><br><span class=\"line\">\t<span class=\"attribute\">border-radius</span>:<span class=\"number\">3px</span>;</span><br><span class=\"line\">\t<span class=\"attribute\">overflow</span>:hidden;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"selector-class\">.layer-dialog-content</span>{</span><br><span class=\"line\">\t<span class=\"attribute\">padding</span>:<span class=\"number\">2em</span> <span class=\"number\">20px</span> <span class=\"number\">1.5em</span>;</span><br><span class=\"line\">\t<span class=\"attribute\">color</span>:<span class=\"number\">#353535</span>;</span><br><span class=\"line\">\t<span class=\"attribute\">min-height</span>:<span class=\"number\">40px</span>;</span><br><span class=\"line\">\t<span class=\"attribute\">font-size</span>:<span class=\"number\">15px</span>;</span><br><span class=\"line\">\t<span class=\"attribute\">line-height</span>:<span class=\"number\">1.3</span>;</span><br><span class=\"line\">\t<span class=\"attribute\">word-wrap</span>:break-word;</span><br><span class=\"line\">\t<span class=\"attribute\">word-break</span>:break-all;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"selector-class\">.layer-dialog-btn</span>{</span><br><span class=\"line\">\t<span class=\"attribute\">position</span>:relative;</span><br><span class=\"line\">\t<span class=\"attribute\">line-height</span>:<span class=\"number\">48px</span>;</span><br><span class=\"line\">\t<span class=\"attribute\">border-top</span>: <span class=\"number\">1px</span> solid <span class=\"number\">#ccc</span>;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"comment\">/* first type */</span></span><br><span class=\"line\"><span class=\"selector-class\">.layer-dialog-btn</span>><span class=\"selector-tag\">a</span>{</span><br><span class=\"line\">\t<span class=\"attribute\">display</span>:block;</span><br><span class=\"line\">\t<span class=\"attribute\">text-decoration</span>:none;</span><br><span class=\"line\">\t<span class=\"attribute\">color</span>:<span class=\"number\">#0BB20C</span>;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"comment\">/* second type */</span></span><br><span class=\"line\"><span class=\"selector-class\">.layer-dialog-btn</span><span class=\"selector-class\">.is-cancel</span>><span class=\"selector-tag\">a</span>{</span><br><span class=\"line\">\t<span class=\"attribute\">display</span>:inline-block;</span><br><span class=\"line\">\t<span class=\"attribute\">text-decoration</span>:none;</span><br><span class=\"line\">\t<span class=\"attribute\">width</span>:<span class=\"number\">49%</span>;</span><br><span class=\"line\">\t<span class=\"attribute\">color</span>:<span class=\"number\">#0BB20C</span>;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"selector-class\">.layer-dialog-btn</span><span class=\"selector-class\">.is-cancel</span> <span class=\"selector-class\">.layer-cancel</span>{</span><br><span class=\"line\">\t<span class=\"attribute\">color</span>:<span class=\"number\">#353535</span>;</span><br><span class=\"line\">\t<span class=\"attribute\">border-right</span>:<span class=\"number\">1px</span> solid <span class=\"number\">#e2e2e2</span>;</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n<p>详细：<a href=\"https://jsfiddle.net/xiaoniezi/6bu94wrq/\">jsfiddle地址</a></p>\n<hr>\n<h2 id=\"图片模糊效果\"><a href=\"#图片模糊效果\" class=\"headerlink\" title=\"图片模糊效果\"></a>图片模糊效果</h2><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">div</span> <span class=\"attr\">class</span>=<span class=\"string\">"bg-filter"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">div</span>></span><span class=\"tag\"><<span class=\"name\">div</span>></span><span class=\"tag\"></<span class=\"name\">div</span>></span><span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">div</span>></span></span><br></pre></td></tr></table></figure>\n<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><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"selector-class\">.bg-filter</span>{</span><br><span class=\"line\"> <span class=\"attribute\">width</span>:<span class=\"number\">300px</span>;</span><br><span class=\"line\"> <span class=\"attribute\">height</span>:<span class=\"number\">300px</span>;</span><br><span class=\"line\"> <span class=\"attribute\">background-image</span>:<span class=\"built_in\">url</span>(<span class=\"string\">http://up.qqya.com/allimg/201710-t/17-101804_131806.jpg</span>);</span><br><span class=\"line\"> <span class=\"attribute\">background-size</span>:<span class=\"number\">100%</span> <span class=\"number\">100%</span>;</span><br><span class=\"line\"> <span class=\"attribute\">background-repeat</span>:no-repeat;</span><br><span class=\"line\"> <span class=\"attribute\">position</span>:relative;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"selector-class\">.bg-filter</span>><span class=\"selector-tag\">div</span>{</span><br><span class=\"line\"> <span class=\"attribute\">position</span>:absolute;</span><br><span class=\"line\"> <span class=\"attribute\">width</span>:<span class=\"number\">100px</span>;</span><br><span class=\"line\"> <span class=\"attribute\">height</span>:<span class=\"number\">100px</span>;</span><br><span class=\"line\"> <span class=\"attribute\">left</span>:<span class=\"number\">200px</span>;</span><br><span class=\"line\"> <span class=\"attribute\">top</span>:<span class=\"number\">200px</span>;</span><br><span class=\"line\"> <span class=\"attribute\">overflow</span>:hidden;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"selector-class\">.bg-filter</span>><span class=\"selector-tag\">div</span>><span class=\"selector-tag\">div</span>{</span><br><span class=\"line\"> <span class=\"attribute\">position</span>:absolute;</span><br><span class=\"line\"> <span class=\"attribute\">top</span>:-<span class=\"number\">10px</span>;</span><br><span class=\"line\"> <span class=\"attribute\">left</span>:-<span class=\"number\">10px</span>;</span><br><span class=\"line\"> <span class=\"attribute\">right</span>:-<span class=\"number\">10px</span>;</span><br><span class=\"line\"> <span class=\"attribute\">bottom</span>:-<span class=\"number\">10px</span>;</span><br><span class=\"line\"> <span class=\"attribute\">background-image</span>:<span class=\"built_in\">url</span>(<span class=\"string\">http://up.qqya.com/allimg/201710-t/17-101804_131806.jpg</span>);</span><br><span class=\"line\"> <span class=\"comment\">/* background-size:300px 300px; */</span></span><br><span class=\"line\"> <span class=\"attribute\">background-size</span>:<span class=\"number\">400px</span> <span class=\"number\">400px</span>;</span><br><span class=\"line\"> <span class=\"attribute\">background-position</span>:-<span class=\"number\">190px</span> -<span class=\"number\">190px</span>;<span class=\"comment\">/*x:200px+(-10px)*/</span></span><br><span class=\"line\"> -webkit-<span class=\"attribute\">filter</span>:<span class=\"built_in\">blur</span>(<span class=\"number\">3px</span>);</span><br><span class=\"line\"> <span class=\"attribute\">filter</span>:<span class=\"built_in\">blur</span>(<span class=\"number\">3px</span>);</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n<p>详细：<a href=\"https://jsfiddle.net/xiaoniezi/jfopshxx/\">jsfiddle地址</a></p>\n<hr>\n<h2 id=\"时间线\"><a href=\"#时间线\" class=\"headerlink\" title=\"时间线\"></a>时间线</h2><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">div</span> <span class=\"attr\">class</span>=<span class=\"string\">"time-line"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">span</span> <span class=\"attr\">class</span>=<span class=\"string\">"tline-circle"</span>></span><span class=\"tag\"></<span class=\"name\">span</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">div</span> <span class=\"attr\">class</span>=<span class=\"string\">"tline-font"</span>></span>提交申请<span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">p</span> <span class=\"attr\">class</span>=<span class=\"string\">"tline-time"</span>></span>2017-01-22 13:30<span class=\"tag\"></<span class=\"name\">p</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">div</span>></span></span><br></pre></td></tr></table></figure>\n<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><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"selector-class\">.time-line</span>{</span><br><span class=\"line\">\t<span class=\"attribute\">position</span>: relative;</span><br><span class=\"line\">\t<span class=\"attribute\">padding-bottom</span>:<span class=\"number\">20px</span>;</span><br><span class=\"line\">\t<span class=\"attribute\">color</span>:<span class=\"number\">#8e8e8e</span>;</span><br><span class=\"line\">\t<span class=\"attribute\">font-size</span>: <span class=\"number\">1.2em</span>;</span><br><span class=\"line\">\t<span class=\"attribute\">width</span>:<span class=\"number\">1px</span>;</span><br><span class=\"line\">\t<span class=\"attribute\">background</span>:<span class=\"number\">#ccc</span>;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"selector-class\">.time-line</span><span class=\"selector-pseudo\">:last-child</span>{</span><br><span class=\"line\">\t<span class=\"attribute\">border-left</span>:none;</span><br><span class=\"line\">\t<span class=\"attribute\">width</span>:<span class=\"number\">0px</span>;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"selector-class\">.time-line</span> <span class=\"selector-class\">.tline-circle</span>{</span><br><span class=\"line\">\t<span class=\"attribute\">position</span>:absolute;</span><br><span class=\"line\">\t<span class=\"attribute\">display</span>:inline-block;</span><br><span class=\"line\">\t<span class=\"attribute\">width</span>:<span class=\"number\">8px</span>;</span><br><span class=\"line\">\t<span class=\"attribute\">height</span>:<span class=\"number\">8px</span>;</span><br><span class=\"line\">\t<span class=\"attribute\">border-radius</span>:<span class=\"number\">50%</span>;</span><br><span class=\"line\">\t<span class=\"attribute\">left</span>:<span class=\"number\">0</span>;</span><br><span class=\"line\">\t<span class=\"attribute\">top</span>:<span class=\"number\">0</span>;</span><br><span class=\"line\">\t-webkit-<span class=\"attribute\">transform</span>:<span class=\"built_in\">translateX</span>(-<span class=\"number\">50%</span>);</span><br><span class=\"line\">\t -o-<span class=\"attribute\">transform</span>:<span class=\"built_in\">translateX</span>(-<span class=\"number\">50%</span>);</span><br><span class=\"line\">\t <span class=\"attribute\">transform</span>:<span class=\"built_in\">translateX</span>(-<span class=\"number\">50%</span>);</span><br><span class=\"line\">\t<span class=\"attribute\">background-color</span>:<span class=\"number\">#ccc</span>;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"selector-class\">.time-line</span> <span class=\"selector-class\">.tline-font</span>,</span><br><span class=\"line\"><span class=\"selector-class\">.time-line</span> <span class=\"selector-class\">.tline-time</span>{</span><br><span class=\"line\">\t<span class=\"attribute\">position</span>:relative;</span><br><span class=\"line\">\t<span class=\"attribute\">top</span>:-<span class=\"number\">8px</span>;</span><br><span class=\"line\">\t<span class=\"attribute\">padding-left</span>:<span class=\"number\">15px</span>;</span><br><span class=\"line\">\t<span class=\"attribute\">min-width</span>: <span class=\"number\">150px</span>;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"selector-class\">.time-line</span> <span class=\"selector-class\">.tline-time</span>{</span><br><span class=\"line\">\t<span class=\"attribute\">color</span>:<span class=\"number\">#a9a9a9</span>;</span><br><span class=\"line\">\t<span class=\"attribute\">margin-bottom</span>: <span class=\"number\">0px</span>;</span><br><span class=\"line\">\t<span class=\"attribute\">padding-top</span>:<span class=\"number\">5px</span>;</span><br><span class=\"line\">\t<span class=\"attribute\">font-size</span>:<span class=\"number\">0.8em</span>;</span><br><span class=\"line\">\t<span class=\"attribute\">top</span>:-<span class=\"number\">15px</span>;</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n<p>详细：<a href=\"https://jsfiddle.net/xiaoniezi/xuLc33f9/\">jsfiddle地址</a></p>\n<hr>\n<h2 id=\"input自动补全背景色\"><a href=\"#input自动补全背景色\" class=\"headerlink\" title=\"input自动补全背景色\"></a>input自动补全背景色</h2><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"selector-tag\">input</span>:-webkit-autofill,</span><br><span class=\"line\">input:-webkit-autofill:hover, </span><br><span class=\"line\">input:-webkit-autofill:focus{</span><br><span class=\"line\">\t<span class=\"attribute\">border</span>: <span class=\"number\">1px</span> solid green;</span><br><span class=\"line\">\t-webkit-text-fill-<span class=\"attribute\">color</span>: green;</span><br><span class=\"line\">\t-webkit-<span class=\"attribute\">box-shadow</span>: <span class=\"number\">0</span> <span class=\"number\">0</span> <span class=\"number\">0px</span> <span class=\"number\">1000px</span> <span class=\"number\">#fff</span> inset;</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n<hr>\n<h2 id=\"placeholder-color\"><a href=\"#placeholder-color\" class=\"headerlink\" title=\"placeholder color\"></a>placeholder color</h2><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"selector-tag\">input</span>::-webkit-input-placeholder,</span><br><span class=\"line\">input:-moz-placeholder,</span><br><span class=\"line\">input::-moz-placeholder,</span><br><span class=\"line\">input:-ms-input-placeholder,</span><br><span class=\"line\">input::-ms-input-placeholder{</span><br><span class=\"line\">\t<span class=\"attribute\">color</span>:<span class=\"number\">#c7c7c7</span>;</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n<hr>\n<h2 id=\"禁止字体放大缩小-iOS\"><a href=\"#禁止字体放大缩小-iOS\" class=\"headerlink\" title=\"禁止字体放大缩小-iOS\"></a>禁止字体放大缩小-iOS</h2><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"selector-class\">.font</span>{</span><br><span class=\"line\">\t-webkit-text-size-adjust:none;</span><br><span class=\"line\">\t-ms-text-size-adjust:none;</span><br><span class=\"line\">\t-moz-text-size-adjust:none;</span><br><span class=\"line\">\ttext-size-adjust:none;</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n<hr>\n<h2 id=\"走马灯-IE\"><a href=\"#走马灯-IE\" class=\"headerlink\" title=\"走马灯-IE\"></a>走马灯-IE</h2><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">marquee</span> <span class=\"attr\">behavior</span>=<span class=\"string\">"alternate"</span> <span class=\"attr\">direction</span>=<span class=\"string\">"left"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">div</span> <span class=\"attr\">style</span>=<span class=\"string\">"color:#e60012"</span>></span>滚啊滚啊滚滚啊滚啊滚<span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">marquee</span>></span></span><br></pre></td></tr></table></figure>\n","categories":["CSS"],"tags":["css"]},{"title":"NEW YEAR ? NEW PLAN !","url":"https://xiaoniezi.github.io/2018-02-23/NEW-YEAR-NEW-PLAN/","content":"<p>稍瞬即逝的2017，踟蹰不前的2017，平平无奇的2017……<br>想到很多形容词，无一不是惨淡的词汇，这才惶然。<br>2017，大概真的荒废许多。<br><span id=\"more\"></span></p>\n<h2 id=\"上年的计划\"><a href=\"#上年的计划\" class=\"headerlink\" title=\"上年的计划\"></a>上年的计划</h2><ol>\n<li>增长厨艺：20%</li>\n<li>扩展前端贴吧：0%</li>\n<li>搭建博客：50%</li>\n<li>跳槽：100%</li>\n</ol>\n<hr>\n<p>作为一个厨房小白，在忍受了一年外卖生活后终于决定改善下自己的厨艺。然而发现做菜也是要考虑环境和心情∑(っ °Д °;)っ……年底换了个离市场很近的住处后，做饭的概率明显增长。接着不断买自己喜欢的餐具，即使口味不尽如人意，至少赏心悦目。</p>\n<p>满打满算，真正做饭的时间还是寥寥无几，无法想象自己又忍受了一年的外卖……有一段时间处于不想叫外卖并且不想做饭的倦怠期，用零食将就。到了周末，与两三好友相聚，大鱼大肉吃了两顿，晚上回来开始胃痛。那真的是个磨人的小妖精，什么姿势都不对，忍的时间越长越难受。打了吊针之后就怕了，持续了一段老人生活（早睡早起，三餐不缺勤，多走走，少量运动……）当然，后来又故态复萌，只是少了一餐胃都会不舒服，不敢太放肆。大概是真的老了。</p>\n<p>2017最失落的还是当初跟几个小伙伴约好要扩展我们的前端贴吧没有实现。</p>\n<p>——因为我忘了(┳＿┳)… </p>\n<p>建了那个贴吧后没有好好打理，中间由于换工作荒废了一段，之后完全忘了有这茬……等到经人提起，想重新整理的时候，却失去了当时的激情，再而衰，三而竭。</p>\n<p>幸得博客带来略微的安慰。一开始想想自己的惰性，不是个经常写博文的人，还是直接在第三方网站发文章。但大概是技术猿都想要搭建一个属于自己的博客，于是后来只用<code>hexo</code> + <code>github page</code>搭了个静态的。然而一直没有一鼓作气改成自己的风格，又无法忍受有瑕疵之处，索性也不常用了。</p>\n<p>2017最大的变化就是换了一份工作，跟着换了个舒适的居住环境，于是变得更加懒惰了！！如今回想起来，仿佛做了一场平波无澜的梦。这完全有据可寻。我有个爱买书的习惯（是买不是看），喜欢看书堆在一起，喜欢贴身带着一本，偶尔翻翻。一年下来至少看完三四本才算是正常，然而直到年底我一本书都没看完 _(:з」∠)__ Unbelievable！发现这个问题的晚上，我想了很久。前端技术上没有精进，生活比以前好了一点，精神生活带来的空虚更切实。</p>\n<p>说到工作，划水多了，加班少了，晚上敲代码少了，新知识get更少了。明知道有很多可以学，可以更深入，然而一碰到就是啃不下去。这种状态已经持续不短时间，同期的小伙伴说这是瓶颈问题（？？？）</p>\n<p>旅游是每年必备，趁年轻要多走走河川。还是元旦才去了桂林，感觉略坑吧，没有get到好玩的地方。一直对古时候的文化比较有兴趣，打算下年要去文化浓郁的地方走走。</p>\n<h2 id=\"今年的目标\"><a href=\"#今年的目标\" class=\"headerlink\" title=\"今年的目标\"></a>今年的目标</h2><ol>\n<li>每周阅读至少8小时</li>\n<li>工作日七点起床</li>\n<li>Python入门</li>\n<li>继续厨艺</li>\n<li>每天仰卧起坐，两周外出一次</li>\n<li>去一场技术交流会</li>\n<li>省钱，准备出国旅游</li>\n</ol>\n<hr>\n<p>上年阅读给我的打击太大，决定2018一定要补回来才行。</p>\n<p>一直想学一门后端语言，既然在前端遇到瓶颈，那么不如试试后端入手，或许突然就融会贯通了（思路清奇……）接着是参加一场技术交流会，认识一下大神们，自我激励一番。</p>\n<p>当然，还是要继续学做菜，争取早日脱离外卖的苦海——要是能每天早起带饭去吃就最好了。发现自己身体变差的时候还是挺慌的，所以要尽早将运动提上日程了。</p>\n<p>2018最重要的目标就是省出一笔旅游的费用，用于今年或者明年的境外游。暂时也不会考虑太远的国家。</p>\n<p>至于换工作，或许会考虑。毕竟如今的公司虽然不用加班，但手痒无代码可敲无BUG可解真的不好，也想找个环境活跃一点的，起码有个能甩锅的（？？？）</p>\n<p>anyway，最最最重要的，家人身体健康~2018大吉大利~</p>\n","categories":["Personal"],"tags":["2018","plan"]},{"title":"VUE element-ui 写个复用Table组件","url":"https://xiaoniezi.github.io/2017-11-17/vue-ElementUI-table-extend/","content":"<p>饿了么的table组件功能很强大，对于项目中的各种表格基本够用，但是……个人对于它<strong>以列为单位</strong>的操作不习惯 =。=所以改成了另一种方式（我不会告诉你其实本质没变）。<br><span id=\"more\"></span></p>\n<p><strong>项目中表格较多，所以复用性最重要</strong></p>\n<h2 id=\"步骤一\"><a href=\"#步骤一\" class=\"headerlink\" title=\"步骤一\"></a>步骤一</h2><p>先来个基本的表格展示</p>\n<p>官例的tableData</p>\n<figure class=\"highlight js\"><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">tableData</span>: [{</span><br><span class=\"line\"> <span class=\"attr\">date</span>: <span class=\"string\">'2016-05-02'</span>,</span><br><span class=\"line\"> <span class=\"attr\">name</span>: <span class=\"string\">'王小虎'</span>,</span><br><span class=\"line\"> <span class=\"attr\">address</span>: <span class=\"string\">'上海市普陀区金沙江路 1518 弄'</span></span><br><span class=\"line\">}, {</span><br><span class=\"line\"> <span class=\"attr\">date</span>: <span class=\"string\">'2016-05-04'</span>,</span><br><span class=\"line\"> <span class=\"attr\">name</span>: <span class=\"string\">'王小虎'</span>,</span><br><span class=\"line\"> <span class=\"attr\">address</span>: <span class=\"string\">'上海市普陀区金沙江路 1517 弄'</span></span><br><span class=\"line\">}, {</span><br><span class=\"line\"> <span class=\"attr\">date</span>: <span class=\"string\">'2016-05-01'</span>,</span><br><span class=\"line\"> <span class=\"attr\">name</span>: <span class=\"string\">'王小虎'</span>,</span><br><span class=\"line\"> <span class=\"attr\">address</span>: <span class=\"string\">'上海市普陀区金沙江路 1519 弄'</span></span><br><span class=\"line\">}, {</span><br><span class=\"line\"> <span class=\"attr\">date</span>: <span class=\"string\">'2016-05-03'</span>,</span><br><span class=\"line\"> <span class=\"attr\">name</span>: <span class=\"string\">'王小虎'</span>,</span><br><span class=\"line\"> <span class=\"attr\">address</span>: <span class=\"string\">'上海市普陀区金沙江路 1516 弄'</span></span><br><span class=\"line\">}];</span><br></pre></td></tr></table></figure>\n<p>table.vue</p>\n<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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">template</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">el-table</span> <span class=\"attr\">:data</span>=<span class=\"string\">"tableData"</span> <span class=\"attr\">border</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">el-table-column</span> <span class=\"attr\">prop</span>=<span class=\"string\">"date"</span> <span class=\"attr\">label</span>=<span class=\"string\">"日期"</span>></span><span class=\"tag\"></<span class=\"name\">el-table-column</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">el-table-column</span> <span class=\"attr\">prop</span>=<span class=\"string\">"name"</span> <span class=\"attr\">label</span>=<span class=\"string\">"姓名"</span>></span><span class=\"tag\"></<span class=\"name\">el-table-column</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">el-table-column</span> <span class=\"attr\">prop</span>=<span class=\"string\">"address"</span> <span class=\"attr\">label</span>=<span class=\"string\">"地址"</span>></span><span class=\"tag\"></<span class=\"name\">el-table-column</span>></span></span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">el-table</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">template</span>></span></span><br></pre></td></tr></table></figure>\n<h2 id=\"步骤二\"><a href=\"#步骤二\" class=\"headerlink\" title=\"步骤二\"></a>步骤二</h2><p>简化一下表格：</p>\n<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><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\"><!-- table.vue --></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">template</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">el-table</span> <span class=\"attr\">:data</span>=<span class=\"string\">"tableData"</span> <span class=\"attr\">border</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">el-table-column</span> <span class=\"attr\">v-for</span>=<span class=\"string\">"(item,key) in tableKey"</span> </span></span><br><span class=\"line\"><span class=\"tag\"> <span class=\"attr\">:key</span>=<span class=\"string\">"key"</span></span></span><br><span class=\"line\"><span class=\"tag\"> <span class=\"attr\">:prop</span>=<span class=\"string\">"item.value"</span></span></span><br><span class=\"line\"><span class=\"tag\"> <span class=\"attr\">:label</span>=<span class=\"string\">"item.name"</span>></span><span class=\"tag\"></<span class=\"name\">el-table-column</span>></span></span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">el-table</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">template</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">script</span>></span><span class=\"language-javascript\"></span></span><br><span class=\"line\"><span class=\"language-javascript\"><span class=\"keyword\">export</span> <span class=\"keyword\">default</span>{</span></span><br><span class=\"line\"><span class=\"language-javascript\"> <span class=\"attr\">name</span>: <span class=\"string\">'table'</span>,</span></span><br><span class=\"line\"><span class=\"language-javascript\"> <span class=\"title function_\">data</span>(<span class=\"params\"></span>){</span></span><br><span class=\"line\"><span class=\"language-javascript\"> <span class=\"keyword\">return</span>{</span></span><br><span class=\"line\"><span class=\"language-javascript\"> <span class=\"attr\">tableData</span>:[...],</span></span><br><span class=\"line\"><span class=\"language-javascript\"> <span class=\"attr\">tableKey</span>: [{</span></span><br><span class=\"line\"><span class=\"language-javascript\"> <span class=\"attr\">name</span>: <span class=\"string\">'日期'</span>,</span></span><br><span class=\"line\"><span class=\"language-javascript\"> <span class=\"attr\">value</span>: <span class=\"string\">'date'</span></span></span><br><span class=\"line\"><span class=\"language-javascript\"> },{</span></span><br><span class=\"line\"><span class=\"language-javascript\"> <span class=\"attr\">name</span>: <span class=\"string\">'姓名'</span>,</span></span><br><span class=\"line\"><span class=\"language-javascript\"> <span class=\"attr\">value</span>: <span class=\"string\">'name'</span></span></span><br><span class=\"line\"><span class=\"language-javascript\"> },{</span></span><br><span class=\"line\"><span class=\"language-javascript\"> <span class=\"attr\">name</span>: <span class=\"string\">'地址'</span>,</span></span><br><span class=\"line\"><span class=\"language-javascript\"> <span class=\"attr\">value</span>: <span class=\"string\">'address'</span></span></span><br><span class=\"line\"><span class=\"language-javascript\"> }]</span></span><br><span class=\"line\"><span class=\"language-javascript\"> }</span></span><br><span class=\"line\"><span class=\"language-javascript\"> }</span></span><br><span class=\"line\"><span class=\"language-javascript\">}</span></span><br><span class=\"line\"><span class=\"language-javascript\"></span><span class=\"tag\"></<span class=\"name\">script</span>></span></span><br></pre></td></tr></table></figure>\n<h2 id=\"步骤三\"><a href=\"#步骤三\" class=\"headerlink\" title=\"步骤三\"></a>步骤三</h2><p>复用<code>table.vue</code>就是————给它数据的同时告诉它我的字段名呗</p>\n<p>新建一个父组件<code>sl_table.vue</code></p>\n<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><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\"><!-- sl_table.vue --></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">template</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">sl-table</span> <span class=\"attr\">:tableData</span>=<span class=\"string\">"tableData"</span> <span class=\"attr\">:tableKey</span>=<span class=\"string\">"tableKey"</span>></span><span class=\"tag\"></<span class=\"name\">sl-table</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">template</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">script</span>></span><span class=\"language-javascript\"></span></span><br><span class=\"line\"><span class=\"language-javascript\"><span class=\"keyword\">import</span> <span class=\"title class_\">Table</span> <span class=\"keyword\">from</span> <span class=\"string\">'@/components/table'</span></span></span><br><span class=\"line\"><span class=\"language-javascript\"><span class=\"keyword\">export</span> <span class=\"keyword\">default</span>{</span></span><br><span class=\"line\"><span class=\"language-javascript\"> <span class=\"attr\">name</span>: <span class=\"string\">'sl-table'</span>,</span></span><br><span class=\"line\"><span class=\"language-javascript\"> <span class=\"title function_\">data</span>(<span class=\"params\"></span>){</span></span><br><span class=\"line\"><span class=\"language-javascript\"> <span class=\"keyword\">return</span> {</span></span><br><span class=\"line\"><span class=\"language-javascript\"> <span class=\"attr\">tableData</span>: [...]</span></span><br><span class=\"line\"><span class=\"language-javascript\"> <span class=\"attr\">tableKey</span>: [{</span></span><br><span class=\"line\"><span class=\"language-javascript\"> <span class=\"attr\">name</span>: <span class=\"string\">'日期'</span>,</span></span><br><span class=\"line\"><span class=\"language-javascript\"> <span class=\"attr\">value</span>: <span class=\"string\">'date'</span></span></span><br><span class=\"line\"><span class=\"language-javascript\"> },{</span></span><br><span class=\"line\"><span class=\"language-javascript\"> <span class=\"attr\">name</span>: <span class=\"string\">'姓名'</span>,</span></span><br><span class=\"line\"><span class=\"language-javascript\"> <span class=\"attr\">value</span>: <span class=\"string\">'name'</span></span></span><br><span class=\"line\"><span class=\"language-javascript\"> },{</span></span><br><span class=\"line\"><span class=\"language-javascript\"> <span class=\"attr\">name</span>: <span class=\"string\">'地址'</span>,</span></span><br><span class=\"line\"><span class=\"language-javascript\"> <span class=\"attr\">value</span>: <span class=\"string\">'address'</span></span></span><br><span class=\"line\"><span class=\"language-javascript\"> }]</span></span><br><span class=\"line\"><span class=\"language-javascript\"> }</span></span><br><span class=\"line\"><span class=\"language-javascript\"> },</span></span><br><span class=\"line\"><span class=\"language-javascript\"> <span class=\"attr\">components</span>: {</span></span><br><span class=\"line\"><span class=\"language-javascript\"> <span class=\"string\">'sl-table'</span>: <span class=\"title class_\">Table</span></span></span><br><span class=\"line\"><span class=\"language-javascript\"> }</span></span><br><span class=\"line\"><span class=\"language-javascript\">}</span></span><br><span class=\"line\"><span class=\"language-javascript\"></span><span class=\"tag\"></<span class=\"name\">script</span>></span></span><br></pre></td></tr></table></figure>\n<p><code>table.vue</code>就更简单了</p>\n<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><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\"><!-- table.vue --></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">template</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">el-table</span> <span class=\"attr\">:data</span>=<span class=\"string\">"tableData"</span> <span class=\"attr\">border</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">el-table-column</span> <span class=\"attr\">v-for</span>=<span class=\"string\">"(item,key) in tableKey"</span> </span></span><br><span class=\"line\"><span class=\"tag\"> <span class=\"attr\">:key</span>=<span class=\"string\">"key"</span></span></span><br><span class=\"line\"><span class=\"tag\"> <span class=\"attr\">:prop</span>=<span class=\"string\">"item.value"</span></span></span><br><span class=\"line\"><span class=\"tag\"> <span class=\"attr\">:label</span>=<span class=\"string\">"item.name"</span>></span><span class=\"tag\"></<span class=\"name\">el-table-column</span>></span></span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">el-table</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">template</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">script</span>></span><span class=\"language-javascript\"></span></span><br><span class=\"line\"><span class=\"language-javascript\"><span class=\"keyword\">export</span> <span class=\"keyword\">default</span>{</span></span><br><span class=\"line\"><span class=\"language-javascript\"> <span class=\"attr\">name</span>: <span class=\"string\">'table'</span>,</span></span><br><span class=\"line\"><span class=\"language-javascript\"> <span class=\"title function_\">data</span>(<span class=\"params\"></span>){</span></span><br><span class=\"line\"><span class=\"language-javascript\"> <span class=\"keyword\">return</span>{</span></span><br><span class=\"line\"><span class=\"language-javascript\"> </span></span><br><span class=\"line\"><span class=\"language-javascript\"> }</span></span><br><span class=\"line\"><span class=\"language-javascript\"> },</span></span><br><span class=\"line\"><span class=\"language-javascript\"> <span class=\"attr\">props</span>:[<span class=\"string\">'tableData'</span>,<span class=\"string\">'tableKey'</span>],</span></span><br><span class=\"line\"><span class=\"language-javascript\">}</span></span><br><span class=\"line\"><span class=\"language-javascript\"></span><span class=\"tag\"></<span class=\"name\">script</span>></span></span><br></pre></td></tr></table></figure>\n<h2 id=\"步骤四\"><a href=\"#步骤四\" class=\"headerlink\" title=\"步骤四\"></a>步骤四</h2><p>可以根据需求修改<code>table</code>的形式</p>\n<ol>\n<li><p>列宽度<br>这个较为简单，可以直接加个属性 </p>\n<figure class=\"highlight js\"><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\"><span class=\"comment\">//sl_table.vue</span></span><br><span class=\"line\"><span class=\"title function_\">data</span>(<span class=\"params\"></span>){</span><br><span class=\"line\"> <span class=\"keyword\">return</span> {</span><br><span class=\"line\"> <span class=\"attr\">tableData</span>: [...]</span><br><span class=\"line\"> <span class=\"attr\">tableKey</span>: [{</span><br><span class=\"line\"> <span class=\"attr\">name</span>: <span class=\"string\">'日期'</span>,</span><br><span class=\"line\"> <span class=\"attr\">value</span>: <span class=\"string\">'date'</span>,</span><br><span class=\"line\"> <span class=\"attr\">width</span>: <span class=\"number\">80</span></span><br><span class=\"line\"> },{</span><br><span class=\"line\"> <span class=\"attr\">name</span>: <span class=\"string\">'姓名'</span>,</span><br><span class=\"line\"> <span class=\"attr\">value</span>: <span class=\"string\">'name'</span>,</span><br><span class=\"line\"> <span class=\"attr\">width</span>: <span class=\"number\">80</span></span><br><span class=\"line\"> },{</span><br><span class=\"line\"> <span class=\"attr\">name</span>: <span class=\"string\">'地址'</span>,</span><br><span class=\"line\"> <span class=\"attr\">value</span>: <span class=\"string\">'address'</span></span><br><span class=\"line\"> }]</span><br><span class=\"line\"> }</span><br><span class=\"line\">};</span><br></pre></td></tr></table></figure>\n<p>table.vue</p>\n<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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\"><!-- table.vue --></span></span><br><span class=\"line\">...</span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">el-table-column</span> <span class=\"attr\">v-for</span>=<span class=\"string\">"(item,key) in tableKey"</span> </span></span><br><span class=\"line\"><span class=\"tag\"><span class=\"attr\">:key</span>=<span class=\"string\">"key"</span></span></span><br><span class=\"line\"><span class=\"tag\"><span class=\"attr\">:prop</span>=<span class=\"string\">"item.value"</span></span></span><br><span class=\"line\"><span class=\"tag\"><span class=\"attr\">:label</span>=<span class=\"string\">"item.name"</span></span></span><br><span class=\"line\"><span class=\"tag\"><span class=\"attr\">:width</span>=<span class=\"string\">"item.width"</span>></span><span class=\"tag\"></<span class=\"name\">el-table-column</span>></span></span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n</li>\n<li><p>自定义模板列<br>如果我们需要告诉组件哪个是自定义的列，所以添加一个属性<code>operate</code><br>table.vue</p>\n<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><span class=\"line\">13</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">el-table-column</span> <span class=\"attr\">v-for</span>=<span class=\"string\">"(item,key) in tableKey"</span> </span></span><br><span class=\"line\"><span class=\"tag\"><span class=\"attr\">v-if</span>=<span class=\"string\">"!item.operate"</span></span></span><br><span class=\"line\"><span class=\"tag\"><span class=\"attr\">:key</span>=<span class=\"string\">"key"</span></span></span><br><span class=\"line\"><span class=\"tag\"><span class=\"attr\">:prop</span>=<span class=\"string\">"item.value"</span></span></span><br><span class=\"line\"><span class=\"tag\"><span class=\"attr\">:label</span>=<span class=\"string\">"item.name"</span></span></span><br><span class=\"line\"><span class=\"tag\"><span class=\"attr\">:width</span>=<span class=\"string\">"item.width"</span>></span><span class=\"tag\"></<span class=\"name\">el-table-column</span>></span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"comment\"><!-- 自定义 --></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">el-table-column</span> <span class=\"attr\">v-else</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">template</span> <span class=\"attr\">scope</span>=<span class=\"string\">"scope"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">slot</span> <span class=\"attr\">:name</span>=<span class=\"string\">"item.value"</span> <span class=\"attr\">:</span>$<span class=\"attr\">index</span>=<span class=\"string\">"scope.$index"</span> <span class=\"attr\">:row</span>=<span class=\"string\">"scope.row"</span>></span><span class=\"tag\"></<span class=\"name\">slot</span>></span></span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">template</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">el-table-column</span>></span></span><br></pre></td></tr></table></figure>\n<p>sl_table.vue</p>\n<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><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\"><!-- sl_table.vue --></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">sl-table</span> <span class=\"attr\">:tableData</span>=<span class=\"string\">"tableData"</span> <span class=\"attr\">:tableKey</span>=<span class=\"string\">"tableKey"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">template</span> <span class=\"attr\">slot</span>=<span class=\"string\">"date"</span> <span class=\"attr\">scope</span>=<span class=\"string\">"scope"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">span</span>></span>{{ scope.row.date | DateFilter }}<span class=\"tag\"></<span class=\"name\">span</span>></span></span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">template</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">sl-table</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">script</span>></span><span class=\"language-javascript\"></span></span><br><span class=\"line\"><span class=\"language-javascript\"><span class=\"keyword\">export</span> <span class=\"keyword\">default</span>{</span></span><br><span class=\"line\"><span class=\"language-javascript\"> <span class=\"title function_\">data</span>(<span class=\"params\"></span>){</span></span><br><span class=\"line\"><span class=\"language-javascript\"> <span class=\"keyword\">return</span> {</span></span><br><span class=\"line\"><span class=\"language-javascript\"> <span class=\"attr\">tableData</span>: [...]</span></span><br><span class=\"line\"><span class=\"language-javascript\"> <span class=\"attr\">tableKey</span>: [{</span></span><br><span class=\"line\"><span class=\"language-javascript\"> <span class=\"attr\">name</span>: <span class=\"string\">'日期'</span>,</span></span><br><span class=\"line\"><span class=\"language-javascript\"> <span class=\"attr\">value</span>: <span class=\"string\">'date'</span>,</span></span><br><span class=\"line\"><span class=\"language-javascript\"> <span class=\"attr\">operate</span>: <span class=\"literal\">true</span></span></span><br><span class=\"line\"><span class=\"language-javascript\"> },{</span></span><br><span class=\"line\"><span class=\"language-javascript\"> <span class=\"attr\">name</span>: <span class=\"string\">'姓名'</span>,</span></span><br><span class=\"line\"><span class=\"language-javascript\"> <span class=\"attr\">value</span>: <span class=\"string\">'name'</span>,</span></span><br><span class=\"line\"><span class=\"language-javascript\"> <span class=\"attr\">operate</span>: <span class=\"literal\">false</span></span></span><br><span class=\"line\"><span class=\"language-javascript\"> },{</span></span><br><span class=\"line\"><span class=\"language-javascript\"> <span class=\"attr\">name</span>: <span class=\"string\">'地址'</span>,</span></span><br><span class=\"line\"><span class=\"language-javascript\"> <span class=\"attr\">value</span>: <span class=\"string\">'address'</span>,</span></span><br><span class=\"line\"><span class=\"language-javascript\"> <span class=\"attr\">operate</span>: <span class=\"literal\">false</span></span></span><br><span class=\"line\"><span class=\"language-javascript\"> }]</span></span><br><span class=\"line\"><span class=\"language-javascript\"> }</span></span><br><span class=\"line\"><span class=\"language-javascript\"> },</span></span><br><span class=\"line\"><span class=\"language-javascript\"> <span class=\"attr\">filters</span>: {</span></span><br><span class=\"line\"><span class=\"language-javascript\"> <span class=\"title class_\">DateFilter</span>(){...}</span></span><br><span class=\"line\"><span class=\"language-javascript\"> }</span></span><br><span class=\"line\"><span class=\"language-javascript\">}</span></span><br><span class=\"line\"><span class=\"language-javascript\"></span><span class=\"tag\"></<span class=\"name\">script</span>></span></span><br></pre></td></tr></table></figure>\n</li>\n</ol>\n<ol start=\"3\">\n<li>表格展开行<br>类似宽度，只要<code>sl_table.vue</code>传入一个<code>isExpand</code>的属性。这里加个每次只能展开一行的效果： <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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\"><!-- sl_table.vue --></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">sl-table</span> <span class=\"attr\">:tableData</span>=<span class=\"string\">"tableData"</span> <span class=\"attr\">:tableKey</span>=<span class=\"string\">"tableKey"</span> <span class=\"attr\">:isExpand</span>=<span class=\"string\">"true"</span> <span class=\"attr\">:isExpandOnly</span>=<span class=\"string\">"true"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">template</span> <span class=\"attr\">slot</span>=<span class=\"string\">"expand"</span> <span class=\"attr\">scope</span>=<span class=\"string\">"scope"</span>></span></span><br><span class=\"line\"> {{...expand something}}</span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">template</span>></span></span><br><span class=\"line\"> ...</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">sl-table</span>></span></span><br></pre></td></tr></table></figure>\ntable.vue<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><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\"><!-- table.vue --></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">el-table</span> <span class=\"attr\">:data</span>=<span class=\"string\">"tableData"</span> <span class=\"attr\">border</span> @<span class=\"attr\">expand</span>=<span class=\"string\">"handleExpand"</span> <span class=\"attr\">ref</span>=<span class=\"string\">"raw_table"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">el-table-column</span> <span class=\"attr\">v-if</span>=<span class=\"string\">"isExpand"</span> <span class=\"attr\">type</span>=<span class=\"string\">"expand"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">template</span> <span class=\"attr\">scope</span>=<span class=\"string\">"scope"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">slot</span> <span class=\"attr\">name</span>=<span class=\"string\">"expand"</span> <span class=\"attr\">:</span>$<span class=\"attr\">index</span>=<span class=\"string\">"scope.$index"</span> <span class=\"attr\">:row</span>=<span class=\"string\">"scope.row"</span>></span><span class=\"tag\"></<span class=\"name\">slot</span>></span></span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">template</span>></span></span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">el-table-column</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">el-table</span>></span></span><br><span class=\"line\">...</span><br><span class=\"line\">props: ['tableData','tableKey','isExpand','isExpandOnly'],</span><br><span class=\"line\">methods: {</span><br><span class=\"line\"> handleExpand(row,expanded){</span><br><span class=\"line\"> if(this.isExpand && this.isExpandOnly){</span><br><span class=\"line\"> this.$refs.raw_table.store.states.expandRows = expanded ? [row] : [] </span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n</li>\n</ol>\n<p>其他的（排序、多选）操作也是类似添加。。。多不赘述。</p>\n","categories":["Vue"],"tags":["vue","javascript","elementUI"]},{"title":"Vue使用element-ui所遇BUG与需求集结（一）","url":"https://xiaoniezi.github.io/2017-11-07/vue-ElementUI-extend-01/","content":"<p>最近常使用<code>element-ui</code>的组件，遇到问题比较多，想做个清单。也包含一些自己总结的使用vue小方法。<img src=\"/images/face_01.jpg\" alt=\"图片描述\"><br><span id=\"more\"></span></p>\n<blockquote>\n<p>敲黑板：重点！！以下数据都是在vue(v2.3)+element-ui(v1.4)+webpack(v2.6)+axios(v0.16)+vuex(v2.3)环境下测试。<br>如有改变会说明。</p>\n</blockquote>\n<h2 id=\"1-回车自动提交表单\"><a href=\"#1-回车自动提交表单\" class=\"headerlink\" title=\"1.回车自动提交表单\"></a>1.回车自动提交表单</h2><blockquote>\n<p>详情：做列表搜索的时候当表单只有单个输入框时，回车会自动提交表单</p>\n</blockquote>\n<p>issue在此：<a href=\"https://github.com/ElemeFE/element/issues/3625\">点我点我</a></p>\n<p><strong>解决：</strong>（阻止表单提交）</p>\n<figure class=\"highlight html\"><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\"><span class=\"tag\"><<span class=\"name\">el-form</span> <span class=\"attr\">:inline</span>=<span class=\"string\">"true"</span> <span class=\"attr\">:model</span>=<span class=\"string\">"params"</span> @<span class=\"attr\">submit.native.prevent</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">el-form</span>></span></span><br></pre></td></tr></table></figure>\n<h2 id=\"2-监听input回车\"><a href=\"#2-监听input回车\" class=\"headerlink\" title=\"2.监听input回车\"></a>2.监听input回车</h2><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\"><<span class=\"name\">el-input</span> <span class=\"attr\">v-on:keyup.enter.native</span>=<span class=\"string\">"login"</span>></span><span class=\"tag\"></<span class=\"name\">el-input</span>></span></span><br></pre></td></tr></table></figure>\n<h2 id=\"3-tree组件增删改\"><a href=\"#3-tree组件增删改\" class=\"headerlink\" title=\"3.tree组件增删改\"></a>3.tree组件增删改</h2><blockquote>\n<p>树形组件最难搞，尤其遇上各种蛋疼的需求=。= 这次要有增删改的功能，但是发现官网给的例子并不是直接在数据上操作，所以自己修改了一个。</p>\n</blockquote>\n<p>详细地址：<a href=\"/2017-10-16/vue-ElementUI-tree-expand/\">点我就知道啦</a></p>\n<h2 id=\"4-table组件expand每次只展开一项\"><a href=\"#4-table组件expand每次只展开一项\" class=\"headerlink\" title=\"4.table组件expand每次只展开一项\"></a>4.table组件expand每次只展开一项</h2><blockquote>\n<p>文档没有具体属性，但是在issue找的方法都是结合<code>row-key</code>和<code>expand-row-keys</code>来实现这个功能</p>\n</blockquote>\n<p>issue地址：<a href=\"https://github.com/ElemeFE/element/issues/3747\">灵机一现！</a></p>\n<p><strong>解决：</strong>但是我在Stack Overflow找了个更简单的方法，要直接操作table树๑乛◡乛๑，只需要用到expand的方法</p>\n<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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">el-table</span> @<span class=\"attr\">expand</span>=<span class=\"string\">"handleExpandRow"</span> <span class=\"attr\">ref</span>=<span class=\"string\">"row_table"</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">el-table</span>></span></span><br><span class=\"line\">//method:</span><br><span class=\"line\">handleExpandRow(row,expanded){</span><br><span class=\"line\"> this.$refs.row_table.store.states.expandRows = expanded ? [row] : [];</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n<p>附上Stack Overflow原地址：<a href=\"https://stackoverflow.com/questions/44590918/how-can-i-get-an-element-to-appear-directly-when-i-expand-a-row-using-vue\">大神在此</a><br>————</p>\n<p>以上是v1.4版本的，由于v2.0版本修改了返回参数，仿照上例修改了新的：</p>\n<figure class=\"highlight js\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"title function_\">handleExpandRow</span>(<span class=\"params\">row,expandRows</span>){</span><br><span class=\"line\"> <span class=\"variable language_\">this</span>.<span class=\"property\">$refs</span>.<span class=\"property\">raw_table</span>.<span class=\"property\">store</span>.<span class=\"property\">states</span>.<span class=\"property\">expandRows</span> = expandRows.<span class=\"property\">length</span> !== <span class=\"number\">0</span> ? [row] : [];</span><br><span class=\"line\">};</span><br></pre></td></tr></table></figure>\n<h2 id=\"5-复用table组件\"><a href=\"#5-复用table组件\" class=\"headerlink\" title=\"5.复用table组件\"></a>5.复用table组件</h2><p>项目中表格太多，做了两个之后还是决定写了个复用放组件，而因为需求不断增加修改，所以不断简化，下面只是上个简单版的：<br>详细地址：<a href=\"/2017-11-17/vue-ElementUI-table-extend/\">都说点我咯</a></p>\n<p>在掘金上看到一篇还不错、也是关于table组件的文章：<a href=\"https://juejin.im/post/5a100d09f265da4324800807\">掘金地址</a></p>\n<h2 id=\"6-upload组件自定义filelist\"><a href=\"#6-upload组件自定义filelist\" class=\"headerlink\" title=\"6.upload组件自定义filelist\"></a>6.upload组件自定义filelist</h2><blockquote>\n<p>上传文件用的还是挺多的，就是列表不好控制，尤其是要通过ajax删除等操作，所以还是自己写了一个。也是因为upload上传时有个动态进程用户体验不错，也重新捣鼓了以下。</p>\n</blockquote>\n<p>还是另开了一篇文章，不过基本没难度：<a href=\"https://segmentfault.com/a/1190000012234747\">看这儿这儿</a></p>\n<h2 id=\"7-数组表单验证\"><a href=\"#7-数组表单验证\" class=\"headerlink\" title=\"7.数组表单验证\"></a>7.数组表单验证</h2><blockquote>\n<p>用<code>v-for</code>循环列表的时候，想给部分值都做个验证，但是<code>el-form</code>只接收<code>object</code>。</p>\n</blockquote>\n<p>其实这个功能在官网是已经给出了（v2.0:<a href=\"http://element-cn.eleme.io/2.0/#/zh-CN/component/form#dong-tai-zeng-jian-biao-dan-xiang\">原来是你</a>），不过研究了一阵才用了个蠢方法。</p>\n<p>假如有个列表：</p>\n<figure class=\"highlight js\"><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">list</span>: [{</span><br><span class=\"line\"> <span class=\"attr\">date</span>: <span class=\"string\">'2016-05-02'</span>,</span><br><span class=\"line\"> <span class=\"attr\">name</span>: <span class=\"string\">'王小虎'</span>,</span><br><span class=\"line\"> <span class=\"attr\">address</span>: <span class=\"string\">'上海市普陀区金沙江路 1518 弄'</span></span><br><span class=\"line\">}, {</span><br><span class=\"line\"> <span class=\"attr\">date</span>: <span class=\"string\">'2016-05-04'</span>,</span><br><span class=\"line\"> <span class=\"attr\">name</span>: <span class=\"string\">'王小虎'</span>,</span><br><span class=\"line\"> <span class=\"attr\">address</span>: <span class=\"string\">'上海市普陀区金沙江路 1517 弄'</span></span><br><span class=\"line\">}, {</span><br><span class=\"line\"> <span class=\"attr\">date</span>: <span class=\"string\">'2016-05-01'</span>,</span><br><span class=\"line\"> <span class=\"attr\">name</span>: <span class=\"string\">'王小虎'</span>,</span><br><span class=\"line\"> <span class=\"attr\">address</span>: <span class=\"string\">'上海市普陀区金沙江路 1519 弄'</span></span><br><span class=\"line\">}, {</span><br><span class=\"line\"> <span class=\"attr\">date</span>: <span class=\"string\">'2016-05-03'</span>,</span><br><span class=\"line\"> <span class=\"attr\">name</span>: <span class=\"string\">'王小虎'</span>,</span><br><span class=\"line\"> <span class=\"attr\">address</span>: <span class=\"string\">'上海市普陀区金沙江路 1516 弄'</span></span><br><span class=\"line\">}];</span><br></pre></td></tr></table></figure>\n<p>在新增或者修改<code>list</code>之后都要验证<code>name</code>和<code>adress</code>必填</p>\n<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><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">el-form</span> <span class=\"attr\">ref</span>=<span class=\"string\">"listOption"</span> <span class=\"attr\">:rules</span>=<span class=\"string\">"rules"</span> <span class=\"attr\">:model</span>=<span class=\"string\">"setForm"</span> <span class=\"attr\">size</span>=<span class=\"string\">"small"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">ul</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">li</span> <span class=\"attr\">v-for</span>=<span class=\"string\">"(item,i) in setForm.list"</span> <span class=\"attr\">:key</span>=<span class=\"string\">"i"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">el-form-item</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">el-input</span> <span class=\"attr\">v-model.number</span>=<span class=\"string\">"item.date"</span>></span><span class=\"tag\"></<span class=\"name\">el-input</span>></span></span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">el-form-item</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">el-form-item</span> <span class=\"attr\">:prop</span>=<span class=\"string\">"'list.' + i + '.name'"</span> <span class=\"attr\">:rules</span>=<span class=\"string\">"rules.name"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">el-input</span> <span class=\"attr\">v-model.number</span>=<span class=\"string\">"item.name"</span>></span><span class=\"tag\"></<span class=\"name\">el-input</span>></span></span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">el-form-item</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">el-form-item</span> <span class=\"attr\">:prop</span>=<span class=\"string\">"'list.' + i + '.address'"</span> <span class=\"attr\">:rules</span>=<span class=\"string\">"rules.address"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">el-input</span> <span class=\"attr\">v-model.number</span>=<span class=\"string\">"item.address"</span>></span><span class=\"tag\"></<span class=\"name\">el-input</span>></span></span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">el-form-item</span>></span></span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">li</span>></span></span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">ul</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">el-form</span>></span></span><br><span class=\"line\"><span class=\"comment\"><!-- prop的关键字要相对应，别少了那一点 --></span></span><br></pre></td></tr></table></figure>\n<p>要啥给啥：</p>\n<figure class=\"highlight js\"><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"title function_\">data</span>(<span class=\"params\"></span>){</span><br><span class=\"line\"> <span class=\"keyword\">return</span> {</span><br><span class=\"line\"> <span class=\"attr\">list</span>: [{...}],</span><br><span class=\"line\"> <span class=\"attr\">rules</span>: {</span><br><span class=\"line\"> <span class=\"attr\">name</span>: [{</span><br><span class=\"line\"> <span class=\"attr\">required</span>: <span class=\"literal\">true</span>,</span><br><span class=\"line\"> <span class=\"attr\">trigger</span>: <span class=\"string\">'请输入姓名'</span></span><br><span class=\"line\"> }],</span><br><span class=\"line\"> <span class=\"attr\">address</span>: [{</span><br><span class=\"line\"> <span class=\"attr\">required</span>: <span class=\"literal\">true</span>,</span><br><span class=\"line\"> <span class=\"attr\">trigger</span>: <span class=\"string\">'请输入地址'</span></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\"><span class=\"attr\">computed</span>: {</span><br><span class=\"line\"> <span class=\"title function_\">setForm</span>(<span class=\"params\"></span>){</span><br><span class=\"line\"> <span class=\"keyword\">return</span> {</span><br><span class=\"line\"> <span class=\"attr\">name</span>: <span class=\"string\">'mylist'</span>,</span><br><span class=\"line\"> <span class=\"attr\">list</span>: <span class=\"variable language_\">this</span>.<span class=\"property\">list</span></span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\">};</span><br></pre></td></tr></table></figure>\n<hr>\n<blockquote>\n<p><strong>从Tab 8开始升级使用element-ui（v2.0.9）</strong></p>\n</blockquote>\n<hr>\n<h2 id=\"8-转换emoji表情\"><a href=\"#8-转换emoji表情\" class=\"headerlink\" title=\"8.转换emoji表情\"></a>8.转换emoji表情</h2><blockquote>\n<p>例如用户的昵称使用了emoji表情，后台返回的数据<code>:rose:</code>，要转换成一朵玫瑰花。</p>\n</blockquote>\n<p>使用<a href=\"https://github.com/emojione/emojify.js\">emojify插件</a></p>\n<figure class=\"highlight js\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">npm install emojify.<span class=\"property\">js</span> --save</span><br></pre></td></tr></table></figure>\n<p>vue main.js</p>\n<figure class=\"highlight js\"><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=\"keyword\">import</span> <span class=\"title class_\">Emojify</span> <span class=\"keyword\">from</span> <span class=\"string\">'emojify.js'</span></span><br><span class=\"line\"><span class=\"comment\">// import 'emojify.js/dist/css/basic/emojify.min.css'//单个图</span></span><br><span class=\"line\"><span class=\"keyword\">import</span> <span class=\"string\">'emojify.js/dist/css/sprites/emojify.min.css'</span><span class=\"comment\">//雪碧图</span></span><br><span class=\"line\"><span class=\"title class_\">Emojify</span>.<span class=\"title function_\">setConfig</span>({</span><br><span class=\"line\"> <span class=\"attr\">mode</span>: <span class=\"string\">'sprite'</span>,</span><br><span class=\"line\">});<span class=\"comment\">//设置emojify为雪碧图模式，更多的设置可参考插件</span></span><br></pre></td></tr></table></figure>\n<p>正式引用：</p>\n<figure class=\"highlight js\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"title class_\">Vue</span>.<span class=\"property\"><span class=\"keyword\">prototype</span></span>.<span class=\"property\">$emoji</span> = <span class=\"title class_\">Emojify</span>;</span><br></pre></td></tr></table></figure>\n<p>由于输出的是<code>img</code>/<code>span</code>标签，所以用<code>v-html</code>，但是不支持<code>filter</code>，只能写个<code>method</code>了</p>\n<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\"><<span class=\"name\">span</span> <span class=\"attr\">v-html</span>=<span class=\"string\">"Emojify(scope.row.name)"</span>></span><span class=\"tag\"></<span class=\"name\">span</span>></span></span><br></pre></td></tr></table></figure>\n<figure class=\"highlight js\"><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=\"title class_\">Emojify</span>(code){</span><br><span class=\"line\"> <span class=\"keyword\">let</span> that = <span class=\"variable language_\">this</span>;</span><br><span class=\"line\"> <span class=\"keyword\">return</span> code.<span class=\"title function_\">replace</span>(<span class=\"regexp\">/\\:\\w+\\:/g</span>,<span class=\"keyword\">function</span>(<span class=\"params\">str</span>){</span><br><span class=\"line\"> <span class=\"keyword\">return</span> that.<span class=\"property\">$emoji</span>.<span class=\"title function_\">replace</span>(str)</span><br><span class=\"line\"> })</span><br><span class=\"line\">};</span><br></pre></td></tr></table></figure>\n<h2 id=\"9-百度富文本Ueditor\"><a href=\"#9-百度富文本Ueditor\" class=\"headerlink\" title=\"9.百度富文本Ueditor\"></a>9.百度富文本Ueditor</h2><blockquote>\n<p>做这个功能的时候遇到不少问题，尤其是图片上传。不过此处都简略，参考了不少前人的文档，大同小异。</p>\n</blockquote>\n<p>到 <a href=\"http://ueditor.baidu.com/website/\">官网</a> 下载对应服务器的压缩包，在<code>index.html</code>引入js文件（静态资源放在<code>static</code>文件夹）</p>\n<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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">script</span> <span class=\"attr\">src</span>=<span class=\"string\">"/static/Ueditor/ueditor.config.js"</span>></span><span class=\"tag\"></<span class=\"name\">script</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">script</span> <span class=\"attr\">src</span>=<span class=\"string\">"/static/Ueditor/ueditor.all.min.js"</span>></span><span class=\"tag\"></<span class=\"name\">script</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">script</span> <span class=\"attr\">src</span>=<span class=\"string\">"/static/Ueditor/lang/zh-cn/zh-cn.js"</span>></span><span class=\"tag\"></<span class=\"name\">script</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">script</span> <span class=\"attr\">src</span>=<span class=\"string\">"/static/Ueditor/ueditor.parse.min.js"</span>></span><span class=\"tag\"></<span class=\"name\">script</span>></span></span><br></pre></td></tr></table></figure>\n<p>写个组件</p>\n<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><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 class=\"tag\"><<span class=\"name\">template</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">div</span> <span class=\"attr\">class</span>=<span class=\"string\">"ueditor"</span> <span class=\"attr\">ref</span>=<span class=\"string\">"rowUEditor"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">script</span> <span class=\"attr\">id</span>=<span class=\"string\">"editor"</span> <span class=\"attr\">type</span>=<span class=\"string\">"text/plain"</span>></span><span class=\"tag\"></<span class=\"name\">script</span>></span></span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">template</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">script</span>></span><span class=\"language-javascript\"></span></span><br><span class=\"line\"><span class=\"language-javascript\"><span class=\"keyword\">export</span> <span class=\"keyword\">default</span> {</span></span><br><span class=\"line\"><span class=\"language-javascript\"> <span class=\"attr\">name</span>: <span class=\"string\">'ueditor'</span>,</span></span><br><span class=\"line\"><span class=\"language-javascript\"> <span class=\"title function_\">data</span>(<span class=\"params\"></span>) {</span></span><br><span class=\"line\"><span class=\"language-javascript\"> <span class=\"keyword\">return</span> {</span></span><br><span class=\"line\"><span class=\"language-javascript\"> <span class=\"attr\">editor</span>: <span class=\"literal\">null</span></span></span><br><span class=\"line\"><span class=\"language-javascript\"> }</span></span><br><span class=\"line\"><span class=\"language-javascript\"> },</span></span><br><span class=\"line\"><span class=\"language-javascript\"> <span class=\"attr\">props</span>: {</span></span><br><span class=\"line\"><span class=\"language-javascript\"> <span class=\"attr\">defaultMsg</span>: {<span class=\"comment\">//文本内容</span></span></span><br><span class=\"line\"><span class=\"language-javascript\"> <span class=\"attr\">type</span>: <span class=\"title class_\">String</span></span></span><br><span class=\"line\"><span class=\"language-javascript\"> },</span></span><br><span class=\"line\"><span class=\"language-javascript\"> <span class=\"attr\">config</span>: {<span class=\"comment\">//单独设置</span></span></span><br><span class=\"line\"><span class=\"language-javascript\"> <span class=\"attr\">type</span>: <span class=\"title class_\">Object</span>,</span></span><br><span class=\"line\"><span class=\"language-javascript\"> }</span></span><br><span class=\"line\"><span class=\"language-javascript\"> },</span></span><br><span class=\"line\"><span class=\"language-javascript\"> <span class=\"attr\">computed</span>: {</span></span><br><span class=\"line\"><span class=\"language-javascript\"> <span class=\"title class_\">DefaultConfig</span>() {<span class=\"comment\">//默认设置</span></span></span><br><span class=\"line\"><span class=\"language-javascript\"> <span class=\"keyword\">let</span> obj = <span class=\"variable language_\">this</span>.<span class=\"property\">config</span></span></span><br><span class=\"line\"><span class=\"language-javascript\"> <span class=\"keyword\">let</span> serverUrl = <span class=\"variable language_\">this</span>.<span class=\"property\">$store</span>.<span class=\"property\">state</span>.<span class=\"property\">baseURL</span> + <span class=\"string\">'/sys/ueditor/exec.act'</span><span class=\"comment\">//服务器地址</span></span></span><br><span class=\"line\"><span class=\"language-javascript\"> <span class=\"keyword\">return</span> {</span></span><br><span class=\"line\"><span class=\"language-javascript\"> serverUrl,</span></span><br><span class=\"line\"><span class=\"language-javascript\"> ...obj</span></span><br><span class=\"line\"><span class=\"language-javascript\"> }</span></span><br><span class=\"line\"><span class=\"language-javascript\"> }</span></span><br><span class=\"line\"><span class=\"language-javascript\"> },</span></span><br><span class=\"line\"><span class=\"language-javascript\"> <span class=\"title function_\">mounted</span>(<span class=\"params\"></span>) {</span></span><br><span class=\"line\"><span class=\"language-javascript\"> <span class=\"variable language_\">this</span>.<span class=\"title function_\">initUEditor</span>()</span></span><br><span class=\"line\"><span class=\"language-javascript\"> },</span></span><br><span class=\"line\"><span class=\"language-javascript\"> <span class=\"attr\">methods</span>: {</span></span><br><span class=\"line\"><span class=\"language-javascript\"> <span class=\"title function_\">initUEditor</span>(<span class=\"params\"></span>) {</span></span><br><span class=\"line\"><span class=\"language-javascript\"> <span class=\"keyword\">const</span> that = <span class=\"variable language_\">this</span>;</span></span><br><span class=\"line\"><span class=\"language-javascript\"> <span class=\"variable language_\">this</span>.<span class=\"property\">editor</span> = <span class=\"variable constant_\">UE</span>.<span class=\"title function_\">getEditor</span>(<span class=\"string\">'editor'</span>, <span class=\"variable language_\">this</span>.<span class=\"property\">DefaultConfig</span>); <span class=\"comment\">// 初始化UE</span></span></span><br><span class=\"line\"><span class=\"language-javascript\"> <span class=\"variable language_\">this</span>.<span class=\"property\">editor</span>.<span class=\"title function_\">addListener</span>(<span class=\"string\">"ready"</span>, <span class=\"keyword\">function</span>(<span class=\"params\"></span>) {</span></span><br><span class=\"line\"><span class=\"language-javascript\"> <span class=\"keyword\">if</span> (that.<span class=\"property\">defaultMsg</span> == <span class=\"literal\">null</span>) {</span></span><br><span class=\"line\"><span class=\"language-javascript\"> that.<span class=\"property\">editor</span>.<span class=\"title function_\">setContent</span>(<span class=\"string\">''</span>);</span></span><br><span class=\"line\"><span class=\"language-javascript\"> } <span class=\"keyword\">else</span> {</span></span><br><span class=\"line\"><span class=\"language-javascript\"> that.<span class=\"property\">editor</span>.<span class=\"title function_\">setContent</span>(that.<span class=\"property\">defaultMsg</span>);</span></span><br><span class=\"line\"><span class=\"language-javascript\"> }</span></span><br><span class=\"line\"><span class=\"language-javascript\"> });</span></span><br><span class=\"line\"><span class=\"language-javascript\"> <span class=\"variable language_\">this</span>.<span class=\"property\">editor</span>.<span class=\"title function_\">addListener</span>(<span class=\"string\">"contentChange"</span>, <span class=\"keyword\">function</span>(<span class=\"params\"></span>) { <span class=\"comment\">//监听内容变化</span></span></span><br><span class=\"line\"><span class=\"language-javascript\"> that.<span class=\"title function_\">getUEContent</span>();</span></span><br><span class=\"line\"><span class=\"language-javascript\"> })</span></span><br><span class=\"line\"><span class=\"language-javascript\"> },</span></span><br><span class=\"line\"><span class=\"language-javascript\"> <span class=\"title function_\">getUEContent</span>(<span class=\"params\"></span>) { <span class=\"comment\">// 获取内容方法</span></span></span><br><span class=\"line\"><span class=\"language-javascript\"> <span class=\"keyword\">let</span> content = <span class=\"variable language_\">this</span>.<span class=\"property\">editor</span>.<span class=\"title function_\">getContent</span>();</span></span><br><span class=\"line\"><span class=\"language-javascript\"> <span class=\"variable language_\">this</span>.$emit(<span class=\"string\">"getUEContent"</span>, content)</span></span><br><span class=\"line\"><span class=\"language-javascript\"> }</span></span><br><span class=\"line\"><span class=\"language-javascript\"> },</span></span><br><span class=\"line\"><span class=\"language-javascript\"> <span class=\"title function_\">destroyed</span>(<span class=\"params\"></span>) {<span class=\"comment\">//退出后销毁</span></span></span><br><span class=\"line\"><span class=\"language-javascript\"> <span class=\"variable language_\">this</span>.<span class=\"property\">editor</span>.<span class=\"title function_\">destroy</span>();</span></span><br><span class=\"line\"><span class=\"language-javascript\"> }</span></span><br><span class=\"line\"><span class=\"language-javascript\">}</span></span><br><span class=\"line\"><span class=\"language-javascript\"></span><span class=\"tag\"></<span class=\"name\">script</span>></span></span><br></pre></td></tr></table></figure>\n<p>然后就可以单独拎出来用了，只需要提供设置和默认文本就好</p>\n<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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">sl-editor</span> <span class=\"attr\">ref</span>=<span class=\"string\">"ueditor"</span> </span></span><br><span class=\"line\"><span class=\"tag\"><span class=\"attr\">v-if</span>=<span class=\"string\">"editor.config.isShow"</span> </span></span><br><span class=\"line\"><span class=\"tag\"><span class=\"attr\">:defaultMsg</span>=<span class=\"string\">"content"</span> </span></span><br><span class=\"line\"><span class=\"tag\"><span class=\"attr\">:config</span>=<span class=\"string\">"editor.config"</span></span></span><br><span class=\"line\"><span class=\"tag\">@<span class=\"attr\">getUEContent</span>=<span class=\"string\">"getUEContent"</span>></span><span class=\"tag\"></<span class=\"name\">sl-editor</span>></span></span><br></pre></td></tr></table></figure>\n<p>data:</p>\n<figure class=\"highlight js\"><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"title function_\">data</span>(<span class=\"params\"></span>){</span><br><span class=\"line\"> <span class=\"keyword\">return</span> {</span><br><span class=\"line\"> <span class=\"attr\">editor</span>: {</span><br><span class=\"line\"> <span class=\"attr\">msg</span>: <span class=\"string\">''</span>,</span><br><span class=\"line\"> <span class=\"attr\">config</span>: {</span><br><span class=\"line\"> <span class=\"attr\">autoHeightEnabled</span>: <span class=\"literal\">false</span>,</span><br><span class=\"line\"> <span class=\"attr\">initialFrameHeight</span>: <span class=\"number\">300</span>,<span class=\"comment\">//高度</span></span><br><span class=\"line\"> <span class=\"attr\">zIndex</span>: <span class=\"number\">5</span>,<span class=\"comment\">//层级</span></span><br><span class=\"line\"> <span class=\"attr\">isShow</span>: <span class=\"literal\">false</span>,<span class=\"comment\">//是否显示编辑器</span></span><br><span class=\"line\"> }</span><br><span class=\"line\"> },</span><br><span class=\"line\"> <span class=\"attr\">content</span>: <span class=\"string\">'hello world'</span></span><br><span class=\"line\"> }</span><br><span class=\"line\">},</span><br><span class=\"line\"><span class=\"attr\">methods</span>: {</span><br><span class=\"line\"> <span class=\"title function_\">getUEContent</span>(<span class=\"params\">content</span>){</span><br><span class=\"line\"> <span class=\"variable language_\">this</span>.<span class=\"property\">content</span> = content;</span><br><span class=\"line\"> }</span><br><span class=\"line\">};</span><br></pre></td></tr></table></figure>\n<p>过程中遇到几个问题<br>1.由于是放在<code>form</code>下，<code>el-form-item</code>有个默认<code>line-height:40px</code>会让工具栏变形，所以要加个样式</p>\n<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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"selector-class\">.ueditor</span>{</span><br><span class=\"line\"> <span class=\"attribute\">line-height</span>:normal;</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n<p>2.添加内容是默认<code>p</code>标签，显示相关内容时体验不好被运营投诉了→_→ 然后改用<code>div</code></p>\n<figure class=\"highlight js\"><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"title function_\">getUEContent</span>(<span class=\"params\"></span>){</span><br><span class=\"line\"> <span class=\"keyword\">let</span> content = <span class=\"variable language_\">this</span>.<span class=\"property\">editor</span>.<span class=\"title function_\">getContent</span>();</span><br><span class=\"line\"> content = content.<span class=\"title function_\">replace</span>(<span class=\"regexp\">/<p([\\s\\S]*?)<\\/p>/g</span>,<span class=\"string\">"<div$1</div>"</span>)</span><br><span class=\"line\"> <span class=\"variable language_\">this</span>.$emit(<span class=\"string\">"getUEContent"</span>,content)</span><br><span class=\"line\">};</span><br></pre></td></tr></table></figure>\n<p>3.如果页面出现滚动条，编辑器进入编辑状态后，再往上滚动，工具栏也会跟着往上跑，脱离文本框。看☟☟☟<br><img src=\"/images/vue_ex_02.png\" alt=\"正常的工具栏\"><br><img src=\"/images/vue_ex_03.png\" alt=\"猫饼工具栏\"></p>\n<p>然而在google搜了半天没找到解决办法，倒回去看文档_(:<em>」∠)</em><br>果然，精髓都浓缩在文档中</p>\n<p><img src=\"/images/vue_ex_04.png\" alt=\"修复工具栏\"></p>\n<p>所以在<code>DefaultConfig</code>加个默认设置就好了<code>autoFloatEnabled: false</code></p>\n<p>github：<a href=\"https://github.com/xiaoniezi/vue-ueditor\">戳戳戳</a>（附上一个修改单图上传功能后的<code>ueditor</code>文件，不知道为啥用原本的不行）</p>\n<h2 id=\"10-axios报错后重新请求\"><a href=\"#10-axios报错后重新请求\" class=\"headerlink\" title=\"10.axios报错后重新请求\"></a>10.axios报错后重新请求</h2><p>如题，请求数据报错时再请求一次=。= 这是个猫饼，不是都尽量避免重复请求，怎么还有这么野蛮的需求……anyway，找到个梯子</p>\n<p><a href=\"http://www.itomtan.com/2017/10/17/vue-axios-timeout-retry-callback/#\">使劲戳不戳不知道</a></p>\n<h2 id=\"更新项\"><a href=\"#更新项\" class=\"headerlink\" title=\"更新项\"></a>更新项</h2><p>———— 2017.12.12 ————</p>\n<ol>\n<li>[修改]Tab 4.table组件expand每次只展开一项</li>\n<li>[新增]Tab 7.数组表单验证</li>\n</ol>\n<p>———— 2018.01.22 ————</p>\n<ol>\n<li>[新增]Tab 8.转换emoji表情</li>\n</ol>\n<p>———— 2018.02.09 ————</p>\n<ol>\n<li>[新增]Tab 9.百度富文本Ueditor</li>\n<li>[新增]Tab 10.axios报错后重新请求</li>\n</ol>\n","categories":["Vue"],"tags":["vue","javascript","elementUI"]},{"title":"VUE饿了么树形控件添加增删改功能","url":"https://xiaoniezi.github.io/2017-10-16/vue-ElementUI-tree-expand/","content":"<p>在饿了么原文档中有个案例是有新增和删除功能，但是后来发现其修改的数据并不能直接影响到树形数据，所以采用了 <code>render-content</code> 的API重新写了个组件。<br>写个开发的步骤，所以文章比较长emmm<br><span id=\"more\"></span></p>\n<p>element-ui树形控件：<a href=\"http://element.eleme.io/1.4/#/zh-CN/component/tree\">地址</a></p>\n<p>大致效果如图：<br><img src=\"/images/vue_ex_01.png\" alt=\"例图\"></p>\n<p><a href=\"https://xiaoniezi.github.io/projects/elementUI_tree\">展示地址</a></p>\n<hr>\n<h2 id=\"1-省市API\"><a href=\"#1-省市API\" class=\"headerlink\" title=\"1.省市API\"></a>1.省市API</h2><p>在网上复制了个省市的list，有两个属性是新增的</p>\n<ul>\n<li><code>isEdit</code>：控制编辑状态</li>\n<li><code>maxexpandId</code>：为现下id的最大值</li>\n</ul>\n<figure class=\"highlight js\"><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">export</span> <span class=\"keyword\">default</span>{</span><br><span class=\"line\"> <span class=\"attr\">maxexpandId</span>: <span class=\"number\">95</span>,</span><br><span class=\"line\"> <span class=\"attr\">treelist</span>: [{ </span><br><span class=\"line\"> <span class=\"attr\">id</span>: <span class=\"number\">1</span>, </span><br><span class=\"line\"> <span class=\"attr\">name</span>: <span class=\"string\">"北京市"</span>, </span><br><span class=\"line\"> <span class=\"title class_\">ProSort</span>: <span class=\"number\">1</span>, </span><br><span class=\"line\"> <span class=\"attr\">remark</span>: <span class=\"string\">"直辖市"</span>,</span><br><span class=\"line\"> <span class=\"attr\">pid</span>: <span class=\"string\">''</span>,</span><br><span class=\"line\"> <span class=\"attr\">isEdit</span>: <span class=\"literal\">false</span>,</span><br><span class=\"line\"> <span class=\"attr\">children</span>: [{</span><br><span class=\"line\"> \t\t<span class=\"attr\">id</span>: <span class=\"number\">35</span>,</span><br><span class=\"line\"> \t\t<span class=\"attr\">name</span>: <span class=\"string\">"朝阳区"</span>,</span><br><span class=\"line\"> \t\t<span class=\"attr\">pid</span>: <span class=\"number\">1</span>,</span><br><span class=\"line\"> \t\t<span class=\"attr\">remark</span>: <span class=\"string\">''</span>,</span><br><span class=\"line\"> \t\t<span class=\"attr\">isEdit</span>: <span class=\"literal\">false</span>,</span><br><span class=\"line\"> \t\t<span class=\"attr\">children</span>: []</span><br><span class=\"line\"> \t}]</span><br><span class=\"line\"> }{...}]</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n<hr>\n<h2 id=\"2-el-tree-Component基本\"><a href=\"#2-el-tree-Component基本\" class=\"headerlink\" title=\"2.el-tree Component基本\"></a>2.el-tree Component基本</h2><p>咱们一步步来，先写个饿了么的组件</p>\n<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><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">template</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">el-tree</span> <span class=\"attr\">ref</span>=<span class=\"string\">"expandMenuList"</span> <span class=\"attr\">class</span>=<span class=\"string\">"expand-tree"</span></span></span><br><span class=\"line\"><span class=\"tag\"> <span class=\"attr\">v-if</span>=<span class=\"string\">"isLoadingTree"</span></span></span><br><span class=\"line\"><span class=\"tag\"> <span class=\"attr\">:data</span>=<span class=\"string\">"setTree"</span></span></span><br><span class=\"line\"><span class=\"tag\"> <span class=\"attr\">node-key</span>=<span class=\"string\">"id"</span></span></span><br><span class=\"line\"><span class=\"tag\"> <span class=\"attr\">highlight-current</span></span></span><br><span class=\"line\"><span class=\"tag\"> <span class=\"attr\">:props</span>=<span class=\"string\">"defaultProps"</span></span></span><br><span class=\"line\"><span class=\"tag\"> <span class=\"attr\">:expand-on-click-node</span>=<span class=\"string\">"false"</span></span></span><br><span class=\"line\"><span class=\"tag\"> <span class=\"attr\">:render-content</span>=<span class=\"string\">"renderContent"</span></span></span><br><span class=\"line\"><span class=\"tag\"> <span class=\"attr\">:default-expanded-keys</span>=<span class=\"string\">"defaultExpandKeys"</span>></span><span class=\"tag\"></<span class=\"name\">el-tree</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">template</span>></span></span><br><span class=\"line\"><span class=\"comment\"><!--</span></span><br><span class=\"line\"><span class=\"comment\">* highlight-current ：为了点击时节点高亮</span></span><br><span class=\"line\"><span class=\"comment\">* expand-on-click-node : 只能箭头控制树形的展开收缩</span></span><br><span class=\"line\"><span class=\"comment\">* render-content : 节点渲染方式</span></span><br><span class=\"line\"><span class=\"comment\">* default-expanded-keys ：默认展开节点</span></span><br><span class=\"line\"><span class=\"comment\">--></span></span><br></pre></td></tr></table></figure>\n<p>同时引入API和节点渲染的组件</p>\n<figure class=\"highlight js\"><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\"><span class=\"keyword\">import</span> <span class=\"title class_\">TreeRender</span> <span class=\"keyword\">from</span> <span class=\"string\">'@/components/tree_render'</span></span><br><span class=\"line\"><span class=\"keyword\">import</span> api <span class=\"keyword\">from</span> <span class=\"string\">'@/resource/api'</span></span><br></pre></td></tr></table></figure>\n<p>然后搭建好基础</p>\n<figure class=\"highlight js\"><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"title function_\">data</span>(<span class=\"params\"></span>){</span><br><span class=\"line\"> <span class=\"keyword\">return</span>{</span><br><span class=\"line\"> <span class=\"attr\">maxexpandId</span>: api.<span class=\"property\">maxexpandId</span>,<span class=\"comment\">//新增节点开始id</span></span><br><span class=\"line\"> <span class=\"attr\">non_maxexpandId</span>: api.<span class=\"property\">maxexpandId</span>,<span class=\"comment\">//新增节点开始id(不更改)</span></span><br><span class=\"line\"> <span class=\"attr\">isLoadingTree</span>: <span class=\"literal\">false</span>,<span class=\"comment\">//是否加载节点树</span></span><br><span class=\"line\"> <span class=\"attr\">setTree</span>: api.<span class=\"property\">treelist</span>,<span class=\"comment\">//节点树数据</span></span><br><span class=\"line\"> <span class=\"attr\">defaultProps</span>: {</span><br><span class=\"line\"> <span class=\"attr\">children</span>: <span class=\"string\">'children'</span>,</span><br><span class=\"line\"> <span class=\"attr\">label</span>: <span class=\"string\">'name'</span></span><br><span class=\"line\"> },</span><br><span class=\"line\"> <span class=\"attr\">defaultExpandKeys</span>: [],<span class=\"comment\">//默认展开节点列表</span></span><br><span class=\"line\"> }</span><br><span class=\"line\">},</span><br></pre></td></tr></table></figure>\n<p>添加个渲染的method</p>\n<figure class=\"highlight js\"><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">methods</span>: {</span><br><span class=\"line\"> <span class=\"title function_\">renderContent</span>(<span class=\"params\">h,{node,data,store}</span>){</span><br><span class=\"line\"> <span class=\"keyword\">let</span> that = <span class=\"variable language_\">this</span>;<span class=\"comment\">//指向vue</span></span><br><span class=\"line\"> <span class=\"keyword\">return</span> <span class=\"title function_\">h</span>(<span class=\"title class_\">TreeRender</span>,{</span><br><span class=\"line\"> <span class=\"attr\">props</span>: {</span><br><span class=\"line\"> <span class=\"attr\">DATA</span>: data,<span class=\"comment\">//节点数据</span></span><br><span class=\"line\"> <span class=\"attr\">NODE</span>: node,<span class=\"comment\">//节点内容</span></span><br><span class=\"line\"> <span class=\"attr\">STORE</span>: store,<span class=\"comment\">//完整树形内容</span></span><br><span class=\"line\"> },</span><br><span class=\"line\"> <span class=\"attr\">on</span>: {<span class=\"comment\">//绑定方法</span></span><br><span class=\"line\"> <span class=\"attr\">nodeAdd</span>: (<span class=\"function\">(<span class=\"params\">s,d,n</span>) =></span> that.<span class=\"title function_\">handleAdd</span>(s,d,n)),</span><br><span class=\"line\"> <span class=\"attr\">nodeEdit</span>: (<span class=\"function\">(<span class=\"params\">s,d,n</span>) =></span> that.<span class=\"title function_\">handleEdit</span>(s,d,n)),</span><br><span class=\"line\"> <span class=\"attr\">nodeDel</span>: (<span class=\"function\">(<span class=\"params\">s,d,n</span>) =></span> that.<span class=\"title function_\">handleDelete</span>(s,d,n))</span><br><span class=\"line\"> }</span><br><span class=\"line\"> });</span><br><span class=\"line\"> },</span><br><span class=\"line\"> <span class=\"title function_\">handleAdd</span>(<span class=\"params\">s,d,n</span>){<span class=\"comment\">//增加节点</span></span><br><span class=\"line\"> <span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(s,d,n)</span><br><span class=\"line\"> },</span><br><span class=\"line\"> <span class=\"title function_\">handleEdit</span>(<span class=\"params\">s,d,n</span>){<span class=\"comment\">//编辑节点</span></span><br><span class=\"line\"> <span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(s,d,n)</span><br><span class=\"line\"> },</span><br><span class=\"line\"> <span class=\"title function_\">handleDelete</span>(<span class=\"params\">s,d,n</span>){<span class=\"comment\">//删除节点</span></span><br><span class=\"line\"> <span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(s,d,n)</span><br><span class=\"line\"> }</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n<h2 id=\"3-tree-render-Component基本\"><a href=\"#3-tree-render-Component基本\" class=\"headerlink\" title=\"3.tree_render Component基本\"></a>3.tree_render Component基本</h2><p>渲染组件：</p>\n<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\"><<span class=\"name\">template</span>></span></span><br><span class=\"line\">\t<span class=\"tag\"><<span class=\"name\">span</span> <span class=\"attr\">class</span>=<span class=\"string\">"tree-expand"</span>></span></span><br><span class=\"line\">\t\t<span class=\"tag\"><<span class=\"name\">span</span> <span class=\"attr\">class</span>=<span class=\"string\">"tree-label"</span>></span></span><br><span class=\"line\">\t\t\t<span class=\"tag\"><<span class=\"name\">span</span>></span>{{DATA.name}}<span class=\"tag\"></<span class=\"name\">span</span>></span></span><br><span class=\"line\">\t\t<span class=\"tag\"></<span class=\"name\">span</span>></span></span><br><span class=\"line\">\t\t<span class=\"tag\"><<span class=\"name\">span</span> <span class=\"attr\">class</span>=<span class=\"string\">"tree-btn"</span>></span></span><br><span class=\"line\">\t\t\t<span class=\"tag\"><<span class=\"name\">i</span> <span class=\"attr\">class</span>=<span class=\"string\">"el-icon-plus"</span> @<span class=\"attr\">click.stop</span>=<span class=\"string\">"nodeAdd(STORE,DATA,NODE)"</span>></span><span class=\"tag\"></<span class=\"name\">i</span>></span></span><br><span class=\"line\">\t\t\t<span class=\"tag\"><<span class=\"name\">i</span> <span class=\"attr\">class</span>=<span class=\"string\">"el-icon-edit"</span> @<span class=\"attr\">click.stop</span>=<span class=\"string\">"nodeEdit(STORE,DATA,NODE)"</span>></span><span class=\"tag\"></<span class=\"name\">i</span>></span></span><br><span class=\"line\">\t\t\t<span class=\"tag\"><<span class=\"name\">i</span> <span class=\"attr\">class</span>=<span class=\"string\">"el-icon-delete"</span> @<span class=\"attr\">click.stop</span>=<span class=\"string\">"nodeDel(STORE,DATA,NODE)"</span>></span><span class=\"tag\"></<span class=\"name\">i</span>></span></span><br><span class=\"line\">\t\t<span class=\"tag\"></<span class=\"name\">span</span>></span></span><br><span class=\"line\">\t<span class=\"tag\"></<span class=\"name\">span</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">template</span>></span></span><br></pre></td></tr></table></figure>\n<p>添加好几个按钮（element-ui自带icon：<a href=\"http://element.eleme.io/1.4/#/zh-CN/component/icon\">地址</a>）对应的方法：</p>\n<figure class=\"highlight js\"><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\">export</span> <span class=\"keyword\">default</span>{</span><br><span class=\"line\"> <span class=\"attr\">props</span>: [<span class=\"string\">'NODE'</span>, <span class=\"string\">'DATA'</span>, <span class=\"string\">'STORE'</span>],</span><br><span class=\"line\"> <span class=\"attr\">methods</span>: {</span><br><span class=\"line\"> <span class=\"title function_\">nodeAdd</span>(<span class=\"params\">s,d,n</span>){<span class=\"comment\">//新增</span></span><br><span class=\"line\"> <span class=\"variable language_\">this</span>.$emit(<span class=\"string\">'nodeAdd'</span>,s,d,n)</span><br><span class=\"line\"> },</span><br><span class=\"line\"> <span class=\"title function_\">nodeEdit</span>(<span class=\"params\">s,d,n</span>){<span class=\"comment\">//编辑</span></span><br><span class=\"line\"> <span class=\"variable language_\">this</span>.$emit(<span class=\"string\">'nodeEdit'</span>,s,d,n)</span><br><span class=\"line\"> },</span><br><span class=\"line\"> <span class=\"title function_\">nodeDel</span>(<span class=\"params\">s,d,n</span>){<span class=\"comment\">//删除</span></span><br><span class=\"line\"> <span class=\"variable language_\">this</span>.$emit(<span class=\"string\">'nodeDel'</span>,s,d,n)</span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n<h2 id=\"4-改\"><a href=\"#4-改\" class=\"headerlink\" title=\"4.改\"></a>4.改</h2><p>我们用<code>isEdit</code>来切换<code>input</code>和<code>span</code>的显示状态，首先加个input：</p>\n<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><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\"><!-- tree_render component --></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">template</span>></span></span><br><span class=\"line\">\t<span class=\"tag\"><<span class=\"name\">span</span> <span class=\"attr\">class</span>=<span class=\"string\">"tree-expand"</span>></span></span><br><span class=\"line\">\t\t<span class=\"tag\"><<span class=\"name\">span</span> <span class=\"attr\">class</span>=<span class=\"string\">"tree-label"</span> <span class=\"attr\">v-if</span>=<span class=\"string\">"DATA.isEdit"</span>></span></span><br><span class=\"line\">\t\t\t<span class=\"tag\"><<span class=\"name\">el-input</span> <span class=\"attr\">class</span>=<span class=\"string\">"edit"</span> <span class=\"attr\">size</span>=<span class=\"string\">"mini"</span></span></span><br><span class=\"line\"><span class=\"tag\">\t\t\t<span class=\"attr\">:ref</span>=<span class=\"string\">"'treeInput'+DATA.id"</span></span></span><br><span class=\"line\"><span class=\"tag\">\t\t\t<span class=\"attr\">v-model</span>=<span class=\"string\">"DATA.name"</span>></span><span class=\"tag\"></<span class=\"name\">el-input</span>></span></span><br><span class=\"line\">\t\t<span class=\"tag\"></<span class=\"name\">span</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">template</span> <span class=\"attr\">v-else</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">span</span> <span class=\"attr\">class</span>=<span class=\"string\">"tree-label"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">span</span>></span>{{DATA.name}}<span class=\"tag\"></<span class=\"name\">span</span>></span></span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">span</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">span</span> <span class=\"attr\">class</span>=<span class=\"string\">"tree-btn"</span> <span class=\"attr\">v-show</span>=<span class=\"string\">"!DATA.isEdit"</span>></span></span><br><span class=\"line\"> \t\t\t<span class=\"tag\"><<span class=\"name\">i</span> <span class=\"attr\">class</span>=<span class=\"string\">"el-icon-plus"</span> @<span class=\"attr\">click.stop</span>=<span class=\"string\">"nodeAdd(STORE,DATA,NODE)"</span>></span><span class=\"tag\"></<span class=\"name\">i</span>></span></span><br><span class=\"line\"> \t\t\t<span class=\"tag\"><<span class=\"name\">i</span> <span class=\"attr\">class</span>=<span class=\"string\">"el-icon-edit"</span> @<span class=\"attr\">click.stop</span>=<span class=\"string\">"nodeEdit(STORE,DATA,NODE)"</span>></span><span class=\"tag\"></<span class=\"name\">i</span>></span></span><br><span class=\"line\"> \t\t\t<span class=\"tag\"><<span class=\"name\">i</span> <span class=\"attr\">class</span>=<span class=\"string\">"el-icon-delete"</span> @<span class=\"attr\">click.stop</span>=<span class=\"string\">"nodeDel(STORE,DATA,NODE)"</span>></span><span class=\"tag\"></<span class=\"name\">i</span>></span></span><br><span class=\"line\"> \t\t<span class=\"tag\"></<span class=\"name\">span</span>></span></span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">template</span>></span></span><br><span class=\"line\">\t<span class=\"tag\"></<span class=\"name\">span</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">template</span>></span></span><br></pre></td></tr></table></figure>\n<p>编辑的时候按钮同时消失，那么什么时候编辑完成呢？</p>\n<ul>\n<li>编辑完按enter键=》监听input的enter输入</li>\n<li>点击其他节点=》input失焦-<code>blur</code>=》编辑时自动聚焦-<code>focus</code></li>\n<li>点击当前节点范围</li>\n</ul>\n<p>当以上三点发生一项，节点对应的data都要<code>isEdit = false;</code></p>\n<ol>\n<li><p>enter键</p>\n<figure class=\"highlight html\"><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\"><span class=\"comment\"><!-- tree_render component --></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">el-input</span> @<span class=\"attr\">keyup.enter.native</span>=<span class=\"string\">"nodeEditPass(STORE,DATA,NODE)"</span>></span><span class=\"tag\"></<span class=\"name\">el-input</span>></span></span><br></pre></td></tr></table></figure>\n<p>添加方法：</p>\n<figure class=\"highlight js\"><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\">//tree_render component</span></span><br><span class=\"line\"><span class=\"attr\">methods</span>: {</span><br><span class=\"line\"> <span class=\"title function_\">nodeEditPass</span>(<span class=\"params\">s,d,n</span>){</span><br><span class=\"line\"> d.<span class=\"property\">isEdit</span> = <span class=\"literal\">false</span>;</span><br><span class=\"line\"> }</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure></li>\n<li><p><code>focus or blur</code></p>\n<figure class=\"highlight html\"><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\"><span class=\"comment\"><!-- tree_render component --></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">el-input</span> @<span class=\"attr\">blur</span>=<span class=\"string\">"nodeEditPass(STORE,DATA,NODE)"</span>></span><span class=\"tag\"></<span class=\"name\">el-input</span>></span></span><br></pre></td></tr></table></figure>\n<p>后来发现第一次编辑时能让<code>input</code>聚焦，点击第二个<code>input</code>就不起作用了，加了<code>autofocus</code>属性也同样如此。所以我们要在点击编辑<code>icon</code>的时候，用原生的<code>input autofocus</code>。<br>修改方法：</p>\n<figure class=\"highlight js\"><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\">//tree_render component</span></span><br><span class=\"line\"><span class=\"title function_\">nodeEdit</span>(<span class=\"params\">s,d,n</span>){<span class=\"comment\">//编辑</span></span><br><span class=\"line\"> d.<span class=\"property\">isEdit</span> = <span class=\"literal\">true</span>;</span><br><span class=\"line\"> <span class=\"variable language_\">this</span>.$nextTick(<span class=\"function\">() =></span> {</span><br><span class=\"line\"> <span class=\"variable language_\">this</span>.<span class=\"property\">$refs</span>[<span class=\"string\">'treeInput'</span>+d.<span class=\"property\">id</span>].<span class=\"property\">$refs</span>.<span class=\"property\">input</span>.<span class=\"title function_\">focus</span>()</span><br><span class=\"line\"> })</span><br><span class=\"line\"> <span class=\"variable language_\">this</span>.$emit(<span class=\"string\">'nodeEdit'</span>,s,d,n)</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure></li>\n<li><p><strong>当前节点</strong>点击<br>采用<code>el-tree</code>已有的API——<code>node-click</code></p>\n<figure class=\"highlight html\"><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\"><span class=\"comment\"><!-- el-tree component --></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">el-tree</span> @<span class=\"attr\">node-click</span>=<span class=\"string\">"handleNodeClick"</span>></span><span class=\"tag\"></<span class=\"name\">el-tree</span>></span></span><br></pre></td></tr></table></figure>\n<p>添加methods：</p>\n<figure class=\"highlight js\"><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\">//el-tree component</span></span><br><span class=\"line\"><span class=\"attr\">methods</span>: {</span><br><span class=\"line\"> <span class=\"title function_\">handleNodeClick</span>(<span class=\"params\">d,n,s</span>){<span class=\"comment\">//点击节点</span></span><br><span class=\"line\"> d.<span class=\"property\">isEdit</span> = <span class=\"literal\">false</span>;<span class=\"comment\">//放弃编辑状态</span></span><br><span class=\"line\"> }</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n<p>问题来了，如果在编辑状态下点击此节点也同样会影响input，这就无法进入编辑，所以要阻止input<strong>事件冒泡</strong>：</p>\n<figure class=\"highlight html\"><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\"><span class=\"comment\"><!-- tree_render component --></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">el-input</span> @<span class=\"attr\">click.stop.native</span>=<span class=\"string\">"nodeEditFocus"</span>></span><span class=\"tag\"></<span class=\"name\">el-input</span>></span></span><br></pre></td></tr></table></figure>\n<p>添加methods：</p>\n<figure class=\"highlight js\"><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\"><span class=\"comment\">//tree_render component</span></span><br><span class=\"line\"><span class=\"attr\">methods</span>: {</span><br><span class=\"line\"> <span class=\"title function_\">nodeEditFocus</span>(<span class=\"params\"></span>){}</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n</li>\n<li><p><code>v-show</code>代替<code>v-if</code></p>\n<p>这里有个新的问题，当用户经常编辑修改，<code>v-if</code>模板的开销更高，所以改用v-show。而后者不支持template模板，所以要适当调整一下位置：</p>\n<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><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">template</span>></span></span><br><span class=\"line\">\t<span class=\"tag\"><<span class=\"name\">span</span> <span class=\"attr\">class</span>=<span class=\"string\">"tree-expand"</span>></span></span><br><span class=\"line\">\t\t<span class=\"tag\"><<span class=\"name\">span</span> <span class=\"attr\">class</span>=<span class=\"string\">"tree-label"</span> <span class=\"attr\">v-show</span>=<span class=\"string\">"DATA.isEdit"</span>></span></span><br><span class=\"line\">\t\t\t<span class=\"tag\"><<span class=\"name\">el-input</span> <span class=\"attr\">class</span>=<span class=\"string\">"edit"</span> <span class=\"attr\">size</span>=<span class=\"string\">"mini"</span> <span class=\"attr\">autofocus</span></span></span><br><span class=\"line\"><span class=\"tag\">\t\t\t<span class=\"attr\">v-model</span>=<span class=\"string\">"DATA.name"</span></span></span><br><span class=\"line\"><span class=\"tag\">\t\t\t<span class=\"attr\">:ref</span>=<span class=\"string\">"'treeInput'+DATA.id"</span></span></span><br><span class=\"line\"><span class=\"tag\">\t\t\t@<span class=\"attr\">click.stop.native</span>=<span class=\"string\">"nodeEditFocus"</span></span></span><br><span class=\"line\"><span class=\"tag\">\t\t\t@<span class=\"attr\">blur</span>=<span class=\"string\">"nodeEditPass(STORE,DATA,NODE)"</span></span></span><br><span class=\"line\"><span class=\"tag\">\t\t\t@<span class=\"attr\">keyup.enter.native</span>=<span class=\"string\">"nodeEditPass(STORE,DATA,NODE)"</span>></span><span class=\"tag\"></<span class=\"name\">el-input</span>></span></span><br><span class=\"line\">\t\t<span class=\"tag\"></<span class=\"name\">span</span>></span></span><br><span class=\"line\">\t\t<span class=\"tag\"><<span class=\"name\">span</span> <span class=\"attr\">v-show</span>=<span class=\"string\">"!DATA.isEdit"</span>></span></span><br><span class=\"line\">\t\t\t<span class=\"tag\"><<span class=\"name\">span</span>></span>{{DATA.name}}<span class=\"tag\"></<span class=\"name\">span</span>></span></span><br><span class=\"line\">\t\t<span class=\"tag\"></<span class=\"name\">span</span>></span></span><br><span class=\"line\">\t\t<span class=\"tag\"><<span class=\"name\">span</span> <span class=\"attr\">class</span>=<span class=\"string\">"tree-btn"</span> <span class=\"attr\">v-show</span>=<span class=\"string\">"!DATA.isEdit"</span>></span></span><br><span class=\"line\">\t\t\t<span class=\"tag\"><<span class=\"name\">i</span> <span class=\"attr\">class</span>=<span class=\"string\">"el-icon-plus"</span> @<span class=\"attr\">click.stop</span>=<span class=\"string\">"nodeAdd(STORE,DATA,NODE)"</span>></span><span class=\"tag\"></<span class=\"name\">i</span>></span></span><br><span class=\"line\">\t\t\t<span class=\"tag\"><<span class=\"name\">i</span> <span class=\"attr\">class</span>=<span class=\"string\">"el-icon-edit"</span> @<span class=\"attr\">click.stop</span>=<span class=\"string\">"nodeEdit(STORE,DATA,NODE)"</span>></span><span class=\"tag\"></<span class=\"name\">i</span>></span></span><br><span class=\"line\">\t\t\t<span class=\"tag\"><<span class=\"name\">i</span> <span class=\"attr\">class</span>=<span class=\"string\">"el-icon-delete"</span> @<span class=\"attr\">click.stop</span>=<span class=\"string\">"nodeDel(STORE,DATA,NODE)"</span>></span><span class=\"tag\"></<span class=\"name\">i</span>></span></span><br><span class=\"line\">\t\t<span class=\"tag\"></<span class=\"name\">span</span>></span></span><br><span class=\"line\">\t<span class=\"tag\"></<span class=\"name\">span</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">template</span>></span></span><br></pre></td></tr></table></figure>\n</li>\n</ol>\n<h2 id=\"5-增\"><a href=\"#5-增\" class=\"headerlink\" title=\"5.增\"></a>5.增</h2><p>新增节点 =》添加一条数据</p>\n<ol>\n<li>新增的同时展开父节点</li>\n<li>是否考虑无限新增</li>\n</ol>\n<figure class=\"highlight js\"><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\">//el-tree component</span></span><br><span class=\"line\"><span class=\"title function_\">handleAdd</span>(<span class=\"params\">s,d,n</span>){<span class=\"comment\">//增加节点</span></span><br><span class=\"line\"> <span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(s,d,n)</span><br><span class=\"line\"> <span class=\"keyword\">if</span>(n.<span class=\"property\">level</span> >=<span class=\"number\">6</span>){</span><br><span class=\"line\"> <span class=\"variable language_\">this</span>.<span class=\"property\">$message</span>.<span class=\"title function_\">error</span>(<span class=\"string\">"最多只支持五级！"</span>)</span><br><span class=\"line\"> <span class=\"keyword\">return</span> <span class=\"literal\">false</span>;</span><br><span class=\"line\"> }</span><br><span class=\"line\"> <span class=\"comment\">//添加数据</span></span><br><span class=\"line\"> d.<span class=\"property\">children</span>.<span class=\"title function_\">push</span>({</span><br><span class=\"line\"> <span class=\"attr\">id</span>: ++<span class=\"variable language_\">this</span>.<span class=\"property\">maxexpandId</span>,</span><br><span class=\"line\"> <span class=\"attr\">name</span>: <span class=\"string\">'新增节点'</span>,</span><br><span class=\"line\"> <span class=\"attr\">pid</span>: d.<span class=\"property\">id</span>,</span><br><span class=\"line\"> <span class=\"attr\">isEdit</span>: <span class=\"literal\">false</span>,</span><br><span class=\"line\"> <span class=\"attr\">children</span>: []</span><br><span class=\"line\"> });</span><br><span class=\"line\"> <span class=\"comment\">//展开节点</span></span><br><span class=\"line\"> <span class=\"keyword\">if</span>(!n.<span class=\"property\">expanded</span>){</span><br><span class=\"line\"> n.<span class=\"property\">expanded</span> = <span class=\"literal\">true</span>;</span><br><span class=\"line\"> }</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n<p>新增节点字体加粗 =》给节点添加一个class =》 如何判断是否新增？<br>我们有一个参数<code>maxexpandId</code><br>给<code>tree_render</code>添加一个<code>prop</code>：</p>\n<figure class=\"highlight js\"><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\">//el-tree component</span></span><br><span class=\"line\"><span class=\"title function_\">renderContent</span>(<span class=\"params\">h,{node,data,store}</span>){<span class=\"comment\">//加载节点</span></span><br><span class=\"line\"> <span class=\"keyword\">let</span> that = <span class=\"variable language_\">this</span>;</span><br><span class=\"line\"> <span class=\"keyword\">return</span> <span class=\"title function_\">h</span>(<span class=\"title class_\">TreeRender</span>,{</span><br><span class=\"line\"> <span class=\"attr\">props</span>: {</span><br><span class=\"line\"> ...</span><br><span class=\"line\"> <span class=\"attr\">maxexpandId</span>: that.<span class=\"property\">non_maxexpandId</span></span><br><span class=\"line\"> },</span><br><span class=\"line\"> <span class=\"attr\">on</span>: {...}</span><br><span class=\"line\"> });</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n<p>根据id判断：</p>\n<figure class=\"highlight js\"><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\"><span class=\"comment\">//tree_render component</span></span><br><span class=\"line\"><span class=\"attr\">props</span>: [<span class=\"string\">'NODE'</span>, <span class=\"string\">'DATA'</span>, <span class=\"string\">'STORE'</span>, <span class=\"string\">'maxexpandId'</span>]</span><br></pre></td></tr></table></figure>\n<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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\"><!-- tree_render component --></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">span</span> <span class=\"attr\">v-show</span>=<span class=\"string\">"!DATA.isEdit"</span> </span></span><br><span class=\"line\"><span class=\"tag\"><span class=\"attr\">:class</span>=<span class=\"string\">"[DATA.id > maxexpandId ? 'tree-new tree-label' : 'tree-label']"</span></span></span><br><span class=\"line\"><span class=\"tag\"><span class=\"attr\">:ref</span>=<span class=\"string\">"'treeLabel'+DATA.id"</span>></span></span><br><span class=\"line\">\t<span class=\"tag\"><<span class=\"name\">span</span>></span>{{DATA.name}}<span class=\"tag\"></<span class=\"name\">span</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">span</span>></span></span><br></pre></td></tr></table></figure>\n<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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"selector-class\">.tree-expand</span> <span class=\"selector-class\">.tree-label</span><span class=\"selector-class\">.tree-new</span>{</span><br><span class=\"line\"> <span class=\"attribute\">font-weight</span>:<span class=\"number\">600</span>;</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n<h2 id=\"6-删\"><a href=\"#6-删\" class=\"headerlink\" title=\"6.删\"></a>6.删</h2><p>跟新增同义：删除节点 =》删除一条数据</p>\n<ol>\n<li>新增节点直接删除</li>\n<li>已有节点需提示再删除</li>\n<li>已有子级节点不能删除</li>\n</ol>\n<figure class=\"highlight js\"><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"title function_\">handleDelete</span>(<span class=\"params\">s,d,n</span>){<span class=\"comment\">//删除节点</span></span><br><span class=\"line\"> <span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(s,d,n)</span><br><span class=\"line\"> <span class=\"keyword\">let</span> that = <span class=\"variable language_\">this</span>;</span><br><span class=\"line\"> <span class=\"comment\">//有子级不删除</span></span><br><span class=\"line\"> <span class=\"keyword\">if</span>(d.<span class=\"property\">children</span> && d.<span class=\"property\">children</span>.<span class=\"property\">length</span> !== <span class=\"number\">0</span>){</span><br><span class=\"line\"> <span class=\"variable language_\">this</span>.<span class=\"property\">$message</span>.<span class=\"title function_\">error</span>(<span class=\"string\">"此节点有子级，不可删除！"</span>)</span><br><span class=\"line\"> <span class=\"keyword\">return</span> <span class=\"literal\">false</span>;</span><br><span class=\"line\"> }<span class=\"keyword\">else</span>{</span><br><span class=\"line\"> <span class=\"comment\">//删除操作</span></span><br><span class=\"line\"> <span class=\"keyword\">let</span> <span class=\"title function_\">delNode</span> = (<span class=\"params\"></span>) => {</span><br><span class=\"line\"> <span class=\"keyword\">let</span> list = n.<span class=\"property\">parent</span>.<span class=\"property\">data</span>.<span class=\"property\">children</span> || n.<span class=\"property\">parent</span>.<span class=\"property\">data</span>,</span><br><span class=\"line\"> <span class=\"comment\">//节点同级数据，顶级节点时无children</span></span><br><span class=\"line\"> _index = <span class=\"number\">99999</span>;<span class=\"comment\">//要删除的index</span></span><br><span class=\"line\"> list.<span class=\"title function_\">map</span>(<span class=\"function\">(<span class=\"params\">c,i</span>) =></span> {</span><br><span class=\"line\"> <span class=\"keyword\">if</span>(d.<span class=\"property\">id</span> == c.<span class=\"property\">id</span>){</span><br><span class=\"line\"> _index = i;</span><br><span class=\"line\"> }</span><br><span class=\"line\"> })</span><br><span class=\"line\"> <span class=\"keyword\">let</span> k = list.<span class=\"title function_\">splice</span>(_index,<span class=\"number\">1</span>);</span><br><span class=\"line\"> <span class=\"comment\">//console.log(_index,k)</span></span><br><span class=\"line\"> <span class=\"variable language_\">this</span>.<span class=\"property\">$message</span>.<span class=\"title function_\">success</span>(<span class=\"string\">"删除成功！"</span>)</span><br><span class=\"line\"> }</span><br><span class=\"line\"> <span class=\"keyword\">let</span> <span class=\"title function_\">isDel</span> = (<span class=\"params\"></span>) => {</span><br><span class=\"line\"> that.$confirm(<span class=\"string\">"是否删除此节点？"</span>,<span class=\"string\">"提示"</span>,{</span><br><span class=\"line\"> <span class=\"attr\">confirmButtonText</span>: <span class=\"string\">"确认"</span>,</span><br><span class=\"line\"> <span class=\"attr\">cancelButtonText</span>: <span class=\"string\">"取消"</span>,</span><br><span class=\"line\"> <span class=\"attr\">type</span>: <span class=\"string\">"warning"</span></span><br><span class=\"line\"> }).<span class=\"title function_\">then</span>(<span class=\"function\">() =></span> {</span><br><span class=\"line\"> <span class=\"title function_\">delNode</span>()<span class=\"comment\">//此处可通过ajax做删除操作</span></span><br><span class=\"line\"> }).<span class=\"title function_\">catch</span>(<span class=\"function\">() =></span> {</span><br><span class=\"line\"> <span class=\"keyword\">return</span> <span class=\"literal\">false</span>;</span><br><span class=\"line\"> })</span><br><span class=\"line\"> }</span><br><span class=\"line\"> <span class=\"comment\">//新增节点直接删除，否则要通过请求数据删除</span></span><br><span class=\"line\"> d.<span class=\"property\">id</span> > <span class=\"variable language_\">this</span>.<span class=\"property\">non_maxexpandId</span> ? <span class=\"title function_\">delNode</span>() : <span class=\"title function_\">isDel</span>()</span><br><span class=\"line\"> }</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n<h2 id=\"7-拓展\"><a href=\"#7-拓展\" class=\"headerlink\" title=\"7.拓展\"></a>7.拓展</h2><p>还有一些特别的需求，例如：</p>\n<ol>\n<li><p>点击高亮的时候显示icon</p>\n <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></pre></td><td class=\"code\"><pre><span class=\"line\">\t<span class=\"selector-class\">.expand-tree</span> <span class=\"selector-class\">.is-current</span>><span class=\"selector-class\">.el-tree-node__content</span> <span class=\"selector-class\">.tree-btn</span>,</span><br><span class=\"line\"><span class=\"selector-class\">.expand-tree</span> <span class=\"selector-class\">.el-tree-node__content</span><span class=\"selector-pseudo\">:hover</span> <span class=\"selector-class\">.tree-btn</span>{</span><br><span class=\"line\">\t<span class=\"attribute\">display</span>: inline-block;</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n</li>\n<li><p>添加顶级节点<br> 添加按钮：</p>\n <figure class=\"highlight html\"><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\"><span class=\"comment\"><!-- el-tree component --></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">el-button</span> @<span class=\"attr\">click</span>=<span class=\"string\">"handleAddTop"</span>></span>添加顶级节点<span class=\"tag\"></<span class=\"name\">el-button</span>></span></span><br></pre></td></tr></table></figure>\n<p>添加methods：</p>\n<figure class=\"highlight js\"><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\">//el-tree component</span></span><br><span class=\"line\"><span class=\"attr\">methods</span>: {</span><br><span class=\"line\"> <span class=\"title function_\">handleAddTop</span>(<span class=\"params\"></span>){</span><br><span class=\"line\"> <span class=\"variable language_\">this</span>.<span class=\"property\">setTree</span>.<span class=\"title function_\">push</span>({</span><br><span class=\"line\"> <span class=\"attr\">id</span>: ++<span class=\"variable language_\">this</span>.<span class=\"property\">maxexpandId</span>,</span><br><span class=\"line\"> <span class=\"attr\">name</span>: <span class=\"string\">'新增节点'</span>,</span><br><span class=\"line\"> <span class=\"attr\">pid</span>: <span class=\"string\">''</span>,</span><br><span class=\"line\"> <span class=\"attr\">isEdit</span>: <span class=\"literal\">false</span>,</span><br><span class=\"line\"> <span class=\"attr\">children</span>: []</span><br><span class=\"line\"> })</span><br><span class=\"line\"> }</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n</li>\n<li><p>默认展开树形第一级</p>\n<figure class=\"highlight js\"><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\">//el-tree component</span></span><br><span class=\"line\"><span class=\"title function_\">mounted</span>(<span class=\"params\"></span>){</span><br><span class=\"line\"> <span class=\"variable language_\">this</span>.<span class=\"title function_\">initExpand</span>()</span><br><span class=\"line\">},</span><br><span class=\"line\"><span class=\"attr\">methods</span>: {</span><br><span class=\"line\"> <span class=\"title function_\">initExpand</span>(<span class=\"params\"></span>){</span><br><span class=\"line\"> <span class=\"comment\">//isLoadingTree用意也是在此</span></span><br><span class=\"line\"> <span class=\"variable language_\">this</span>.<span class=\"property\">setTree</span>.<span class=\"title function_\">map</span>(<span class=\"function\">(<span class=\"params\">a</span>) =></span> {</span><br><span class=\"line\"> <span class=\"variable language_\">this</span>.<span class=\"property\">defaultExpandKeys</span>.<span class=\"title function_\">push</span>(a.<span class=\"property\">id</span>)</span><br><span class=\"line\"> });</span><br><span class=\"line\"> <span class=\"variable language_\">this</span>.<span class=\"property\">isLoadingTree</span> = <span class=\"literal\">true</span>;</span><br><span class=\"line\"> },</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n</li>\n</ol>\n<h2 id=\"8-github\"><a href=\"#8-github\" class=\"headerlink\" title=\"8.github\"></a>8.github</h2><p>还有些具体的样式都放在<a href=\"https://github.com/xiaoniezi/tree\">github</a>了</p>\n<p> <strong>如有错漏，欢迎指正╰(<em> ◕ ▽ ◕ </em>)╯</strong></p>\n","categories":["Vue"],"tags":["vue","javascript","elementUI"]},{"title":"How to git","url":"https://xiaoniezi.github.io/2017-06-22/How-to-git/","content":"<p>从安装到配置，如何用Git远程仓库<br><span id=\"more\"></span></p>\n<h2 id=\"第一步：安装Git\"><a href=\"#第一步：安装Git\" class=\"headerlink\" title=\"第一步：安装Git\"></a>第一步：安装Git</h2><p>1.下载Git：<a href=\"https://git-scm.com/book/zh/v1/%E8%B5%B7%E6%AD%A5-%E5%AE%89%E8%A3%85-Git\">国外地址</a> <a href=\"https://github.com/waylau/git-for-win\">国内地址</a><br>2.打开Git目录下的git.cmd，输入：<code>git --version</code>检查是否安装成功</p>\n<h2 id=\"第二步：配置用户\"><a href=\"#第二步：配置用户\" class=\"headerlink\" title=\"第二步：配置用户\"></a>第二步：配置用户</h2><p>打开git.cmd，配置用户名和邮箱(下方以xiaoniezi为例)<br><figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">git config --global user.name <span class=\"string\">"xiaoniezi"</span></span><br><span class=\"line\">git config --global user.email <span class=\"string\">"[email protected]"</span></span><br><span class=\"line\">git config --global push.default matching</span><br></pre></td></tr></table></figure></p>\n<h2 id=\"第三步：生成ssh\"><a href=\"#第三步：生成ssh\" class=\"headerlink\" title=\"第三步：生成ssh\"></a>第三步：生成ssh</h2><p>1.找到Git目录下的git.bash，进入.ssh目录：<code>cd ~/.ssh</code><br>2.创建密钥：<code>ssh-keygen -t rsa</code>期间会有提示用户输入密钥的名字和密码，并二次确认密码，也可默认为空（下方以snow为例）<br>3.创建完成后查看目录文件：<code>ls -al</code>若出现snow和snow.pub两个文件即创建成功</p>\n<h2 id=\"第四步：添加公钥\"><a href=\"#第四步：添加公钥\" class=\"headerlink\" title=\"第四步：添加公钥\"></a>第四步：添加公钥</h2><p> 1.打开Github，进入用户的Settings的SSH and GPG keys设置选项<br> 2.复制snow.pub公钥的内容，在github上添加SSH keys<br> 3.同时在master分支下创建一个新的Repository（下方以test为例）</p>\n<h2 id=\"第五步：检测密钥\"><a href=\"#第五步：检测密钥\" class=\"headerlink\" title=\"第五步：检测密钥\"></a>第五步：检测密钥</h2><p>1.在git.bash主目录下输入：<code>ssh-add -l</code>若出现下方的提示继续以下步骤，否则跳到第六步<br>2.输入以下命令<br><figure class=\"highlight bash\"><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\"><span class=\"built_in\">eval</span> <span class=\"string\">"<span class=\"subst\">$(ssh-agent -s)</span>"</span></span><br><span class=\"line\">ssh-add ~/.ssh/snow</span><br></pre></td></tr></table></figure><br>3.尝试连接github<br><figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">ssh -T [email protected]</span><br></pre></td></tr></table></figure><br>出现以下提示则成功</p>\n<blockquote>\n<p><em>Hi xiaoniezi!You’re successfully authenticated, but Github does not provide shell access.</em></p>\n</blockquote>\n<h2 id=\"第六步：远程仓库\"><a href=\"#第六步：远程仓库\" class=\"headerlink\" title=\"第六步：远程仓库\"></a>第六步：远程仓库</h2><p>1.继续使用git.bash，进入你想与github远程的目录：<code>cd d:/github/snow</code><br>2.初始化：<code>git init</code><br>3.添加当前目录的所有文件：<code>git add .</code><br>4.提交文件：<code>git commit -m "mark something"</code><br>5.远程github：<code>git remote add origin [email protected]:xiaoniezi/test.git</code><br>6.push到test项目下：<code>git push -u origin master</code><br>7.到github的test上即可看到提交的文件</p>\n","categories":["Others"],"tags":["git","github"]},{"title":"Hello World","url":"https://xiaoniezi.github.io/2017-06-22/hello-world/","content":"<p>Welcome to <a href=\"https://hexo.io/\">Hexo</a>! This is your very first post. Check <a href=\"https://hexo.io/docs/\">documentation</a> for more info. If you get any problems when using Hexo, you can find the answer in <a href=\"https://hexo.io/docs/troubleshooting.html\">troubleshooting</a> or you can ask me on <a href=\"https://github.com/hexojs/hexo/issues\">GitHub</a>.</p>\n<h2 id=\"Quick-Start\"><a href=\"#Quick-Start\" class=\"headerlink\" title=\"Quick Start\"></a>Quick Start</h2><h3 id=\"Create-a-new-post\"><a href=\"#Create-a-new-post\" class=\"headerlink\" title=\"Create a new post\"></a>Create a new post</h3><figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">$ hexo new <span class=\"string\">"My New Post"</span></span><br></pre></td></tr></table></figure>\n<p>More info: <a href=\"https://hexo.io/docs/writing.html\">Writing</a></p>\n<h3 id=\"Run-server\"><a href=\"#Run-server\" class=\"headerlink\" title=\"Run server\"></a>Run server</h3><figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">$ hexo server</span><br></pre></td></tr></table></figure>\n<p>More info: <a href=\"https://hexo.io/docs/server.html\">Server</a></p>\n<h3 id=\"Generate-static-files\"><a href=\"#Generate-static-files\" class=\"headerlink\" title=\"Generate static files\"></a>Generate static files</h3><figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">$ hexo generate</span><br></pre></td></tr></table></figure>\n<p>More info: <a href=\"https://hexo.io/docs/generating.html\">Generating</a></p>\n<h3 id=\"Deploy-to-remote-sites\"><a href=\"#Deploy-to-remote-sites\" class=\"headerlink\" title=\"Deploy to remote sites\"></a>Deploy to remote sites</h3><figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">$ hexo deploy</span><br></pre></td></tr></table></figure>\n<p>More info: <a href=\"https://hexo.io/docs/deployment.html\">Deployment</a></p>\n","categories":[],"tags":[]},{"title":"About","url":"https://xiaoniezi.github.io/about/index.html","content":"","categories":[],"tags":[]},{"title":"Category","url":"https://xiaoniezi.github.io/category/index.html","content":"","categories":[],"tags":[]},{"title":"","url":"https://xiaoniezi.github.io/css/fexo_style.css","content":"/*\nCreated By ShylaNie\nLast modify: 2018.02.22;\n*/\n\nhtml,body{\n position:relative;\n width:100%;\n overflow-x:hidden;\n height:100%;\n margin:0;\n padding:0;\n}\n[class^=\"fa-\"]:before, [class*=\"fa-\"]:before{\n font-style: normal;\n font-weight: normal;\n speak: none;\n display: inline-block;\n text-decoration: inherit;\n width: 1em;\n margin-right: .2em;\n text-align: center;\n font-variant: normal;\n text-transform: none;\n line-height: 1em;\n margin-left: .2em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n/*main page*/\n.content-home hr{\n /*background-image:linear-gradient(0deg, transparent, #753901, transparent);\n background-image:-webkit-linear-gradient(bottom, transparent, #753901, transparent);\n background-image:-webkit-linear-gradient(0deg, transparent, #753901, transparent);*/\n}\n.content-home{\n margin:0 auto;\n top:50%;\n left:50%;\n width:300px;\n -webkit-transform:translate(-50%,-50%);\n -moz-transform:translate(-50%,-50%);\n -o-transform:translate(-50%,-50%);\n transform:translate(-50%,-50%);\n}\n.content .item-title.item-title-0:before{\n background:#ad3;\n}\n.content .item-title.item-title-1:before{\n background:#e73;\n}\n.content .item-title.item-title-2:before{\n background:#d55;\n}\n.content .item-title.item-title-3:before{\n background:#fb3;\n}\n.content .item-title.item-title-4:before{\n background:#49f;\n}\n.content.content-about .dot.icon{\n padding:0;\n text-align:center;\n}\n.content.content-about .dot[class*=\"fa-\"]{\n font-size:14px;\n}\n.box-prev-next{\n overflow:hidden;\n margin:0;\n}\n#SOHUCS #SOHU_MAIN .module-cmt-list .wrap-user-gw .user-address-gw{\n display:none !important;\n}\n\n@media screen and (min-width:1000px){\n html.page-home{\n background-image: url('/images/blog_bg_05.jpg');\n background-size:100%;\n background-position:center bottom;\n background-repeat:no-repeat;\n background-color:#000;\n }\n html.page-archives,\n html.page-category,\n html.page-tag{\n /*background-image:url('/images/blog_bg_04.jpg');*/\n background-size:100% 100%;\n background-position:center center;\n background-repeat:no-repeat;\n }\n /*html.page-category{\n background-image:url('/images/blog_bg_03.jpg');\n }\n html.page-tag{\n background-image:url('/images/blog_bg_06.jpg');\n }*/\n .content-home{\n -webkit-transform:translate(50%,-50%);\n -moz-transform:translate(50%,-50%);\n -o-transform:translate(50%,-50%);\n transform:translate(50%,-50%);\n }\n .content{\n margin-top:80px;\n border-left-width:3px;\n }\n .content-logion{\n position:absolute;\n width:50px;\n }\n .content-belt{\n /*background-image:url('/images/blog_bg_title02.png');*/\n }\n .page-header .breadcrumb .location{\n height:80px;\n line-height:50px;\n padding-left:30px;\n color:#419c8c;\n background-image:url('/images/blog_bg_title.png');\n background-repeat:no-repeat;\n background-position:center center;\n background-size:auto 100%;\n }\n .page-header .breadcrumb .location+i{\n display:none;\n }\n .page-header{\n background:transparent;\n top:-40px;\n }\n /*.page-header .box-blog-info .info .name{\n color:#795548;\n }\n .content .item-year a.text-year,\n .content .item-category-name{\n color:#fff;\n }\n .content .item-post .post-title{\n color:#ccc;\n }\n .content .item-post .post-title:hover{\n color:#419c8c;\n }\n .content .item-post .post-date{\n color:#b5b5b5;\n }*/\n}\n\n/*main page end*/\n\n/*detail page*/\n.sl-article--toc{\n position:fixed;\n}\n.back-top.sl-backtop{\n /*display:block;*/\n}\n.content.content-post .article-header .article-meta i{\n margin-left:10px;\n margin-right:1px;\n}\n.content.content-post hr{\n margin-top: 0;\n height: 2px;\n max-width: inherit;\n}\n.post-content{\n width:100%;\n}\n.article-tags{\n width:100%;\n padding:20px 0;\n overflow:hidden;\n}\n.article-tags>.article-tag{\n display:inline-block;\n margin-right:10px;\n}\n.post-excerpt{\n width:100%;\n}\n.article-content .page-forward{\n width:100%;\n font-size:0.8em;\n}\n /* 代码展示 */\n.article-content figure.highlight{ \n max-height: 500px;\n overflow-y: auto;\n}\n/*detail page end*/\n\n\n\n\n","categories":[],"tags":[]},{"title":"","url":"https://xiaoniezi.github.io/css/vexo_style.css","content":"/*\n * Created in 2018.07.19\n * Shyla Nie\n * Last Modify: 2020.02.27;\n*/\n\n\n/* 动画过渡 */\n.header .item-link,\n.header .right-list,\n.tag-code{\n\ttransition: all .3s;\n}\n\n/* header */\n/* logo */\n.header .logo img{\n\twidth: 100%;\n\theight: 100%;\n\tborder-radius: 50%;\n}\n@keyframes swinging{\n\t0%{\n\t\ttransform: rotate(-35deg);\n\t}\n\t50%{\n\t\ttransform: rotate(35deg);\n\t}\n\t100%{\n\t\ttransform: rotate(-35deg);\n\t}\n}\n/* logo悬浮动画 */\n@media screen and (min-width: 760px){\n\t.header.fixed-header .logo img{\n\t\twidth: 60px;\n\t\theight: 60px;\n\t\ttransform-origin: 50% 0;\n\t\t-webkit-animation: swinging 4s ease-in-out forwards infinite;\n\t\t -moz-animation: swinging 4s ease-in-out forwards infinite;\n\t\t\t\tanimation: swinging 4s ease-in-out forwards infinite;\n\t}\n\t.fixed-header .home-link:hover .logo img{\n\t\tanimation-play-state: paused;\n\t}\n\t/* header置顶时隐藏名称 */\n\t.fixed-header .logo + span{\n\t\tdisplay: none;\n\t}\n\t.fixed-header .right-list{\n\t\tfloat: left;\n\t\tpadding-left: 20px;\n\t}\n}\n/* header end */\n\n/* 文章页面 */\n@media screen and (min-width: 1000px) and (max-width: 1500px){\n\t.post-article{\n\t\twidth: 700px;\n\t\tposition: relative;\n\t}\n\t.catalog-container{\n\t\tposition: absolute;\n\t\ttop: 2em;\n\t\tright: 0;\n\t\twidth: 280px;\n\t}\n}\n@media screen and (min-width: 1500px){\n\t.post-article{\n\t\twidth: 100%;\n\t}\n}\n/* article 标题 */\n.article-head > a{\n\tbackground: -webkit-linear-gradient(top, transparent 93%, #42b983 0) center center/0% 75% no-repeat;\n\tbackground: -moz-linear-gradient(top, transparent 93%, #42b983 0) center center/0% 75% no-repeat;\n\tbackground: -o-linear-gradient(top, transparent 93%, #42b983 0) center center/0% 75% no-repeat;\n\tbackground: linear-gradient(to bottom, transparent 93%, #42b983 0) center center/0% 75% no-repeat;\n\ttransition: all .3s ease;\n\tpadding-bottom: 5px;\n}\n.article-head > a:hover{\n\tbackground-size: 100% 100%;\n\tborder-bottom: 0;\n}\n.article-head > a:active{\n\tbackground-size: 80% 100%;\n\tborder-bottom: 0;\n}\n/* article tag */\n.tag-code:hover{\n\tcolor: #f8f8f8;\n\tbackground-color: #e96900;\n}\n/* article catalog */\n.catalog-container .toc-main .toc-nav{\n\tpadding-left: 1.5em;\n}\n.catalog-container .toc-main li{\n\tmargin-bottom: 5px;\n}\n/* 代码块 - 高亮 + 蛇形边框 */\n.markdown-content figure, \n.article-summary figure{\n\tposition: relative;\n\tborder-radius: 5px;\n\tbackground: #021d10;\n}\n.markdown-content figure:before{\n\tcontent: '';\n\tposition: absolute;\n\tleft: 0;\n\tright: 0;\n\ttop: 0;\n\tbottom: 0;\n\tbackground: linear-gradient(0, #fff 5px, #fff 5px) no-repeat,\n\t\t\t\tlinear-gradient(-90deg, #fff 5px, #fff 5px) no-repeat,\n\t\t\t\tlinear-gradient(-180deg, #fff 5px, #fff 5px) no-repeat,\n\t\t\t\tlinear-gradient(-270deg, #fff 5px, #fff 5px) no-repeat;\n\tbackground-size: 0 5px, 5px 0, 0 5px, 5px 0;\n\tbackground-position: left top, right top, right bottom, left bottom;\n\ttransition: all ease-in .3s;\n\tborder-radius: 30px;\n\toverflow: hidden;\n}\n.markdown-content figure:hover:before{\n\tbackground-size: 100% 5px, 5px 100%, 100% 5px, 5px 100%;\n}\n.markdown-content pre, \n.article-summary pre, \n.markdown-content code, \n.article-summary code{\n\tfont-family: system-ui, \"Gill Sans\", sans-serif;\n\tfont-size: 0.95em;\n}\n/* 文章页面 end */\n\n/* 文章日期 */\n#article-banner .post-date span{\n\tdisplay: inline-block;\n}\n#article-banner .post-date .post-date-left{\n\tmargin-right: 10px;\n}\n/* 文章日期 end */\n\n/* 外链 */\n.share-icons .icon-fa-github{\n\tcolor: #24292e;\n}\n.share-icons .icon-fa-stack-overflow{\n\tcolor: #f48024;\n}\n/* 外链 end */\n\n/* 友链 */\n.about-links{\n\twidth: 90%;\n\tmax-width: 800px;\n\tmargin: 20px auto;\n\tposition: relative;\n}\n/* 标题 */\n.about-links .abo-lk-title{\n\tfont-size: 1.4em;\n\tfont-weight: 600;\n\tmargin: 2em 0;\n}\n/* 列表 */\n.about-links .abo-lk-list{\n\tlist-style: none;\n\tpadding: 0;\n\tmargin: 0;\n}\n.about-links .abo-lk-item{\n\tdisplay: inline-block;\n\tmargin-bottom: 20px;\n\twidth: 49%;\n}\n.about-links .abo-lk-url{\n\tdisplay: block;\n\tposition: relative;\n\toverflow: hidden;\n}\n/* 头像 */\n.about-links .abo-lk-avatar{\n\tfloat: left;\n\twidth: 55px;\n\theight: 55px;\n\tpadding: 3px;\n\tborder-radius: 50%;\n\tborder: 1px solid #42b983;\n}\n.about-links .abo-lk-wrap{\n\tposition: relative;\n\tpadding-left: 80px;\n\twidth: 100%;\n\ttext-align: left;\n}\n.about-links .abo-lk-w--name{\n\tmargin-top: 5px;\n\tmargin-bottom: 10px;\n\tcolor: #333;\n\tfont-weight: 600;\n}\n@media screen and (max-width: 720px){\n\t.about-links .abo-lk-item{\n\t\twidth: 100%;\n\t}\n}\n/* 友链 end */\n\n/* 关于 */\n.author .head{\n\tposition: relative;\n\tbox-shadow: none;\n}\n.author .head-img{\n\t/*position: relative;*/\n\twidth: 100%;\n\theight: 100%;\n\tborder-radius: 50%;\n\tbackground-repeat: no-repeat;\n\tbackground-size: 100% 100%;\n\tbackground-position: center;\n\tz-index: 2;\n}\n.author .head-img:after{\n\tcontent: '';\n\tposition: absolute;\n\tleft: 0;\n\tright: 0;\n\ttop: 10%;\n\twidth: 100%;\n\theight: 100%;\n\tborder-radius: 50%;\n\tbackground: inherit;\n\ttransform: scale(.95);\n\tfilter: blur(10px) brightness(80%) opacity(.8);\n\tz-index: -1;\n}\n/* 关于 end */\n\n/* category page */\n.category-preview li{\n\tcursor: default;\n}\n/* category page end */\n","categories":[],"tags":[]},{"title":"","url":"https://xiaoniezi.github.io/js/canvas-ribbon.min.js","content":"/**\n * Created by zproo on 2017/4/8.\n */\n!function(){function a(a,b,c){return Number(a.getAttribute(b))||c}function p(){for(e.clearRect(0,0,g,h),j=[{x:0,y:.7*h+i},{x:0,y:.7*h-i}];j[1].x<g+i;)q(j[0],j[1])}function q(a,b){e.beginPath(),e.moveTo(a.x,a.y),e.lineTo(b.x,b.y);var c=b.x+(2*o()-.25)*i,d=r(b.y);e.lineTo(c,d),e.closePath(),l-=m/-50,e.fillStyle=\"#\"+(127*n(l)+128<<16|127*n(l+m/3)+128<<8|127*n(l+2*(m/3))+128).toString(16),e.fill(),j[0]=j[1],j[1]={x:c,y:d}}function r(a){var b=a+(2*o()-1.1)*i;return b>h||0>b?r(a):b}var b,c,j,d,e,f,g,h,i,k,l,m,n,o;document.addEventListener(\"touchmove\",function(a){a.preventDefault()}),b=document.getElementById(\"ribbon\"),config={zindex:a(b,\"zIndex\",-1),alpha:a(b,\"alpha\",.6),ribbon_width:a(b,\"size\",90)},c=document.createElement(\"canvas\"),c.style.cssText=\"position:fixed;top:0;left:0;z-index:\"+config.zindex,document.getElementsByTagName(\"body\")[0].appendChild(c),d=c,e=d.getContext(\"2d\"),f=window.devicePixelRatio||1,g=window.innerWidth,h=window.innerHeight,i=config.ribbon_width,k=Math,l=0,m=2*k.PI,n=k.cos,o=k.random,d.width=g*f,d.height=h*f,e.scale(f,f),e.globalAlpha=config.alpha,document.onclick=p,document.ontouchstart=p,p()}();","categories":[],"tags":[]},{"title":"","url":"https://xiaoniezi.github.io/js/canvas_ribbon.js","content":"/**\n * Created by zproo on 2017/4/8.\n */\n!function () {\n document.addEventListener('touchmove', function (e) {\n e.preventDefault()\n });\n\n function getAttr(script, attr, default_val) {\n return Number(script.getAttribute(attr)) || default_val;\n }\n\n // 获取自定义配置\n var ribbon = document.getElementById('ribbon'); // 当前加载的script\n config = {\n zIndex: getAttr(ribbon, \"zIndex\", -1), // z-index\n alpha: getAttr(ribbon, \"alpha\", 0.6), // alpha\n ribbon_width: getAttr(ribbon, \"size\", 90), // size\n };\n\n var canvas = document.createElement(\"canvas\");\n canvas.style.cssText = \"position:fixed;top:0;left:0;z-index:\"+config.zIndex;\n document.getElementsByTagName(\"BODY\")[0].appendChild(canvas);\n\n var canvasRibbon = canvas,\n ctx = canvasRibbon.getContext('2d'), // 获取canvas 2d上下文\n dpr = window.devicePixelRatio || 1, // the size of one CSS pixel to the size of one physical pixel.\n width = window.innerWidth, // 返回窗口的文档显示区的宽高\n height = window.innerHeight,\n RIBBON_WIDTH = config.ribbon_width,\n path,\n math = Math,\n r = 0,\n PI_2 = math.PI * 2, // 圆周率*2\n cos = math.cos, // cos函数返回一个数值的余弦值（-1~1）\n random = math.random; // 返回0-1随机数\n\n canvasRibbon.width = width * dpr; // 返回实际宽高\n canvasRibbon.height = height * dpr;\n ctx.scale(dpr, dpr); // 水平、竖直方向缩放\n ctx.globalAlpha = config.alpha; // 图形透明度\n\n function init() {\n ctx.clearRect(0, 0, width, height); // 擦除之前绘制内容\n path = [{x: 0, y: height * 0.7 + RIBBON_WIDTH}, {x: 0, y: height * 0.7 - RIBBON_WIDTH}];\n // 路径没有填满屏幕宽度时，绘制路径\n while (path[1].x < width + RIBBON_WIDTH) {\n draw(path[0], path[1])\n }\n }\n\n function draw(start, end) {\n ctx.beginPath(); // 创建一个新的路径\n ctx.moveTo(start.x, start.y); // path起点\n ctx.lineTo(end.x, end.y); // path终点\n var nextX = end.x + (random() * 2 - 0.25) * RIBBON_WIDTH,\n nextY = geneY(end.y);\n ctx.lineTo(nextX, nextY);\n ctx.closePath();\n\n r -= PI_2 / -50;\n // 随机生成并设置canvas路径16进制颜色\n ctx.fillStyle = '#' + (cos(r) * 127 + 128 << 16 | cos(r + PI_2 / 3) * 127 + 128 << 8 | cos(r + PI_2 / 3 * 2) * 127 + 128).toString(16);\n ctx.fill(); // 根据当前样式填充路径\n path[0] = path[1]; // 起点更新为当前终点\n path[1] = {x: nextX, y: nextY} // 更新终点\n }\n\n function geneY(y) {\n var temp = y + (random() * 2 - 1.1) * RIBBON_WIDTH;\n return (temp > height || temp < 0) ? geneY(y) : temp;\n }\n\n document.onclick = init;\n document.ontouchstart = init;\n init();\n}();","categories":[],"tags":[]},{"title":"link","url":"https://xiaoniezi.github.io/link/index.html","content":"","categories":[],"tags":[]},{"title":"Project","url":"https://xiaoniezi.github.io/project/index.html","content":"","categories":[],"tags":[]},{"title":"search","url":"https://xiaoniezi.github.io/search/index.html","content":"","categories":[],"tags":[]},{"title":"Tags","url":"https://xiaoniezi.github.io/tag/index.html","content":"","categories":[],"tags":[]}]