kui-loader

v1.0.6

Published

3 years ago

Replace html tag for vue components

Downloads

0High
0Medium
0Low

chuchur

kui vue loader kui-loader

kui-loader

用途

替换 kui 组件库标签，如定义一个组件名为 switch, 那么在引用过程种会和 html 本身的标签冲突，所以要进行替换。

安装

npm i kui-loader --save-dev
#or
yarn add kui-loader

用法

example : index.vue

<template>
  <div>
    <Switch true-text="Yes" false-text="No" />
    <br />
    <Switch true-text="1" false-text="0" />
    <br />
    <Switch true-text="On" false-text="Off" />
    <br />
    <Image 
      width="120" 
      src="https://www.chuchur.com/upload/avatar/test_300.jpg"
    />
    <br />
    <Switch>
      <Icon type="checkmark" slot="checked"/>
      <Icon type="close" slot="unchecked"/>
    </Switch>
    <Switch>
      <Icon type="logo-apple" slot="checked"/>
      <Icon type="logo-windows" slot="unchecked"/>
    </Switch>
    <br />
     <Switch>
      <Icon type="airplane" slot="unchecked"/>
      <Icon type="wifi" slot="checked"/>
    </Switch>
  </div>
</template>
<script>
export default{
  data(){
    return{
      checked:false
    }
  }
}
</script>

以上编译不会通过的，所以要进行解析替换标签：

在 webpack.conf.js

module.exports = {
  bail: true,
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: [
          { loader: 'vue-loader' },
          { loader: 'kui-loader', options: { prefix: false } } //放在最后保证优先加载
        ]
      }
    ]
  }
}

在非 template/render 模式下，你也可以这么用 ,使用 k-前缀来区分，部分组件也可以使用 - 来分割，看示例：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>KUI - example</title>
    <link rel="stylesheet" type="text/css" href="http://unpkg.com/kui-vue/dist/k-ui.css">
    <script src="//unpkg.com/kui-icons/lib/kui-icons.js"></script>
    <script src="//unpkg.com/moment/min/moment.min.js"></script>
    <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
    <script type="text/javascript" src="http://unpkg.com/kui-vue/dist/k-ui.js"></script>
</head>

<body>
  <div id="app">
    <k-button @click="show">Click me!</k-button>
    <k-modal v-model="visible" title="Welcome">Welcome to use KUI</k-modal>

    <k-image 
        width="120" 
        src="https://www.chuchur.com/upload/avatar/test_300.jpg"
      />
    <br />

    <k-button-group size="small" circle>
      <button ><k-icon type="chevron-back"/> Backward</button>
      <button>Forward <k-icon type="chevron-forward"/></button>
    </k-button-group>
  </div>
</body>
<script>
new Vue({
  el: '#app',
  data: {
    visible: false
  },
  methods: {
    show: function () {
      this.visible = true;
    }
  }
})
</script>
</html>

记得开启替换选项：

-      { loader: 'kui-loader', options: { prefix: false } }
+      { loader: 'kui-loader', options: { prefix: true } }

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

kui-loader

用途

安装

用法