例: ヒント:このコンポーネントはvue-cropperの二次パッケージに基づいています プラグインをインストールする npm インストール vue-cropper 糸を追加 vue-cropper パッケージ化されたコンポーネントを書く <!-- シンプルな画像切り抜きコンポーネント--- 二次パッケージング--> <!-- その他の API https://github.com/xyxiao001/vue-cropper --> <!-- 使用法: 表示または非表示にする画像の比率を渡します。方法: 下部のボタンのクリックをリッスンします --- 自分でプロパティ クエリ ドキュメントを追加します --> <テンプレート> <div v-if="value" :value="value" @input="val => $emit('input', val)" class="conbox"> <div class="info"> <vueクロッパー ref="クロッパー" :img="画像" :outputSize="出力サイズ" :outputType="出力タイプ" :info="情報" :canScale="canScale" :autoCrop="自動クロップ" :fixed="固定" :fixedNumber="固定数" :full="フル" :fixedBox="固定ボックス" :canMove="移動可能" :canMoveBox="canMoveBox" :original="オリジナル" :centerBox="センターボックス" :infoTrue="情報True" :mode="モード" </vueクロッパー> </div> <div class="btns"> <div @click="clickCancelCut" class="cancel">キャンセル</div> <img @click="clickRotate" src="../../assets/paradise/rotate.png" alt="" /> <div @click="clickOk" class="okey">OK</div> </div> </div> </テンプレート> <スクリプト> 'vue-cropper' から VueCropper をインポートします。 エクスポートデフォルト{ 名前: 'PictureCropping'、 コンポーネント: { VueCropper }, 小道具: { 価値: { タイプ: ブール値、 デフォルト: false、 }, //画像アドレスをトリミングimg: { タイプ: 文字列、 デフォルト: ''、 }, //スクリーンショットフレームのアスペクト比 fixedNumber: { タイプ: 配列、 デフォルト: () => { [1, 1]を返します。 }, }, }, データ() { 戻る { // クロッピングコンポーネントの基本設定オプション : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : }, 計算: {}, 時計: {}、 //ライフサイクル - 作成完了(現在の this インスタンスにアクセス) 作成された() {}, //ライフサイクル - マウント完了(DOM要素にアクセス) マウント() {}, メソッド: { クリックキャンセルカット() { this.$emit('clickCancelCut', 'キャンセルするにはクリック'); this.$refs.cropper.stopCrop(); this.$refs.cropper.clearCrop(); }, クリック回転() { this.$refs.cropper.rotateRight(); this.$emit('clickRotate', 'クリックして回転します'); }, クリックOK() { //トリミングされたbase64を出力 this.$refs.cropper.getCropData(データ => { this.$emit('clickOk', データ); this.$refs.cropper.stopCrop(); this.$refs.cropper.clearCrop(); }); }, }, }; </スクリプト> <style lang='less' スコープ> /* @import url(); CSS クラスをインポート*/ .コンボックス{ 位置: 固定; 上: 0; 右: 0; 下部: 0; 左: 0; ボックスのサイズ: 境界線ボックス; 高さ:100vh; 幅: 100%; 背景色: #000; ディスプレイ: フレックス; flex-direction: 列; コンテンツの中央揃え: 中央; 。情報 { 幅: 自動; 高さ: 800ピクセル; .vue-クロッパー{ 背景画像: なし; 背景色: #000; } } .btns{ パディング: 0 20px; 色: #fff; テキスト配置: 中央; ディスプレイ: フレックス; コンテンツの両端揃え: スペースの間; アイテムの位置を中央揃えにします。 位置: 絶対; 左: 0; 右: 0; 下: 15px; 画像 { 幅: 85px; 高さ: 85px; } 。キャンセル { 背景色: #606465; パディング: 15px 20px; 幅: 100ピクセル; 境界線の半径: 10px; } .オキー{ 背景色: #df6457; パディング: 15px 20px; 幅: 100ピクセル; 境界線の半径: 10px; } } } </スタイル> 要約する Vue イメージ クロッピング コンポーネントに関するこの記事はこれで終わりです。Vue イメージ クロッピング コンポーネントに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: VMwareがwin10ホームバージョンに64ビットオペレーティングシステムをインストールできない問題を解決します
varchar の保存ルール4.0 未満のバージョンでは、varchar(20) は 20 バイトを...
1. Dockerの紹介1.1 仮想化1.1.1 仮想化とは何ですか?コンピュータにおける仮想化とは...
重要なのは、ローカルサーバーに書き込み権限がないことですキーはここにあります(アクセス拒否)。私は肯...
会社の開発者がテスト環境で挿入ステートメントを実行すると、正常に実行されるまでに 10 秒以上かかり...
目次1. 元の値と参照値2. インスタンス3. 範囲1. 元の値と参照値6 つの単純なデータ型の値は...
目次背景複合インデックスを理解する左端一致原則フィールド順序の影響複合インデックスは単一のインデック...
まず、テーブルを分割する必要がある理由について説明します。データシートが数百万に達すると、1 回のク...
ライフサイクル分類vue の各コンポーネントは独立しており、各コンポーネントには独自のライフサイクル...
目次1. スクリプトを使用してDockerのTLSを暗号化する2. Dockerの設定を変更してリモ...
ラジオ ボタンや複数選択ボタンにスタイルを追加する方法や、ボタンを大きくする方法を尋ねる人を以前見か...
UDP の理論については詳しく説明しません。UDP に関する HelloWorld プログラムを紹介...
インターネット上で多くの関連チュートリアルを見てきましたが、インストール プロセスにはまだいくつかの...
この記事の例では、登録ページの効果を実現するためのVueの具体的なコードを参考までに共有しています。...
序文フロントエンドプログラミングでは、奇数、偶数などの数値を受け入れることができる nth-chil...
上部のメニュー バーに検索ボックスを配置するのは一般的なシナリオですが、検索機能がそれほど頻繁に使用...