code-design-runtime
v1.0.10
Published
An Useful Runtime For Reative Web Component
Downloads
5
Maintainers
Readme
✨ Features
- 🔑 Based on Web Component
- 🏁 Reactive Web Framework
- ⚽ Support DOM property and HTML attribute
- ⚾ Minimum Sub-Tree Update
- ⛄ Directives supported such as cdu-[if|for|on|bind]
🔨 Install
yarn add code-design-runtime
# Or with npm:
npm i code-design-runtime
🍴 Usage
Demo
<test-el id="testEl" content="something interesting"></test-el>
<script type="module">
import CduRuntime from './dist/index.js'
const name = 'test-el'
class TestEl extends CduRuntime {
name = name `
commonStyleSheet = `
span {
font-weight: bold;
}
`
styleSheet = `
span{
color:red;
}
`
html = `
<span cdu-on@click="this.methods.handleClick">
{{this.prop.content}}
</span>
`
propTypes = {
props: {
content: {
type: 'string',
description: '内容'
}
},
events: {
click: {
name: 'click-event',
description: '点击事件'
}
}
}
methods = {
handleClick: (event) => {
this.emitEvent(event, this.propTypes.events.click.name)
},
}
}
window.customElements.define(name, TestEl)
window.onload = () => {
const el = document.querySelector('#testEl')
el.addEventListener('click-event', (event) => {
console.log(event)
})
}
</script>
Directives Supported
- {{ xxx }} 或 cdu-bind:textContent="xxx" 例:{{ this.state.name + this.prop.code + this.inherit.item.label}} 、 {{ this.format.call(this, this.state.name, this.state.code) }}
- cdu-on@click="xxx" 例: this.handleClick、this.handleClick.bind(this, this.state.showList)
- cdu-if="xxx" -> 例: this.state.name && this.prop.code && this.inherit.item.label、this.validate.call(this,this.state.list)
- cdu-for="xxx" -> 例:item in this.state.list/this.props.list/this.getList.call(this, this.state.name)
📞 Contact With Me
Email: [email protected]