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组件参考官方文档