lgk-vue-ui

安装

npm install lgk-vue-ui -S

在 main.js 引入

import Vue from 'vue'
import App from './App.vue'
// 引入插件
import LgkVueUI from "lgk-vue-ui"
// 引入插件样式
import "lgk-vue-ui/dist/lgk-vue-ui.css"

Vue.config.productionTip = false

// 全局挂载
Vue.use(LgkVueUI)

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

使用示例

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

<template>
  <div id="app">
    <lgk-datepicker
      v-model="time"
      :width="'150px'"
      :height="'30px'"
      :fontSize="'12px'"
      :color="'#fff'"
      :border="'1px solid green'"
      :borderRadius="'1px'"
      :background="'#aaa'"
      @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>