要素UIの詳細+概要

高速エントリ2週間。ビジネスではなく、作業の組織中に多くのタスクは非常に満足のいくものではない、また多かれ少なかれ理解しています。

すべてのこの最初のが私の指導者に感謝して、私は多くの問題を解決するのに役立ちます。再び、今のおかげで、私を取るためのリーダーです。

私はプロジェクトを開始したiPadのクライアントアプリケーションを、やって同社は、半分にVUE +要素のUIを使用する技術を開発してきました。

前に約2週間の地面にも、達成するために様々な機能の効果の前に、これらの機能がされていると言えばないと何の接点要素UI、私はそれが実際にないコピー＆ペースト何かだと思った、細部に多くのものがあります自身の経験。

以下の質問は、プロジェクトで発生した問題です。ここで要約すると、私はそれが要約の利益になると信じています。

問題：

要素のUI dailogポップアップを使用する場合は、ポップアップボックスがVUEアプリに搭載されていない、カスタムスタイルは、デフォルトのスタイルをカバーすることはできません。

ソリューション：

グローバルに書かれたカスタムスタイル、およびパッケージの親要素、スタイル効果を利用。

問題：

ダイアログボックスの爆弾のReference要素のUIは、爆弾ボックスはドムが内側にロードされます表示され、時にはないJS、ドムに開始した、ドムは、要素を取得して操作することはできません

ソリューション：

1. ダイアログボックスで、弾性要素のUIを使用しないでください、手書きhtml要素、ドム固定された構造なので、JS実行する操作要素の後に、ドムをロードします。

2. フレーム要素のUI DIGログ爆弾後、オープンコールバックを使用して、動的にドムを生成し、openメソッドで行う、方法を直ちに開放して行われます

3. JS、サブアセンブリを個別に引き出すことができ、親コンポーネント内の書き込みボックスをクリックしないサブコンポーネントが実装には表示されません直接ロード爆弾が登場

問題：

タグは、EL-COL添加したフォーム要素UI検証に加え

ソリューション：

1. モデル,:ルールを、：まず第一に、大きなフォーム全体の検証が追加形成する必要があります
2. そして、あなたはエル・フォーム・アイテムパッケージのラベルに参加するには、入力ボックスを確認する必要があり、追加PROP
3. ルールにルールを与えるために追加Vueのデータ、ルールは小道具を定義しています
4. （あなたは、トリガーメソッドの実行を、[送信]をクリックしたとき）メソッドは、この書かれたロジックを与える。$参考文献[「inHosForm」]。）検証（（有効な小道具に合わせてフォームに記入するかどうかを決定します

 1. <el-form ref="inHosForm" label-width="80px" label-position="left" class="form" :model="inHosData" :rules="rules">
 
 // :model 是定义v-model表单可输入的字段，:rules 是验证规则
 2. <el-col :span="12" class="collabel">
               <el-form-item label="可靠程度" prop="reliable">
                <el-input size="mini" class="inputWidth1" placeholder="请填写" v-if="!previewMode" v-model="inHosData.reliable"></el-input>
              </el-form-item>
              <span v-if="previewMode">{{inHosData.reliable}}</span>
