一、过滤器

1-1 私有过滤器

  1. <script>
  2.     // 创建 Vue 实例，得到 ViewModel
  3.     var vm = new Vue({
  4.       el: '#app',
  5.       data: {
  6.         msg: '曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男人'
  7.       },
  8.       methods: {},
  9.       filters: { 
  10.         // 过滤器的三个参数：1.要过滤的文本   2.过滤的内容   3.替换的内容
  11.         // 过滤器调用的时候，采用的是就近原则，如果私有过滤器和全局过滤器名称一致了，这时候优先调用私有过滤器
  12.         msgFormat: function (msg, arg, arg2) {
  13.            // 字符串的  replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则
  14.            return msg.replace(/少年/g, arg + arg2)
  15.         }
  16.       },
  17.     });
  18. </script>

使用：

  1. <p>{{ msg | msgFormat('疯狂+1', '123') | test }}</p>

1-2 全局过滤器

  1.  // 定义一个 Vue 全局的过滤器，名字叫做  msgFormat
  2.     Vue.filter('msgFormat', function (msg, arg, arg2) {
  3.       // 字符串的  replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则
  4.       return msg.replace(/单纯/g, arg + arg2)
  5.     })

示例：

  1. //main.js
  2. Vue.filter("format",function(val){
  3.   if(val.length>6){
  4.     val = val.slice(0,6)+"..."
  5.   }
  6.   return val
  7. })
  1. <div id="app">
  2.         {{msg|format(2)}}
  3.     </div>
  4.     <script>
  5.             var vm=new Vue({
  6.                 el:"#app",
  7.                 data:{
  8.                     msg:99.5484951
  9.                 },
  10.                 filters:{
  11.                     // val就是msg   params就是管道修饰符后面函数传递过来的参数。
  12.                     format(val,params){
  13.                         return "￥"+val.toFixed(params);
  14.                     }
  15.                 }
  16.             })

