vue-simple-suggestで読み仮名でもサジェストさせる - Qiita
背景・課題 漢字でリスト表示していても、ひらがな入力時点でサジェストさせたい 漢字に変換するまでサジェストがされないのが不便すぎる vue-simple-suggestのサジェストをカスタマイズする 使っていたのは、vue-simple-suggestでした。既にスタイルが当たっていたのでどうにかしてこれを使いたかったです。 https://github.com/KazanExpress/vue-simple-suggest 結論としては、display-attributeと、filterを指定すれば実装できました。 （ドキュメントに書いてあるけど、filterの指定はわからなさすぎてソースコード読みました ） display-attributeで、どのkeyの値をサジェストのリストに表示するかを指定できます。 filterは入力された値に対してリストの値をどう返すか処理が書けます。 以下
Vue Selectを導入して、いろいろカスタマイズしてみる - Qiita
はじめに 業務でVue Selectを利用する機会があったので、諸々のカスタマイズについての備忘録。 とても便利なライブラリだが、細かな情報を探すのに苦労したのでここに残しておく。 （間違いなどあれば、コメントにてご指摘いただければ幸いです。） Vue Selectとは Vue.jsで利用可能なセレクトボックスコンポーネント。 公式サイト 曰く Everything you wish the HTML element could do, wrapped up into a lightweight, extensible Vue component. (HTMLの要素にできることをすべて、軽量で拡張性の高いVueコンポーネントにまとめました。) この記載通りで、とても手軽にセレクトボックスを実装できる。 さらに、選択肢に対する前方一致の絞り込みなどの機能も利用可能な優秀なライブラリ。 筆者環
Vue3で手軽にカルーセルを実装したい - Qiita
<template> <carousel :items-to-show="1.5"> <slide v-for="slide in 10" :key="slide"> {{ slide }} </slide> <template #addons> <navigation /> <pagination /> </template> </carousel> </template> <script> // If you are using PurgeCSS, make sure to whitelist the carousel CSS classes import 'vue3-carousel/dist/carousel.css'; import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel'; export d
【Vue.js】vueform/multiselectを使用してVue3でタグ選択を実装する - Qiita
概要 Vueでセレクトボックスのライブラリを探すと、Vue-multiselectの記事がけっこう出てくるのですが、[Vue3]Vue-multiselect を用いた、ドロップダウンの実装とサンプルアプリの記事にある通り、Vue3への対応が怪しい感じがするとのこと。2022年1月時点ではVue3対応のリポジトリはあるものの、あまり更新されていませんでした。 ので今回は、上記の記事で紹介されていたvueform/multiselectというライブラリを使用して、Vue3でタグ選択を実装してみたので紹介したいと思います。 実装方法 こちらのドキュメントにコンポーネントに設定できるpropsが記載されています。 modeという項目が、入力の種別（single|multiple|tags）を設定する箇所になります。tag 選択を実装するには、tagsを指定すればOKです。念のため、該当箇所のキャ
GSAP/Flip が無料になった！！ ので紹介！ - Qiita
概要 アニメーションをいい感じに書けるようになる GSAP 便利ですよね。 これの Flip という超便利なモジュールが 最近(去年12/16)のバージョンアップ で無料になったんですよ！ （クリスマスプレゼントとのこと。） 超うれしかったので一部機能を紹介します。 GSAP って何？ 要するに Dom 移動とかのアニメーションをいい感じに書けるようになるライブラリ。 Dom 移動などを解りやすく、気持ちよくやろうと本気で取り込んでると、移動の処理ってどんどん複雑になって、そのほかのビジネスロジックと混ざってトラブルになりがちなんですけど、 GSAP は歴史も長く、たぶんいまやデファクトスタンダードとなってるアニメーションのライブラリで、本当に痒い所に手が届く素晴らしいライブラリ。 アニメーションって、普通のソフトウェア作る分には単純なもの（CSSのTransitionとかAnimatio
Vus.jsのおすすめライブラリ17選
はじめに この記事でちょうど200記事という事で、過去に書いたVue.jsのおすすめライブラリ17選をご紹介いたします。 表示系ライブラリ Vue.Draggable ドラッグ＆ドロップを実装するライブラリです。 私が記事にし始めた2016年頃はまだまだという感じでしたが、今は超大人気ライブラリの1つとなっています。 jQuery UI の draggableやsortable のような使い方ができます。 使い方はこちら Githubはこちら Vue-Lazyload 画像の遅延読み込みを実装するライブラリです。 軽量で使いやすいです。 使い方はこちら Githubはこちら Vue-good-table 高機能のテーブルコンポーネントを実装するライブラリです。 ソートやフィルターをもちろん、セル結合やチェックボックスなど、機能が多すぎて、まだ記事にしきれていません。 時間をみて更新していき
vue-cropperjsのオプションメモ - Qiita
<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の画像を設定する場合、 :aspect-ratio="16 / 9" となります。 画像選択後のCropAreaを画像幅全体にする 画像を切り抜きしたい時に
【2019年9月】Vue.jsライブラリ記事まとめ | カバの樹
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
Vue-infinite-loading で Vuex を使う - Qiita
はじめに サーバサイドの開発歴は1年程度で、最近初めて業務でフロントエンド開発を担うようになりました。 フロントエンド開発めちゃくちゃ楽しいです。 記事の目的 さて、JS のライブラリとして Vue.js を使っているのですが、 Vue-infinite-loading という無限スクロールを簡単にに実現できるライブラリがあります。 この無限スクロール機能では API を叩いて データを取得する処理が必要となります。これらの処理を状態管理のライブラリである Vuex で扱いたい、というのが本記事のモチベーションです。 ググってみたのですが、ドキュメントには記載がなく、 Issue にコードの一部が載っている程度でした。私はフロントエンド歴が浅いためか、 Issue だけではすぐに理解が出来ず、試行錯誤の末にやっとできましたので、コードの全体像を載せてみようと思います。 参考 Guide |
セレクトボックスライブラリ「Vue-multiselect」のカスタマイズ方法 - Qiita
概要 Vue-multiselectはセレクトボックスを簡単に実装できる便利なVueライブラリです。 複数選択や自動補完など一般的にセレクトボックスに求められる機能はほぼ全て実現できます。 ここでは公式サイトを元にVue-multiselectのカスタマイズ方法の一部を紹介します。 基本の使い方 上図のようにシンプルな単一選択のセレクトボックスは以下のコードで実装できます。 なおCDNを利用するとVue-multiselectを簡単に試せます。 See the Pen RwGwBaO by shi-ma (@shi-ma) on CodePen. optionsプロパティには選択肢に設定したい配列を指定します。 custom-labelプロパティに関数を指定すると、その返り値が選択肢として表示されるラベルとなります。 optionsが連想配列で各キーのバリューを組み合わせたラベルを作りたい
【Vue + ApexCharts】データを集計して円グラフに表示させる - Qiita
<template> <v-layout row wrap justify-center> <v-flex xs5 mt-5> <v-card> <v-card-title> <v-flex xs12 class="text-center"> 支出フォーム </v-flex> </v-card-title> <v-divider></v-divider> <v-card-text> <v-form ref="test_form"> <v-text-field v-model="expenditure.price" label="支出額：" :rules="[numberRules.required,numberRules.regex]"> <template v-slot:append>円</template> </v-text-field> <v-radio-group row labe
vue-clipboard2をVuetifyのv-dialogの中で動かす - Qiita
<template> <v-dialog> <v-card> <v-card-text> <v-text-field :value="textToCopy" readonly/> <v-btn icon ref="copyBtn" @click="onCopy"><v-icon>mdi-content-copy</v-icon></v-btn> </v-card-text> </v-card> </v-dialog> </template> <script lang="ts"> import { Component, Vue } from 'vue-property-decorator'; @Component export default class SampleDialog extends Vue { textToCopy = 'some text to copy'; private
Vue.jsでカッコいいグラフを手軽に作るChart.jsのラッパー3つ
Webアプリを作るときに便利なグラフ描画ライブラリ「Chart.js」。最近人気のVue.jsでChart.jsを使うための3つのラッパーをデモを交えて紹介します。 現代のWebサイトとWebアプリにおいてチャートは重要な位置を占めています。チャートは、文字だけでは表せない情報を表現して、理解しづらいデータの意味を分かりやすく表現します。 Chart.jsとVue.jsを用いて、さまざまな型のチャートでデータを表現する方法を解説します。 Chart.jsはシンプルで柔軟性に富んだ開発者、デザイナー向けのJavaScriptのチャート作成ライブラリーです。HTML5のcanvas要素でいろいろな種類のチャートが描けます。Chart.jsを復習するならこちらがオススメです。 Vue.jsはプログレッシブなJavaScriptフレームワークです。ここではChart.jsと一緒にチャートを作成しま
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Nuxt.jsで無限スクロール（Infinite Scroll）を実現する方法 - Qiita
なんとなくVue.jsのUIフレームワークを紹介する - Qiita
FullCalendar-Vueでカレンダーにイベントを追加する方法がややこしかった話 - Qiita
vue.jsにお手軽にcssエフェクトをかけたいanimate.cssを導入したいときに読む記事 - Qiita
【Vue.js】vue-headの導入について - Qiita