【快捷键配置】常用HTML类名、CSS样式名称、JS方法变量名、vue代码片段

简介: 【快捷键配置】常用HTML类名、CSS样式名称、JS方法变量名、vue代码片段


 
x=1,----------------------------------------
 
rev=1,.reverse()
dg=1,debugger
 
 
sgh=1,sg-head
sgb=1,sg-body
sgm=1,sg-main
sgf=1,sg-foot
 
sgt=1,sg-top
sgl=1,sg-left
sgmd=1,sg-mid
sgr=1,sg-right
sgbt=1,sg-bottom
 
sgo=1,sg-outer
sgi=1,sg-inner
sglo=1,sg-layout
sgrt=1,sg-root
sgcd=1,sg-card
sgcr=1,sg-container
sgp=1,sg-panel
sgd=1,sg-dialog
sgpp=1,sg-popup
sgmo=1,sg-modal
sgmb=1,sg-messagebox
sga=1,sg-alert
 
 
sgq=1,sg-qrcode
sgbo=1,sg-border
sgic=1,sg-icon
sglk=1,sg-link
sgn=1,sg-nav
sgmn=1,sg-menu
sgbr=1,sg-banner
sgsp=1,sg-swiper
sgca=1,sg-carousel
sgco=1,sg-collapse
sgtl=1,sg-timeline
sgim=1,sg-image
sgbp=1,sg-backtop
sgdr=1,sg-drawer
sgdv=1,sg-divider
sgcal=1,sg-calendar
sgsw=1,sg-switch
sgdt=1,sg-datetime
sgrd=1,sg-radio
sgrdg=1,sg-radio-group
sgck=1,sg-checkbox
sgckg=1,sg-checkbox-group
sgc=1,sg-color
sglb=1,sg-label
sgte=1,sg-text
sgbtn=1,sg-button
sgin=1,sg-input
sgta=1,sg-textarea
sght=1,sg-html
sgfm=1,sg-form
sgup=1,sg-upload
sgpr=1,sg-progeress
sgld=1,sg-loading
sglt=1,sg-list
sgcol=1,sg-collection
sgrw=1,sg-row
sgcl=1,sg-col
sgtb=1,sg-table
sgtg=1,sg-tag
sgav=1,sg-avatar
sgba=1,sg-badge
sgtr=1,sg-tree
sgpa=1,sg-pagination
sgph=1,sg-pageHeader
sgdd=1,sg-dropdown
sgsts=1,sg-steps
sgst=1,sg-step
sgtt=1,sg-tooltip
sgse=1,sg-select
sgsk=1,sg-skeleton
sgem=1,sg-empty
sgra=1,sg-rate
sgme=1,sg-message
sgno=1,sg-notification
sgtabs=1,sg-tabs
sgtab=1,sg-tab
sgbc=1,sg-Breadcrumb
sgds=1,sg-description
sgde=1,sg-detail
 
szz=1,Items
szz=2,List
szz=3,Options
ga=1,global
oj=1,Object
lb=1,label
te=1,title
ste=1,subTitle
dt=1,datetime
des=1,description
det=1,detail
ava=1,Avatar
dlg=1,dialog
ct=1,Component
 
fg=1,--------华丽分割线--------
 
djs=1,/*倒计时天时分秒毫秒*/let t = Math.abs(new Date("2022-10-24 00:00:00") - new Date());let t1 = `${parseInt(t / 86400000)}天${parseInt(t / 3600000 % 24)}时${parseInt(t / 60000 % 60)}分${parseInt(t / 1000 % 60)}秒${parseInt(t % 1000)}毫秒`;
djs=2,/*倒计时00:00:00:00:0000*/let t = Math.abs(new Date("2022-10-24 00:00:00") - new Date());let t2 = `${parseInt(t / 86400000).toString().padStart(2, "0")}:${parseInt(t / 3600000 % 24).toString().padStart(2, "0")}:${parseInt(t / 60000 % 60)}:${parseInt(t / 1000 % 60).toString().padStart(2, "0")}:${parseInt(t % 1000).toString().padStart(4, "0")}`;
 
