Как использовать мои собственные значки в vue-bootstrap-datetimepicker - PullRequest
Новая
       35

Как использовать мои собственные значки в vue-bootstrap-datetimepicker

1 голос
/ 05 октября 2019

Мне нужно изменить значки в DatePicker, который я использую в компоненте VUE.

Вот ссылка: https://www.npmjs.com/package/vue-bootstrap-datetimepicker

В моем файле main.js (соответствующие части): 

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import 'pc-bootstrap4-datetimepicker/build/css/bootstrap-datetimepicker.css'
import datePicker from 'vue-bootstrap-datetimepicker'
import '@/icons' // icon
Vue.use(BootstrapVue)
Vue.use(datePicker)
Vue.use(require('vue-moment'))

Этот импорт '@/icons' для меняпапка, содержащая код SVG для каждого значка. Он отлично работает во всем приложении. Далее в коде (все еще main.js): 

jquery.extend(true, jquery.fn.datetimepicker.defaults, {
  icons: {
    time: '<svg-icon icon-class="plus-circle" class="plus" />',
    date: 'tools',
    up: 'run',
    down: 'pdf',
    previous: 'tree',
    next: 'user',
    today: 'form',
    clear: 'table',
    close: 'eye'
  }
})

Я изменил значки по умолчанию своими собственными (просто с их именами - случайными, как я обычно делаю в остальной части приложения, илис тегом html), но это не работает. Также эта часть мне не совсем понятна jquery.fn.datetimepicker.defaults,. После импорта я должен использовать datePicker, но если я это сделаю, консоль скажет, что он не определен.

Так что я на самом деле не знаю наверняка, если проблема заключается в использовании моих собственных значков, или еслиЯ делаю что-то не так в другом месте в коде.

Следуя документации, в моем файле vue.config я добавил этот код 

// plugin date time picker
config
 .plugin('provide')
 .use(require('webpack').ProvidePlugin, [{
 Vue: ['vue/dist/vue.esm.js', 'default'],
 $: 'jquery',
 moment: 'moment',
 jQuery: 'jquery',
 'window.jQuery': 'jquery'
}])

в chainWebpack (config).

В шаблоне vue, где я использую компонент datetimepicker, который у меня есть: 

<script>
// Import required dependencies
import 'bootstrap/dist/css/bootstrap.css'

// Import this component
import datePicker from 'vue-bootstrap-datetimepicker'

// Import date picker css
import 'pc-bootstrap4-datetimepicker/build/css/bootstrap-datetimepicker.css'

export default {
  name: 'NewActivity',
  components: {
    datePicker
  },
  data() {
    return {
      date: null,
      options: {
        format: 'DD/MM/YYYY HH:mm:ss',
        locale: 'it',
        useCurrent: false,
        showClear: true,
        showClose: true
      }
    }
  }
}
</script>

Я попытался оставить значения по умолчанию, используя глифы, использовать fontawsome и изменить их имена в соответствии с последним выпуском, но яникогда не видел значок, показывающий.

Надеюсь, кто-то может помочь.

Большое спасибо.

x

...