Слияние кода завершено, страница обновится автоматически
Vue-компонент «Облако тегов».
Пример: http://oztg5bt5t.bkt.clouddn.com//blog/images/tagCloud%E7%A4%BA%E4%BE%8B.gif
npm install v-tag-cloud -Simport tagCloud from 'v-tag-cloud'
Vue.use(tagCloud)
props
Массив объектов. Атрибут name — отображаемое имя тега, остальные атрибуты можно расширить самостоятельно.
Объект конфигурации. Содержит следующие параметры:
| Параметр | По умолчанию | Описание |
|---|---|---|
| radius | 120 | Радиус вращения, в пикселях |
| maxFont | 24 | Максимальный размер шрифта |
| color | null | Цвет шрифта. Если null, то цвет выбирается случайным образом |
| rotateAngleXbase | 600 | Базовый угол поворота по оси X. Чем меньше значение, тем быстрее скорость вращения |
| rotateAngleYbase | 600 | Базовый угол поворота по оси Y. Чем меньше значение, тем быстрее скорость вращения |
| hover | true | Включить или отключить эффект наведения |
Методы
| Метод | Параметры | Описание |
|---|---|---|
| clickTag | tag | Метод для обработки клика по тегу. Возвращает полный объект тега |
Пример использования
<!-- template -->
<tag-cloud :data="hotTag" @clickTag="clickTagItem"></tag-cloud>
// Vue экземпляр
export default {
data () {
return {
hotTag: [{"id":"05023f8da31c4b4187cc6899e2a3aec2","name":"镇远县"},{"id":"0ef028e5278f4f5ca31f99f1bd22b1cc","name":"剑河县"},{"id":"1a32ef04d3c548eaa6777abb46da32f2","name":"台江县"},{"id":"2c26488325bd493687d16315fe0e5fdd","name":"岑巩县"},{"id":"3a786111828a4b9f89ae9da25753eedd","name":"黎平"},{"id":"4ed593eed91b4244969995237f5c96c5","name":"丹寨县"},{"id":"615d2c178f1a47cb8d473823e74f5386","name":"凯里市"},{"id":"76f652df03db43349272a9aff492b065","name":"榕江县"},{"id":"8ff29d0d35e548feb945063b34ed9c9b","name":"黄平县"},{"id="a8ac2170008746fdadc05ea461bc5e37","name":"雷山县"}]
}
},
methods: {
clickTagItem (tag) {
// TODO
}
}
}
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )