Wot Design Snippets for Visual Studio Code

This extension adds Wot Design Code Snippets and Syntax Highlight into Visual Studio Code.

本代码片段搜集了 Wot Design 的代码片段，详细清单请参考下文列表。

Wot Design 组件

基础组件

Prefix	Snippet Content
wd-badge with type	<wd-badge :value="|value" :max="|99" type="|[primary,warning,success,danger,info]">     ${TM_SELECTED_TEXT:|<wd-button size="small">评论</wd-button>} </wd-badge>
wd-badge with bg-color	<wd-badge :value="|value" :max="|99" bg-color="|pink">     ${TM_SELECTED_TEXT:|<wd-button size="small">回复</wd-button>} </wd-badge>
wd-badge use dot	<wd-badge is-dot>     ${TM_SELECTED_TEXT:|<wd-button size="small">数据查询</wd-button>} </wd-badge>
wd-button	<wd-button type="|[primary,success,info,warning,error,text,icon]" size="|[small,medium,large]">     ${TM_SELECTED_TEXT:|按钮文字} </wd-button>
wd-button disabled	<wd-button disabled>${TM_SELECTED_TEXT:|按钮文字}</wd-button>
wd-button plain	<wd-button plain>     ${TM_SELECTED_TEXT:|幽灵按钮} </wd-button>
wd-button loading	<wd-button loading>     ${TM_SELECTED_TEXT:|加载中} </wd-button>
wd-button text	<wd-button type="text">${TM_SELECTED_TEXT:|按钮文字}</wd-button>
wd-button icon	<wd-button icon="|[arrow-thin-up,arrow-thin-down,arrow-right,arrow-down,arrow-up,arrow-left,fill-camera,clock,computer,eye-close,view,translate,download,picture,evaluation,goods,lenovo,list,note,video,warning,setting,camera,chat,delete-thin,add-circle,add,scan,translate-bold,close,search,delete,more,thin-arrow-left,filter,phone,refresh,check,phone-compute,transfer,keywords,star-on,check-bold,error-fill,warn-bold,close-outline,close-bold,check-outline,wifi-error,subscribe,detection,read,fill-arrow-down,dong,edit-outline,copy,bags,decrease,jdm,spool]">|按钮文字</wd-button>
wd-button block	<wd-button block>|块状按钮</wd-button>
wd-icon	<wd-icon size="|20px" color="|#0083ff" name="|[arrow-thin-up,arrow-thin-down,arrow-right,arrow-down,arrow-up,arrow-left,fill-camera,clock,computer,eye-close,view,translate,download,picture,evaluation,goods,lenovo,list,note,video,warning,setting,camera,chat,delete-thin,add-circle,add,scan,translate-bold,close,search,delete,more,thin-arrow-left,filter,phone,refresh,check,phone-compute,transfer,keywords,star-on,check-bold,error-fill,warn-bold,close-outline,close-bold,check-outline,wifi-error,subscribe,detection,read,fill-arrow-down,dong,edit-outline,copy,bags,decrease,jdm,spool]">|按钮文字</wd-icon>
wd-icon with tag	<wd-icon size="|20px" color="|#0083ff" tag="|div" name="|[arrow-thin-up,arrow-thin-down,arrow-right,arrow-down,arrow-up,arrow-left,fill-camera,clock,computer,eye-close,view,translate,download,picture,evaluation,goods,lenovo,list,note,video,warning,setting,camera,chat,delete-thin,add-circle,add,scan,translate-bold,close,search,delete,more,thin-arrow-left,filter,phone,refresh,check,phone-compute,transfer,keywords,star-on,check-bold,error-fill,warn-bold,close-outline,close-bold,check-outline,wifi-error,subscribe,detection,read,fill-arrow-down,dong,edit-outline,copy,bags,decrease,jdm,spool]">|按钮文字</wd-icon>
wd-icon i	<i class="|[arrow-thin-up,arrow-thin-down,arrow-right,arrow-down,arrow-up,arrow-left,fill-camera,clock,computer,eye-close,view,translate,download,picture,evaluation,goods,lenovo,list,note,video,warning,setting,camera,chat,delete-thin,add-circle,add,scan,translate-bold,close,search,delete,more,thin-arrow-left,filter,phone,refresh,check,phone-compute,transfer,keywords,star-on,check-bold,error-fill,warn-bold,close-outline,close-bold,check-outline,wifi-error,subscribe,detection,read,fill-arrow-down,dong,edit-outline,copy,bags,decrease,jdm,spool]">|按钮文字</i>
wd-popup basic	<wd-popup v-model="|show" :style="{ 'padding': '|30px |40px' }">     ${TM_SELECTED_TEXT:|内容} </wd-popup>
wd-popup position	<wd-popup v-model="|show" position="|[top,right,bottom,left]" :style="{ 'height': '|200px' }" |closable>     ${TM_SELECTED_TEXT:|内容} </wd-popup>

