<template>
  <div id="app">
    <div class="lille-item">
      <label>Switch：</label>
      <lille-switch
      v-model="lightSwitch"></lille-switch>

      <lille-switch
      v-model="switchLight"></lille-switch>
    </div>
    <div class="lille-item">
      <label>Button：</label>
      <lille-button class="lille-btn" @click="onClick">确定</lille-button>
      <lille-button class="lille-btn" @click="onClick" bgcolor="#409eff" color="#fff">确定</lille-button>
      <lille-button class="lille-btn" @click="onClick" bgcolor="#67c23a" color="#fff">成功</lille-button>
      <lille-button class="lille-btn" @click="onClick" bgcolor="#e6a23c" color="#fff">警告</lille-button>
      <lille-button class="lille-btn" @click="onClick" bgcolor="#f56c6c" color="#fff">危险</lille-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to lille UI',
      lightSwitch: false,
      switchLight: true
    }
  },
  methods: {
    onClick: function (e) {
      console.log('click', e);
    }
  },
  watch: {
    lightSwitch: newValue => console.log('开关：', newValue),
  }
}
</script>

<style lang="scss">
.lille-swith, .lille-btn {
  margin: 10px 6px;
}
.lille-item {
  display: flex;
  align-items: center;
  
  label {
    width: 100px;
    display: inline-block;
  }
  
}
</style>
