Vueは小さなメモ帳機能を実装しました

この記事の例では、メモ帳の小さな機能を実現するためのvueの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

コード上で直接:

<!DOCTYPE html>
<html lang="ja">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" />
<ヘッド>
    <スタイル>
        ＃アプリ {
            マージン: 0px 自動;
            幅: 500ピクセル;
            境界線: 1px 実線ゲインズボロ;
            高さ: 自動;
        }
        。タイトル {
            行の高さ: 50px;
            テキスト配置: 中央;
            高さ: 50px;
            フォントの太さ: 20;
            フォントサイズ: 36px;
            背景: #42b983;
            border-bottom: 1px 黒一色;
        }
        入力:フォーカス{
            境界線の色: #66afe9;
            アウトライン: 0;
            -webkit-box-shadow: インセット 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
            ボックスシャドウ: インセット 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6)
        }
        .ファイルコンテナ{
            オーバーフロー: 非表示;
            上マージン: 10px;
        }
        .openfile-btn{
            フロート: 左;
            左マージン: 10px;
        }
        #ファイルパス{
            左マージン: 10px;
            幅: 300ピクセル;
        }
        #ファイル_con{
            表示: ブロック;
            境界線:0;
            境界線の半径:5px;
            背景色:rgba(241,241,241,.98);
            幅: 480ピクセル;
            高さ: 250px;
            上マージン: 10px;
            左マージン: 10px;
            サイズ変更: なし;
        }
        ウル、
        li {
            パディング: 0;
            マージン: 0;
            リストスタイル: なし;
        }

        .li-div {
            テキスト配置: 中央;
            オーバーフロー: 非表示;
            上マージン: 5px;
            /*境界線: 3px 実線 ブランチ アーモンド;*/
        }
        .bot{
            高さ: 30px;
        }
        .詳細を表示{
            フロート: 右;
            右マージン: 10px;
        }
        .表示ボタン{
            /*表示: ブロック;*/
            フロート: 右;
            右マージン: 10px;
        }
    </スタイル>
</head>

<本文>
<div id="アプリ">
    <div class="title">
        メモ帳
    <div>
        <div class="ファイルコンテナ">
            <input class="openfile-btn" type="button" value="ローカルからインポート" id="fileImport" v-on:click="clickLoad">
            <input type="file" id="files" ref="refFile" style="display: none" v-on:change="fileLoad">
            <input type="text" v-model="path" id="file_path" disabled="無効">
            <input type="button" value="インポートを確認" style="float:right; margin-right: 10px " v-on:click="addfile"></button>
            <textarea type="text" id="file_con" autoHeight="true" v-model="input_file"></textarea>
        </div>

    </div>
    <時間>
    <div class="content">
        <ul>
            <li v-for="(item, index) メッセージ内">
                <div class="li-div">
                    <span>{{++インデックス}}</span>
                    <ラベル>{{アイテム}}</ラベル>
                    <button @click="remove(index)" class="show-btn">削除</button>
                    <button @click="show(index)" class="show-btn" v-if="item.length>30">詳細</button>
                </div>
            </li>
        </ul>
    </div>
    <時間>
    <div v-show="メッセージ.length>0" クラス="bot">
        <div style="float: left; margin-left: 10px">
            現在のメモ記録数: {{message.length}}
        </div>
        <div class="del-btn">
            <button @click="clear"class="show-btn">クリア</button>
        </div>
    </div>
</div>
<スクリプト>
    アプリを新しいVue({
        el: '#app',
        データ： {
            // 一時ファイル: "",
            メッセージ： []、
            パス：''、
            入力ファイル:''、
            サブ入力ファイル:''、
            tmp_file:''
        },
        メソッド: {
            クリックロード: 関数 (){
                this.$refs.refFile.dispatchEvent(新しいMouseEvent('click'))
            },
            ファイルロード() {
                選択されたファイル = this.$refs.refFile.files[0];
                var name = selectedFile.name; // 選択されたファイルのファイル名 var size = selectedFile.size; // 選択されたファイルのサイズ var reader = new FileReader();
                リーダー.readAsText(選択されたファイル);
                this.path = 名前;
                console.log("ファイル名:" + name + "サイズ:" + size);

                リーダー.onload = 関数() {
                    file_s = this.result; とします。
                    document.getElementById('file_con').value=ファイル_s;
                }
            },
            ファイルを追加:関数(){
                var ファイル = document.getElementById('file_con').value;
                this.input_file=ファイル;
                this.tmp_file=file; //元のファイルを保存するために使用されます//console.log("this.input_file: "+this.input_file)
                if (ファイル == null || ファイル == "") {
                    alert("入力は空にできません");
                } それ以外 {
                    ファイルの長さが30以上の場合
                    {
                        this.sub_inpufile=ファイル.substring(0,30)+'...'
                        this.message.push(this.sub_inpufile);
                        this.input_file = ''
                        this.path=''
                        console.log(このサブ入力ファイル)
                    }
                    それ以外{
                        this.message.push(this.input_file);
                        this.input_file = ''
                        this.path=''
                    }
                }
            },
            削除: 関数 (インデックス) {
                var flag = confirm("削除しますか?" + index);
                フラグが true の場合
                    this.message.splice(インデックス-1、1);
                }
            },
            表示:関数(){
                alert(this.tmp_file) // 文字数制限があります。コンポーネントをカスタマイズできます},
            クリア: 関数() {
                this.message = [];
            },
        },
    })
</スクリプト>
</本文>
</html>

効果：