导航组件

Prefix	Snippet Content
wd-action-sheet	<wd-action-sheet />

表单组件

Prefix	Snippet Content
wd-checkbox	<wd-checkbox />

交互组件

Prefix	Snippet Content
wd-action-sheet	<wd-action-sheet />

展示组件

Prefix	Snippet Content
wd-card	<wd-card title="|卡片标题">     ${TM_SELECTED_TEXT:|卡片内容} </wd-card>
wd-card rectangle	<wd-card type="rectangle">     ${TM_SELECTED_TEXT:|卡片内容} </wd-card>
wd-collapse	<wd-collapse v-model="|value">     <wd-collapse-item title="|折叠栏的标题" name="|折叠栏的标识符">         ${TM_SELECTED_TEXT:|折叠栏内容}     </wd-collapse-item> </wd-collapse>
wd-collapse accordion	<wd-collapse v-model="|value" accordion>     <wd-collapse-item title="|折叠栏的标题" name="|折叠栏的标识符">         ${TM_SELECTED_TEXT:|折叠栏内容}     </wd-collapse-item> </wd-collapse>
wd-collapse disabled	<wd-collapse v-model="|value">     <wd-collapse-item title="|折叠栏的标题" name="|折叠栏的标识符" disabled>         ${TM_SELECTED_TEXT:|折叠栏内容}     </wd-collapse-item> </wd-collapse>
wd-collapse viewmore	<wd-collapse viewmore v-model="|value">     ${TM_SELECTED_TEXT:|折叠栏内容} </wd-collapse>
wd-curtain	<wd-curtain v-model="|true" src="|" to="|"></wd-curtain>
wd-curtain width	<wd-curtain v-model="|true" src="|" to="|" width="|280px"></wd-curtain>
wd-curtain close-position	<wd-curtain v-model="|true" src="|" to="|" close-position="|[inset, top, bottom, bottom, top-left, top-right, bottom-left, bottom-right]"></wd-curtain>
wd-curtain close-on-click-modal	<wd-curtain v-model="|true" src="|" to="|" close-position="|[true, false]"></wd-curtain>
wd-divider	<wd-divider></wd-divider>
wd-img	<wd-img width="|100" height="|100" src="|"/>
wd-img fit	<wd-img width="|100" height="|100" src="|" fit="|[contain, cover, fill, none, scale-down]"/>
wd-img round	<wd-img width="|100" height="|100" src="|" round/>
wd-img lazy	<wd-img v-lazy="|"/>
wd-img-preview	<wd-img-preview v-model="|true" :urls="|" @open="|" @close="|" :on-long-tap="|" ></wd-img-preview>
wd-notice-bar	<wd-notice-bar text="${TM_SELECTED_TEXT:|提示消息内容}" prefix="|[arrow-thin-up,arrow-thin-down,arrow-right,arrow-down,arrow-up,arrow-left,fill-camera,clock,computer,eye-close,view,translate,download,picture,evaluation,goods,lenovo,list,note,video,warning,setting,camera,chat,delete-thin,add-circle,add,scan,translate-bold,close,search,delete,more,thin-arrow-left,filter,phone,refresh,check,phone-compute,transfer,keywords,star-on,check-bold,error-fill,warn-bold,close-outline,close-bold,check-outline,wifi-error,subscribe,detection,read,fill-arrow-down,dong,edit-outline,copy,bags,decrease,jdm,spool]" ></wd-notice-bar>
wd-notice-bar type	<wd-notice-bar text="${TM_SELECTED_TEXT:|提示消息内容}" prefix="|[arrow-thin-up,arrow-thin-down,arrow-right,arrow-down,arrow-up,arrow-left,fill-camera,clock,computer,eye-close,view,translate,download,picture,evaluation,goods,lenovo,list,note,video,warning,setting,camera,chat,delete-thin,add-circle,add,scan,translate-bold,close,search,delete,more,thin-arrow-left,filter,phone,refresh,check,phone-compute,transfer,keywords,star-on,check-bold,error-fill,warn-bold,close-outline,close-bold,check-outline,wifi-error,subscribe,detection,read,fill-arrow-down,dong,edit-outline,copy,bags,decrease,jdm,spool]" type="|[info, warning, danger]"></wd-notice-bar>
wd-notice-bar scrollable	<wd-notice-bar text="${TM_SELECTED_TEXT:|提示消息内容}" :scrollable="|[false,true]"></wd-notice-bar>
wd-notice-bar slot	<wd-notice-bar>     <div slot="prefix">|前置插槽</div>     |提示消息内容     <div slot="suffix">|后置插槽</div> </wd-notice-bar>
wd-notice-bar closable	<wd-notice-bar text="${TM_SELECTED_TEXT:|提示消息内容}" closable></wd-notice-bar>
wd-notice-bar color	<wd-notice-bar text="${TM_SELECTED_TEXT:|提示消息内容}" color="|#34D19D" background-color="|#f0f9eb" ></wd-notice-bar>
wd-popover	<wd-popover content="${TM_SELECTED_TEXT:|气泡消息内容}">     <wd-button>|点击展示</wd-button> </wd-popover>
wd-popover mode	<wd-popover mode="|[normal, menu]" :content="|" @menu-click="|">     <wd-button>|点击展示</wd-button> </wd-popover>
wd-progress	<wd-progress :percentage="|30"></wd-progress>
wd-progress hide-text	<wd-progress :percentage="|30" hide-text></wd-progress>
wd-progress status	<wd-progress :percentage="|30" hide-text status="|[success,danger]"></wd-progress>
wd-progress color	<wd-progress :percentage="|30" color="|#00c740"></wd-progress>
wd-status-tip	<wd-status-tip type="|[search, network, content, collect, comment, halo, message]" tip="${TM_SELECTED_TEXT:|提示文案}"/>
wd-sort-button	<wd-sort-button v-model="|value" title="|排序按钮展示文案"/>
wd-sort-button allow-reset	<wd-sort-button v-model="|value" title="|排序按钮展示文案" allow-reset/>
wd-sort-button desc-first	<wd-sort-button v-model="|value" title="|排序按钮展示文案" desc-first/>
wd-steps	<wd-steps :active="|0">     <wd-step></wd-step>     <wd-step></wd-step>     <wd-step></wd-step> </wd-steps>
wd-steps align-center	<wd-steps :active="|0" align-center>     <wd-step></wd-step>     <wd-step></wd-step>     <wd-step></wd-step> </wd-steps>
wd-steps title description	<wd-steps :active="|0" align-center>     <wd-step title="|步骤标题" description="|描述信息"></wd-step> </wd-steps>
wd-steps icon	<wd-steps :active="|0" align-center>     <wd-step icon="wd-icon-|[arrow-thin-up,arrow-thin-down,arrow-right,arrow-down,arrow-up,arrow-left,fill-camera,clock,computer,eye-close,view,translate,download,picture,evaluation,goods,lenovo,list,note,video,warning,setting,camera,chat,delete-thin,add-circle,add,scan,translate-bold,close,search,delete,more,thin-arrow-left,filter,phone,refresh,check,phone-compute,transfer,keywords,star-on,check-bold,error-fill,warn-bold,close-outline,close-bold,check-outline,wifi-error,subscribe,detection,read,fill-arrow-down,dong,edit-outline,copy,bags,decrease,jdm,spool]" type="|[info, warning, danger]}"></wd-step> </wd-steps>
wd-steps vertical	<wd-steps :active="|0" vertical>     <wd-step description="|描述信息"></wd-step> </wd-steps>
wd-steps dot	<wd-steps :active="|0" align-center dot>     <wd-step description="|描述信息"></wd-step> </wd-steps>
wd-steps status	<wd-steps :active="|0" align-center>     <wd-step title="|步骤标题" status="|[finished, process, error]"></wd-step> </wd-steps>
Sticky	<Sticky>     <p>${TM_SELECTED_TEXT:|内容}</p> </Sticky>
Sticky offset-top	<Sticky :offset-top="|44">     <p>${TM_SELECTED_TEXT:|内容}</p> </Sticky>
wd-tag	<wd-tag>${TM_SELECTED_TEXT:|标签内容}</wd-tag>
wd-tag type	<wd-tag type="|[primary, danger, warning, success]">${TM_SELECTED_TEXT:|标签内容}</wd-tag>
wd-tag plain	<wd-tag plain>${TM_SELECTED_TEXT:|标签内容}</wd-tag>
wd-tag mark	<wd-tag mark>${TM_SELECTED_TEXT:|标签内容}</wd-tag>
wd-tag round	<wd-tag round>${TM_SELECTED_TEXT:|标签内容}</wd-tag>
wd-tag icon	<wd-tag icon="wd-icon-|[arrow-thin-up,arrow-thin-down,arrow-right,arrow-down,arrow-up,arrow-left,fill-camera,clock,computer,eye-close,view,translate,download,picture,evaluation,goods,lenovo,list,note,video,warning,setting,camera,chat,delete-thin,add-circle,add,scan,translate-bold,close,search,delete,more,thin-arrow-left,filter,phone,refresh,check,phone-compute,transfer,keywords,star-on,check-bold,error-fill,warn-bold,close-outline,close-bold,check-outline,wifi-error,subscribe,detection,read,fill-arrow-down,dong,edit-outline,copy,bags,decrease,jdm,spool]" type="|[info, warning, danger]" mark>${TM_SELECTED_TEXT:|标签内容}</wd-tag>
wd-tag color	<wd-tag color="|#0083ff" bg-color="|#d0e8ff">${TM_SELECTED_TEXT:|标签内容}</wd-tag>
wd-tag closable	<wd-tag v-if=="|true" closable round @close="|">${TM_SELECTED_TEXT:|标签内容}</wd-tag>
wd-tag dynamic	<wd-tag dynamic round></wd-tag>
wd-tooltip	<wd-tooltip placement="|[top, top-start, top-end, bottom, bottom-start, bottom-end, left, left-start, left-end, right, right-start, right-end]" content="|提示内容">     <wd-button>|top</wd-button> </wd-tooltip>
wd-tooltip show-close	<wd-tooltip content="|提示内容" show-close>     <wd-button>|关闭</wd-button> </wd-tooltip>
wd-tooltip content	<wd-tooltip placement="|[top, top-start, top-end, bottom, bottom-start, bottom-end, left, left-start, left-end, right, right-start, right-end]">     <div slot="content">         <div>|多行文本</div>     </div>     <wd-button>|多行文本</wd-button> </wd-tooltip>

License

MIT