背景・課題 漢字でリスト表示していても、ひらがな入力時点でサジェストさせたい 漢字に変換するまでサジェストがされないのが不便すぎる vue-simple-suggestのサジェストをカスタマイズする 使っていたのは、vue-simple-suggestでした。既にスタイルが当たっていたのでどうにかしてこれを使いたかったです。 https://github.com/KazanExpress/vue-simple-suggest 結論としては、display-attributeと、filterを指定すれば実装できました。 （ドキュメントに書いてあるけど、filterの指定はわからなさすぎてソースコード読みました ） display-attributeで、どのkeyの値をサジェストのリストに表示するかを指定できます。 filterは入力された値に対してリストの値をどう返すか処理が書けます。 以下
はじめに 業務でVue Selectを利用する機会があったので、諸々のカスタマイズについての備忘録。 とても便利なライブラリだが、細かな情報を探すのに苦労したのでここに残しておく。 （間違いなどあれば、コメントにてご指摘いただければ幸いです。） Vue Selectとは Vue.jsで利用可能なセレクトボックスコンポーネント。 公式サイト 曰く Everything you wish the HTML element could do, wrapped up into a lightweight, extensible Vue component. (HTMLの要素にできることをすべて、軽量で拡張性の高いVueコンポーネントにまとめました。) この記載通りで、とても手軽にセレクトボックスを実装できる。 さらに、選択肢に対する前方一致の絞り込みなどの機能も利用可能な優秀なライブラリ。 筆者環
はじめに 普段、BEとWebのFEを体感8:2くらいの割合でやっているので、ガッツリFEをやると、そのたび浦島太郎状態になので、そこでの発見を小出しに書いてみようと思います Vue3でvue-slickがサポートされていなかった Vue3は2020年9月リリースということで特段新しいというわけでもないのですが、新しいものを作るならばと使ってみることにしました。 で、Webサービスでよく見かけるカルーセルを例によって作ることになり「まぁ、vue-slick使えばできるからいいだろう」とたかを括っていたのですが、Vue3はサポート対象外。。。 そこで代案として探していた中で扱いやすそうだった vue3-carousel を触ってみることにしました。（ vue3 と関するだけあってちゃんとVue3で使えます） cf. https://www.npmjs.com/package/vue-slick
概要 Vueでセレクトボックスのライブラリを探すと、Vue-multiselectの記事がけっこう出てくるのですが、[Vue3]Vue-multiselect を用いた、ドロップダウンの実装とサンプルアプリの記事にある通り、Vue3への対応が怪しい感じがするとのこと。2022年1月時点ではVue3対応のリポジトリはあるものの、あまり更新されていませんでした。 ので今回は、上記の記事で紹介されていたvueform/multiselectというライブラリを使用して、Vue3でタグ選択を実装してみたので紹介したいと思います。 実装方法 こちらのドキュメントにコンポーネントに設定できるpropsが記載されています。 modeという項目が、入力の種別（single|multiple|tags）を設定する箇所になります。tag 選択を実装するには、tagsを指定すればOKです。念のため、該当箇所のキャ
概要 アニメーションをいい感じに書けるようになる GSAP 便利ですよね。 これの Flip という超便利なモジュールが 最近(去年12/16)のバージョンアップ で無料になったんですよ！ （クリスマスプレゼントとのこと。） 超うれしかったので一部機能を紹介します。 GSAP って何？ 要するに Dom 移動とかのアニメーションをいい感じに書けるようになるライブラリ。 Dom 移動などを解りやすく、気持ちよくやろうと本気で取り込んでると、移動の処理ってどんどん複雑になって、そのほかのビジネスロジックと混ざってトラブルになりがちなんですけど、 GSAP は歴史も長く、たぶんいまやデファクトスタンダードとなってるアニメーションのライブラリで、本当に痒い所に手が届く素晴らしいライブラリ。 アニメーションって、普通のソフトウェア作る分には単純なもの（CSSのTransitionとかAnimatio
はじめに この記事でちょうど200記事という事で、過去に書いたVue.jsのおすすめライブラリ17選をご紹介いたします。 表示系ライブラリ Vue.Draggable ドラッグ＆ドロップを実装するライブラリです。 私が記事にし始めた2016年頃はまだまだという感じでしたが、今は超大人気ライブラリの1つとなっています。 jQuery UI の draggableやsortable のような使い方ができます。 使い方はこちら Githubはこちら Vue-Lazyload 画像の遅延読み込みを実装するライブラリです。 軽量で使いやすいです。 使い方はこちら Githubはこちら Vue-good-table 高機能のテーブルコンポーネントを実装するライブラリです。 ソートやフィルターをもちろん、セル結合やチェックボックスなど、機能が多すぎて、まだ記事にしきれていません。 時間をみて更新していき
はじめに vue-cropperjsでは呼び出し時にv-bindで各オプションを設定します。 template内での記載は以下のようになります。 <vue-cropper ref="cropper" :view-mode="2" :auto-crop-area="1" :aspect-ratio="16 / 10" :min-container-width="640" :min-container-height="360" :img-style="{ 'width': '500px', 'height': '500px' }" drag-mode="none" /> 画像切り抜き時のアスペクト比を固定する 画像切り抜き時のアスペクト比を固定したい場合、 :aspect-ratio="width / height" と設定すると比率が固定されたまま切り抜きを実行できます。 16:9の画像を設
Vue.jsライブラリ リンク集 Githubボタンを自分のサイトに表示させることができるライブラリ「vue-github-buttons」 vue-github-buttonsは、Githubの「star」「fork」「watch」「follow」のボタンを自分のサイトに表示させることができるコンポーネントライブラリです。 >>記事はこちら アプリみたいに通知数を表示できるライブラリ「vue-notification-bell」 vue-notification-bellは、スマホのアプリみたいに通知の数を表示することができるコンポーネントライブラリです。 通知のサイズを変えたり、通知が大量に溜まった場合は「50+」みたいな表記にすることも可能です。 >>記事はこちら ドラッグで移動可能なTreeコンポーネント「sl-vue-tree」 sl-vue-treeは、ドラッグで移動可能なTr
はじめに サーバサイドの開発歴は1年程度で、最近初めて業務でフロントエンド開発を担うようになりました。 フロントエンド開発めちゃくちゃ楽しいです。 記事の目的 さて、JS のライブラリとして Vue.js を使っているのですが、 Vue-infinite-loading という無限スクロールを簡単にに実現できるライブラリがあります。 この無限スクロール機能では API を叩いて データを取得する処理が必要となります。これらの処理を状態管理のライブラリである Vuex で扱いたい、というのが本記事のモチベーションです。 ググってみたのですが、ドキュメントには記載がなく、 Issue にコードの一部が載っている程度でした。私はフロントエンド歴が浅いためか、 Issue だけではすぐに理解が出来ず、試行錯誤の末にやっとできましたので、コードの全体像を載せてみようと思います。 参考 Guide |
概要 Vue-multiselectはセレクトボックスを簡単に実装できる便利なVueライブラリです。 複数選択や自動補完など一般的にセレクトボックスに求められる機能はほぼ全て実現できます。 ここでは公式サイトを元にVue-multiselectのカスタマイズ方法の一部を紹介します。 基本の使い方 上図のようにシンプルな単一選択のセレクトボックスは以下のコードで実装できます。 なおCDNを利用するとVue-multiselectを簡単に試せます。 See the Pen RwGwBaO by shi-ma (@shi-ma) on CodePen. optionsプロパティには選択肢に設定したい配列を指定します。 custom-labelプロパティに関数を指定すると、その返り値が選択肢として表示されるラベルとなります。 optionsが連想配列で各キーのバリューを組み合わせたラベルを作りたい
はじめに 皆さんおはこんばにちは。 エンジニア歴１年目、現場経験ゼロの弱小自称 Web エンジニアです。 Vue のアプリケーション開発で、見た目がシャレ乙な ApexCharts を導入してみたは良いものの どうやってデータを詰めたらいいんジャイ！！となったので 本記事を作成するにいたった次第でございます。 やりたいこと ・ApexChartsを使って円グラフを表示させる。 ・ストアに格納したデータの集計をその円グラフに反映させる。 環境 ・Vue CLI v3.5.0 ・Node v12.18.4 ・Npm 6.14.6 ・Vuetify 2.3.18 ・ApexCharts 1.6.0 コードサンプル 本記事の目的は用意されたデータを如何にして ApexCharts に適用させるかなので Vueプロジェクトの作成方法やデータの格納方法などは割愛します。 もし、プログラムを実際に動かし
<template> ~~ ~~ <infinite-loading ref="infiniteLoading" spinner="waveDots" @infinite="infinite" > <span slot="no-more">これ以上ない</span> <span slot="no-results">データはない</span> </infinite-loading> ~~ ~~ </template> ~~ ~~ <script> import InfiniteLoading from 'vue-infinite-loading' export default { components: { InfiniteLoading }, data() { return { data: [1,2,3,4,5,6,7,8,9,10], displayData: [], pageIndex
import VueClipboard from 'vue-clipboard2'; Vue.use(VueClipboard); 問題 ドキュメントにbootstrapのmodal内だと細工しないと動かないよと書いてありますが、Vuetifyのv-dialogでも当然のように動きませんでした。対処法は探すといくつか見つかりはしますが、TypeScriptを使っている事例がなかなかなく、かなり試行錯誤が必要でした。 解決方法 2つある使い方のうちv-clipboard:copyを使う方法だとどうやっても駄目でした。 $copyTextを使う場合、以下のように実装することで動かすことができました。 <template> <v-dialog> <v-card> <v-card-text> <v-text-field :value="textToCopy" readonly/> <v-btn i
Vue.jsアプリケーション用のインタラクティブなアニメーションを簡単に実装できるコンポーネントを紹介します。 アニメーションはユーザーの操作をトリガーに動作し、マウスをはじめ、スクロール、ジェスチャー、ジャイロスコープ、オーディオもサポートしています。
Learn Vue 3: Step by Step on Laracasts Vuejs 2 Authentication Tutorial on Auth0 blog Create a GitHub File Explorer Using Vue.js on Scotch.io Vue.js Tutorial on Vegibit Vuex introduction video - James Browne from London Vue.js Meetup #1 Hybrid App Example with Laravel and Vue.js in Portuguese by @vedovelli Vue.js Introduction Turkish Language on oguzhan.in Vue.js VideoTutoral Series in Spanish (3-8
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く