lgk-vue-ui

安装

npm install lgk-vue-ui -S

在 main.js 引入

import Vue from 'vue'
import App from './App.vue'
// import DatePicker from "./../packages/components/DatePicker.vue"
// import LgkVueUI from "./../packages"
// import "./../dist/lgk-vue-ui.css"
import LgkVueUI from "lgk-vue-ui"
import "lgk-vue-ui/dist/lgk-vue-ui.css"

Vue.config.productionTip = false

// Vue.component(DatePicker.name, DatePicker)
Vue.use(LgkVueUI)

new Vue({
  render: h => h(App),
}).$mount('#app')

使用示例

• 有两个具名插槽 leftIcon、rightIcon 用于传入 iconfont 图标

<template>
  <div id="app">
    <lgk-datepicker
      v-model="time"
      :width="'180px'"
      :height="'30px'"
      :fontSize="'14px'"
      :color="'#606266'"
      :border="'1px solid #dcdfe6'"
      :borderRadius="'4px'"
      :background="'#fff'"
      :calenderColor="'#606266'"
      :calenderBgColor="'#ccc'"
      :calenderWeeksBorderBottom="'1px solid #e7e8eb'"
      @change-value="changeValue"
    >
      <!-- <template slot="leftIcon">
        <span class="icon iconfont iconStyle">&#xe613;</span>
      </template> -->
      <template slot="rightIcon">
        <span class="icon iconfont iconStyle">&#xe613;</span>
      </template>
    </lgk-datepicker>
  </div>
</template>

<script>
// import LgkDatepicker from './components/DatePicker.vue'
export default {
  name: 'App',
  components: {
    // LgkDatepicker
  },
  data() {
    return {
      // time: new Date(2021, 4, 1),
      time: new Date()
    }
  },
  methods: {
    changeValue(date) {
      let { year, month, day, hour, minute, second } = date
      console.log('app date=>', year, month, day, hour, minute, second)
    }
  }
}
</script>

<style lang="scss">
@import url('./assets/icon/iconfont.css');
#app {
  .iconStyle {
    color: #f49c68;
    font-size: 20px;
  }
}
</style>