monphind-ui

一个基于Web Components API开发的响应式组件库

A reactive component library built on top of the Web Components API

通过npm安装

npm i monphind-ui

动态创建组件(Creating components dynamically)

const button = document.createElement("m-button")
button.value = "Hello World!"
document.body.append(button)

同步元素属性与javascript属性(Step element attributes and javascript attributes)

javascript:

const button = document.querySelector("m-button")
button.disabled = true

HTML:

<m-button disabled="true"></m-button> <!--自动同步html属性-->

支持v-model(Supportsv-model)

<template>
	<m-input v-model="text"></m-input>
</template>
<script>
  import { ref } from 'vue'
	export default {
    setup(){
      const text = ref('')
      return {
        text
      }
    }
  }
</script>

支持原生事件(Support for native events)

const input = document.querySelector("m-input")
input.addEventListener("input",()=>{
  console.log(input.value)
})

文档

点击链接：monphind-ui