解决问题3

31. 离开焦点事件,校验手机号是否存在,

v-on:blur="search"
search:function(){
let self=this;
var Params={
'phone':self.ruleForm.account.trim(),
}
this.$parent.fetchData(ajaxPrefix+'open/api/login/ajaxUserPhone',Params,function(data){
// console.log(data);
rules.account.message="手机号不存在"
// alert("手机号不存在")
})
}

32.去除vue项目中的 # --- History模式

image.png

不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404。
　　所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。如果所做的项目的后端没有支持此种方式，还是先使用#的方式进行开发。
相关链接：解决vue router使用 history 模式刷新后404问题 https://www.jb51.net/article/119075.htm

33.vant的Sku 商品规格使用时选中规格显示

需求：由skudatas.selectedSku和ths.sku.tree得出： 500W 白色

---

skudatas.selectedSku = {s1: 11, s2: 9};
ths.sku.tree= [{
                "v": [{
                    "name": "200W",
                    "id": 10
                }, {
                    "name": "500W",
                    "id": 11
                }],
                "k_s": "s1",
                "k": "功率"
            }, {
                "v": [{
                    "name": "白色",
                    "id": 9
                }],
                "k_s": "s2",
                "k": "颜色"
}],
this.selectedStylesString = '已选:500W 白色'

解决方法：

/* 切换规格类目时触发 改变选择显示规格 */
        onSkuSelected(skudatas) {
            let ths = this;
            ths.selectedStyles = [];
            ths.sku.tree.forEach((value, index) => {
                value.v.forEach((valueNew, index) => {
                    if (valueNew.id === skudatas.selectedSku[value.k_s]) {
                        ths.selectedStyles.push(valueNew.name);
                    }
                });
            });
        },

selectedString() {
            if (this.selectedStyles.length >= 1) {
                var s2 = '已选:';
                this.selectedStyles.forEach(item => {
                    s2 += '"';
                    s2 += item;
                    s2 += '" ';
                });
            }
            this.selectedStylesString = s2;
        },
// 调出商品规格
        specifications() {
            this.showBase = true;
        },

watch: {
        showBase: {  // 控制是否调出商品规格
            handler: function(val, oldVal) {
                this.selectedString();
            }
        }
    }

34.商品详情加购物车和购买的逻辑：从规格 请选择进入的规格弹出层， 规格弹出层底部显示 “加入购物车” 和“立即购买” 两个按钮；从商品详情页面底部的加入购物车 或 立即购买 按钮 进入规格弹出层，规格弹出层底部显示“确定”按钮

              
规格
                    请选择
                    {{selectedStylesString}}
                
                
                    
                    
                
            

35. v-if和v-for嵌套用法

image.png

36. CSS超过n行自动显示省略号

1. CSS超过一行自动显示省略号

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

2. CSS超过多行自动显示省略号

overflow:hidden;
text-overflow:ellipsis;
white-space: normal;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2; /* 规定最多显示两行 */
}
/* 这个方法适用webkit核浏览器和手机端 */

3. CSS超过两行只显示两行

-webkit-line-clamp: 2;
 -webkit-box-orient: vertical;
overflow: hidden;