{
// Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is
// used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders.
// Placeholders with the same ids are connected.
// Example:
// "Print to console": {
// "scope": "javascript,typescript",
// "prefix": "log",
// "body": [
// "console.log('$1');",
// "$2"
// ],
// "description": "Log output to console"
// }
"Lin UI折叠面板子项组件Snippet": {
"prefix": "wl-collapse-item",
"body": [
"<l-collapse-item",
" item-id=\"折叠面板子项id,需要确保唯一性\"",
" disable=\"{{false}}\"",
" title=\"标题文字\"",
" custom-title=\"{{false}}\"",
" animation-time=\"0.3\"",
">",
"<!-- 折叠面板子项内容 -->",
"</l-collapse-item>",
],
"description": "Lin UI折叠面板子项代码片段"
},
"Lin UI列表组件Snippet": {
"prefix": "wl-list",
"body": [
"<l-list",
" icon=\"add\"",
" icon-color=\"#34BFA3\"",
" icon-size=\"28\"",
" title=\"列表组件中左侧文本的内容\"",
" desc=\"列表组件中左侧描述文本的内容\"",
" right-desc=\"列表组件中右侧描述文本的内容\"",
" is-link=\"{{true}}\"",
" link-type=\"navigateTo|redirectTo|reLaunch|switchTab\"",
" url=\"跳转的路径\"",
" tag-content=\"标签的内容\"",
" tag-position=\"right|left\"",
" tag-color=\"#34BFA3\"",
" tag-shape=\"square|circle\"",
" tag-plain=\"{{true}}\"",
" dotBadge=\"{{false}}\"",
" badge-count=\"12\"",
" badge-position=\"right|left\"",
" badge-max-count=\"9\"",
" badge-count-type=\"overflow|limit|custom\"",
" left-gap=\"0\"",
" right-gap=\"0\"",
" is-hover=\"{{true}}\"",
"/>",
],
"description": "Lin UI列表组件代码片段"
},
"Lin UI按钮组件Snippet": {
"prefix": "wl-button",
"body": [
"<l-button",
" type=\"default|success|error|warning\"",
" size=\"mini(小)|medium(中)|large(大)|long(通栏按钮)\"",
" width=\"500rpx\"",
" height=\"120rpx\"",
" shape=\"square(直角)|circle(圆弧)或semicircle(半圆)\"",
" plain=\"{{true}}\"",
" disabled=\"{{false}}\"",
" loading=\"{{false}}\"",
" icon=\"warning\"",
" icon-size=\"20\"",
" icon-color=\"#000\"",
" bind:lintap=\"handleEvent\"",
" bind:contact=\"handleEvent\"",
" bind:getphonenumber=\"handleEvent\"",
" bind:error=\"handleEvent\"",
" bind:opensetting=\"handleEvent\"",
" bind:getuserinfo=\"handleEvent\"",
" bind:chooseavatar=\"handleEvent\"",
">",
"我的按钮",
"</l-button>",
"<!-- bind:lintap 按钮在非禁用状态下点击所触发的事件",
"bind:contact 客服消息回调",
"bind:getphonenumber 获取用户手机号回调",
"bind:error 当使用开放能力时,发生错误的回调",
"bind:opensetting 在打开授权设置页后回调",
"bind:getuserinfo 用户点击该按钮时,会返回获取到的用户信息,回调的detail数据与wx.getUserInfo (opens new window)返回的一 致",
"bind:chooseavatar 获取用户头像,可以从 bindchooseavatar 回调中获取到头像信息 -->",
],
"description": "Lin UI按钮组件代码片段"
},
"Lin UI图标组件Snippet": {
"prefix": "wl-icon",
"body": [
"<l-icon name=\"add\" color=\"#34BFA3\" size=\"30\" />",
],
"description": "Lin UI图标组件代码片段"
},
"Lin UI过渡动画组件Snippet": {
"prefix": "wl-transition",
"body": [
"<l-transition",
" show=\"{{ show }}\"",
" name=\"fade\"",
" bind:linbeforeenter=\"beforeEnter\"",
" bind:linenter=\"entering\"",
" bind:linafterenter=\"afterEnter\"",
" bind:linbeforeleave=\"beforeLeave\"",
" bind:linleave=\"leaving\"",
" bind:linafterleave=\"afterLeave\"",
">",
"过渡动画",
"</l-transition>",
"<!-- duration=\"{{ { enter: 300, leave: 1000 } }}\" ",
"name=\"fade(淡入)|fade-up(上滑淡入)|fade-down(下滑淡入)|fade-left(左滑淡入)|fade-right(右滑淡入)|slide-up(上滑进入)|slide-down(下滑进入)|slide-left(左滑进入)|slide-right(右滑进入)\" -->",
],
"description": "Lin UI过渡动画组件代码片段"
},
"Lin UI宫格组件Snippet": {
"prefix": "wl-grid",
"body": [
"<l-grid",
" row-num=\"3\"",
" show-border=\"{{false}}\"",
" show-row-border=\"{{true}}\"",
" show-col-border=\"{{false}}\"",
" is-hover=\"{{true}}\"",
">",
"<l-grid-item key=\"key的值\" slot=\"slot的值必须和key的值相等\">",
"<!-- 宫格内容 -->",
"</l-grid-item>",
"</l-grid>",
],
"description": "Lin UI宫格组件代码片段"
},
"Lin UI宫格项组件Snippet": {
"prefix": "wl-grid-item",
"body": [
"<l-grid-item key=\"key的值\" slot=\"slot的值必须和key的值相等\">",
"<!-- 宫格内容 -->",
"</l-grid-item>",
],
"description": "Lin UI宫格项组件代码片段"
},
"Lin UI卡片组件Snippet": {
"prefix": "wl-card",
"body": [
"<l-card",
" type=\"primary|avatar|cover\"",
" image=\"卡片内图片的路径\"",
" title=\"卡片的标题\"",
" describe=\"卡片的描述\"",
" position=\"left|right\"",
" plaintext=\"{{false}}\"",
" full=\"{{false}}\"",
">",
"<view>卡片内容</view>",
"</l-card>",
"<!-- type 卡片类型 String",
"image 卡片内图片的路径 String",
"image-mode 卡片内图片的显示模式",
"title 卡片的标题 String",
"describe 卡片的描述 String",
"position 卡片内图片的位置 String",
"plaintext 卡片是否为纯文字卡片 Boolean",
"full 卡片是否为通栏卡片 Boolean -->",
],
"description": "Lin UI卡片组件代码片段"
},
"Lin UI相册组件Snippet": {
"prefix": "wl-album",
"body": [
"<l-album",
" urls='{{urls}}'",
" key='url'",
" preview=\"{{true}}\"",
" gap-row=\"10\"",
" gap-colum=\"10\"",
" max-number=\"9\"",
" custom-row-number=\"{{false}}\"",
" every-row-number=\"3\"",
" bind:lintap=\"handleEvent\"",
"/>",
"<!-- bind:lintap点击图片时触发 event.detail = {current:[ 当前点击项的信息 ], all: [ 当前所有项信息 ], index: 点击项的下标} -->",
],
"description": "Lin UI相册组件代码片段"
},
"Lin UI折叠面板组件Snippet": {
"prefix": "wl-collapse",
"body": [
"<l-collapse",
" type=\"normal|accordion\"",
" expand-item-id=\"\"",
" bind:linfold=\"handleEvent\"",
" bind:linexpand=\"handleEvent\"",
">",
"<!-- expand-item-id初始状态需要展开的折叠面板子项id(手风琴模式下取数组第一个值)Array",
"bind:linfold折叠面板折叠回调事件折叠面板子项id",
"bind:linexpand折叠面板展开回调事件折叠面板子项id -->",
"<l-collapse-item title=\"子面板1\">",
"<!-- 面板内容 -->",
"</l-collapse-item>",
"<l-collapse-item title=\"子面板2\">",
"<!-- 面板内容 -->",
"</l-collapse-item>",
"</l-collapse>",
],
"description": "Lin UI折叠面板组件代码片段"
},
"Lin UI图像头像组件Snippet": {
"prefix": "wl-avatar-image",
"body": [
"<l-avatar",
" text=\"MyAvatar\"",
" placement=\"left|right|top|bottom\"",
" shape=\"circle\"",
" size=100",
" src=\"绝对图像路径\"",
" bind:lintap=\"handleEvent\"",
"/>",
],
"description": "Lin UI图像头像组件代码片段"
},
"Lin UI图标头像组件Snippet": {
"prefix": "wl-avatar-icon",
"body": [
"<l-avatar",
" text=\"MyAvatar\"",
" placement=\"left|right|top|bottom\"",
" shape=\"circle\"",
" size=\"100\"",
" icon=\"user\"",
" icon-color=\"#34BFA3\"",
" icon-size=\"28\"",
" bind:lintap=\"handleEvent\"",
"/>",
],
"description": "Lin UI图标头像组件代码片段"
},
"Lin UI徽章组件Snippet": {
"prefix": "wl-badge",
"body": [
"<l-badge",
" dot=\"{{false}}\"",
" value=\"10\"",
" max-count=\"99\"",
" show=\"{{true}}\"",
" mode=\"number|text\"",
" number-type=\"overflow|ellipsis|limit\"",
" shape=\"circle|horn\"",
" bind:lintap=\"handleEvent\"",
">",
"<view class=\"\" hover-class=\"none\" hover-stop-propagation=\"false\" />",
"</l-badge>",
"<!-- 通过number-type属性设置徽标内数字的显示方式。可选值为overflow、ellipsis、limit,默认值为overflow。",
"设置number-type为overflow,超过max-count会显示为${max-count}+。通过max-count属性修改数字最大值,max-count默认值为99。",
"设置number-type为ellipsis,超过max-count会显示为...。通过max-count属性修改数字最大值,max-count默认值为99。",
"设置number-type为limit时数字大于1000显示为${value/1000}k。 -->",
],
"description": "Lin UI徽章组件代码片段"
},
"Lin UI DateTime类型的倒计时组件Snippet": {
"prefix": "wl-countdown-datetime",
"body": [
"<l-countdown",
" status=\"{{true}}\"",
" l-class-time=\"countdown-blue\"",
" l-class=\"countdown-text\"",
" time-type=\"datetime\"",
" countdownType=\"anniversary|normal\"",
" time=\"2022-11-09 00:00\"",
" is-zero-padd=\"{{true}}\"",
" format=\"{%d}天{%h}时{%m}分{%s}秒\"",
" bind:linend=\"handleEvent\"",
"/>",
"<!-- .content .countdown-blue {",
"width: 52rpx ;",
"height: 52rpx;",
"border: 2rpx solid #3683D6;",
"border-radius: 50%;",
"background:transparent;",
"color: #3683D6;",
"}",
".content .countdown-text {",
"color: #3683D6;",
"} -->",
],
"description": "Lin UI DateTime类型的倒计时组件代码片段"
},
"Lin UI Second类型的倒计时组件Snippet": {
"prefix": "wl-countdown-second",
"body": [
"<l-countdown",
" status=\"{{true}}\"",
" l-class-time=\"countdown-blue\"",
" l-class=\"countdown-text\"",
" time-type=\"second\"",
" countdownType=\"anniversary|normal\"",
" time=\"1500\"",
" is-zero-padd=\"{{true}}\"",
" format=\"{%d}天{%h}时{%m}分{%s}秒\"",
" bind:linend=\"handleEvent\"",
"/>",
"<!-- .content .countdown-blue {",
"width: 52rpx ;",
"height: 52rpx;",
"border: 2rpx solid #3683D6;",
"border-radius: 50%;",
"background:transparent;",
"color: #3683D6;",
"}",
".content .countdown-text {",
"color: #3683D6;",
"} -->",
],
"description": "Lin UI Second类型的倒计时组件代码片段"
},
"Lin UI加载中组件Snippet": {
"prefix": "wl-loading",
"body": [
"<l-loading",
" show=\"{{true}}\"",
" type=\"flash|flip|change|circle|rotate\"",
" size=\"mini|medium|large\"",
" color=\"#666\"",
" z-index=\"776\"",
" custom=\"{{false}}\"",
" full-screen=\"{{false}}\"",
" bg-color=\"#666\"",
" opacity=\"1\"",
"/>",
],
"description": "Lin UI加载中组件代码片段"
},
"Lin UI页底提示组件Snippet": {
"prefix": "wl-loadmore",
"body": [
"<l-loadmore",
" show=\"{{true}}\"",
" type=\"end|loading\"",
" loading-text=\"加载中状态的文案,设置loading-text属性可覆盖loading状态下的默认文本\"",
" end-text=\"加载完成状态的文案,设置end-text属性覆盖end状态下的默认文本\"",
" line=\"{{true}}\"",
" size=\"28\"",
" color=\"#666\"",
" custom=\"{{false}}\"",
" bind:lintap=\"handleEvent\"",
">",
"<view slot=\"content\">自定义展示内容</view>",
"<!-- <view slot=\"custom\">自定义页底加载类型</view> -->",
"<view slot=\"loading\">自定义加载时提示的内容</view>",
"<view slot=\"end\">自定义加载完成提示的内容</view>",
"</l-loadmore>",
],
"description": "Lin UI页底提示组件代码片段"
},
"Lin UI遮罩层组件Snippet": {
"prefix": "wl-mask",
"body": [
"<l-mask",
" show=\"{{true}}\"",
" opacity=\"0.5\"",
" z-index=\"99\"",
" center=\"{{true}}\"",
" locked=\"{{false}}\"",
" bind:lintap=\"handleEvent\"",
"/>",
],
"description": "Lin UI遮罩层组件代码片段"
},
"Lin UI通告栏组件Snippet": {
"prefix": "wl-notice-bar",
"body": [
"<l-notice-bar",
" id=\"my-notice-bar\"",
" show=\"{{true}}\"",
" front-icon-name=\"notification\"",
" front-icon-size=\"20\"",
" front-icon-color=\"#3683D6\"",
" end-icon-name=\"close\"",
" end-icon-size=\"20\"",
" end-icon-color=\"#3683D6\"",
" colse=\"{{false}}\"",
" type=\"still|roll|swip\"",
" swip-arr=\"{{arr}}\"",
" speed=\"1500\"",
" bind:lintap=\"handleEvent\"",
" bind:linicontap=\"handleEvent\"",
">",
"我是通告栏",
"</l-notice-bar>",
"<!-- 通过type属性设置通告栏类型为still(静止),roll(字幕滚动),swip(轮播)。默认值为still。",
"当通告栏的类型为swip时,轮播的内容需通过swip-arr属性传入。",
"滚动速度仅在type设置为swip和roll时生效。speed数值越小速度越快,数值越大速度越慢。",
"getNoticeBar(){",
"// 模拟 API 获取内容",
"let apiContent = wx.request(\"...\");",
"this.setData({",
"content: apiContent",
"},()=>{",
"// 获取 notice-bar 组件实例",
"const noticeBarComponent = this.selectComponent(\"#my-notice-bar\");",
"// 刷新组件动画",
"noticeBarComponent.linFlush();",
"});",
"}",
"//如果你的通告栏内容不是写死在 wxml 文件中,而是在运行过程中会动态修改的(比如通过 API 请求修改通告栏内容),",
"//那么你需要在修改通告栏内容之后调用 linFlush() 开放函数刷新一下,通告栏滚动动画才会正常显示。 -->",
],
"description": "Lin UI通告栏组件代码片段"
},
"Lin UI弹出层组件Snippet": {
"prefix": "wl-popup",
"body": [
"<l-popup",
" show=\"{{true}}\"",
" animation=\"{{true}}\"",
" content-align=\"top|left|right|bottom|center\"",
" locked=\"{{false}}\"",
" bind:lintap=\"handleEvent\"",
">",
"<view class=\"popup-buttom\">从下方弹出</view>",
"</l-popup>",
],
"description": "Lin UI弹出层组件代码片段"
},
"Lin UI进度条组件Snippet": {
"prefix": "wl-progress",
"body": [
"<l-progress",
" percent=\"35\"",
" stroke-width='20'",
" border-radius='8'",
" active-color=\"#666\"",
" background-color='#EEE'",
" show-info=\"{{true}}\"",
" text-position=\"right|left\"",
" text-color='#666'",
" interval=\"20rpx\"",
" active=\"{{true}}\"",
">",
"<view slot='header' style=\"width: 30rpx;height:30rpx;border-radius:50%;background-color:#555;display:block;\" />",
"</l-progress>",
],
"description": "Lin UI进度条组件代码片段"
},
"Lin UI状态显示页组件Snippet": {
"prefix": "wl-status-show",
"body": [
"<l-status-show",
" show=\"{{true}}\"",
" bg-color=\"f3f3f3\"",
" full-screen=\"{{false}}\"",
" type=\"success|error|network|cart|order|address|data|product\"",
" image=\"../../image.png\"",
" describe=\"我是描述文案\"",
" button-text=\"按钮文案\"",
" custom=\"{{false}}\"",
" bind:lintap=\"handleEvent\"",
" bind:lincovertap=\"handleEvent\"",
">",
"<view>通过设置custom属性可设置自定义状态展示页。通过slot传入自定义的状态展示内容。</view>",
"</l-status-show>",
"<!-- bind:lintap 点击按钮触发的事件",
"bind:lincovertap 点击状态页组件触发的事件 -->",
],
"description": "Lin UI状态显示页代码片段"
},
"Lin UI标签组件Snippet": {
"prefix": "wl-tag",
"body": [
"<l-tag",
" shape=\"circle|square\"",
" size=\"super-mini(超小)|mini(小)|medium(中)|large(大)\"",
" type=\"touch|reading\"",
" palin=\"{{true}}\"",
" name=\"my-tag\"",
" cell=\"my-tag\"",
" height=\"60rpx\"",
" bg-color=\"#666\"",
" font-color=\"#EEE\"",
" icon-size=\"20\"",
" icon=\"warning\"",
" location=\"right|left\"",
" image=\"../image.png\"",
" disable=\"{{false}}\"",
" select=\"{{true}}\"",
" bind:lintap=\"handleEvent\"",
">",
"我是标签组件",
"</l-tag>",
"<!-- bind:lintap 点击标签时触发的事件,返回当前标签的标示和选中状态 {name,cell,select} -->",
],
"description": "Lin UI标签组件代码片段"
},
"Lin UI步骤条组件Snippet": {
"prefix": "wl-steps",
"body": [
"<l-steps",
" active-index=\"1\"",
" direction=\"row\"",
" step-min-height=\"120rpx\"",
" reverse=\"{{false}}\"",
" status=\"process\"",
" dot=\"{{true}}\"",
" color=\"#48a7e3\"",
">",
"<l-step title=\"title\" custom=\"{{true}}\">",
"<l-icon",
" name=\"user\"",
" color=\"#34BFA3\"",
" size=\"30\"",
" slot=\"dot\"",
"/>",
"<view slot=\"describe\">自定义步骤条元素描述内容</view>",
"</l-step>",
"<l-step",
" title=\"title\"",
" describe=\"describe\"",
" icon=\"user\"",
" icon-size=\"28\"",
" icon-color=\"#EEE\"",
" custom=\"{{false}}\"",
"/>",
"</l-steps>",
],
"description": "Lin UI步骤条组件代码片段"
},
"Lin UI步骤条元素组件Snippet": {
"prefix": "wl-step",
"body": [
"<l-step title=\"title\" custom=\"{{true}}\">",
"<l-icon",
" name=\"user\"",
" color=\"#34BFA3\"",
" size=\"30\"",
" slot=\"dot\"",
"/>",
"<view slot=\"describe\">自定义步骤条元素描述内容</view>",
"</l-step>",
"<l-step",
" title=\"title\"",
" describe=\"describe\"",
" icon=\"user\"",
" icon-size=\"28\"",
" icon-color=\"#EEE\"",
" custom=\"{{false}}\"",
"/>",
],
"description": "Lin UI步骤条元素组件代码片段"
},
"Lin UI圆形进度条组件Snippet": {
"prefix": "wl-circle",
"body": [
"<l-circle",
" percent='35'",
" outer-diameter='220rpx'",
" inner-diameter='170rpx'",
" active-color='#333'",
" background-color='#EEE'",
" inner-color='yellow'",
" show-value='{{true}}'",
" show-info='{{true}}'",
" value-color='red'",
" value-size='30'",
" active=\"{{false}}\"",
">",
"<!-- <image src=\"timg.jpeg\" style=\"width:90rpx;height:90rpx;border-radius:50%;display:block;\" /> -->",
"</l-circle>",
],
"description": "Lin UI圆形进度条组件代码片段"
},
"Lin UI选项卡组件Snippet": {
"prefix": "wl-segment",
"body": [
"<l-segment",
" active-color=\"#EEE\"",
" inactive-color=\"#333\"",
" has-line=\"{{true}}\"",
" even=\"{{true}}\"",
" placement=\"top|left|right|bottom\"",
" active-key=\"tabKey\"",
" scrollable=\"{{true}}\"",
" bind:linchange=\"handleEvent\"",
">",
"<l-segment-item",
" icon=\"user\"",
" icon-size=\"28rpx\"",
" picPlacement=\"top|left|right|bottom\"",
" badge-count-type=\"overflow|limit|custom\"",
" dot-badge=\"{{false}}\"",
" badge-count=\"35\"",
" badge-max-count=\"99\"",
" tab=\"选项卡名称\"",
" key=\"tabKey\"",
"/>",
"</l-segment>",
"<!-- bind:linchange",
"segment切换的回调事件",
"activeKey:当前激活选项卡的 key",
"currentIndex:当前激活选项卡的索引",
"cell:segment-item 绑定的自定义数据 -->",
],
"description": "Lin UI选项卡组件代码片段"
},
"Lin UI选项卡子项组件Snippet": {
"prefix": "wl-segment-item",
"body": [
"<l-segment-item",
" icon=\"user\"",
" icon-size=\"28rpx\"",
" picPlacement=\"top|left|right|bottom\"",
" badge-count-type=\"overflow|limit|custom\"",
" dot-badge=\"{{false}}\"",
" badge-count=\"35\"",
" badge-max-count=\"99\"",
" tab=\"选项卡名称\"",
" key=\"tabKey\"",
"/>",
],
"description": "Lin UI选项卡子项组件代码片段"
},
"Lin UI胶囊栏组件Snippet": {
"prefix": "wl-capsule-bar",
"body": [
"<l-capsule-bar",
" home-page=\"/pages/home/home\"",
" title=\"wpp的微信小程序\"",
" title-color=\"标题颜色\"",
" bg-color=\"CapsuleBar背景色\"",
" status-bar-color=\"StatusBar背景色\"",
" title-bar-color=\"TitleBar背景色\"",
" capsule-left-icon-width=\"38\"",
" capsule-left-icon-height=\"38\"",
" capsule-color=\"左侧胶囊按钮颜色(使用自定义图标时无效 white/black\"",
" capsule-right-icon-width=\"38\"",
" capsule-right-icon-height=\"38\"",
" capsule-left-icon-path=\"https://cdn.talelin.com/20201226182234.png\"",
" capsule-right-icon-path=\"https://cdn.talelin.com/20201226182244.png\"",
" disable-back=\"{{false}}\"",
" disable-home=\"{{false}}\"",
" hidden-capsule=\"{{false}}\"",
" hidden-title=\"{{false}}\"",
" bind:linlefttap=\"handleEvent\"",
" bind:linleftlongpress=\"handleEvent\"",
" bind:linrighttap=\"handleEvent\"",
" bind:linrightlongpress=\"handleEvent\"",
">",
"<view>内容</view>",
"<!-- bind:linlefttap 点击胶囊左侧按钮回调事件(在返回上一页之前触发)",
"bind:linleftlongpress 长按胶囊左侧按钮回调事件",
"bind:linrighttap 点击胶囊右侧按钮回调事件(在返回主页之前触发)",
"bind:linrightlongpress 长按胶囊右侧按钮回调事件 -->",
"</l-capsule-bar>",
],
"description": "Lin UI胶囊栏组件代码片段"
},
"Lin UI轻提示组件Snippet": {
"prefix": "wl-toast",
"body": [
"<l-toast",
" show=\"{{true}}\"",
" image=\"path/to/img.png\"",
" icon=\"success\"",
" icon-size=\"60rpx\"",
" icon-color=\"#fff\"",
" title=\"这是一条基础提示框\"",
" placement=\"top|left|right|bottom\"",
" duration=\"1500\"",
" offsetX=\"0\"",
" offsetY=\"0\"",
"/>",
],
"description": "Lin UI轻提示组件代码片段"
},
"Lin UI模态框组件Snippet": {
"prefix": "wl-dialog",
"body": [
"<l-dialog",
" show=\"{{true}}\"",
" type=\"alert|confirm\"",
" show-title=\"{{true}}\"",
" title=\"标题\"",
" content=\"内容\"",
" confirm-text=\"yes\"",
" confirm-color=\"#f60\"",
" cancel-text=\"no~\"",
" cancel-color=\"#999\"",
" locked=\"{{true}}\"",
" bind:lintap=\"handleEvent\"",
" bind:linconfirm=\"handleEvent\"",
" bind:lincancel=\"handleEvent\"",
">",
"<image class='dio-img' src='/path/to/example.gif' />",
"</l-dialog>",
"<!-- bind:lintap 当点击背景时触发的事件",
"bind:linconfirm 当点击确定时触发的事件 confirm",
"bind:lincancel 当点击取消时触发的事件 cancel -->",
],
"description": "Lin UI模态框组件代码片段"
},
"Lin UI输入框组件Snippet": {
"prefix": "wl-input",
"body": [
"<l-input",
" type=\"text|idcard|password|number|digit\"",
" label=\"标签名称\"",
" width=\"750\"",
" maxlength=\"140\"",
" tip-type=\"toast|message|text\"",
" showRow=\"{{true}}\"",
" colon=\"{{false}}\"",
" focus=\"{{true}}\"",
" value=\"{{inputValue}}\"",
" hide-label=\"{{false}}\"",
" label-layout=\"left|right\"",
" label-width=\"200\"",
" placeholder=\"占位符\"",
" clear=\"{{true}}\"",
" required=\"{{true}}\"",
" rules=\"{{cardRule}}\"",
" disable=\"{{false}}\"",
" bind:lininput=\"handleEvent\"",
" bind:linfocus=\"handleEvent\"",
" bind:linblur=\"handleEvent\"",
" bind:linconfirm=\"handleEvent\"",
" bind:linclear=\"handleEvent\"",
">",
"<!-- <view slot=\"left\">",
"<image src=\"path/to/email.png\" />",
"<text>自定义Input组件左边(label)部分</text>",
"</view> -->",
"<image slot=\"right\" src=\"path/to/img.png\" />",
"</l-input>",
"<!-- data:{",
"inputValue:\"\",",
"cardRule:[{",
"required: true",
"},{",
"type: 'number',",
"min: 16,",
"max: 19,",
"message: \"长度在16-19之间\"",
"}]",
"} -->",
"<!-- bind:lininput 键盘输入时触发 输入框当前值 value -",
"bind:linfocus 输入框聚焦时触发 输入框当前值 value -",
"bind:linblur 输入框失去焦点时触发 输入框当前值 value -",
"bind:linconfirm 点击完成按钮时触发 输入框当前值 value -",
"bind:linclear 点击清除按钮时触发 -->",
],
"description": "Lin UI输入框组件代码片段"
},
"Lin UI文本域组件Snippet": {
"prefix": "wl-textarea",
"body": [
"<l-textarea",
" value=\"{{textareaValue}}\"",
" border=\"{{true}}\"",
" disable=\"{{false}}\"",
" focus=\"{{false}}\"",
" rules=\"{{rules}}\"",
" tip-type=\"toast|message|text\"",
" auto-height=\"{{true}}\"",
" indicator=\"{{true}}\"",
" maxlength=\"140\"",
" placeholder=\"说说你的想法吧...\"",
" bind:lininput=\"handleEvent\"",
" bind:linfocus=\"handleEvent\"",
" bind:linblur=\"handleEvent\"",
" bind:linconfirm=\"handleEvent\"",
"/>",
],
"description": "Lin UI文本域组件代码片段"
},
"Lin UI单项选择器组件Snippet": {
"prefix": "wl-radio-group",
"body": [
"<l-radio-group",
" current=\"2\"",
" none-checked=\"{{false}}\"",
" placement=\"row|column\"",
" bind:linchange=\"handleEvent\"",
">",
"<l-radio",
" placement=\"left|right\"",
" disable=\"{{false}}\"",
" color=\"red\"",
" size=\"32\"",
" select-color=\"green\"",
" key=\"1\"",
" custom=\"{{true}}\"",
">",
"<l-icon",
" slot=\"custom\"",
" name=\"add\"",
" color=\"#34BFA3\"",
" size=\"30\"",
"/>",
"<text>选项1</text>",
"</l-radio>",
"<l-radio",
" placement=\"left|right\"",
" disable=\"{{false}}\"",
" color=\"red\"",
" size=\"32\"",
" select-color=\"green\"",
" key=\"2\"",
">",
"选项2",
"</l-radio>",
"</l-radio-group>",
],
"description": "Lin UI单项选择器组件代码片段"
},
"Lin UI单选框组件Snippet": {
"prefix": "wl-radio",
"body": [
"<l-radio",
" placement=\"left|right\"",
" disable=\"{{false}}\"",
" color=\"red\"",
" size=\"32\"",
" select-color=\"green\"",
" key=\"1\"",
" custom=\"{{true}}\"",
">",
"<l-icon",
" slot=\"custom\"",
" name=\"add\"",
" color=\"#34BFA3\"",
" size=\"30\"",
"/>",
"<text>选项1</text>",
"</l-radio>",
"<l-radio",
" placement=\"left|right\"",
" disable=\"{{false}}\"",
" color=\"red\"",
" size=\"32\"",
" select-color=\"green\"",
" key=\"2\"",
">",
"选项2",
"</l-radio>",
],
"description": "Lin UI单选框组件代码片段"
},
"Lin UI复选框容器组件Snippet": {
"prefix": "wl-checkbox-group",
"body": [
"<l-checkbox-group",
" min-selected=\"{{2}}\"",
" max-selected=\"{{4}}\"",
" palcement=\"row|column\"",
" bind:linchange=\"onCheckboxChange\"",
" bind:linout=\"handleEvent\"",
">",
"<l-checkbox",
" placement=\"left|right\"",
" wx:for-items=\"{{countries}}\"",
" wx:key=\"{{item.value}}\"",
" key=\"{{item.value}}\"",
" checked=\"{{item.isChecked}}\"",
" disabled=\"{{item.disabled}}\"",
" size=\"38rpx\"",
" color=\"red\"",
" selected-color=\"green\"",
" disabled-color=\"#333\"",
" custom=\"{{false}}\"",
">",
"<!-- <l-icon",
" slot=\"icon\"",
" name=\"add\"",
" color=\"#34BFA3\"",
" size=\"30\"",
"/> -->",
"{{item.value}}",
"</l-checkbox>",
"</l-checkbox-group>",
"<!-- data: {",
"items: [",
"{ value: '美国', isChecked: false, disabled: false },",
"{ value: '中国', isChecked: false, disabled: false },",
"]",
"} -->",
"<!-- bind:linchange 点击时触发 选中项发生变化时触发 linchange 事件,event.detail = {key: 选中项Checkbox的key, cell: checkbox-group传入的cell属性,checked: 按钮切换后的状态}",
"bind:linout 当设置了min-selected或者max-selected,选中数量不满足要求时触发 linout 事件 event.detail = {key:当前点击checkbox的key, limitNumber: 选项个数限制的值, type: 数量溢出的类型,可选值 overflow_max_selected/overflow_min_selected} -->",
],
"description": "Lin UI复选框容器组件代码片段"
},
"Lin UI复选框组件Snippet": {
"prefix": "wl-checkbox",
"body": [
"<l-checkbox",
" placement=\"left|right\"",
" wx:for-items=\"{{countries}}\"",
" wx:key=\"{{item.value}}\"",
" key=\"{{item.value}}\"",
" checked=\"{{item.isChecked}}\"",
" disabled=\"{{item.disabled}}\"",
" size=\"38rpx\"",
" color=\"red\"",
" selected-color=\"green\"",
" disabled-color=\"#333\"",
" custom=\"{{false}}\"",
">",
"<!-- <l-icon",
" slot=\"icon\"",
" name=\"add\"",
" color=\"#34BFA3\"",
" size=\"30\"",
"/> -->",
"{{item.value}}",
"</l-checkbox>",
],
"description": "Lin UI复选框组件代码片段"
},
"Lin UI图片选择器组件Snippet": {
"prefix": "wl-image-picker",
"body": [
"<l-image-picker",
" count=\"9\"",
" size=\"3\"",
" urls=\"{{images}}\"",
" preview=\"{{true}}\"",
" remove=\"{{true}}\"",
" size-type=\"{{['original', 'compressed']}}\"",
" max-image-size=\"10000000\"",
" bind:linchange=\"onImagePickerChange\"",
" bind:linremove=\"handleEvent\"",
" bind:linpreview=\"handleEvent\"",
" bind:linclear=\"handleEvent\"",
" bind:linoversize=\"handleEvent\"",
" bind:linremovetap=\"handleEvent\"",
">",
"<!-- 通过 <slot> 的方式可以自定义ImagePicker组件的添加图片部分 -->",
"</l-image-picker>",
"<!-- bind:linchange 新增图片时触发 选中项发生变化时触发 linchange 事件,event.detail = {current: [ 新增项的url信息 ], all: [ 当前urls值 ]} urls格式为字符串数组",
"bind:linremove 移除图片时触发 图片移除时触发 linremove 事件,event.detail = {current: 移除项的url信息, all: [ 当前urls 值 ], index: 移除项的下标} urls格式为字符串数组",
"bind:linpreview 图片被点击时(预览)触发 图片预览触发 linpreview 事件,event.detail = {current:[ 当前点击项的url信息 ], all: [ 当前urls值 ], index: 点击项的下标} urls格式为字符串数组",
"bind:linclear 清除图片全部时触发 图片移除时触发 linclear 事件,event.detail = {current: [ 移除项的url信息 ], all: [ 删 除前urls值 ]} urls格式为字符串数组",
"bind:linoversize 新增图片大小超过max-image-size设置的值时触发 event.detail = {all:[当前urls值],oversize:[超过max-image-size限制的图片值],current:[当前值]}",
"bind:linremovetap 点击删除按钮 -->",
],
"description": "Lin UI图片选择器组件代码片段"
},
"Lin UI评分组件Snippet": {
"prefix": "wl-rate",
"body": [
"<l-rate",
" count=\"5\"",
" name=\"like\"",
" active-color=\"#FFDD55\"",
" inActive-color=\"#FFF5CE\"",
" score=\"{{rateScore}}\"",
" size=\"56\"",
" item-gap=\"10\"",
" disabled=\"{{false}}\"",
" bind:linchange=\"handleEvent\"",
"/>",
"<l-rate",
" count=\"5\"",
" name=\"like\"",
" active-image=\"激活图片绝对路径\"",
" inActive-image=\"未激活图片绝对路径\"",
" score=\"{{rateScore}}\"",
" size=\"56\"",
" item-gap=\"10\"",
" disabled=\"{{false}}\"",
" bind:linchange=\"handleEvent\"",
"/>",
"<!-- bind:linchange 单击选中评分时触发 当前选择的个数 score -->",
],
"description": "Lin UI评分组件代码片段"
},
"Lin UI表单组件Snippet": {
"prefix": "wl-form",
"body": [
"<l-form",
" name=\"formName\"",
" is-submit-validate=\"{{true}}\"",
" bind:linsubmit=\"handleEvent\"",
" bind:linreset=\"handleEvent\"",
">",
"<l-form-item",
" label=\"标签名称\"",
" label-width=\"300rpx\"",
" label-placement=\"column|row\"",
" align-items=\"start|centre|end\"",
" name=\"formItemName-required\"",
" label-slot=\"{{false}}\"",
" tip-type=\"text|toast|message\"",
">",
"<!-- <view slot=\"label\">插槽标签名称</view> -->",
"<l-input",
" id=\"formItemName-required\"",
" value=\"{{value}}\"",
" hide-label=\"{{true}}\"",
" show-row=\"{{false}}\"",
"/>",
"</l-form-item>",
"<view slot=\"submit\">",
"<l-button>提交</l-button>",
"</view>",
"<view slot=\"reset\">",
"<l-button type=\"default\" plain>重置</l-button>",
"</view>",
"<!-- <view slot=\"submit-front\">提交按钮之前的区域</view> -->",
"<!-- <view slot=\"reset-front\">重置按钮之前的区域</view> -->",
"<!-- <view slot=\"reset-behind\">重置按钮之后的区</view> -->",
"</l-form>",
"<!-- 表单使用需要有以下注意:",
"1.使用 form 组件时需要在 onLoad 中调用 wx.lin.initValidateForm(this)进行初始化。",
"2.需要给 form 组件设置 name 属性。当用户手动提交表单的时候需要传入表单 name。例:",
"<l-form name=\"student\" />",
"3.需要给 form-Item 设置 name 属性。name 的值将作为提交表单时返回的 Key 。例:",
"<l-form-item name=\"studentName\" />",
"4.每一个表单控件必须设置一个 id 属性,且属性值必需与 form-Item 的 name 属性值相同。id属性用于通过selectComponent获取表 单域的值。 例:",
"<l-form-item name=\"studentName\">",
"<l-input id=\"studentName\" />",
"</l-form-item> -->",
"<!-- bind:linsubmit 点击提交按钮时触发 点击提交时触发 linsubmit 事件,event.detail = {values: 整个表单项的value, errors: 表单内各字段的校验结果,isValidate: 表单是否验证通过}",
"bind:linreset 点击重置按钮时触发 -->",
],
"description": "Lin UI表单组件代码片段"
},
"Lin UI表单元素组件Snippet": {
"prefix": "wl-form-item",
"body": [
"<l-form-item",
" label=\"标签名称\"",
" label-width=\"300rpx\"",
" label-placement=\"column|row\"",
" align-items=\"start|centre|end\"",
" name=\"formItemName-required\"",
" label-slot=\"{{false}}\"",
" tip-type=\"text|toast|message\"",
">",
"<!-- <view slot=\"label\">插槽标签名称</view> -->",
"<l-input",
" id=\"formItemName-required\"",
" value=\"{{value}}\"",
" hide-label=\"{{true}}\"",
" show-row=\"{{false}}\"",
"/>",
"</l-form-item>",
],
"description": "Lin UI表单元素代码片段"
},
}
Lin UI vscode代码片段
于 2022-07-02 15:40:03 首次发布