Vueは下部のポップアップウィンドウで複数選択を実装します

Vueは下部のポップアップウィンドウで複数選択を実装します

この記事の例では、下部のポップアップウィンドウで複数選択を実装するためのVueの具体的なコードを共有しています。具体的な内容は次のとおりです。

コード:

<テンプレート>
  <div class="リリースポスト">
    <div class="resume_main">
      <div class="resume_content">
        <バンフォーム>
          <div class="table_list post_welfare">
            <p class="name_title">仕事のメリット<span class="required">*</span></p>
            <ヴァンフィールド
              クラス="カレンダー"
              入力位置揃え="左"
              v-model="利点"
              placeholder="福利厚生を選択してください"
              @focus="フォーカス中"
              :class="{ borderStyle: 福祉変更 }"
              @click.stop="クリック福祉"
              :disabled="true"
            />
          </div>
        </van-form>
        <!-- 仕事のメリット-->
        <van-popup v-model="showWelfare" position="bottom">
          <div class="welfare_top">
            <p></p>
            <p class="welfare_title">福利厚生(複数選択)</p>
            <p class="welfare_btn" @click.stop="onConfirmSpeed">完了</p>
          </div>
          <div class="welfare_content">
            <div
              v-for="(item, index) in WelfareList"
              :key="インデックス"
              :class="{ アクティブ: アイテム.アクティブ }"
              id="福祉アイテム"
              @click.stop="clickWelfareItem(item, index)"
            >
              <p :class="item.active ? 'welfare_text' : 'not_welfare_text'">
                {{item.text}}
              </p>
            </div>
          </div>
        </バン-ポップアップ>
      </div>
    </div>
    <div>
      <div class="mask">
        <ボタン
          クラス="btn"
          @click="送信"
          :class="{ btnBg: colorChange() }"
          v-preventReClick="1000"
        >
          完了</button>
      </div>
    </div>
  </div>
</テンプレート>
 
<スクリプト>
'vue' から Vue をインポートします。
'vant' から { Circle、DatetimePicker、Form、Field、Toast、Calendar、Picker、Overlay、ActionSheet、Popup } をインポートします。
'vant/lib/index.less' をインポートします。
Vue.use(Circle).use(DatetimePicker).use(Form).use(Field).use(Toast).use(Calendar).use(Picker).use(Overlay).use(ActionSheet).use(Popup);
 
エクスポートデフォルト{
  名前: "PerfectPost",
  データ () {
    戻る {
      福祉リスト: [
        {
          id: 1,
          テキスト:「食事付き」
        },
        {
          id: 2,
          テキスト: "ラップ"
        },
        {
          id: 3,
          テキスト: 「5つの社会保険と1つの住宅基金」
        },
        {
          id: 4,
          テキスト: 「年末に給料が2倍」
        },
        {
          id: 5,
          テキスト: 「商業保険」
        },
        {
          id: 6,
          テキスト: 「傷害保険」
        },
        {
          id: 7,
          テキスト: 「チームビルディング」
        },
        {
          id: 8,
          テキスト: 「週末休み」
        },
        {
          id: 9,
          テキスト:「アフタヌーンティー」
        },
        {
          id: 10,
          テキスト: 「食事手当」
        },
        {
          id: 11,
          テキスト:「交通費補助金」
        },
        {
          id: 12,
          テキスト: 「シャトルバス送迎」
        },
        {
          id: 13,
          テキスト: 「ボーナス」
        },
        {
          id: 14,
          テキスト: 「公的資金による研修」
        },
        {
          id: 15,
          テキスト: 「公共交通機関」
        },
      ]、
      showWelfare: false, // 雇用福利厚生 onlineForm: {
        benefits: "",//仕事のメリット},
      チェックリスト: [],
      : 間違い、
    };
  },
  メソッド: {
    //求人特典ポップアップ clickWelfare () {
      this.showRedTips()
      this.showWelfare = true
    },
    //福祉項目を選択する clickWelfareItem (v) {
      (アクティブ)の場合{
        Vue.set(v, 'active', false)
      } それ以外の場合 (this.checkedList.length < 5) {
        Vue.set(v, 'active', true)
      }
      this.checkedList = this.welfareList.filter(function (item) {
        アイテムを返す。アクティブ
      })
      if (this.checkedList.length >= 5) {
        トースト('選択できるのは5つまでです')
      }
    },
    //完全な福祉オプション onConfirmSpeed ​​() {
      this.showWelfare = false
      this.welfareChange = false
      itemList = this.checkedList.map((item) => { とします。
        アイテムを返す.テキスト
      });
      str = itemList.join('/') とします。
      str1 = itemList.join(';') とします。
      this.benefits = str ? str : this.benefits
      this.onlineForm.benefits = str1 ? str1 : this.benefits
    },
    表示赤ヒント() {
      this.welfareChange = false
    },
    オンフォーカス(){
      this.showRedTips()
    },
    //次へボタンの色の値 colorChange() {
      if (this.onlineForm.benefits) {
        真を返す
      }
    },
    // ValidateValidateOnlineForm() {
      有効 = true とします。
      if (!this.onlineForm.benefits || !this.onlineForm.benefits.trim()) {
        有効 = 偽;
        トースト('仕事のメリットを選択してください')
        this.welfareChange = true
      }
      有効な値を返します。
    },
    //送信するsubmit(){
      if (this.validateOnlineForm()) {
        トースト('送信')
      }
    },
  },
};
</スクリプト>
 
