bd
/
ui
2
0
Fork 0
Code Issues Pull Requests Wiki Activity

完成按钮组件

master
yutent 2023-03-16 17:26:36 +08:00
parent 8ea85ba562
commit 459c6a81f7
2 changed files with 26 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
develop.md
View File

@ -18,7 +18,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<link rel="stylesheet" href="/dist/css/reset-basic.css">
<script async src="//jscdn.ink/es-module-shims/1.6.3/es-module-shims.wasm.js"></script>
<script type="importmap">{"imports":{"es.shim":"//jscdn.ink/es.shim/2.1.1/index.js","vue":"//jscdn.ink/vue/3.2.47/vue.runtime.esm-browser.prod.js","vue-router":"//jscdn.ink/@bytedo/vue-router/4.1.6/vue-router.js","fetch":"//jscdn.ink/@bytedo/fetch/2.1.5/next.js","@bd/core":"//jscdn.ink/@bd/core/1.4.0/index.js"}}</script>
<script type="importmap">{"imports":{"es.shim":"//jscdn.ink/es.shim/2.1.1/index.js","vue":"//jscdn.ink/vue/3.2.47/vue.runtime.esm-browser.prod.js","vue-router":"//jscdn.ink/@bytedo/vue-router/4.1.6/vue-router.js","fetch":"//jscdn.ink/@bytedo/fetch/2.1.5/next.js","@bd/core":"//jscdn.ink/@bd/core/1.4.1/index.js"}}</script>
<style></style>
</head>
<body>

28
src/form/button.js
View File

@ -4,7 +4,7 @@
* @date 2023/03/06 15:17:25
*/
import { css, html, Component } from '@bd/core'
import { css, html, Component, $, nextTick } from '@bd/core'
import '../icon/index.js'
class Button extends Component {
@ -13,7 +13,19 @@ class Button extends Component {
icon: '',
size: 'l',
autofocus: false,
loading: false,
loading: {
type: Boolean,
default: false,
observer(val) {
if (val) {
this.cacheIcon = this.icon
this.icon = 'loading'
} else {
this.icon = this.cacheIcon || ''
}
}
},
list: Array,
disabled: false,
lazy: 0 // 并发拦截时间, 单位毫秒
}
@ -234,11 +246,21 @@ class Button extends Component {
)
}
mounted() {
if (this.autofocus) {
let $btn = $('button', this.root)
$btn.setAttribute('autofocus', '')
// 需要focus()才能聚焦成功
nextTick(_ => $btn.focus())
}
}
render() {
return html`
<button disabled=${this.disabled}>
<wc-icon class="icon" is="${this.icon}"></wc-icon>
<wc-icon class="icon" is=${this.icon}></wc-icon>
<slot />
<p>${this.list.map(it => it)}</p>
</button>
`
}