quark-design 原生引入使用说明

说明:旧项目前后不分离 使用原生html开发的情况下

以动作面板举例:

esm全局引入的方式

<script type="module">
import quarkd from "https://cdn.jsdelivr.net/npm/quarkd@2.0.4/+esm"
//直接使用
quarkd.ActionSheet({actions: [{ name: "Option 1" },{ name: "Option 2" },{ name: "Option 3" },],select: (index, action) => {},cancel: () => {},close: () => {},
})//挂载到window,方便在当前页的其他script使用(这里是为了方便在cdn引入vue中使用)
window.quarkd = quarkd;
</script>

挂载到window后,方便和vue结合使用

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script>
new Vue({el: '#app',data: {},methods: {handleActionSheet() {if(window.quarkd) {window.quarkd.ActionSheet({actions: [{ name: "Option 1" },{ name: "Option 2" },{ name: "Option 3" },],select: (index, action) => {},cancel: () => {},close: () => {},})}}}
</script>

组件按需引入的方式

<!-- 引入 -->
<script type="module">
import ActionSheet from "https://cdn.jsdelivr.net/npm/quarkd@2.0.4/lib/actionsheet/index.js";
</script>

其他ui组件参考官方文档