<style スコープ lang="less" >
* {
  マージン: 0;
  パディング: 0;
}
::v-deep .van-picker__title {
  フォントサイズ: 17px;
  フォントファミリー: PingFangSC、PingFangSC-Medium;
  フォントの太さ: 500;
  テキスト配置: 中央;
  色: #333333;
}
.リリースポスト{
  幅: 100%;
  パディング下部: 64px;
  パディング上部: 定数(セーフエリアインセット上部);
  パディング上部: env(セーフエリアインセット上部);
}
.post_welfare {
  ::v-deep .van-field__control:disabled {
    フォントサイズ: 15px;
    フォントファミリ: PingFangSC、PingFangSC-Regular;
    フォントの太さ: 400;
    テキスト配置: 左;
    色: #333333;
    -webkit-テキスト塗りつぶし色: #333333;
  }
  ::v-deep入力::-webkit-input-placeholder {
    フォントサイズ: 15px;
    フォントファミリ: PingFangSC、PingFangSC-Regular;
    フォントの太さ: 400;
    テキスト配置: 左;
    色: #999999;
    -webkit-テキスト塗りつぶし色: #999999;
  }
}
::v-deep .van-field__control:disabled {
  フォントサイズ: 15px;
  フォントファミリ: PingFangSC、PingFangSC-Regular;
  フォントの太さ: 400;
  テキスト配置: 左;
  色: #333333;
  -webkit-テキスト塗りつぶし色: #333333;
}
 
.welfare_content {
  パディング上部: 10px;
  パディング下部: 30px;
  ディスプレイ: フレックス;
  コンテンツの両端揃え: スペースを空ける;
  アイテムの位置を中央揃えにします。
  flex-wrap: ラップ;
  マージン: 0 16px;
}
#福祉項目 {
  幅: 31%;
}
.welfare_top {
  ディスプレイ: フレックス;
  コンテンツの両端揃え: スペースの間;
  アイテムの位置を中央揃えにします。
  パディング: 13px 0;
  下境界線: 実線 0.5px #e5e5e5;
}
.welfare_title {
  フォントサイズ: 17px;
  フォントファミリー: PingFangSC、PingFangSC-Medium;
  フォントの太さ: 500;
  テキスト配置: 中央;
  色: #333333;
  右マージン: -16px;
}
.welfare_btn {
  フォントサイズ: 16px;
  フォントファミリ: PingFangSC、PingFangSC-Regular;
  フォントの太さ: 400;
  テキスト配置: 右;
  色: #333333;
  右マージン: 16px;
}
.welfare_text {
  高さ: 36px;
  背景: #f4f8ff;
  境界線: 1px 実線 #bbdcff;
  境界線の半径: 4px;
  上マージン: 10px;
  行の高さ: 36px;
 
  フォントサイズ: 14px;
  フォントファミリー: PingFangSC、PingFangSC-Medium;
  フォントの太さ: 500;
  テキスト配置: 中央;
  色: #1283ff;
}
.not_welfare_text {
  高さ: 36px;
  背景: #ffffff;
  境界線: 1px 実線 #e5e5e5;
  境界線の半径: 4px;
  上マージン: 10px;
  行の高さ: 36px;
 
  フォントサイズ: 14px;
  フォントファミリー: PingFang、PingFang-SC;
  フォントの太さ: 500;
  テキスト配置: 中央;
  色: #333333;
}
 
