解决问题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.商品详情加购物车和购买的逻辑：从规格 请选择进入的规格弹出层， 规格弹出层底部显示 “加入购物车” 和“立即购买” 两个按钮；从商品详情页面底部的加入购物车 或 立即购买 按钮 进入规格弹出层，规格弹出层底部显示“确定”按钮

<div class="specifications" @click="specifications()" v-if="sku">
              <P>规格
                    <span class="notchoosed" v-if="selectedStyles.length === 0">请选择</span>
                    <span class="choosed" v-if="selectedStyles.length !== 0">{{selectedStylesString}}</span>
                </P>
                <van-sku v-model="showBase" :sku="sku" :goods="goods" :goods-id="goodsId" :hide-stock="sku.hide_stock" :quota="quota" :quota-used="quotaUsed" :reset-stepper-on-hide="resetStepperOnHide" :reset-selected-sku-on-hide="resetSelectedSkuOnHide" :close-on-click-overlay="closeOnClickOverlay" :disable-stepper-input="disableStepperInput" @add-cart="onAddCartClicked" @buy-clicked="onBuyClicked" @sku-selected="onSkuSelected">
                    <template slot="van-sku-stepper-stock" slot-scope="props">
                        <div class="van-sku-stepper-container">
                            <span class="van-sku__price-symbol">￥</span>
                            <span class="van-sku__price-num">{{ props.price }}</span>
                        </div>
                    </template>
                    <template slot="sku-actions" slot-scope="props">
                        <div class="van-sku-actions">
                            <van-button v-if="isgocart === 1 || isgocart === 2" type="primary" bottom-action @click="props.skuEventBus.$emit('sku:buy')">确定</van-button>
                            <van-button v-if="isgocart === 0" type="primary" bottom-action style="border-radius: 40px 0px 0px 40px;background-color: #ffbe2b;border:none;" @click="props.skuEventBus.$emit('sku:addCart')">加入购物车</van-button>
                            <van-button v-if="isgocart === 0" type="primary" bottom-action style="border-radius: 0px 40px 40px 0px;background-color: #EE2E50;border:none;" @click="props.skuEventBus.$emit('sku:buy')">立即购买</van-button>
                        </div>
                    </template>
                </van-sku>
            </div>

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

<template v-if><div v-for></div></template>

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;