</el-col>

 3. data () {
    return {
      rules: {
        reliable: [
          { required: true, message: '请输入可靠程度', trigger: 'blur' }
          // required为小红星标，意思是必填项
          //message为表单未填时出来的提示红字
          //trigger是element ui 里 的方法，输入框时用 blur ，isSlect多选框时用到change
        ],
    methods：{
 4. saveMedical () {
      // $refs['这里的一定是：model中定义的']
      this.$refs['inHosForm'].validate((valid) => {
        if (valid) {}  // valid  表单未填写为false，填写为true
        }
}
    }
复制代码

問題：

あまりにも多くのコンテンツは、あなたはスクロールバーが必要な場合、ダイアログボックス内の要素UI爆弾は、.EL-dialog__bodyする設定に加えて、グローバルオーバーフロー：動作しない隠された、隠されたコンテンツを表示することはできませんスクロールバーを表示されません。

ソリューション：

elemnet UIここdiglog爆弾ブロック、グローバルオーバーフロー.EL-dialog__bodyに提供過剰コンテンツ：自動;へ

問題：

要素のUIは、独自のスタイルのいくつかを定義する必要があり、スタイルの独自の定義は、元によってカバーされていない、いくつかのデフォルトのスタイルは非常に良いではありません持っています

ソリューション：

ラベルにスタイルを定義し、インラインスタイルを書きます

<el-col :span=24 style="margin:20px"></el-col>
复制代码

---

その他の問題：

問題：

キャンバス不正確な走査線位置、正規の位置からずれは、通常のBase64 IMG画像を回すことができない、これは現在のキャンバスインスタンスを指し、これは変更する必要性を意味する、VUEのインスタンスを指していない、これは前の例のキャンバスを指していることを確認

ソリューション：

キャンバスは、パッケージアセンブリから引き出され、成分は導入を呼び出し、影響されません

問題：

見出さフォーム検証は、フォーム充填した後、このページは、swiperインスタンスを指定する必要があり、この点が発見されたVUE例をスライドすることができない欠陥、100％完了していない、swiper関連する例は、現在マウントされていません

この点を変更する必要があり、これは前の例のVUEを指すことを保証するために

ソリューション：

swiper APIドキュメントを読んでください。

質問：絵に変身BASE64、この問題は、IMGを指すことはできません

ソリューション：

画像に変わるBASE64、このコンストラクタは、VU Eインスタンスを指していない、この変換は、定義された変数はせ=この、この変換、完全なライン署名機能します。

---

要約：

1. elemnet UI dailogハウジングシェルは、タグを記述するルート要素を記述し、ラップされていないませんが、以下の構造を参照することができます

            </el-col>
          </el-row>
            <el-dialog
            title="签名"
            :visible.sync="centerDialogVisible"
            width="85%"
            center>
            <sign @draw_save="getSignImg"></sign>
          </el-dialog>
        </div>
复制代码

2.あなたは、ダイアログ定義で、）（、表示された要素の弾丸]ダイアログボックスをクリックしてクリックイベント要素の要素を与えるプラスに提供したい（：visible.sync）も一致していなければなりません

ボックス内に遊ん3.ダイアログボックスが表示されますので、コンポーネントの導入がない場合には、jsのコードは爆弾、親アセンブリで書かれているが、DOMをロードされます、その開放方法は、それは非常に満足のいくものではない提供し、jsは、直ちに実行されます、 DOM jsのコードは常に、最初の実装の段階よりも優れている、私はまた、JS遅い実行中のタイマーを入れてみましょう、その後、タイマーが問題となっているので、私は代わりにコンポーネントを導入し、このようなアプローチをあきらめたクリア。

この方法は、独自の方法で書面で提供4.特定の要素結合要素は、クリックイベントを提供している場合、彼らはクリックイベントをバインドする必要はあり、

<div class="canva" @click="isShow">

methods：{
    isShow（）{
        this.centerDialogVisible = true
        //...
    }
}
复制代码

背景に渡されるパラメータは、受け入れられた数値を用いて送信します

6. res.dataの背景データは、経由foreachループ、返されたカスタムオペレーショナルデータとすることができるデータフィールドに従って

API.diseaseByTod(params).then((res) => {
this.isSerthe = []
res.data.forEach(item => {
this.isSerthe.push({
chapter: item.fields.icd_code,
chapter_icd: item.fields.icd_code,
illness_name: item.fields.illness,
level: 4
})
})
console.log(res.data)
})
复制代码

必要性は、データインターフェースの複数のアレイを記憶するために、そして4つの場所は、アレイ内のデータを使用する必要がある場合、このデータを介して第一ループは、フィールドに基づいてオブジェクトをプッシュすることができ、その後、カスタムデータ、インタフェースデータ内のオブジェクトと、次のサイクルをプッシュデータインターフェイスを格納する空の配列を定義する元の配列を空にする前に。

背景に渡されたパラメータは、各時間値はisSlect.chapterとら

<li v-for="(isSlect,index) in isSerthe" :key="index" class="lilists" @click="diseaseByCod(isSlect.chapter,isSlect.level)">
    <span class="fontSize">{{isSlect.chapter_icd}}</span><span class="fontSizes">{{isSlect.illness_name}}<span class="el-icon-arrow-right" v-if="isShow"></span>
    <input type="checkbox" v-if="isShaow" name="1" value="isSlect" class="radio"/>
    </span>
</li>
复制代码

データインターフェースを介してのLi 4サイクルでは、コードの量を減少させる、レベル切替を実現します。

diseaseCoding () {
      API.diseaseCoding().then((res) => {
        this.isShaow = false
        this.isShow = true
        this.isSerthe = []
        res.data.forEach(item => {
          this.isSerthe.push({
            chapter: item.fields.chapter,
            chapter_icd: item.fields.chapter_range,
            illness_name: item.fields.illnessname,
            level: 1
          })
        })
        console.log(this.isSerthe)
      })
    },
    
    diseaseByCod (value, number) {
      if (number === 1) {
        this.isShaow = false
        this.isShow = true
        this.centerDialogVisible = true

        let params = {
          chapter: value
        }
        API.diseaseByCod(params).then((res) => {
          this.isSerthe = []
          res.data.forEach(item => {
            this.isSerthe.push({
              chapter: item.fields.chapter_range,
              chapter_icd: item.fields.chapter_range,
              illness_name: item.fields.illnessname,
              level: 2
            })
             console.log(item.fields.chapter_range)
          })
          console.log(res.data)
        })
      } else if (number === 2) {
        this.isShaow = false
        this.isShow = true
        let params = {
          chapter_range: value
        }
        API.diseaseByDod(params).then((res) => {
          this.isSerthe = []
          res.data.forEach(item => {
            this.isSerthe.push({
              chapter: item.fields.icd_code,
              chapter_icd: item.fields.icd_code,
              illness_name: item.fields.illness,
              level: 3
            })
          })
          console.log(res.data)
        })
      } else if (number === 3) {
        this.isShaow = true
        this.isShow = false
        let params = {
          icd_code: value
        }
        console.log(value)
        API.diseaseByTod(params).then((res) => {
          this.isSerthe = []
          res.data.forEach(item => {
            this.isSerthe.push({
              chapter: item.fields.icd_code,
              chapter_icd: item.fields.icd_code,
              illness_name: item.fields.illness,
              level: 4
            })
          })
          console.log(res.data)
        })
      }
    }
复制代码

背景パラメータの過去のパスかどうかを確認するプレビュー完全背景チェックデータでブラウザ・コンソール・ネットワーク、ヘッダー要求ヘッダー

トラブルシューティング：エラー分析は、問題が再発、調査まで、種類の除外の撤退をエラーメッセージが表示さ

ローディングは、DOM要素が行われたJSされていない場合にconsole.log（_）アラート（...）デバッガは、コード実行、同期プロセスの非同期実行のない実行順序がない警告トラブルシューティング方法を確認するために、変数の値がかから.. 。

なお、ステップ効果によるステップを記述することも必要ではありません。効果を確認するためのコードの行を書く、彼の心には、次の効果は次のようになります。この絵を持っている必要があります。このような効率は、それが他の人の期待を負っていないだろう、遅くはありません。

さて、上記のプロジェクトの問題点をまとめたものです。

また、我々はステップでその地球と着実にステップを信じて、何から来ていない収穫、時間の問題があるでしょう。

継続するには。。。

ます。https：//juejin.im/post/5d02fbbbe51d4550723b13e4で再現