1.9.5 • Published 1 year ago

@bd/core v1.9.5

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year ago

百搭UI组件库的核心

开发文档

开发文档

我们的特色

  • @xxx=yyy 事件绑定, 可以任意节点上直接使用类似vue事件绑定的这种写法, 就可实现事件绑定。组件被移出文档时, 事件会自动销毁, 无须手动销毁。
  • @click.stop=xxx 事件绑定支持修饰符
  • :xxx=yyy, 属性绑定, 类似vue,在属性前加上:, 该属性不再使用setAttribute(), 而是直接赋值, 可满足你需要传递复杂数据结构的需求。
  • #animation={type}, 开箱即用的动画配置, 内置6种动画fade(默认), scale, bounce, micro-bounce, rotate, slide
  • ref=xxx, 类似vue的节点标识, 可方便的在mounted()之后通过 this.$refs.xxx 来访问该节点
  • 用内置的bind()方法来给当前组件绑定事件时, 组件移除时事件也会自动销毁,无需手动销毁。
  • 灵活的props定义

示例

import { css, html, Component } from '//jscdn.ink/@bd/core/latest/index.js'

class Hello extends Component {

  static props = {
    count: {
      type: Number,
      default: 0,
      attribute: true // 是否显式表现为html属性
    },
    foo: 0, // 简写
    bar: String // 简写
  }

  // 若需要支持 scss, 则需要使用 @bd/wcui-cli,预处理。
  // 可支持数组
  static styles = css`
    button { color: #09f; }
    span { color: #f30; }
  `

  // 支持多个
  static styles = [
    css`...`,
    css`...`
  ]

  render(){
    return html`
      <div>
        <button @click="${this.increase}">点击我</button>
      </div>
      <div>所有点击数为: <span>${this.count}</span></div>
    `
  }

  increase(){
    this.count++
  }

}

if (!customElements.get('wc-hello')) {
  customElements.define('wc-hello', Hello)
}
// 和上面的写法等价
// 如果不希望修改前缀`wc-`的话, 可以直接调用内置的reg方法注册组件即可。
Hello.reg('hello')


/* 

  <!-- 在html中,便可以直接使用 -->
  <wc-hello></wc-hello>

*/
1.9.5

1 year ago

1.9.4

1 year ago

1.9.3

1 year ago

1.9.1

1 year ago

1.9.0

1 year ago

1.8.8

2 years ago

1.9.2

1 year ago

1.8.7

2 years ago

1.8.6

2 years ago

1.8.5

2 years ago

1.8.4

2 years ago

1.8.3

2 years ago

1.8.2

2 years ago

1.8.1

2 years ago

1.8.0

2 years ago

1.7.1

2 years ago

1.7.0

2 years ago

1.6.0

2 years ago

1.5.14

2 years ago

1.5.13

2 years ago

1.5.12

2 years ago

1.5.11

2 years ago

1.5.10

2 years ago

1.5.9

2 years ago

1.5.8

2 years ago

1.5.7

2 years ago

1.5.6

2 years ago

1.5.5

2 years ago

1.5.4

2 years ago

1.5.3

2 years ago

1.5.2

2 years ago

1.5.1

2 years ago

1.5.0

2 years ago

1.4.1

2 years ago

1.4.0

2 years ago

1.3.0

2 years ago

1.2.2

2 years ago

1.2.1

2 years ago

1.2.0

2 years ago

1.1.0

2 years ago

1.0.2

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago

0.2.0

2 years ago