import UniSoftUI from 'unisoft-ui';
// 或者 const CustomUI = require('unisoft-ui');
// 或者 <script src="..."></script>
Vue.use(UniSoftUI); 

<template>
 <div class="uni-switch">
 <div class="wrapper">
  <span><slot></slot></span>
  <div :class="[{closed: !checked}, 'switch-box']"
   @click="handleChange(value)">
  <span :class="{closed: !checked}"></span>
  </div>

  <input
  type="checkbox"
  @change="handleChange"
  :true-value="activeValue"
  :false-value="inactiveValue"
  :disabled="disabled"
  :value="value"/>
 </div>
 </div>

</template>

<script>
 export default {
 name: "UniSwitch",
 data() {
  return {}
 },
 props: {
  value: {
  type: [Boolean, String, Number],
  default: false
  },
  activeValue: {
  type: [Boolean, String, Number],
  default: true
  },
  inactiveValue: {
  type: [Boolean, String, Number],
  default: false
  },
  disabled: {
  type: Boolean,
  default: false
  }
 },
 computed: {
  checked() {
  return this.value === this.activeValue;
  }
 },
 methods: {
  handleChange(value) {
  this.$emit('input', !this.checked ? this.activeValue : this.inactiveValue);
  }
 }
 }
</script>

// UniSwitch 是對應組件的名字，要記得在 moor-switch.vue 文件中還是 name 屬性哦
import UniSwitch from './UniSwitch.vue';
UniSwitch.install = Vue => Vue.component(UniSwitch.name, UniSwitch);
export default UniSwitch;

import UniSwitch from './packages/switch/index';
import UniSlider from './packages/slider/index';
import UniNumberGrow from './packages/number-grow/index';
import './common/scss/reset.css'
// ...如果還有的話繼續(xù)添加

const components = [
 UniSwitch,
 UniSlider,
 UniNumberGrow
 // ...如果還有的話繼續(xù)添加
]

const install = function (Vue, opts = {}) {
 components.map(component => {
 Vue.component(component.name, component);
 })
}

/* 支持使用標簽的方式引入 */
if (typeof window !== 'undefined' && window.Vue) {
 install(window.Vue);
}

export default {
 install,
 UniSwitch,
 UniSlider,
 UniNumberGrow
 // ...如果還有的話繼續(xù)添加
}

// ... 此處省略代碼
const NODE_ENV = process.env.NODE_ENV
module.exports = {
 // 根據(jù)不同的執(zhí)行環(huán)境配置不同的入口
 entry: NODE_ENV == 'development' ? './src/main.js' : './src/index.js',
 output: {
 // 修改打包出口，在最外級目錄打包出一個 index.js 文件，我們 import 默認會指向這個文件
 path: path.resolve(__dirname, './dist'),
 publicPath: '/dist/',
 filename: 'custom-ui.js',
 library: 'custom-ui', // 指定的就是你使用require時的模塊名
 libraryTarget: 'umd', // libraryTarget會生成不同umd的代碼,可以只是commonjs標準的，也可以是指amd標準的，也可以只是通過script標簽引入的
 umdNamedDefine: true // 會對 UMD 的構(gòu)建過程中的 AMD 模塊進行命名。否則就使用匿名的 define
 },
 // ... 此處省略代碼
}

// 發(fā)布開源因此需要將這個字段改為 false
"private": false,
// 這個指 import custom-ui 的時候它會去檢索的路徑
"main": "dist/unisoft-ui.js",

import UniSoftUI from 'unisoft-ui'
Vue.use(UniSoftUI)

<template>
 <div id="app">
 <h1>{{msg}}</h1>
 <uni-switch v-model="isSwitch">
  <span class="text">{{switchText}}</span>
 </uni-switch>
 </div>
</template>

<script>
 export default {
 name: 'app',
 data() {
  return {
  msg: 'welecom to unisoft-ui',
  isSwitch: false,
  }
 },
 computed: {
  switchText() {
  return this.isSwitch ? '開' : '關(guān)';
  }
 },
 }
</script>