手机端webcomponent组件库

该组件库基于stencil编写，最终会渲染成为webcomponent，由于使用的是原生组件的渲染方式，所以该组件库不依赖任何前端框架，既可以在html中单独使用，也可以在vue2，vue3，react，angular等中使用！

注意：该组件库兼容主流浏览器以及ie11+。

安装

npm i -S stencil-phone

原生

通过script标签引入相关依赖即可在html中直接使用该组件库

<script type="module" src="node_modules/stencil-phone/dist/phone/phone.esm.js"></script>

vue2

要在vue2中使用该组件库，需要以下3个步骤：

1、引入相关依赖项

2、告诉vue忽略v-xx的渲染

3、将stencil生成的原生组件绑定到window对象上。

修改app.js：

import { applyPolyfills, defineCustomElements } from 'stencil-phone/loader'

Vue.config.ignoredElements = [/v-\w*/]

applyPolyfills().then(() => {
  defineCustomElements()
})

vue3

用法跟vue2基本一致。

修改app.js

import { applyPolyfills, defineCustomElements } from 'stencil-phone/loader'

const app = createApp(App)

app.config.ignoredElements = [/v-\w*/]

applyPolyfills().then(() => {
  defineCustomElements()
})

app.use(store).use(router).mount('#app')

使用

<v-button type="primary">按钮</v-button>