【itclanCoder】添加JS算法-正则表达式

docs/.vuepress/components/ellipsis/multiEllipsis.vue

@@ -62,7 +62,6 @@
 <script>
 import Prism from "prismjs";
 import { multiAttrData, tableColums } from "./ellipsisdesc";
-// import { isMobile } from './ismobile'; // 添加判断手机设备,移动端还是pc端
 
 export default {
   name: "multiEllipsis",

docs/.vuepress/components/ellipsis/singleEllipsis.vue

@@ -8,7 +8,7 @@
  * @Date: 2020-07-06 14:44:07
  * @Version: xxx.v1.0
  * @LastEditors: 川川
- * @LastEditTime: 2020-07-09 20:54:18
+ * @LastEditTime: 2020-07-15 17:22:16
  * @Description: 标签属性操作
 -->
 <template>
@@ -75,7 +75,6 @@
 <script>
 import Prism from "prismjs";
 import { singleAttrData, tableColums } from "./ellipsisdesc";
-// import { isMobile } from './ismobile'; // 添加判断手机设备,移动端还是pc端
 export default {
   name: "singleEllipsis",
   data() {

docs/.vuepress/components/regular/regExpress.vue

@@ -8,7 +8,7 @@
         <el-button type="primary" @click="handleElBtn(inputVal,inputType)">{{btnText}}</el-button>
       </el-form-item>
     </el-form>
-    <div>校验结果:{{result}}</div>
+    <div>校验结果:&nbsp;&nbsp;{{result}}</div>
   </div>
 </template>
 
@@ -51,6 +51,19 @@ export default {
       }
     },
 
+    // 检测邮箱
+    checkEmail(str) {
+      //let emailReg = /^\w+((.\w+)|(-\w+))@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+).[A-Za-z0-9]+$/; // 邮箱的正则
+      let emailReg = /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/g;
+      if (!emailReg.test(str)) {
+        this.errMessage("您输入的邮箱有误,请重新输入");
+        return false;
+      } else {
+        this.result = str;
+        this.inputVal = "";
+      }
+    },
+
     errMessage(errtext) {
       this.$message({
         showClose: true,
@@ -68,14 +81,17 @@ export default {
           // 电话号码
           this.checkPhone(str);
           break;
+        case "email":
+          // 邮箱
+          this.checkEmail(str);
         default:
           break;
       }
     }
   },
 
   mounted() {
-    console.log(this);
+    // console.log(this);
   }
 };
 </script>

docs/.vuepress/components/writemode/writeMode.vue

@@ -0,0 +1,102 @@
+<template>
+  <div>
+    <div class="effect-display-wrap">
+      <div
+        :style="{
+        writingMode: writingModeVal
+      }"
+      >文字排布{{writingModeVal === "horizontal-tb"? "水平":"垂直"}}方向</div>
+    </div>
+    <div class="language-css extra-class">
+      <pre class="language-css" style="margin-bottom:30px;"><code ref="css"></code></pre>
+    </div>
+    <div class="attr-operate-wrap">
+      <div class="attr-inner-content">
+        <div class="text-width">决定文本在水平或垂直方向上如何排布-writing-mode:</div>
+        <el-radio-group v-model="writingModeVal" class="el-radio-group">
+          <el-radio class="radio" v-for="item in writingModes" :key="item" :label="item">{{ item }}</el-radio>
+        </el-radio-group>
+      </div>
+    </div>
+    <div class="attr-table-desc">
+      <el-table :data="tableAttrData" style="width: 100%">
+        <el-table-column
+          v-for="item in tabcolums"
+          :key="item.prop"
+          :prop="item.prop"
+          :label="item.label"
+          align="center"
+          header-align="center"
+        ></el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script>
+import Prism from "prismjs";
+import { writingModeData, tableColums } from "./writemodedesc";
+export default {
+  name: "writeMode",
+  data() {
+    return {
+      writingModeVal: "horizontal-tb",
+      writingModes: [
+        "horizontal-tb",
+        "vertical-rl",
+        "vertical-lr",
+        "sideways-rl",
+        "sideways-lr"
+      ],
+      tableAttrData: writingModeData,
+      tabcolums: tableColums
+    };
+  },
+  watch: {
+    writingModeVal() {
+      this.updateCss();
+    }
+  },
+  methods: {
+    updateCss() {
+      this.$refs["css"].innerHTML = Prism.highlight(
+        `writing-mode: ${this.writingModeVal};\n-webkit-writing-mode: ${this.writingModeVal};\n-ms-writing-mode: ${this.writingModeVal}`,
+        Prism.languages.css
+      );
+    }
+  },
+
+  mounted() {
+    this.updateCss();
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.effect-display-wrap {
+  line-height: 40px;
+  margin: 15px auto;
+  border: 1px solid #ddd;
+  padding: 15px;
+}
+
+.attr-operate-wrap {
+  display: flex;
+  flex-direction: column;
+  align-content: flex-start;
+}
+
+.el-radio-group {
+  display: flex;
+  justify-content: flex-start;
+  align-content: flex-start;
+  flex-wrap: wrap;
+  margin: 25px 0;
+  .radio {
+    margin-bottom: 15px;
+  }
+  label {
+    width: 20%;
+  }
+}
+</style>

docs/.vuepress/components/writemode/writemodedesc.js

@@ -0,0 +1,32 @@
+const writingModeData = [
+  {
+    attr: 'writing-mode',
+    type: 'String',
+    value: 'horizontal-tb/vertical-rl/vertical-lr/sideways-rl/sideways-lr',
+    descption:
+      '决定文本在水平或垂直方向上如何排布horizontal-tb表示水平,vertical-rl表示垂直',
+  },
+];
+
+const tableColums = [
+  {
+    prop: 'attr',
+    label: '属性',
+  },
+  {
+    prop: 'type',
+    label: '类型',
+  },
+
+  {
+    prop: 'value',
+    label: '值',
+    width: '200px',
+  },
+  {
+    prop: 'descption',
+    label: '说明',
+  },
+];
+
+export { writingModeData, tableColums };

docs/.vuepress/configs/headConfig.js

@@ -8,7 +8,7 @@
  * @Date: 2020-06-02 07:29:20
  * @Version: xxx.v1.0
  * @LastEditors: 川川
- * @LastEditTime: 2020-07-11 09:10:23
+ * @LastEditTime: 2020-07-15 11:20:37
  * @Description:头部html中head需要引入的标签,当前文件通过module.exports导出,在config.js主入口文件中通过require导入
  */
 const baidu = require('./secretKey'); // 引入百度统计密钥ID
@@ -40,6 +40,7 @@ const headConfig = [
   ['meta', { name: 'theme-color', content: '#3eaf7c' }],
   ['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],
   ['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }],
+  ['meta', { name: 'baidu-site-verification', content: 'cShSMbDRHJ' }],
   [
     'meta', // 移动端禁止用户缩放
     {

docs/fontend/css/README.md

@@ -12,10 +12,9 @@ title:目录
 ## CSS 常见实例技巧
 
 - [文字超出末尾显示省略号](./ellipsis)
+- [文字水平及垂直方向显示排布](./text-display-layout)
 
 ## 移动端相关
 
 - [meta 标签](./meta)
 - [设备类型判断-移动端/PC 端](./mobile/device-type)
-
-<RightBar />

docs/fontend/css/flexible-box.md

@@ -2,6 +2,6 @@
 title:弹性盒模型
 ---
 
-# 弹性盒模型
+## 弹性盒模型
 
 弹性盒模型

docs/fontend/css/text-display-layout.md

@@ -0,0 +1,31 @@
+---
+title: 文字水平及垂直方向显示排布
+---
+
+## 文字水平及垂直方向显示排布
+
+## 快速导航
+
+<TOC />
+
+<writemode-writeMode />
+
+::: details 点击即可查看代码
+
+```css
+writing-mode: vertical-rl;
+-webkit-writing-mode: vertical-rl;
+-ms-writing-mode: vertical-rl;
+```
+
+:::
+
+- `horizontal-tb`:此值定义了从上到下的块流动方向,水平方向自上而下的书写方式。即 `left-right-top-bottom`。
+- `vertical-rl`：此值定义从右到左书写方式。即 `top-bottom-right-left`
+- `vertical-lr`：该值定义了从左到右的书写方式,垂直方向内内容从上到下，水平方向从左到右
+- `sideways-rl`：内容垂直方向从上到下排列
+- `sideways-lr`：内容垂直方向从下到上排列
+
+这个`writing-mode`属性在文本布局时非常方便,好用,有时候,当想要文本垂直方向显示就会用到
+
+<footer-FooterLink :isShareLink="true" :isDaShang="true" />

docs/fontend/js/README.md

@@ -13,11 +13,12 @@ title: 目录
 
 ## JS 实用正则表达式
 
-- [常见实用 JS 正则表达式](./js-regular-express)
+- [常见实用 JS 正则表达式](./reg-regular-express)
 - [js 中的正则表达式(1)](./reg-learn-1)
+- [js 中的正则表达式(2)](./reg-learn-2)
 
 ### JS 实用案例技巧
 
-- [用户姓名-手机号-中间位数用\*替代](./name-mobile-encrye)
+- [用户姓名-手机号-中间位数用\*替代](./utils-name-mobile-encrye)
 
 <footer-FooterLink :isShareLink="true" :isDaShang="true" />

docs/fontend/js/local-storage.md

@@ -2,6 +2,8 @@
 title: 本地存储
 ---
 
+## 本地存储
+
 ## 快捷导航
 
 <TOC />
@@ -31,7 +33,8 @@ function setCookie(key, value, expiredays) {
 :::
 
 - ### 删除 cookie
-  ::: details 点击即可查看代码
+
+::: details 点击即可查看代码
 
 ```js
 function delCookie(name) {

docs/fontend/js/reg-learn-1.md

@@ -1,7 +1,10 @@
 ---
-title: 正则表达式1
+title: js 中的正则表达式(1)
+autoGroup-1: 正则表达式
 ---
 
+## js 中的正则表达式(1)
+
 ## 快速导航
 
 <TOC />
@@ -609,3 +612,5 @@ console.log(pattern.exec(str)); // 因为第三个字符是c不是d,与所要的
 ## 总结
 
 正则是一个非常强大的文本匹配工具,用特殊的字符正着去匹配文本还好(其实也不简单),往往需要逆向的去折腾它,就是不在你考虑范围条件下也要考虑进去从而剔除一些程序上的漏洞,是比较难的
+
+<footer-FooterLink :isShareLink="true" :isDaShang="true" />