1-3 常用的过滤器

  1. //1.去除空格  type 1-所有空格  2-前后空格  3-前空格 4-后空格
  2. function trim(value, trim) {
  3.     switch (trim) {
  4.         case 1:
  5.             return value.replace(/\s+/g, "");
  6.         case 2:
  7.             return value.replace(/(^\s*)|(\s*$)/g, "");
  8.         case 3:
  9.             return value.replace(/(^\s*)/g, "");
  10.         case 4:
  11.             return value.replace(/(\s*$)/g, "");
  12.         default:
  13.             return value;
  14.     }
  15. }
  17. //2.任意格式日期处理
  18. //使用格式：
  19. // {{ '2018-09-14 01:05' | formaDate(yyyy-MM-dd hh:mm:ss) }} 
  20. // {{ '2018-09-14 01:05' | formaDate(yyyy-MM-dd) }} 
  21. // {{ '2018-09-14 01:05' | formaDate(MM/dd) }} 等
  22. function formaDate(value, fmt) {
  23.     var date = new Date(value);
  24.     var o = {
  25.       "M+": date.getMonth() + 1, //月份
  26.       "d+": date.getDate(), //日
  27.       "h+": date.getHours(), //小时
  28.       "m+": date.getMinutes(), //分
  29.       "s+": date.getSeconds(), //秒
  30.       "w+": date.getDay(), //星期
  31.       "q+": Math.floor((date.getMonth() + 3) / 3), //季度
  32.       "S": date.getMilliseconds() //毫秒
  33.     };
  34.     if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
  35.     for (var k in o) {
  36.       if(k === 'w+') {
  37.         if(o[k] === 0) {
  38.           fmt = fmt.replace('w', '周日');
  39.         }else if(o[k] === 1) {
  40.           fmt = fmt.replace('w', '周一');
  41.         }else if(o[k] === 2) {
  42.           fmt = fmt.replace('w', '周二');
  43.         }else if(o[k] === 3) {
  44.           fmt = fmt.replace('w', '周三');
  45.         }else if(o[k] === 4) {
  46.           fmt = fmt.replace('w', '周四');
  47.         }else if(o[k] === 5) {
  48.           fmt = fmt.replace('w', '周五');
  49.         }else if(o[k] === 6) {
  50.           fmt = fmt.replace('w', '周六');
  51.         }
  52.       }else if (new RegExp("(" + k + ")").test(fmt)) {
  53.         fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
  54.       }
  55.     }
  56.     return fmt;
  57.   }
  60. //3.字母大小写切换
  61. /*type
  62.  1:首字母大写
  63.  2：首页母小写
  64.  3：大小写转换
  65.  4：全部大写
  66.  5：全部小写
  67.  * */
  68. function changeCase(str, type) {
  69.     function ToggleCase(str) {
  70.         var itemText = ""
  71.         str.split("").forEach(
  72.             function (item) {
  73.                 if (/^([a-z]+)/.test(item)) {
  74.                     itemText += item.toUpperCase();
  75.                 } else if (/^([A-Z]+)/.test(item)) {
  76.                     itemText += item.toLowerCase();
  77.                 } else {
  78.                     itemText += item;
  79.                 }
  80.             });
  81.         return itemText;
  82.     }
  83.     switch (type) {
  84.         case 1:
  85.             return str.replace(/\b\w+\b/g, function (word) {
  86.                 return word.substring(0, 1).toUpperCase() + word.substring(1).toLowerCase();
  87.             });
  88.         case 2:
  89.             return str.replace(/\b\w+\b/g, function (word) {
  90.                 return word.substring(0, 1).toLowerCase() + word.substring(1).toUpperCase();
  91.             });
  92.         case 3:
  93.             return ToggleCase(str);
  94.         case 4:
  95.             return str.toUpperCase();
  96.         case 5:
  97.             return str.toLowerCase();
  98.         default:
  99.             return str;
  100.     }
  101. }
  103. //4.字符串循环复制,count->次数
  104. function repeatStr(str, count) {
  105.     var text = '';
  106.     for (var i = 0; i < count; i++) {
  107.         text += str;
  108.     }
  109.     return text;
  110. }
  112. //5.字符串替换
  113. function replaceAll(str, AFindText, ARepText) {
  114.     raRegExp = new RegExp(AFindText, "g");
  115.     return str.replace(raRegExp, ARepText);
  116. }
  118. //字符替换*，隐藏手机号或者身份证号等
  119. //replaceStr(字符串,字符格式, 替换方式,替换的字符（默认*）)
  120. //ecDo.replaceStr('18819322663',[3,5,3],0)
  121. //result：188*****663
  122. //ecDo.replaceStr('asdasdasdaa',[3,5,3],1)
  123. //result：***asdas***
  124. //ecDo.replaceStr('1asd88465asdwqe3',[5],0)
  125. //result：*****8465asdwqe3
  126. //ecDo.replaceStr('1asd88465asdwqe3',[5],1,'+')
  127. //result："1asd88465as+++++"
  129. function replaceStr(str, regArr, type, ARepText) {
  130.     var regtext = '',
  131.         Reg = null,
  132.         replaceText = ARepText || '*';
  133.     //repeatStr是在上面定义过的（字符串循环复制），大家注意哦
  134.     if (regArr.length === 3 && type === 0) {
  135.         regtext = '(\\w{' + regArr[0] + '})\\w{' + regArr[1] + '}(\\w{' + regArr[2] + '})'
  136.         Reg = new RegExp(regtext);
  137.         var replaceCount = this.repeatStr(replaceText, regArr[1]);
  138.         return str.replace(Reg, '$1' + replaceCount + '$2')
  139.     }
  140.     else if (regArr.length === 3 && type === 1) {
  141.         regtext = '\\w{' + regArr[0] + '}(\\w{' + regArr[1] + '})\\w{' + regArr[2] + '}'
  142.         Reg = new RegExp(regtext);
  143.         var replaceCount1 = this.repeatStr(replaceText, regArr[0]);
  144.         var replaceCount2 = this.repeatStr(replaceText, regArr[2]);
  145.         return str.replace(Reg, replaceCount1 + '$1' + replaceCount2)
  146.     }
  147.     else if (regArr.length === 1 && type === 0) {
  148.         regtext = '(^\\w{' + regArr[0] + '})'
  149.         Reg = new RegExp(regtext);
  150.         var replaceCount = this.repeatStr(replaceText, regArr[0]);
  151.         return str.replace(Reg, replaceCount)
  152.     }
  153.     else if (regArr.length === 1 && type === 1) {
  154.         regtext = '(\\w{' + regArr[0] + '}$)'
  155.         Reg = new RegExp(regtext);
  156.         var replaceCount = this.repeatStr(replaceText, regArr[0]);
  157.         return str.replace(Reg, replaceCount)
  158.     }
  159. }
  161. //6.格式化处理字符串
  162. //ecDo.formatText('1234asda567asd890')
  163. //result："12,34a,sda,567,asd,890"
  164. //ecDo.formatText('1234asda567asd890',4,' ')
  165. //result："1 234a sda5 67as d890"
  166. //ecDo.formatText('1234asda567asd890',4,'-')
  167. //result："1-234a-sda5-67as-d890"
  168. function formatText(str, size, delimiter) {
  169.     var _size = size || 3, _delimiter = delimiter || ',';
  170.     var regText = '\\B(?=(\\w{' + _size + '})+(?!\\w))';
  171.     var reg = new RegExp(regText, 'g');
  172.     return str.replace(reg, _delimiter);
  173. }
  175. //7.现金额大写转换函数
  176. //ecDo.upDigit(168752632)
  177. //result："人民币壹亿陆仟捌佰柒拾伍万贰仟陆佰叁拾贰元整"
  178. //ecDo.upDigit(1682)
  179. //result："人民币壹仟陆佰捌拾贰元整"
  180. //ecDo.upDigit(-1693)
  181. //result："欠人民币壹仟陆佰玖拾叁元整"
  182. function upDigit(n) {
  183.     var fraction = ['角', '分', '厘'];
  184.     var digit = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'];
  185.     var unit = [
  186.         ['元', '万', '亿'],
  187.         ['', '拾', '佰', '仟']
  188.     ];
  189.     var head = n < 0 ? '欠人民币' : '人民币';
  190.     n = Math.abs(n);
  191.     var s = '';
  192.     for (var i = 0; i < fraction.length; i++) {
  193.         s += (digit[Math.floor(n * 10 * Math.pow(10, i)) % 10] + fraction[i]).replace(/零./, '');
  194.     }
  195.     s = s || '整';
  196.     n = Math.floor(n);
  197.     for (var i = 0; i < unit[0].length && n > 0; i++) {
  198.         var p = '';
  199.         for (var j = 0; j < unit[1].length && n > 0; j++) {
  200.             p = digit[n % 10] + unit[1][j] + p;
  201.             n = Math.floor(n / 10);
  202.         }
  203.         s = p.replace(/(零.)*零$/, '').replace(/^$/, '零') + unit[0][i] + s;
  204.         //s = p + unit[0][i] + s;
  205.     }
  206.     return head + s.replace(/(零.)*零元/, '元').replace(/(零.)+/g, '零').replace(/^整$/, '零元整');
  207. } 
  209. //8.保留2位小数
  210. function toDecimal2(x){
  211.   var f = parseFloat(x);
  212.   if (isNaN(f)) {
  213.     return false;
  214.   }
  215.   var f = Math.round(x * 100) / 100;
  216.   var s = f.toString();
  217.   var rs = s.indexOf('.');
  218.   if (rs < 0) {
  219.     rs = s.length;
  220.     s += '.';
  221.   }
  222.   while (s.length <= rs + 2) {
  223.     s += '0';
  224.   }
  225.   return s;
  226. }
  228. export{
  229.     trim,
  230.     changeCase,
  231.     repeatStr,
  232.     replaceAll,
  233.     replaceStr,
  234.     checkPwd,
  235.     formatText,
  236.     upDigit,
  237.     toDecimal2,
  238.     formaDate
  239. }

二、插槽

插槽使用场景是：子组件需要显示的内容并非来自本身而是父组件动态传递进来的，插槽的内容具体是什么是由父视图在调用的时候决定的 

  1. //组件
  2. <slot name="header"></slot>
  4. //index.vue
  5. <bs-btn>
  6.     <p slot="header">hello world</p>
  7. </bs-btn>

三、在组件中使用全局常量

第一步，在 src 下新建 const 文件夹下 新建 const.js，并在const.js中设置常量

  1. .
  2. ├── src
  3. │   ├── const
  4. │   │    ├── const.js
  5. │   │    
  6. │   └── main.js
  7. └── ...
  10. //const.js
  11. export default {
  12.     install(Vue,options){
  13.         Vue.prototype.global = {
  14.             title:'全局',
  15.             isBack: true,
  16.             isAdd:  false,
  17.         };
  18.     }
  19. }

第二步，在 main.js 下全局引入：

  1. //引入全局常量
  2. import constant from './const/const.js'
  3. Vue.use(constant);

第三步，即可在 .vue 组件中使用：

  1. //通过js方式使用：
  2. this.global.title
  3. //或在 html 结构中使用
  4. {{global.title}}