【angular5项目积累总结】breadcrumb面包屑组件

react+ant design Breadcrumb面包屑组件

import React from 'react'; import { Link }from 'react-router-dom'; import { Breadcrumb } from 'antd'; //具体导航的名称 const breadcrumbNameMap = { '/user':'用户管理', '/user/user_info':'用户信息', '/user/user_info/user_detail':'用户详情', '/user/user_pool':'用户池', '/use…

【angular5项目积累总结】breadcrumb面包屑组件

view code <div class="fxs-breadcrumb-wrapper" aria-label="Navigation history"> <div class="fxs-breadcrumb-dropmenu"> <div class="fxs-dropmenu" role="presentation"> <div class="fxs…

woocommerce隐藏breadcrumb面包屑导航

woocommerce已经集成比较完善的组件,当然也包含breadcrumb面包屑导航,但是我们如果调整一下breadcrumb的位置要如何操作呢?首先要先把woocommerce隐藏breadcrumb面包屑导航,woocommerce一般是通过hook来绑定相关操作的,我们找到/wp-content/themes/hqt/woocommerce/single-product.php文件,大概31行左右,屏蔽相关代码 // do_action( 'woocommerce_before_main…

Vue折腾记 - (2)写一个不大靠谱的面包屑组件

先看效果图我把页面标题和面包屑封装到一起..就不用涉及到组件的通讯了,不然又要去监听路由或者依赖状态去获取这里写图片描述疑惑解答: 点击父(也就是折叠菜单)为什么会跑到子菜单第一个因为我第一个子路由是空路径,也就是默认路由点击首页为什么会跑到客户管理的第一个因为根路由我写了个重定向功能点支持分隔符的传入,字符串格式标题的同步改动实现原理面包屑的文字不是通过命名路由的name实现(很多问题), 而是放到meta里面实现一个自定义name 遍历遍历遍历,比对比对比对..剩下的看…

yoast breadcrumb面包屑导航修改去掉product

前面我们创建了wordpress添加post_type自定义文章类型和调用自定义post_type文章,现在yoast 面包屑导航出现home >product >分类1,想要把product这一层隐藏要如何操作呢? 以下是相关代码修改 //yoast breadcrumb product add_filter( 'wpseo_breadcrumb_links', 'wpse_100012_override_yoast_breadcrumb_trail' ); function wpse_10…

【angular5项目积累总结】优秀组件以及应用实例

1.手机端图片预览组件组件:sideshow 效果图:(预览图全屏且可以左右移动) code: <div class="row ui-app-screenshot"> <img src="{{proUrl(pic.Url)}}" *ngFor="let pic of currApp.Pictures;let i = index;" (click)="onViewPicture(i…

【angular5项目积累总结】avatar组件

View Code import { Component, HostListener, ElementRef } from '@angular/core'; import { Adal4Service } from '../../adal/adal4.service'; export class UserProfile { name: string; roleName: string } @Component({ selector: 'avatar', templateUrl: './avata…

【angular5项目积累总结】panel组件

view code panel.component.css :host { display:flex; min-width:300px } panel.component.html <header class="fxs-blade-header fxs-header fxs-blade-border fxs-trim-border fxs-trim fxs-blade-loaded"> <div class="fxs-blade-title-content&…

【angular5项目积累总结】遇到的一些问题以及解决办法

1.项目中字符串特别是\r\n,替换成br之后,在页面换行无法生效? 答:绑定元素 innerHTML. <div class="panel-body" [innerHTML]="proTxt(iosPkg.ReleaseNotes)"></div> proTxt(txt: string) { return txt && txt.replace(/\r?\n/g, "<br />").repla…

【angular5项目积累总结】消息订阅服务

code import { Injectable } from '@angular/core'; import { Subject } from 'rxjs/Subject'; @Injectable() export class CommonService { private notify = new Subject<any>(); /** * Observable string streams */ notifyObservable$ = this.notify.asObservable(…

【angular5项目积累总结】文件上传

<div class="form-group row"> <label class="col-sm-2 col-form-label">会议Logo</label> <div class="col-sm-10"> <dx-file-uploader selectButtonText="选择图片" name="file" [multiple]="…

【angular5 项目积累总结】项目公共样式

main.css @font-face { font-family: 'wf_segoe-ui_normal'; src: local('Segoe UI'),url('../fonts/segoe-ui/west-european/normal/latest.woff2') format('woff2'),url('../fonts/segoe-ui/west-european/normal/latest.woff') format('woff'),url('../fonts/segoe-ui…

Breadcrumb 面包屑

显示当前页面的路径,快速返回之前的任意页面. 基础用法适用广泛的基础用法. 在el-breadcrumb中使用el-breadcrumb-item标签表示从首页开始的每一级.Element 提供了一个separator属性,在el-breadcrumb标签中设置它来决定分隔符,它只能是字符串,默认为斜杠/. <el-breadcrumb separator="/"> <el-breadcrumb-item :to="{ path: '/' }"&…

【angular5项目积累总结】侧栏菜单 navmenu

View Code import { Component, OnInit } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { ConfigureService } from '../../configure/configure.service'; import { Router } from '@angular/router'; @Component({ selector: 'na…

【angular5项目积累总结】结合adal4实现http拦截器（token）

import { Injectable } from '@angular/core'; import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpErrorResponse } from '@angular/common/http'; import { Observable } from "rxjs/Observable"; import { Adal4Service } from '../adal/adal4…

【angular5项目积累总结】文件下载

download() { const token = localStorage.getItem('token'); let headers: HttpHeaders = new HttpHeaders(); headers = headers .set('Authorization', 'Bearer ' + token); const url = 'http://localhost:8764/api/v1/user/downLoadZipFile'; this.http.get(url, {h…

【angular5项目积累总结】自定义管道 OrderBy

import { Injectable, Pipe } from '@angular/core'; @Pipe({ name: 'orderBy' }) @Injectable() export class OrderBy { /* Takes a value and makes it lowercase. */ static _orderByComparator(a:any, b:any):number{ if((isNaN(parseFloat(a)) || !isFinite(a)) ||…

【angular5项目积累总结】一些正则积累

/^[1-9][0-9]{0,4}$/ /^[1-9][0-9]{0,4}(,[1-9][0-9]{0,4})*$/ /^([a-zA-Z0-9_\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/ ^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$ #正则表达式#数值加上千分符 '1234567890.12'.replace(/(\d)(?=(\d{3})+(\.|$))/g, '$1,')==='1,234…

【angular5项目积累总结】http请求服务封装

http.provider.ts import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Observable } from "rxjs/Observable"; @Injectable() export class HttpProvider { constructor( private httpClient: HttpClient,…

【angular5项目积累总结】表单复杂校验

view code form.css :host { display: flex; width: 100%; height:100%; border-left:1px solid #ccc; } .invalid-box { border: 1px solid #a94442; } .invalid-error-tip { color: #a94442; } .select-box { width:308px; height: 22px; } label { line-height:20px;…

【angular5项目积累总结】列表多选样式框(2)

view code list.css :host { display: flex; width: 100%; border-left: 1px solid #ccc; font: normal 12px/20px \5B8B\4F53, Arial, Verdana, Lucida, Helvetica, simsun, sans-serif; } ul { margin:; padding:; } .version-container { width: 100%; overflow-x: hi…