web-ch-ui组件

组件基于stencil开发的跨框架组件库

使用

安装

npm i web-ch-ui

无框架

<html>
  <head>
    <script type="module" src="./node_modules/web-ch-ui/dist/web-ch-ui/web-ch-ui.esm.js"></script>
	<!-- 上面或者下面 -->
	<!-- <script type="module">
		import { defineCustomElements } from './node_modules/web-ch-ui/loader/index.es2017.js';
		defineCustomElements();
	</script> -->
  </head>
  <body>
    <div>
		<h3>按钮</h3>
		<div style="padding: 20px;background: #000;">
			<ch-button></ch-button>
			<ch-button color="#0f0">确定</ch-button>
			<ch-button color="#ff0"></ch-button>
			<ch-button color="#0ff"></ch-button>
			<ch-button color="red" padding="8px 20px" rgb="255,255,255" text-color="#000"></ch-button>
		</div>
	</div>

	<div>
		<h3>分页器</h3>
		<div>
			<ch-pagination id="ch-pagination" total="100" page="1" size="10" page_size_selector="[10,20,30,40,50,100]"></ch-pagination>
			<br>
			<div>
				<ch-pagination id="ch-pagination1" total="100" page="1" size="10" style="display: inline-block;"></ch-pagination> <span>total:100</span>
			</div>
		</div>
		<script>
		(async () => {
			const ele = document.querySelector("#ch-pagination");
			// 自定义事件的触发
			ele.addEventListener("pageChange", (event) => console.log(event.detail))
			ele.addEventListener("pageSizeChange", (event) => console.log(event.detail))

		})();
		</script>
	</div>
  </body>
</html>

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import { defineCustomElements } from 'web-ch-ui/loader';

createApp(App)
.use(defineCustomElements)
.mount('#app')

<template>
  <div style="text-align: left;">
    <ch-button></ch-button>
  </div>
  <ch-pagination ref="myComponent"
  :total="total" 
  :page="page"
  :size="size" 
  :page_size_selector="page_size_selector"
  ></ch-pagination>
</template>

<script setup>
import { computed,onMounted  } from 'vue'
import { ref } from 'vue'
const myComponent = ref(null)
const total = ref(200)
const page = ref(1)
const size = ref(10)
const selector = ref([10, 20, 30, 40, 50, 100])
const page_size_selector = computed(() => JSON.stringify(selector.value))
const pageChange = (event)=>{
  console.log(event.detail)
}
const pageSizeChange = (event)=>{
  console.log(event.detail)
}
onMounted(()=>{
    const component = myComponent.value;
    component.addEventListener('pageChange', pageChange);
    component.addEventListener('pageSizeChange', pageSizeChange);
})

</script>