.履歴書コンテンツ{
  左マージン: 30px;
  右マージン: 30px;
  ::v-ディープ{
    .van-popup--bottom {
      左上の境界線の半径: 12px;
      右上の境界線の半径: 12px;
    }
  }
}
。マスク {
  幅: 100%;
  背景: #ffffff;
  ボックスの影: 0px 0px 8px 0px rgba(204, 204, 204, 0.3);
  位置: 固定;
  下部: 0;
  左: 0;
  ディスプレイ: フレックス;
  コンテンツの中央揃え: 中央;
  アイテムの位置を中央揃えにします。
  パディング: 10px 0;
  パディング下部: calc(env(セーフエリアインセット下部)+15px);
  パディング下部: calc(env(セーフエリアインセット下部) + 15px);
}
.btn{
  フォントサイズ: 16px;
  フォントファミリー: PingFangSC、PingFangSC-Medium;
  フォントの太さ: 500;
  テキスト配置: 左;
  色: #ffffff;
  マージン: 0 自動;
  テキスト配置: 中央;
  行の高さ: 1.6rem;
  幅: 100%;
  マージン: 0 16px;
  高さ: 48px;
  背景: #d8d8d8;
}
.btnBg {
  フォントサイズ: 16px;
  フォントファミリー: PingFangSC、PingFangSC-Medium;
  フォントの太さ: 500;
  テキスト配置: 左;
  色: #ffffff;
  マージン: 0 自動;
  テキスト配置: 中央;
  行の高さ: 1.6rem;
  幅: 100%;
  マージン: 0 16px;
  高さ: 48px;
  背景: #d8d8d8;
  境界線: なし;
  アウトライン: なし;
  背景: 線形グラデーション(90度, #50a3ff, #1283ff);
  境界線の半径: 4px;
}
 
.name_title {
  フォントサイズ: 16px;
  フォントファミリー: PingFangSC、PingFangSC-Medium;
  フォントの太さ: 500;
  色: #333333;
}
 
。必須 {
  フォントサイズ: 13px;
  フォントファミリ: PingFangSC、PingFangSC-Regular;
  フォントの太さ: 400;
  色: #ff1d28;
  位置: 絶対;
}
.カレンダー{
  幅: 100%;
  高さ: 49px;
  背景: #ffffff;
  境界線: 1px 実線 #e5e5e5;
  境界線の半径: 5px;
  上マージン: 10px;
  左パディング: 20px;
  背景: url("./images/drop-down.png") 繰り返しなし 96% 中央;
  背景サイズ: 10px 7px;
  右パディング: 25px;
  ::v-deep .van-field__control {
    フォントサイズ: 15px;
    フォントファミリ: PingFangSC、PingFangSC-Regular;
    フォントの太さ: 400;
    テキスト配置: 左;
    色: #333333;
    上マージン: 12px;
  }
}
::v-deep入力::-webkit-input-placeholder {
  フォントサイズ: 15px;
  フォントファミリ: PingFangSC、PingFangSC-Regular;
  フォントの太さ: 400;
  テキスト配置: 左;
  色: #afadad;
  -webkit-テキスト塗りつぶし色: #afadad;
}
.テーブルリスト{
  上マージン: 16px;
}
.borderStyle {
  境界線: 実線 1px #ff1d28;
  境界線の半径: 3px;
}
入力::-webkit-入力プレースホルダー {
  フォントサイズ: 15px;
  フォントファミリ: PingFangSC、PingFangSC-Regular;
  フォントの太さ: 400;
  テキスト配置: 左;
  色: #999999;
}
.van-field__control {
  色: #333333;
}
</スタイル>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vueコンポーネントを使用してシンプルなポップアップ効果を実装する
  • vue.js ポップアップコンポーネントに関する知識ポイントのまとめ
  • 素晴らしい Vue ポップアップ コンポーネント
  • Vueポップアップメッセージコンポーネントの使い方
  • VUEは、自由にドラッグできるポップアップコンポーネントを実装しています。
  • Vueは、「詳細を表示」ボタンをクリックして詳細リストをポップアップウィンドウに表示する操作を実装します。
  • Vue のトーストポップアップコンポーネントの詳細な例
  • Vue でポップアップ コンポーネントを閉じるときに操作を破棄して非表示にする
  • Vueがポップアップしたら、携帯電話のリターンキーを押してポップアップ機能を閉じます(ページはジャンプしません)
  • VUEを使用して、テーブル内の文字数が5文字を超える場合はテキスト情報を非表示にし、マウスを動かすとすべての文字を表示します。

<<:  MySQLトランザクションとSpring分離レベルの実装原理の詳細な説明

>>:  Xshellの一般的な問題と関連する設定の詳細な説明

推薦する

VueとFlask間の通信の実装

axiosをインストールして通信を実装するここでは、axios を使用して Vue フロントエンドと...

MySQL InnoDB ReplicaSet の簡単な紹介

目次01 InnoDBレプリカセットの紹介02 InnoDBレプリカセットの制限03 導入前に知って...

Alibaba Cloud イメージリポジトリを使用して外部 Docker イメージを構築する方法の詳細な説明

Alibaba Cloud Image Repositoryを使用して外部イメージをダウンロードする...

Dockerコンテナ起動時に固定IPを設定する実装

Dockerインストール後のネットワークタイプ [root@insure updev]# docke...

HTML の大なり、小なり、スペース、引用符などでよく使用されるエスケープ コードのリスト。

表は以下のとおりです。 HTMLソースコード結果を表示説明する&lt; <未満記号また...

docker+devpi を使用してローカル pypi ソースをビルドする方法

以前、開発で頻繁に pip ダウンロードを使用する必要がありました。pip ソースを国産ソースに変更...

deepin apt コマンドを使用して最新バージョンの docker をインストールする方法

ステップ1: Ubuntuソースを追加するルートに切り替える suルートソフトウェアソースファイルの...

MySQL パフォーマンス最適化のヒント

MySQL パフォーマンスの最適化MySQL はインターネット企業で広く使用されており、MySQL ...

CocosCreatorでリストを作成する方法

CocosCreator バージョン: 2.3.4 Cocos には List コンポーネントがない...

証明書を使用してリモート Docker サーバーに接続する方法

目次1. スクリプトを使用してDockerのTLSを暗号化する2. Dockerの設定を変更してリモ...

Nginx の書き換え正規マッチング書き換え方法の例

Nginx の書き換え機能は、リダイレクトと同様に、URL アドレスを一時的または永続的に新しい場所...

今日、私は非常に奇妙なクリックの問題に遭遇し、自分で解決しました

...こんな感じで、今日はポップアップウィンドウを作ろうと思ったのですが、バックエンド PHP によ...

VUEウォッチリスナーの基本的な使い方の詳しい説明

目次1. 次のコードはwatchの簡単な使用法です2. 即時監視3. ハンドラメソッド4. 深い属性...

MySQL ビューの原則分析

目次更新可能なビュービューのパフォーマンスビューの制限ビューは MySQL 5.0 以降で導入されま...