angual4.x 常用收集规整

• 0 日期格式化

<td>
                            <div class="td-li">
                                {{i.settled_in_time*1000 | date:'yyyy-MM-dd'}}
                            </div>
                        </td>

• 1 空标签

<ng-container *ngIf="v.list"> </ng-container>

*6 如何禁止输入框记录输入记录，双击input出现输入过的记录

<input type="text" name="htmer" autocomplete="off" />

• 2 鼠标手型效果：

style="cursor:pointer"

• 3 字体红色

class="ori-text"

• 4 导航栏带路由

<div class="screen-box">
        <div class="date-box clearfix" style="width: 100%;height: auto;position: relative">
            <!--<span class="ori-text" style="position: absolute;top: 0">会员</span>-->
            <!--<a href="javascript:void(0)" class="tl-btn" routerLink="/cards/cardslist"
               style="float: right;line-height: 20px;margin-right: 36px">
                &emsp;次卡记录&emsp;
            </a>-->
            <ul class="nav clearfix">
                <li><a  [routerLink]="['/member']" class="gray-text">会员</a><span class="arrow gray-text">></span></li>
                <li>
                    <a [routerLink]="['/member/page/shopping', memberId]" class="arrow gray-text">{{memberName || '--'}}</a>
                    <span class="arrow gray-text">></span>
                </li>
                <li class="ori-text">购物卡流水列表</li>
            </ul>
        </div>

    </div>

• 5

var str = `退款方式与支付方式(${ds.join('、')})不一致，是否确认退款？`
            layer.confirm(str, index => {
                send()
            })

• 6 清除input输入框的历史记录 autocomplete="off"

<form action="demo_form.asp" method="get">
  E-mail: <input type="email" name="email" autocomplete="off" /><br />
  <input type="submit" />
</form>

• 8 输入框input类型为number时，去掉上下箭头方式

input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }
    input[type="number"]{
        -moz-appearance: textfield;
    }

• 7 配置随机颜色

<div  *ngFor="let item of listData;let num = index"  class="tl-card tl-color-{{num%4}}">

• 8
  单行省略号
  这样就可以在超出容器宽度的情况下显示省略号, 如果容器没有宽度限制, 也可以加上width属性为容器增加宽度限制

#root {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

多行省略号
因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端, 其中高度不需要指定, 通过line-clamp来指定要在第几行出现省略号

#root {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

css 超出隐藏

.over-ell {
  /*display:block;*/
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

欢迎关注公众号：

00000.jpg

欢迎加群交流：

洛水河界群二维码.png