zf=1,:'',
kz=1,:null,
dx=1,:{    },
dx=2,={    };
sz=1,:[    ],
sz=2,=[    ];
kh=1,(    )
kh=2,[    ]
kh=3,{    }
yh=1,`
dd=1,`文本${a.value}文本`
hh=1,{{    }}
kk=1,${    }
k=1,{$(CRLF)$(CRLF)$(CRLF)}
bd=1,{{a.value}}
bd=2,${a.value}
fsi=1,font-style: italic;
fsn=1,font-style: normal;
cb=1,cb&&cb(d);
bgc=1,background-color: #000000;
wat=2,data (v) {console.log('监听字符串:', v);},
wat=3,data:{handler (v) {console.log('深度监听:', v);},deep: true}
pro=1,props: ["data"],
asd=1,AstonMartin
mas=1,Maserati
gt=1,GranTurismo
md=1,MassimoDutti
bgs=1,background-size: cover;
bac=1,background
ld=1,loading
lsn=1,list-style: none;
ex=1,explorer.exe
r=1,return 
rr=1,return r;
rt=1, if (true) return ;
rg=1,if (a == b) {$(CRLF)$(CRLF)} else {$(CRLF)$(CRLF)}
rep=1,$(CRLF).replace(/{形参}/g, 实参)
mxw=1,max-width: 100px;
mxw=2,max-width: 200px;
mxw=3,max-width: 300px;
mxw=4,max-width: 50%;
mxw=5,max-width: 100%;
mxh=1,max-height: 100px;
mxh=2,max-height: 200px;
mxh=3,max-height: 300px;
mxh=4,max-height: 50%;
mxh=5,max-height: 100%;
mnw=1,min-width: 100px;
mnw=2,min-width: 200px;
mnw=3,min-width: 300px;
mnw=4,min-width: 50%;
mnw=5,min-width: 100%;
mnh=1,min-height: 100px;
mnh=2,min-height: 200px;
mnh=3,min-height: 300px;
mnh=4,min-height: 50%;
mnh=5,min-height: 100%;
mnwc=1,min-width:calc(100% - 100px);
mnwc=2,min-width:calc(100vw - 100px);
mnwc=3,min-width:calc(50% - 100px);
mnwc=4,min-width:calc(33.3% - 100px);
mnwc=5,min-width:calc(25% - 100px);
mnhc=1,min-height:calc(100% - 100px);
mnhc=2,min-height:calc(100vh - 100px);
mnhc=3,min-height:calc(50% - 100px);
mnhc=4,min-height:calc(33.3% - 100px);
mnhc=5,min-height:calc(25% - 100px);
mxwc=1,max-width:calc(100% - 100px);
mxwc=2,max-width:calc(100vw - 100px);
mxwc=3,max-width:calc(50% - 100px);
mxwc=4,max-width:calc(33.3% - 100px);
mxwc=5,max-width:calc(25% - 100px);
mxhc=1,max-height:calc(100% - 100px);
mxhc=2,max-height:calc(100vh - 100px);
mxhc=3,max-height:calc(50% - 100px);
mxhc=4,max-height:calc(33.3% - 100px);
mxhc=5,max-height:calc(25% - 100px);
zi=1,z-index:1;
zi=2,z-index:-1;
zi=3,z-index:0;
zi=4,z-index:999;
zi=5,z-index:999999;
yr=1,@import "~@/css/sg";
fse=1,font-size: 14px;
fse=2,font-size: 16px;
fse=3,font-size: 18px;
fse=4,font-size: 20px;
fse=5,font-size: 24px;
fse=6,font-size: 12px;
cl=1, class="" 
cl=2, :class="a.className" 
ck=1, @click="" 
or=1, @mouseover="" 
ot=1, @mouseout="" 
mdo=1, @mousedown="" 
mup=1, @mouseup="" 
mw=1, @mousewheel="" 
l=1,let r=0;
l=2,let r=[    ];
l=3,const param='AAA';
l=4,let func = (d: any) => {  $(CRLF)$(CRLF)$(CRLF)};
lht=1,line-height: 1.6;
lht=2,line-height: 1.2;
lht=3,line-height: 14px;
lht=4,line-height: 20px;
lht=5,line-height: 28px;
fwb=1,font-weight: bold;
fwn=1,font-weight: normal;
qz=1,!important
sg=1,this.$g.
t=1,this.
bl=1,##409EFF
gr=1,##67C23A
ora=1,##E6A23C
red=1,##F56C6C
gra=1,##909399
gra=2,##606266
gra=3,##C0C4CC
gra=4,##DCDFE6
gra=5,##E4E7ED
gra=6,##EBEEF5
gra=7,##F2F6FC
bla=1,##303133
co=1,color:#666;
co=2,color:black;
co=3,color:gray;
co=4,color:lightgray;
co=5,color:red;
ax=1,& > * {$(CRLF)$(CRLF)$(CRLF) }$(CRLF)
ax=2, * {$(CRLF)$(CRLF)$(CRLF) }$(CRLF)
ad=1,& > div {$(CRLF)$(CRLF)$(CRLF) }$(CRLF)
wb=1,word-break: break-all;white-space: normal;
ww=1,word-wrap: break-word;white-space: normal;
tol=1,.toLocaleLowerCase()
tol=2,.toLocaleUpperCase()
tlu=1,toLocaleUpperCase
tll=1,toLocaleLowerCase
fww=1,flex-wrap:wrap;
fww=2,flex-wrap:wrap-reverse;
fwn=2,flex-wrap: no-wrap;
fdc=1,flex-direction: column;
fdc=2,flex-direction: column-reverse;
fdr=1,flex-direction: row;
fdr=2,flex-direction: row-reverse;
coo=1,const getCookie = key => {let k = key, dc = document.cookie;if (dc.length > 0) {let s = dc.indexOf(k + "=");if (s != -1) {s = s + k.length + 1;let e = dc.indexOf(";", s);(e == -1 && (e = dc.length));return unescape(dc.substring(s, e));}}return "";};
coo=2,const getAllCookes = () => {let arr = unescape(document.cookie).split("; "), o = {};for (let i = 0, len = arr.length; i < len; i++) {let a = arr[i], index = a.indexOf("="), b = a.substr(0, index), c = a.substr(index + 1);o[b] = c;}return o;};
coo=3,const setCookie = (key, val, seconds = 24 * 60 * 60, path, domain) => {if (val == null || val == undefined) return;let k = key, s = seconds, e = new Date();e.setSeconds(e.getSeconds() + s);val instanceof Array && (val = val.join("||")), val instanceof Object && (val = JSON.stringify(val));document.cookie = `${k}=${escape(val.toString())}${s == null ? "" : ";expires=" + e.toGMTString()};path=/${path || ""};domain=${domain || location.hostname}`;};
coo=4,const delCookie = (key, path, domain) => {let k = key, val = getCookie(k);if (val != null) document.cookie = `${k}=0;expires=${new Date(0).toGMTString()};path=/${path || ""};domain=${domain || location.hostname}`;};
coo=5,const delAllCookies = (path, domain) => {let ks = document.cookie.match(/[^ =;]+(?=\=)/g);if (ks) {for (let i = ks.length; i--;) (k = ks[i], document.cookie = `${k}=0;expires=${new Date(0).toGMTString()};path=/${path || ""};domain=${domain || location.hostname}`);}};
url=1,const getUrlParam = a => (a = location.search.substr(1).match(new RegExp(`(^|&)${a}=([^&]*)(&|$)`)),a?a[2]:null);
url=2,const getUrlParams = url => {let reg = /([^=&\s]+)[=\s]*([^&\s]*)/g, ls = url || location.search.substr(1), obj = {};while (reg.exec(ls)) obj[RegExp.$1] = decodeURIComponent(RegExp.$2);return obj;};
pen=1,pointer-events: none;
pea=1,pointer-events: auto;
opa=1,opacity: 1; pointer-events: auto;
opn=1,opacity: 0;pointer-events: none;
wat=1,watch: {$(CRLF)$(CRLF)},$(CRLF)
com=1,components: {$(CRLF)$(CRLF)},$(CRLF)
com=2,computed: {$(CRLF)$(CRLF)},$(CRLF)
cr=1,created() {$(CRLF)$(CRLF)},$(CRLF)
mo=1,mounted() {$(CRLF)$(CRLF)},$(CRLF)
me=1,methods: {$(CRLF)$(CRLF)},$(CRLF)
lo=1,v-loading="loading"
lo=2,loading:true,
lo=3,this.loading=false;
loa=1,showLoad() { this.load = this.$loading({ text: "加载中…" }); },$(CRLF) hideLoad() { this.load && this.load.close(); },
loa=2,const loading=this.$loading({lock: true,text: "加载中…",spinner: "el-icon-loading",background: "rgba(0,0,0,0.7)"});setTimeout(()=> {loading.close();},2000);
tac=1,text-align: center;
tal=1,text-align: left;
tar=1,text-align: right;
taj=1,text-align: justify;
bdw=1,border-width: 1px;
bds=1,border-style: dashed;
bdc=1,border-color: #000;
cs=1,this.init();
csh=1,//初始化$(CRLF)init(d){$(CRLF)$(CRLF)$(CRLF)},
sea=1,//搜索$(CRLF)search(d) {$(CRLF)this.currentPage = 1;$(CRLF)this.init();$(CRLF)},$(CRLF)
res=1,//重置$(CRLF)reset(d){$(CRLF)//相关参数归零$(CRLF)$(CRLF)this.currentPage = 1;$(CRLF)this.init();$(CRLF)},$(CRLF)
lll=1,left:0;
lll=2,left:10px;
lll=3,left:20px;
lll=4,left:30px;
lll=5,left:40px;
rrr=1,right:0;
rrr=2,right:10px;
rrr=3,right:20px;
rrr=4,right:30px;
rrr=5,right:40px;
ttt=1,top:0;
ttt=2,top:10px;
ttt=3,top:20px;
ttt=4,top:30px;
ttt=5,top:40px;
bbb=1,bottom:0;
bbb=2,bottom:10px;
bbb=3,bottom:20px;
bbb=4,bottom:30px;
bbb=5,bottom:40px;
www=1,width:100%;
www=2,width:50%;
www=3,width:33.3%;
www=4,width:25%;
www=5,width:20%;
hhh=1,height:100%;
hhh=2,height:50%;
hhh=3,height:33.3%;
hhh=4,height:25%;
hhh=5,height:20%;
wc=1,width:calc(100% - 100px);
wc=2,width:calc(100vw - 100px);
wc=3,width:calc(50% - 100px);
wc=4,width:calc(33.3% - 100px);
wc=5,width:calc(25% - 100px);
hc=1,height:calc(100% - 100px);
hc=2,height:calc(100vh - 100px);
hc=3,height:calc(50% - 100px);
hc=4,height:calc(33.3% - 100px);
hc=5,height:calc(25% - 100px);
fsk=1,flex-shrink:0;
fsk=2,flex-shrink:1;
mp=1,.map(v => v.字段名);//返回对象数组中指定字段值的一位数组(不改变原始数组)
fe=1,.forEach((v,i,ar) => {$(CRLF)console.log(v,i,ar)$(CRLF)$(CRLF)});
ar=1,Array.isArray(ar)
ar=2,[].slice.call(document.querySelectorAll("div")) 
so=1,.sort((prev, next) => next.降序字段 - prev.降序字段);//从大到小降序(会改变原数组)
so=2,.sort((prev, next) => prev.升序字段 - next.升序字段);//从小到大升序(会改变原数组)
max=1,Math.max(...ar)
max=2,.sort((prev, next) => next.最大值字段名 - prev.最大值字段名)[0]
min=1,Math.min(...ar)
min=2,.sort((prev, next) => prev.最小值字段名 - next.最小值字段名)[0]
fd=1,.find(v => v.字段名 == "唯一匹配值");//查找返回单个对象
fd=2,.findIndex(v => v.字段名 == "唯一匹配值");//查找返回单个对象
cx=1,.filter((v,i,ar) => v.字段名=="多个匹配值");//查询返回数组
ppp=1,padding:0;
ppp=2,padding:5px;
ppp=3,padding:10px;
ppp=4,padding:20px;
ppp=5,padding:50px;
pd=1,padding:0;
pd=2,padding:5px;
pd=1,padding:10px;
pd=2,padding:20px;
pd=3,padding30px;
pd=4,padding:40px;
pd=5,padding:50px;
ptt=1,padding-top:0;
ptt=2,padding-top:5px;
pt=1,padding-top:10px;
pt=2,padding-top:20px;
pt=3,padding-top:30px;
pt=4,padding-top:40px;
pt=5,padding-top:50px;
prr=1,padding-right:0;
prr=2,padding-right:5px;
pr=1,padding-right:10px;
pr=2,padding-right:20px;
pr=3,padding-right:30px;
pr=4,padding-right:40px;
pr=5,padding-right:50px;
pbb=1,padding-bottom:0;
pbb=2,padding-bottom:5px;
pb=1,padding-bottom:10px;
pb=2,padding-bottom:20px;
pb=3,padding-bottom:30px;
pb=4,padding-bottom:40px;
pb=5,padding-bottom:50px;
pll=1,padding-left:0;
pll=2,padding-left:5px;
pl=1,padding-left:10px;
pl=2,padding-left:20px;
pl=3,padding-left:30px;
pl=4,padding-left:40px;
pl=5,padding-left:50px;
mat=1,margin:0 auto;
mmm=1,margin:0;
mmm=2,margin:5px;
mmm=3,margin:10px;
mmm=4,margin:20px;
mmm=5,margin:50px;
mtt=1,margin-top:0;
mtt=2,margin-top:5px;
mtt=3,margin-top:-5px;
mtt=4,margin-top:-10px;
mtt=5,margin-top:-20px;
mt=1,margin-top:10px;
mt=2,margin-top:20px;
mt=3,margin-top:30px;
mt=4,margin-top:40px;
mt=5,margin-top:50px;
mrr=1,margin-right:0;
mrr=2,margin-right:5px;
mrr=3,margin-right:-5px;
mrr=4,margin-right:-10px;
mrr=5,margin-right:-20px;
mr=1,margin-right:10px;
mr=2,margin-right:20px;
mr=3,margin-right:30px;
mr=4,margin-right:40px;
mr=5,margin-right:50px;
mll=1,margin-left:0;
mll=2,margin-left:5px;
mll=3,margin-left:-5px;
mll=4,margin-left:-10px;
mll=5,margin-left:-20px;
ml=1,margin-left:10px;
ml=2,margin-left:20px;
ml=3,margin-left:30px;
ml=4,margin-left:40px;
ml=5,margin-left:50px;
mbb=1,margin-bottom:0;
mbb=2,margin-bottom:5px;
mbb=3,margin-bottom:-5px;
mbb=4,margin-bottom:-10px;
mbb=5,margin-bottom:-20px;
mb=1,margin-bottom:10px;
mb=2,margin-bottom:20px;
mb=3,margin-bottom:30px;
mb=4,margin-bottom:40px;
mb=5,margin-bottom:50px;
mla=1,margin-left:auto;
poa=1,position: absolute;
por=1,position: relative;
be=1,&::before { content: ""; $(CRLF)$(CRLF)}
af=1,&::after { content: ""; $(CRLF)$(CRLF)}
op=1,opacity: 0;
op=2,opacity: 0.382;
op=3,opacity: 0.618;
op=4,opacity: 0.9;
op=5,opacity: 1;
ae=1, active 
ae=2, :active="a.active" 
at=1,&[active] { $(CRLF)$(CRLF)$(CRLF) }
ac=1,&:active { $(CRLF)transform: translate(1px, 1px); $(CRLF)$(CRLF)}
ac=2,&:active,&[active] { $(CRLF)$(CRLF)$(CRLF)}
xs=1, :show="show" 
xs=2,&[show] { $(CRLF)$(CRLF)$(CRLF) }
ho=1,cursor: pointer;transition: .382s ease;&:hover{ $(CRLF)$(CRLF) }
ho=2,&:hover{ $(CRLF)$(CRLF) }
hov=1,cursor: default;transition: .382s ease;&:hover{ $(CRLF)$(CRLF) }
hov=1,cursor: default;&:hover{ $(CRLF)$(CRLF) }
ft=1,&:first-of-type{$(CRLF)margin-left: 0;$(CRLF)margin-top: 0;$(CRLF)}
lt=1,&:last-of-type{$(CRLF)margin-right: 0;$(CRLF)margin-bottom: 0;$(CRLF)}
nt=1,&:nth-of-type(2n){$(CRLF)margin-right: 0;$(CRLF)}
fc=1,&:first-child{$(CRLF)margin-left: 0;$(CRLF)margin-top: 0;$(CRLF)}
lc=1,&:last-child{$(CRLF)margin-right: 0;$(CRLF)margin-bottom: 0;$(CRLF)}
nc=1,&:nth-child(2n){$(CRLF)margin-right: 0;$(CRLF)}
dib=1,display: inline-block;
dif=1,display: inline-flex;
db=1,display: block;
df=1,display: flex;
dac=1,display: flex;align-items: center;
djc=1,display: flex;justify-content: center;
dj=1,display: flex;justify-content: space-between;
dcc=1,display: flex;justify-content: center;align-items: center;
dsc=1,display: flex;justify-content: space-between;align-items: center;
aic=1,align-items: center;
aib=1,align-items: baseline;
jce=1,justify-content: space-evenly;
jca=1,justify-content: space-around;
jcc=1,justify-content: center;
jcb=1,justify-content: space-between;
jcd=1,justify-content: flex-end;
jcs=1,justify-content: flex-start;
da=1,data(){$(CRLF)return{$(CRLF)$(CRLF)$(CRLF)}$(CRLF)},$(CRLF)
dat=1, :data='data' 
ed=1,export default {$(CRLF)data(){$(CRLF)return{$(CRLF)$(CRLF)$(CRLF)}$(CRLF)},$(CRLF)};$(CRLF)
ed=2,export default {$(CRLF)$(CRLF)$(CRLF)}
mbvue=1,<template>$(CRLF)<div class="sg-body">$(CRLF)$(CRLF)$(CRLF)</div>$(CRLF)</template>$(CRLF)$(CRLF)<script>$(CRLF)export default {$(CRLF)components: {$(CRLF)$(CRLF)},$(CRLF)data(){$(CRLF)return{$(CRLF)$(CRLF)$(CRLF)};$(CRLF)},$(CRLF)props: ["data"],$(CRLF) watch: {$(CRLF)$(CRLF)},$(CRLF) computed: {$(CRLF)$(CRLF)},$(CRLF) created() {$(CRLF)$(CRLF)$(CRLF)},$(CRLF) mounted() {$(CRLF)$(CRLF)$(CRLF)},$(CRLF) methods: {$(CRLF)$(CRLF)$(CRLF)}$(CRLF)};$(CRLF)</script>$(CRLF)$(CRLF)<style lang="scss" scoped>$(CRLF)@import "~@/css/sg";$(CRLF).sg-body {$(CRLF)$(CRLF)$(CRLF)}$(CRLF)</style>
sws=1,.toString().padStart(2, "0")
has=1,.hasOwnProperty('keyName')
o=1,Object.keys(obj)
o=2,Object.values(obj)
o=3,Object.assign({}, a_obj, b_obj);//合并对象不改变a_obj
o=4,Object.assign(a_obj, b_obj);//合并对象改变a_obj
o=5,Object.keys(d).forEach(k=>d[k]==null&&delete d[k]);//去掉值为null或undefined的对象属性
o=6,Object.keys(d).forEach(k=>(d[k]==null||d[k]=='')&&delete d[k]);//去掉值为null或undefined或''的对象属性
ljz=1,Math.ceil(X/N)*N
ljz=2,Math.floor(X/N)*N
ag=1,Angular
wxmn=1,Mozilla/5.0 (Linux; Android 4.4.4; HM NOTE 1LTEW Build/KTU84P) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/33.0.0.0 Mobile Safari/537.36 MicroMessenger/6.0.0.54_r849063.501 NetType/WIFI
ngf=1, *ngFor="let item of items" [innerHTML]="item"
ngf=2, *ngFor="let item of items;let i=index" [innerHTML]="'索引'+i+' 内容'+item"
xdys=1,previousElementSibling
xdys=2,nextElementSibling
cp=1,cursor: pointer;
cd=1,cursor: default;
oh=1,overflow: hidden;
oya=1,overflow-y: auto;
oxa=1,overflow-x: auto;
oyh=1,overflow-y: hidden;
oxh=1,overflow-x: hidden;
re=1,.removeAttribute('active');
set=1,.setAttribute('active',true);
ff=1,(d){$(CRLF)$(CRLF)$(CRLF)},
ff=2,d=>{$(CRLF)$(CRLF)$(CRLF)},
ssjc=1,netstat -ano
ssjc=2,taskkill /pid 0000 -f
abc=1,[...Array(26)].map((v,i) => String.fromCharCode(i + 65))
ddd=1,".".repeat(3)
sco=1,scoped
scss=1,<style lang="scss" scoped>$(CRLF)$(CRLF)$(CRLF)</style>
sxbd=1,<div id="name"></div> let obj = {}; Object.defineProperty(obj, "name", {set: newVal => (document.querySelector("#name").innerHTML = newVal)}); obj.name = "修改后,内容会实时渲染";
tro=1,this.$router.push("/");
tro=2,this.$router.push('/path?id='+item.id)
tro=3,this.$router.push({path:'/path',query:{id:item.id}})
tro=4,this.$route.query.id
tro=5,this.$route.path
tro=6,this.$route.meta.
ro=1,$router.push('/')
ro=2,$router.push('/path?id='+item.id)
ro=3,$router.push({path:'/path',query:{id:item.id}})
ro=4,$route.query.id
ro=5,$route.path
ro=6,$route.meta.
rot=1,transform: rotate(30deg);
sca=1,transform: scale(1.1);
sca=2,/*水平翻转*/transform: scaleX(-1);
tra=1,transform: translate(-2px, -2px);
tra=2,transform: translateX(-50%);
tra=3,transform: translateY(-50%);
hs=1,/*去色、灰色*/filter:grayscale(100%);
qc=2,[...new Set([1,1,2,2,3,4])]
qc=3,[...new Set('ababbc')].join('')
az=1,[...Array(26)].map((v,i) => String.fromCharCode(i + 65))
run=1,cnpm run dev
build=1,cnpm run build
ale=1,this.$dialog.alert({ message: "弹窗信息" });
dial=1,this.$dialog.alert({message:"这是一条弹窗消息提示", closeOnClickOverlay:true, confirmButtonText: "我知道了"}).then(() => {/*确定*/});
dial=2,this.$dialog.confirm({title: "提示", message: "此操作将永久删除该文件,是否继续?", messageAlign: "left"}).then(() => {this.$toast.success('删除成功');}).catch(() => {this.$toast.fail("取消删除");});
nn=1,this.$notify('顶部红色警告提示!');
no=1,this.$notify({ type: 'success', message: '绿色' });
no=2,this.$notify({ type: 'primary', message: '蓝色' });
no=3,this.$notify({ type: 'warning', message: '橙色' });
no=4,this.$notify({ type: 'danger', message: '红色' });
to=1,this.$toast.success('成功');
to=2,this.$toast.fail('失败');
to=3,this.$toast('提示内容');
yd=1,navigator.userAgent.toLowerCase().indexOf("mobile") > -1
llq=1,navigator.userAgent.indexOf(".NET") > -1
llq=2,亲用的什么浏览器?如果您使用的是360浏览器,请点击浏览器地址栏右侧有个“e”选择⚡极速模式即可
nyr=1,new Date().toLocaleString("zh-Hans-CN", {year: "numeric", month: "2-digit", day: "2-digit"}).replace(/\//g, "-")
nyr=2,new Date().toLocaleString("zh-Hans-CN", {year: "numeric", month: "short", day: "numeric"})
sfm=1,new Date().toLocaleString("zh-Hans-CN", {hour12: false, hour: "2-digit", minute: "2-digit", second: "2-digit"})
sf=1,new Date().toLocaleString("zh-Hans-CN", {hour12: false, hour: "2-digit", minute: "2-digit"})
nyrsfm=1,new Date().toLocaleString("zh-Hans-CN", {year: "numeric", month: "2-digit", day: "2-digit", hour12: false, hour: "2-digit", minute: "2-digit", second: "2-digit"}).replace(/\//g, "-")
nyrsfm=2,new Date().toLocaleString("zh-Hans-CN", {year: "numeric", month: "short", day: "numeric", hour12: false, hour: "2-digit", minute: "2-digit", second: "2-digit"}).replace(/\//g, "-")
nyrxqsfm=1,new Date().toLocaleString("zh-Hans-CN", {year: "numeric", month: "short", day: "numeric", weekday: "long", hour12: false, hour: "numeric", minute: "numeric", second: "numeric"})
ms=1,this.$message('开发中,敬请期待…');
su=1,this.$message.success('成功消息');
wa=1,this.$message.warning('警告消息');
er=1,this.$message.error("错误消息");
al=1,this.$alert('开发中,敬请期待…');
al=2,this.$alert("开发中,敬请期待…","标题名称",{dangerouslyUseHTMLString: true,closeOnPressEscape:true,closeOnClickModal:true,confirmButtonText: "我知道了",});
al=3,this.$alert("开发中,敬请期待…","标题名称",{dangerouslyUseHTMLString: true,confirmButtonText: "我知道了",callback: action=> {this.$message({type: "info",message: `action: ${action}`});}});
con=1,this.$confirm("此操作将永久删除该文件,是否继续?","提示",{confirmButtonText: "确定",cancelButtonText: "取消",type: "warning"}).then(()=> {this.$message({type: "success",message: "删除成功"});}).catch(()=> {this.$message({type: "info",message: "已取消删除"});});
not=1,this.$notify({title: "成功",message: "这是一条成功的提示消息",type: "success"});
not=2,this.$notify({title: "自定义提示", message: h("i",{style: "color: red"},"文字颜色设置成功了红色<strong>这是 <i>HTML</i> 片段</strong>"), dangerouslyUseHTMLString: true,/*支持html*/ position: "bottom-right",/*右下角*/ offset: 100,/*偏移100像素*/ showClose: false,/*隐藏关闭按钮*/ duration: 0/*永远不自动消失*/});
ra=1,border-radius:4px;
ra=2,border-radius:8px;
ra=3,border-radius:16px;
ra=4,border-radius:32px;
ra=5,border-radius:50px;
raa=1,border-radius:88px;
raaa=1,border-radius:100%;
sd=1,let d = { id: 1 };$(CRLF) this.$d.API_NAME(d, {$(CRLF) l: "加载中…",$(CRLF) //l: { show: () => (this.loading = true), close: () => (this.loading = false), },$(CRLF) s: (d) => {$(CRLF) console.log("【成功】", d);$(CRLF) } $(CRLF)});$(CRLF)
sd=2,let d = { param: "参数值", pageNum: 0 };$(CRLF) this.$d.API_NAME(d, {$(CRLF) l: "加载中…",$(CRLF) //l: { show: () => (this.loading = true), close: () => (this.loading = false),  },$(CRLF) s: (d) => {$(CRLF) console.log("【成功】", d);$(CRLF) } $(CRLF) //,f:d=> this.$message.error(d.msg),$(CRLF) });$(CRLF)
sd=3,this.$toast.loading({forbidClick: true});let data = {param: "参数值"};this.$d.API_NAME(data, {s: d => {/*这里写代码*/console.log("拿到数据了", d);this.$toast.clear();}, f: d => {console.log("失败了", d.msg);this.$toast.clear();}});
sd=4,top.loading.show();let d = {param:"参数值",pageNum:0};$d.API_NAME(d, {s: d => {console.log("拿到数据了", d);}});
sdd=1,API_NAME(d, doing) { this.__sd("post", API_ROOT_URL + '/api/xxx' , d, doing); },
sdd=2,API_NAME(d, doing) { this.__sd("get", API_ROOT_URL + '/api/xxx' + $g.json.toGetStringForOneDepthLevel(d), null, doing); },
par=1, /**JSON转GET请求参数(只针对包含一个层级的json格式)*/ toGetStringForOneDepthLevel: function (json, firstStr = '?') { return firstStr + JSON.stringify(json).replace(/\t|\n|\r|\"|\{|\}/g, "").replace(/,/g, "&").replace(/:/g, "="); }, 
par=2,/**GET请求参数转JSON(只针对包含一个层级的json格式)*/ fromGetStringForOneDepthLevel: function (getString) { return JSON.parse("{\"" + getString.substr(1 + getString.indexOf("?")).replace(/&/g, "\",\"").replace(/=/g, "\":\"") + "\"}"); },
sr=1, :src="a.img" 
src=1, :src="require(`@/assets/${$index}.jpg`)" 
src=2, src="~@/assets/1.jpg" 
st=1, style="" 
st=2, :style="{marginLeft:`${-100*$i}px`}" 
tp=1,<img src="~@/assets/1.jpg" />
tp=2,<img :src="require(`@/assets/${$index}.jpg`)" />
bgi=1, :style="{backgroundImage:`url('${bgUrl}')`}" 
bgi=2,<div :style="{backgroundImage:`url(${item.img})`}" ></div>
jzxz=1,@extend %un-select;
lj=1,require('@/assets/1.jpg')
lj=2,~@/assets/1.jpg
lj=3,static/1.jpg
lj=4, :src="require(`@/assets/${$index}.jpg`)" 
lj=5, src="~@/assets/1.jpg" 
lj=6, :style="{backgroundImage:`url(${item.img})`}" 
mix=1,@mixin transformXY($x: 0, $y: 0) {  transform: translate($x, $y);/*transform: translate(#{$x}px, #{$y}px);*/}@include transformXY(0, 100%);
sllsz=1,se://login-manager
sllkz=2,se://extensions
ggsz=1,chrome://extensions
ggsz=2,chrome://settings
dm=1,view-source:
th=1,$bg-color: "blue", "lightBlue", "green", "orange", "yellow", "purple", "pink", "red", "lightRed"; $bgColors: $blue, $lightBlue, $green, $orange, $yellow, $purple, $pink, $red, $lightRed; @for $i from 1 through length($bg-color) { &[bg-color="#{nth($bg-color, $i)}"] { color: white; background-color: nth($bgColors, $i); background-image: url("static/img/v-html/bg/#{nth($bg-color, $i)}.jpg"); } }
th=2,@for $i from 1 through 6 {&:nth-of-type(#{$i}) img {transition-delay: calc(0.1 *#{$i}s);}}
th=3,@for $i from 1 through length($数组) {$color: nth($数组, $i);&:nth-of-type(#{$i}) {color: $color;&:hover {color: white;}}}
th=4,animation: sg-animate 2s infinite alternate; /*在两秒内完成序列png动画图片来回播放,并循环无限次*/$bgPreUrl: "http://www.shuzhiqiang.com/img/bg_"; /*序列图路径前缀*/@keyframes sg-animate {$len: 75; /*逐帧动画画面自由75张图*/@for $i from 0 through $len { #{ $i * 1% } {background-image: url(#{$bgPreUrl}#{$i}.png);} } /* 序列图播放完毕那一刻到100%时间(第2s结束那一刻)之间都停留在最后一张序列图静止不动*/#{ $len * 1% }, 100% {background-image: url(#{$bgPreUrl}#{$len}.png);} }
bf=1,parseFloat((value * 100).toFixed(2)) + '%';
cur=1, :current="currentIndex == i"
fo=1, v-for="(a,i) in aa" :key="i" 
foh=1, v-for="(a,i) in aa" :key="i" v-html="a" 
fo=2, v-for="(v,k,i) in o" :key="i" v-html="`${k}:(${v})`" 
fo=3, v-for="(a,i) in aa" :key="i" :hover="hoverIndex==i" :current="currentIndex==i" @mouseover="hoverIndex=i,autoPlay=false" @mouseout="hoverIndex=null,autoPlay=localAutoPlay" @click="currentIndex=i" v-html="a.label" @mouseover="hoverIndex=i,autoPlay=false" @mouseout="hoverIndex=null,autoPlay=localAutoPlay" @click="currentIndex=i" v-html="a.label" 
fh=1,let ar =, html = '', tpl = '{id}{name}',dom=document.querySelector("");$(CRLF)for (let i = 0, len = ar.length; i < len; i++) {$(CRLF)let a = ar[i];$(CRLF)html += tpl$(CRLF).replace(/{id}/g, a.id)$(CRLF).replace(/{name}/g, a.name)$(CRLF)}$(CRLF)dom.innerHTML = html;
sc=1,.scrollIntoView({behavior: "smooth", block: "nearest", inline: "nearest"});//缓慢滚动
sc=2,$('html').stop().animate({scrollTop: 滚动顶部位置}, 'fast', function () {console.log('滚动结束');});
sc=3,document.documentElement.scrollTop = window.pageYOffset = document.body.scrollTop = 100;
sc=4,document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
swa=1,/*展开swagger所有节点*/let ar = document.querySelectorAll(".options .toggleEndpointList");for (let i = 0, len = ar.length; i < len; i++) {let a = ar[i];a.click();}
on=1,.onclick = function () {$(CRLF)$(CRLF)}
on=2,.onchange = function () {$(CRLF)$(CRLF)}
on=3,.onmouseover = function () {$(CRLF)$(CRLF)}
on=4,.onmouseout = function () {$(CRLF)$(CRLF)}
on=5,.oninput = function () {$(CRLF)$(CRLF)}
jd=1,/*聚焦焦点*/let focusDOM = {__r: function (s) {s = s instanceof jQuery ? s : $(s);s.addClass("SG-r");setTimeout(function () {s.removeClass("SG-r");}, 3000);}, to: function (s, is) {typeof s == 'string' && (s = document.querySelector(s));is ? (typeof is == 'string' && (is = document.querySelector(is))) : (is = s);is.focus();is.tagName.toLowerCase() == "input" && is.select();is.scrollIntoView();this.__r(s)}, $to: function (s, is) {s = $(typeof s == 'string' ? document.querySelector(s) : s);is = is ? ($(typeof is == 'string' ? document.querySelector(is) : is)) : s;is.focus();this.__r(s);}};/*高亮提示________________________*/  .SG-r { /*border-radius: 20px;*/animation: SG-r 1s ease 3;-moz-animation: SG-r 1s ease 3; /* Firefox */-webkit-animation: SG-r 1s ease 3; /* Safari 和 Chrome */-o-animation: SG-r 1s ease 3; /* Opera */}  @keyframes SG-r { 0% {background: rgba(3, 156, 253, 0);} 50% {background: rgba(3, 156, 253, 0.2);} 100% {background: rgba(3, 156, 253, 0);} }
gg=1,console.log(    )
js=1,JSON.stringify(    )
js=2,JSON.stringify(    ,null,2)
jp=1,JSON.parse(    )
ls=1,location.search
weui=1,<!--<link rel="stylesheet" href="http://res.wx.qq.com/open/libs/weui/1.1.3/weui.min.css"/>--><!--帮助文档https://www.kancloud.cn/ywfwj2008/weui/274287-->
lh=2,location.href="网址";
lh=1,location.hash
lr=1,location.replace("网址");
dw=1,document.write("要显示的内容");
yp=1,/*播放、暂停、停止音频,音频文件默认循环播放,不自动播放*/ function controlSound(sel, status, soundUrl, playEndCallBack) {status || (status = "play");let SGsound = document.querySelector(sel);soundUrl && (SGsound.src.indexOf(soundUrl) == -1) && (SGsound.src = soundUrl);if (soundUrl) {let soundName = soundUrl.split("/");soundName = soundName[soundName.length - 1];soundUrl && (SGsound.src.indexOf(soundName) == -1) && (SGsound.src = soundUrl);}switch (status) {case "play":SGsound.play();break;case "pause":SGsound.pause();break;case "stop":SGsound.pause();SGsound.currentTime = 0;break;}SGsound.addEventListener('ended', function (e) {playEndCallBack && playEndCallBack(e)}, false);}/*测试用例*//*<audio id="SGsound" src="http://khwlkj.com/sound/newOrderSound.mp3" controls="controls" preload loop hidden></audio> <input type="button" onclick="controlSound('play')" value="播放"/> <input type="button" onclick="controlSound('stop')" value="停止"/> <input type="button" onclick="controlSound('pause')" value="暂停"/>*/
yp=2,/*监听播放结束后循环播放,绕过alert弹窗中断播放事件*/ SGsound.loop = false;SGsound.addEventListener('ended', function () {SGsound.play();/*循环播放*/}, false);
toa=1,uni.showToast({icon: 'none',title: '提示内容'});
toa=2,uni.showToast({title: '成功'});
toa=3,uni.showToast({icon: 'loading',title: '加载中…',duration: 2000,mask: true});
s=1,setTimeout(() =>{}, 1000);
s=2,let interval=setInterval(()=> {}, 1000);clearInterval(interval);
wh=1,let arr$(CRLF)let i=0,len=ar.length;$(CRLF)while (i<len)$(CRLF){$(CRLF)$(CRLF)i++;$(CRLF)}$(CRLF)
wh=2,let ar = $(CRLF)let i = 0, len = ar.length;$(CRLF)do {$(CRLF)let a = ar[i];$(CRLF)$(CRLF)i++;$(CRLF)}$(CRLF)while (i < len) ;$(CRLF)
ecc=1,<i class="el-icon-info"></i>
dq=1,document.querySelector("")
dqa=1,document.querySelectorAll("")
mask=1,-webkit-mask-image: linear-gradient(transparent, white 20px, white calc(100% - 20px),transparent);//上下两端的渐变白色(兼容IOS)
mask=2,-webkit-mask-image: linear-gradient(to right, transparent, white 20px, white calc(100% - 20px), transparent);//左右两端的渐变白色(兼容IOS)
mask=3,/*渐变遮罩*/-webkit-mask-image: linear-gradient(white, transparent);
mask=4,/*图片遮罩(透明度越低,显示效果越淡)*/-webkit-mask-image: url(mask.png);
mask=5,/*边框遮罩*/-webkit-mask-box-image:url(mask.png) 0 0 round;
mh=1,/*模糊*/filter: blur(5px);
mh=2,/*遮罩模糊*/backdrop-filter: blur(10px);
jb=1,/*从上往下线性渐变背景*/background: linear-gradient(red, blue);
jb=2,/*从左往右线性渐变背景*/background: linear-gradient(to right, red, blue);
jb=3,/*旋转角度线性渐变背景*/background:linear-gradient(-45deg, red, blue);
jb=4,/*从内而外径向渐变背景*/background: radial-gradient(red, green, blue);
jb=5,/*半透明遮罩层背景,用于新功能提示或者操作指引提示*/background: radial-gradient(closest-side ellipse at 50% 90%, rgba(100, 100, 100, 0.8), rgba(0, 0, 0, 0.8));
jb=6,/*渐变文字(仅谷歌内核浏览器支持)*/background:-webkit-linear-gradient(white,black);-webkit-background-clip:text;-webkit-text-fill-color:transparent;
jb=7,/*边框从上往下线性渐变(仅支持矩形)*/border: solid 2px;border-image: linear-gradient(red, blue) 1 1 stretch;
jb=8,/*边框从左往右线性渐变(仅支持矩形)*/border: solid 2px;border-image: linear-gradient(to right, red, blue) 1 1 stretch;
jb=9,/*边框从内而外径向渐变(仅支持矩形)*/border: solid 2px;border-image: radial-gradient(red, green, blue) 1 1 stretch;
sub=1,/*淡入淡出子菜单*/  .mainMenu .subMenu {opacity: 0;visibility: hidden;pointer-events: none;}  .mainMenu:hover .subMenu {opacity: 1;visibility: visible;pointer-events: auto;}
ob=1,object-fit: cover;$(CRLF)object-position: center;
ob=2,object-position: 50% 50%;
ob=3,object-position: 0px -100px;
zt=1,font-family: 'Microsoft YaHei';
zt=2,font-family: 'Microsoft YaHei', 'PingFangSC-Regular', 'sans-serif', 'San Francisco', 'Microsoft Sans Serif', 'Arial';/*顶部加 @charset "UTF-8";*/
szzt=1,font-family: DIN;
tap=1,/*去掉按下移动端按钮高亮显示颜色*/  * {tap-highlight-color: transparent!important;-webkit-tap-highlight-color: transparent!important;}
f=1,let aa = $(CRLF)for (let i = 0, len = aa.length; i < len; i++) {$(CRLF)let a = aa[i];$(CRLF)$(CRLF)}$(CRLF)
f=2,let bb = a.children;for (let j = 0, bb_len = bb.length; j < bb_len; j++) {let b = bb[j];}
f=3,let cc = b.children;for (let k = 0, cc_len = cc.length; k < cc_len; k++) {let c = cc[k];}
f=4,let dd = c.children;for (let l = 0, dd_len = dd.length; l < dd_len; l++) {let d = dd[l];}
f=5,let ee = d.children;for (let m = 0, ee_len = ee.length; m < ee_len; m++) {let e = ee[m];}
f=6,let ff = e.children;for (let n = 0, ff_len = ff.length; n < ff_len; n++) {let f = ff[n];}
fi=1,let o =$(CRLF)for (let k in o) {(CRLF)let v = o[k];$(CRLF)$(CRLF)$(CRLF)}$(CRLF)
fi=2,let obj =$(CRLF) for (let key in obj) {$(CRLF)let val = obj[key];$(CRLF)$(CRLF)$(CRLF) }$(CRLF)
fi=3,let object =$(CRLF) for (let field in object) {$(CRLF)let value = object[field];$(CRLF)$(CRLF)$(CRLF) }$(CRLF)
qd=1,/*强调css*/[sg-emphasize] {animation: sg-emphasize .3s ease 3;}  @keyframes sg-emphasize { 0% {transform: scale(1);} 50% {transform: scale(1.2);} 100% {transform: scale(1);} }
qd=2,/*强调js*/let dom = document.querySelector(".需要强调的控件sel"); dom.setAttribute("sg-emphasize", true), setTimeout(() => dom.removeAttribute("sg-emphasize"), 900), dom.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" }),dom.focus();
je=/*格式化数字为000,000,000.00*/parseFloat(parseFloat(myNumberString).toFixed(2)).toLocaleString()
xh=2,/*css自动序号________________________*/  element第一次出现之前的同级或者父级元素 {counter-reset: NO; /*初始化变量NO*/}  element:before {counter-increment: NO;content: '0' counter(NO) "、";}  /*解决超过9的序号数字还有0打头*/  element:nth-of-type(n + 9):before {content: counter(NO) "、";}
fz=2,/*复制命令兼容各种浏览器*/function copy(copyContent, isAlert) {if (window.clipboardData) {window.clipboardData.setData("Text", copyContent);}if (document.execCommand) {let copyTextarea = document.createElement("textarea");document.body.appendChild(copyTextarea);copyTextarea.innerText = copyContent;copyTextarea.select();document.execCommand("Copy");copyTextarea.parentNode.removeChild(copyTextarea);}isAlert && alert(copyContent + " 复制成功!");}
fz=1,JSON.parse(JSON.stringify( objectOrArray ))
case=1,switch (type) {$(CRLF)case 0:$(CRLF)$(CRLF)break;$(CRLF)case 1:$(CRLF)$(CRLF)break;$(CRLF)case 2:$(CRLF)$(CRLF)break;$(CRLF)case 3:$(CRLF)$(CRLF)break;$(CRLF)default:$(CRLF)}
fr=1,<iframe id="SGframe" src="外部文件名.html" frameborder="no" scrolling="no" style="display:block"></iframe>
key=1,/*设置快捷键*/onkeyup = function (e) {let k = e.keyCode || e.which || e.charCode, ck = e.ctrlKey || e.metaKey, ak = e.altKey, sk = e.shiftKey;/*独立键*/if (k == 13) {/*按下回车键Enter↩的时候执行*/}if (k == 27) {/*按下退出键Esc的时候执行*/}if (k == 36) {/*执行Home*/}if (k == 35) {/*执行End*/}if (k == 48 || k == 96) {/*执行0、Num0*/}if (k == 49 || k == 97) {/*执行1、Num1*/}if (k == 37 || k == 38 || k == 27 || k == 8) { /*按下 ← ↑ Esc <BACKSAPCE 的时候执行*/}if (k == 33 || k == 37 || k == 38 || k == 100 || k == 104 || e.keyCode == 80) {/*执行Page Up、←、↑、Num4(←)、Num8(↑)、P*/}if (k == 34 || k == 39 || k == 40 || k == 102 || k == 98 || e.keyCode == 78) {/*执行Page Down、→、↓、Num2(→)、Num6(↓)、N*/}/*组合键*/if (ck && k == 13) {/*Ctrl+Enter*/alert('submit');}if (sk && k == 13) {/*Shift+Enter*/alert('change line');}if (ck && ak && sk && k == 83) {/*Ctrl+Alt+Shift+S*/alert('导出web图片');}}
bg=1,/*背景图片*/width: 000px;height: 000px;background: transparent url(~@/assets/logo.png) no-repeat center / cover;
bg=2,/*居中填满*/background-repeat:no-repeat;background-position:center;background-size: cover;
bg=3,/*背景图标*/$(CRLF)width:图标宽度px;$(CRLF)height:图标高度px;$(CRLF)background: transparent url(../img/图片.png)no-repeat -图标横坐标px -图标纵坐标px;
bg=4,/*从上往下线性渐变背景*/background: linear-gradient(red, blue);
bg=5,/*背景旋转角度从左往右渐变*/background: linear-gradient(90deg, red, blue);
jz=1,position: absolute;margin: auto;top: 0;left: 0;right: 0;bottom: 0;width:100px;height:100px;
jz=2,position: absolute;width: 宽度px;height: 高度px;margin-left: calc(-宽度 / 2);margin-top: calc(-高度 / 2);left: 50%;top: 50%;
jz=3,position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
jz=4,margin-top: calc(100vh / 2);margin-left: calc(100vw / 2);transform: translate(-50%, -50%);
jz=5,.父元素{display: flex;justify-content: center;align-items: center;}
jz=6,.father {position: relative;/*必须*/display: table-cell;/*必须*/text-align: center; /*水平居中*/vertical-align: middle; /*垂直居中*//*务必设置宽高*/}  .child {display: inline-block;/*必须*/}
slh=2,……
slh=1,…
sl=1,/*单行省略号*/overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
dhsl=1,/*多行省略号*/overflow: hidden;word-break: break-all;/*单词分割换行*/display: -webkit-box;-webkit-box-orient: vertical;max-height: min-content;-webkit-line-clamp:3;
task=1,control schedtasks
gdt=1,/*滚动条轨道*/ ::-webkit-scrollbar { width: 8px; height: 8px; background: #00000011; } /*滚动条滑块*/ ::-webkit-scrollbar-thumb { border-radius: 8px; background: #00000033; } /*移入滑块*/ ::-webkit-scrollbar-thumb:hover { background: #00000055; } /*拐角处*/ ::-webkit-scrollbar-corner { background: none; }
ke=1,@keyframes sg-animate { 0% {opacity: 0;} 50% {opacity: 1;} 100% {opacity: 0;} }
an=1,animation: sg-animate .382s ease 1s infinite alternate forwards;
an=2,animation-play-state: paused | running;
an=3,animation-direction:alternate!important;//反向旋转 
an=4,animation-delay:1s;
an=5,.sg-animate {animation: sg-animate .382s linear infinite;-moz-animation: sg-animate .382s linear infinite;-webkit-animation: sg-animate .382s linear infinite;-o-animation: sg-animate .382s linear infinite;}  @keyframes sg-animate { 0% {transform: rotate(0deg);} 50% {transform: rotate(180deg);} 100% {transform: rotate(360deg);} }  @-moz-keyframes sg-animate { 0% {-moz-transform: rotate(0deg);} 50% {-moz-transform: rotate(180deg);} 100% {-moz-transform: rotate(360deg);} }  @-webkit-keyframes sg-animate { 0% {-webkit-transform: rotate(0deg);} 50% {-webkit-transform: rotate(180deg);} 100% {-webkit-transform: rotate(360deg);} }  @-ms-keyframes sg-animate { 0% {-ms-transform: rotate(0deg);} 50% {-ms-transform: rotate(180deg);} 100% {-ms-transform: rotate(360deg);} }  @-o-keyframes sg-animate { 0% {-o-transform: rotate(0deg);} 50% {-o-transform: rotate(180deg);} 100% {-o-transform: rotate(360deg);} } 
tt=1,transition: .382s ease;
tt=2,transition: .618s ease;
tt=3,transition: 1s ease;
tt=4,transition: 2s ease;
tta=1,*{transition: .382s ease;}
tta=2,*{transition: .618s ease;}
tr=1,transition: .2s ease-out;//城乡结合部动效
tr=2,transition: .8s cubic-bezier(.075, .82, .165, 1);//快速+柔和结束
tr=3,transition: .382s cubic-bezier(0, .382, 0, 1);//加速+柔和结束
tr=4,transition: .2s cubic-bezier(.175, .885, .32, 1.275);//极速+弹性结束
tr=5,transition: .8s cubic-bezier(.6, -.6, .6, 1.6); //弹跳开始+弹跳结束(弹!弹!弹!弹走鱼尾纹)
bz=1,box-sizing: border-box;
bp=1,box-sizing: border-box;$(CRLF)padding: 20px;
bo=1,box-sizing: border-box;$(CRLF)border: 1px solid #eee;
bon=1,border: none;
bdr=1,border-right: 1px solid #eee;
bdl=1,border-left: 1px solid #eee;
bdt=1,border-top: 1px solid #eee;
bdb=1,border-bottom: 1px solid #eee;
sw=1,box-shadow: 0 0 6px rgba(0, 0, 0, 0.04);
sw=2,box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
sw=3,box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
sw=4,/*穿透阴影*/filter: drop-shadow(0px 3px 8px rgba(blue,.3)); 
sw=5,/*文本阴影*/text-shadow: 0px 0px 20px rgba(blue,.3);
sw=6,box-shadow: 0 10px 30px #00000011 inset;
sw=7,box-shadow: 0 10px 30px #00000011, 0 10px 30px #00000011 inset; 
jq=1,<!--<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>-->
met=1,<meta charset="UTF-8">$(CRLF)<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
met=2,<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
med=1,@media screen and (max-width: 800px) {  .div { /*当宽度<800px的样式*/}  }
tz=1,<meta http-equiv="refresh" content="0;url=http://www.baidu.com"> 
tz=2,<script>location.href=navigator.userAgent.toLowerCase().includes("mobile")?"app":"web";</script>
se=1,/*禁止选中文本*/user-select: none;
se=2,/*选中文本样式*/::selection { background: #ff000011; color: #ff0000; }
edi=1,<el-dialog :title="`弹窗标题`" :visible.sync="dialogVisible" width="400px">$(CRLF)<div>$(CRLF)<!-- 这里添加表单控件 -->$(CRLF)</div>$(CRLF)<span slot="footer">$(CRLF)<el-button type="info" @click="dialogVisible = false" plain>取消</el-button>$(CRLF)<el-button type="primary" @click="dialogSubmit">确定</el-button>$(CRLF)</span>$(CRLF)</el-dialog>
etab=1,<el-table :data="tableData" ref="table" stripe><el-table-column type="selection" width="50"></el-table-column><el-table-column label="用户名" show-overflow-tooltip><template slot-scope="scope"><span>{{ scope.row.username }}</span></template></el-table-column><el-table-column label="姓名" show-overflow-tooltip><template slot-scope="scope"><span>{{ scope.row.name }}</span></template></el-table-column><el-table-column label="权限角色" show-overflow-tooltip><template slot-scope="scope"><span>{{ scope.row.role || 未分配 }}</span></template></el-table-column><el-table-column label="操作" width="500"><template slot-scope="scope"><el-button size="mini" type="primary" @click.stop="handleChangePsw(scope.$index, scope.row)">修改密码</el-button><el-button size="mini" type="primary" @click.stop="handleSetRole(scope.$index, scope.row)">权限管理</el-button><el-button v-if="!scope.row.hasClass" size="mini" type="danger" @click.stop="handleDel(scope.row)">删除</el-button></template></el-table-column></el-table>
ep=1,<el-pagination background :hidden="total <= 10" @size-change="initList" @current-change="initList" :total="total" :page-sizes="[10, 20, 50]" :pager-count="7" :page-size.sync="pageSize" :current-page.sync="currentPage" layout="total, sizes, prev, pager, next, jumper" ></el-pagination>
ep=2,currentPage: 1, pageSize: 10, total: 0, total: 999,
ei=1,<el-input v-model="input" placeholder="请输入内容"></el-input>
ei=2,<el-input-number v-model="numValue" :precision="2" :step="0.1" :min="0" :max="10"></el-input-number>
ei=3,<el-input  type="textarea"  :rows="2"  placeholder="请输入内容"  v-model="textareaValue"></el-input>
eca=1,<el-card class="box-card" shadow="hover"> <div class="card-header" slot="header"> <div class="title"> <i class="el-icon-chat-dot-square"></i> <b>标题</b> </div> <el-button type="text">更多</el-button> </div> <ul class="card-body" > <li> 正文内容 </li> <li> 正文内容 </li> </ul> <div class="card-footer" blue><p>累计:985,211,000元</p></div> </el-card>
eca=2,  .box-card { >>> .el-card__header { padding: 0 20px; font-size: 14px; .card-header { display: flex; justify-content: space-between; align-items: center; .title { color: $darkBlue; } } } }
et=1,<el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">      <el-button>上左</el-button>    </el-tooltip>
elk=1,<el-link type="primary">primary</el-link>
eim=1,<el-image style="width: 100px; height: 100px" :src="a.img" :fit="cover"></el-image>
eta=1,<el-tabs v-model="tabActiveName" @tab-click="tabClick"> <el-tab-pane label="Excel表格上传" name="1"></el-tab-pane> <el-tab-pane label="文本拷贝上传" name="2"></el-tab-pane> <el-tab-pane label="手工上传" name="3"></el-tab-pane> </el-tabs>
eta=2,tabActiveName:'1',tabClick(tab, event) { console.log(tab, event); }
eb=1,<el-button type="primary">主要按钮</el-button>
eb=2,<el-button>次要按钮</el-button>
eb=3,<el-button type="primary" icon="el-icon-search">搜索</el-button>
eb=4,<el-button type="primary" icon="el-icon-edit" circle></el-button>
eb=5,<el-button type="text">文字按钮</el-button>
eb=6,<el-button type="text" icon="el-icon-edit">图标文字按钮</el-button>
eb=7,<div class="btns"> <el-button size="small" type="primary" plain @click="reset" >重置</el-button > <el-button size="small" type="primary" @click="search()" >查询</el-button > </div>
ese=1,<el-select size="small" v-model="value" placeholder="请选择" @change="changeSelect" > <el-option v-for="(a,$i) in options" :key="$i" :value="a.value"  :label="a.label" > </el-option> </el-select>
ese=2,options: [{value: '1', label: '选项1'}, {value: '2', label: '选项2'}, {value: '3', label: '选项3'},], value: '',
cha=1,changeSelect(d){console.log(d)},
ee=1,<!-- 空状态 --> <el-empty v-else style="text-align: center; width: 100%" :image-size="200" description="暂无数据" ></el-empty>
x=2,________________________________________


相关文章
|
12天前
|
移动开发 前端开发 JavaScript
纯JavaScript实现HTML5 Canvas六种特效滤镜
纯JavaScript实现HTML5 Canvas六种特效滤镜
23 6
|
4天前
|
XML 前端开发 JavaScript
前端简介(HTML+CSS+JS)
前端简介(HTML+CSS+JS)
|
4天前
|
JavaScript
JS图表生成以及点击修改图表样式
JS图表生成以及点击修改图表样式
|
7天前
|
前端开发 安全 数据安全/隐私保护
Web实战丨基于django+html+css+js的在线博客网站
Web实战丨基于django+html+css+js的在线博客网站
14 2
|
7天前
|
数据库 数据安全/隐私保护 Python
Web实战丨基于django+html+css+js的电子商务网站
Web实战丨基于django+html+css+js的电子商务网站
29 3
|
11天前
|
前端开发 UED 容器
CSS基础-文本样式:颜色、字体、大小、对齐
【6月更文挑战第8天】本文介绍了CSS中设置文本颜色、字体、大小和对齐的基础知识。通过color属性改变文本颜色,使用font-family设置字体,用font-size调整大小,text-align控制对齐方式。注意浏览器兼容性、文本溢出和响应式设计的问题。提供的代码示例展示了这些属性的用法,帮助创建更具吸引力的网页。
|
12天前
|
JavaScript 前端开发
一个基于HTML与JavaScript的Wizard演示
一个基于HTML与JavaScript的Wizard演示
8 0
|
12天前
|
Web App开发 监控 JavaScript
JS 鼠标框选(页面选择)时返回对应的 HTML 或文案内容
JS 鼠标框选(页面选择)时返回对应的 HTML 或文案内容 当用户进行鼠标框选选择了页面上的内容时,把选择的内容进行上报。 分为以下几点: 选择文案时 选择图片、svg、iframe、video、audio 等标签时 选择 input、select、textarea 等标签时 选择 input、textarea 标签内容时 选择类似 &nbsp; 字符时 键盘全选时 鼠标右键选择 以上各模块结合时 当包含标签的时候,返回 html 结构,只有文本时返回文本内容
13 1
|
13天前
|
移动开发 前端开发 JavaScript
[初学者来练]用html+css+javascript个人博客作业需求
【6月更文挑战第3天】该项目旨在通过HTML、CSS和JavaScript创建一个响应式个人博客网站,提升前端开发技术理解与实践能力。主要包括设计简洁页面布局、实现主页展示、文章列表、详情页及评论功能。技术要求使用HTML5/CSS3/JavaScript,可选前端框架,强调代码质量和可维护性。提交内容需包括完整网站、开发文档和测试过的代码。评分标准涉及设计、功能实现、技术应用和文档质量。
15 0
|
19天前
|
前端开发
CSS属性涵盖了从文本样式到布局控制、从颜色处理到动画效果的各个方面
【5月更文挑战第31天】CSS属性涵盖了从文本样式到布局控制、从颜色处理到动画效果的各个方面
25 1

热门文章

最新文章