diff --git a/.gitignore b/.gitignore index c7600508..87fab203 100644 --- a/.gitignore +++ b/.gitignore @@ -19,5 +19,6 @@ yarn-error.log .vscode package-lock.json examples/project.config.json +examples/project.private.config.json /.run yarn.lock diff --git a/commitlint.config.js b/commitlint.config.js index 5a0a841c..717aeae7 100644 --- a/commitlint.config.js +++ b/commitlint.config.js @@ -75,7 +75,8 @@ module.exports = { 'TabBar', 'DynamicBuild', 'Calendar', - 'Script' + 'Script', + 'Switch' ] ] } diff --git a/dist/switch/index.js b/dist/switch/index.js new file mode 100644 index 00000000..f3ec3247 --- /dev/null +++ b/dist/switch/index.js @@ -0,0 +1 @@ +import eventBus from"../core/utils/event-bus";Component({externalClasses:["l-class","l-disabled-class"],properties:{checked:{type:null,optionalTypes:[Boolean,String,Number],value:!1},size:{type:String,value:"38rpx"},color:{type:String,value:"#fff"},selectColor:{type:String,value:"#3963BC"},activeValue:{type:null,value:!0},inactiveValue:{type:null,value:!1},disabled:{type:Boolean,value:!1}},methods:{onClick(){const{activeValue:e,inactiveValue:t,disabled:a}=this.data;if(a)return;const l=this.data.checked===e?t:e;this.setData({checked:l}),this.triggerEvent("linchange",{checked:l}),eventBus.emit("lin-form-change-"+this.id,this.id)},getValues(){return this.data.checked},reset(){this.setData({checked:this.data.inactiveValue})}}}); \ No newline at end of file diff --git a/dist/switch/index.json b/dist/switch/index.json new file mode 100644 index 00000000..1450e2ec --- /dev/null +++ b/dist/switch/index.json @@ -0,0 +1 @@ +{"component":true,"usingComponents":{}} \ No newline at end of file diff --git a/dist/switch/index.wxml b/dist/switch/index.wxml new file mode 100644 index 00000000..ef61b402 --- /dev/null +++ b/dist/switch/index.wxml @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/dist/switch/index.wxss b/dist/switch/index.wxss new file mode 100644 index 00000000..71091d9d --- /dev/null +++ b/dist/switch/index.wxss @@ -0,0 +1 @@ +.switch{position:relative;display:inline-block;box-sizing:content-box;width:2em;height:1em;background-color:#fff;border:1px solid rgba(0,0,0,.1);border-radius:1em;transition:background-color .3s}.switch-node{position:absolute;top:0;left:0;border-radius:100%;z-index:1;width:1em;height:1em;background-color:#fff;box-shadow:0 3px 1px 0 rgba(0,0,0,.05),0 2px 2px 0 rgba(0,0,0,.1),0 3px 3px 0 rgba(0,0,0,.05);transition:.3s cubic-bezier(.3,1.05,.4,1.05)}.switch-on .switch-node{transform:translateX(calc(1em))}.switch-disabled{opacity:.5} \ No newline at end of file diff --git a/examples/app.json b/examples/app.json index 966f9528..373b5d06 100644 --- a/examples/app.json +++ b/examples/app.json @@ -93,6 +93,7 @@ { "root": "pages/components/form", "pages": [ + "pages/switch/index", "pages/input/index", "pages/radio/index", "pages/checkbox/index", diff --git a/examples/dist/switch/index.js b/examples/dist/switch/index.js new file mode 100644 index 00000000..d8729bec --- /dev/null +++ b/examples/dist/switch/index.js @@ -0,0 +1,67 @@ +import eventBus from '../core/utils/event-bus'; + +Component({ + externalClasses: ['l-class', 'l-disabled-class'], + properties: { + checked: { + type: null, + optionalTypes: [Boolean, String, Number], + value: false + }, + size: { + type: String, + value: '38rpx' + }, + color: { + type: String, + value: '#fff' + }, + // 选中后的颜色 + selectColor: { + type: String, + value: '#3963BC' + }, + activeValue: { + type: null, + value: true, + }, + inactiveValue: { + type: null, + value: false, + }, + // 不可选状态 + disabled: { + type: Boolean, + value: false + }, + }, + methods: { + onClick() { + const { activeValue, inactiveValue, disabled } = this.data; + + if (disabled) { + return; + } + + const checked = this.data.checked === activeValue; + const value = checked ? inactiveValue : activeValue; + + this.setData({ + checked: value + }); + + this.triggerEvent('linchange', { checked: value }); + eventBus.emit(`lin-form-change-${this.id}`, this.id); + }, + + getValues() { + return this.data.checked; + }, + + reset() { + this.setData({ + checked: this.data.inactiveValue + }); + } + } +}); \ No newline at end of file diff --git a/examples/dist/switch/index.json b/examples/dist/switch/index.json new file mode 100644 index 00000000..e8cfaaf8 --- /dev/null +++ b/examples/dist/switch/index.json @@ -0,0 +1,4 @@ +{ + "component": true, + "usingComponents": {} +} \ No newline at end of file diff --git a/examples/dist/switch/index.wxml b/examples/dist/switch/index.wxml new file mode 100644 index 00000000..f328402e --- /dev/null +++ b/examples/dist/switch/index.wxml @@ -0,0 +1,6 @@ + + + \ No newline at end of file diff --git a/examples/dist/switch/index.wxss b/examples/dist/switch/index.wxss new file mode 100644 index 00000000..71091d9d --- /dev/null +++ b/examples/dist/switch/index.wxss @@ -0,0 +1 @@ +.switch{position:relative;display:inline-block;box-sizing:content-box;width:2em;height:1em;background-color:#fff;border:1px solid rgba(0,0,0,.1);border-radius:1em;transition:background-color .3s}.switch-node{position:absolute;top:0;left:0;border-radius:100%;z-index:1;width:1em;height:1em;background-color:#fff;box-shadow:0 3px 1px 0 rgba(0,0,0,.05),0 2px 2px 0 rgba(0,0,0,.1),0 3px 3px 0 rgba(0,0,0,.05);transition:.3s cubic-bezier(.3,1.05,.4,1.05)}.switch-on .switch-node{transform:translateX(calc(1em))}.switch-disabled{opacity:.5} \ No newline at end of file diff --git a/examples/images/component/switch.png b/examples/images/component/switch.png new file mode 100644 index 00000000..c27771ee Binary files /dev/null and b/examples/images/component/switch.png differ diff --git a/examples/pages/components/form/pages/form/index.js b/examples/pages/components/form/pages/form/index.js index ee643c1c..def94da4 100644 --- a/examples/pages/components/form/pages/form/index.js +++ b/examples/pages/components/form/pages/form/index.js @@ -37,7 +37,8 @@ Page({ music: '', sex: '', desc: '', - score: '' + score: '', + status: false }, items: [ { @@ -95,6 +96,19 @@ Page({ trigger: 'change' } ], + statusRules: [ + { + validator(rule, value, callback) { + if (value !== true) { + callback(false); + } else { + callback(); + } + }, + message: '必须启用', + trigger: 'change' + } + ], register: { loginId: '', password: '', diff --git a/examples/pages/components/form/pages/form/index.json b/examples/pages/components/form/pages/form/index.json index d3f6ef17..2f5cf086 100644 --- a/examples/pages/components/form/pages/form/index.json +++ b/examples/pages/components/form/pages/form/index.json @@ -13,6 +13,7 @@ "l-radio-group": "/dist/radio-group/index", "l-radio": "/dist/radio/index", "l-rate": "/dist/rate/index", + "l-switch": "/dist/switch/index", "l-button": "/dist/button/index" } } diff --git a/examples/pages/components/form/pages/form/index.wxml b/examples/pages/components/form/pages/form/index.wxml index 5d664c70..f4f4363b 100644 --- a/examples/pages/components/form/pages/form/index.wxml +++ b/examples/pages/components/form/pages/form/index.wxml @@ -166,6 +166,9 @@ + + + 提交验证 diff --git a/examples/pages/components/form/pages/switch/index.js b/examples/pages/components/form/pages/switch/index.js new file mode 100644 index 00000000..0612c05b --- /dev/null +++ b/examples/pages/components/form/pages/switch/index.js @@ -0,0 +1,15 @@ +// pages/components/form/pages/switch/index.js +Page({ + /** + * 页面的初始数据 + */ + data: { + customValue: 0 + }, + + onChange(e) { + this.setData({ + customValue: e.detail.checked + }); + } +}); \ No newline at end of file diff --git a/examples/pages/components/form/pages/switch/index.json b/examples/pages/components/form/pages/switch/index.json new file mode 100644 index 00000000..079a3608 --- /dev/null +++ b/examples/pages/components/form/pages/switch/index.json @@ -0,0 +1,7 @@ +{ + "usingComponents": { + "content-title": "/components/content-title/index", + "content-card": "/components/content-card/index", + "l-switch": "/dist/switch/index" + } +} \ No newline at end of file diff --git a/examples/pages/components/form/pages/switch/index.wxml b/examples/pages/components/form/pages/switch/index.wxml new file mode 100644 index 00000000..5e1f8d75 --- /dev/null +++ b/examples/pages/components/form/pages/switch/index.wxml @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + + + + + + + + + 当前选中的值：{{ customValue }} + + + diff --git a/examples/pages/components/form/pages/switch/index.wxss b/examples/pages/components/form/pages/switch/index.wxss new file mode 100644 index 00000000..d45297db --- /dev/null +++ b/examples/pages/components/form/pages/switch/index.wxss @@ -0,0 +1 @@ +/* pages/components/form/pages/switch/index.wxss */ \ No newline at end of file diff --git a/examples/pages/navigator/content/config/form-navi.js b/examples/pages/navigator/content/config/form-navi.js index 158647b6..abf3545a 100644 --- a/examples/pages/navigator/content/config/form-navi.js +++ b/examples/pages/navigator/content/config/form-navi.js @@ -47,6 +47,12 @@ const formNaviConfigs = [ desc: '日历', componentsPath: '/pages/components/form/pages/calendar/index' }, + { + icon: '/images/component/switch.png', + title: 'Switch', + desc: '开关', + componentsPath: '/pages/components/form/pages/switch/index' + }, { icon: '/images/component/rules.png', title: 'Rules', diff --git a/package.json b/package.json index 8188e62d..e28b88a1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "lin-ui", - "version": "0.9.6", + "version": "0.9.7", "description": "A high quality UI components library with MiniProgram", "main": "app.js", "directories": { diff --git a/src/switch/index.js b/src/switch/index.js new file mode 100644 index 00000000..d8729bec --- /dev/null +++ b/src/switch/index.js @@ -0,0 +1,67 @@ +import eventBus from '../core/utils/event-bus'; + +Component({ + externalClasses: ['l-class', 'l-disabled-class'], + properties: { + checked: { + type: null, + optionalTypes: [Boolean, String, Number], + value: false + }, + size: { + type: String, + value: '38rpx' + }, + color: { + type: String, + value: '#fff' + }, + // 选中后的颜色 + selectColor: { + type: String, + value: '#3963BC' + }, + activeValue: { + type: null, + value: true, + }, + inactiveValue: { + type: null, + value: false, + }, + // 不可选状态 + disabled: { + type: Boolean, + value: false + }, + }, + methods: { + onClick() { + const { activeValue, inactiveValue, disabled } = this.data; + + if (disabled) { + return; + } + + const checked = this.data.checked === activeValue; + const value = checked ? inactiveValue : activeValue; + + this.setData({ + checked: value + }); + + this.triggerEvent('linchange', { checked: value }); + eventBus.emit(`lin-form-change-${this.id}`, this.id); + }, + + getValues() { + return this.data.checked; + }, + + reset() { + this.setData({ + checked: this.data.inactiveValue + }); + } + } +}); \ No newline at end of file diff --git a/src/switch/index.json b/src/switch/index.json new file mode 100644 index 00000000..e8cfaaf8 --- /dev/null +++ b/src/switch/index.json @@ -0,0 +1,4 @@ +{ + "component": true, + "usingComponents": {} +} \ No newline at end of file diff --git a/src/switch/index.less b/src/switch/index.less new file mode 100644 index 00000000..463fda20 --- /dev/null +++ b/src/switch/index.less @@ -0,0 +1,35 @@ +.switch { + position: relative; + display: inline-block; + box-sizing: content-box; + width: 2em; + height: 1em; + background-color: #fff; + border: 1px solid rgba(0, 0, 0, 0.1); + border-radius: 1em; + transition: background-color 0.3s; + + &-node { + position: absolute; + top: 0; + left: 0; + border-radius: 100%; + z-index: 1; + width: 1em; + height: 1em; + background-color: #fff; + box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.05), + 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 3px 3px 0 rgba(0, 0, 0, 0.05); + transition: 0.3s cubic-bezier(0.3, 1.05, 0.4, 1.05); + } + + &-on { + .switch-node { + transform: translateX(calc(1em)); + } + } + + &-disabled { + opacity: 0.5; + } +} \ No newline at end of file diff --git a/src/switch/index.wxml b/src/switch/index.wxml new file mode 100644 index 00000000..f328402e --- /dev/null +++ b/src/switch/index.wxml @@ -0,0 +1,6 @@ + + + \ No newline at end of file