Trung tâm cá nhân
sách gpt4 ăn đã đi

Triển khai cửa sổ bật lên phổ quát vue+elementui (mới + chỉnh sửa)

In lại Tác giả: qq735679552 Thời gian cập nhật: 27-09-2022 22:32:09 35 4
mua khóa gpt4 giày nike

CFSDN nhấn mạnh vào giá trị tạo ra nguồn mở và chúng tôi cam kết xây dựng nền tảng chia sẻ tài nguyên để mọi nhân viên CNTT có thể tìm thấy thế giới tuyệt vời của bạn tại đây.

Bài viết trên blog CFSDN này triển khai cửa sổ bật lên phổ quát vue+elementui (mới + chỉnh sửa) được tác giả sưu tầm và biên soạn. Nếu bạn quan tâm đến bài viết này, hãy nhớ thích nó.

Bài viết này chủ yếu giới thiệu cách triển khai cửa sổ bật lên phổ quát vue+elementui (mới + chỉnh sửa) và chia sẻ với mọi người, như sau:

Triển khai cửa sổ bật lên phổ quát vue+elementui (mới + chỉnh sửa)

Mẫu thành phần.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
"tiêu đề" :visible.đồng bộ= "Hiển thị hộp thoại" :close-on-click-modal= "SAI" >
   "ym-common-dialog" :lớp= "Lớp tùy chỉnh" >
    
vì = "(col,index) trong cột" >
       nếu như = "!!col.isRequire" >*{{col.name}}
       nếu như = "col.type === 'văn bản'" >
        
{{submitData[col.key]}}
      
       nếu như = "col.type === 'đầu vào'" >
         "chữ" v-model= "gửiDữ liệu[col.key]" :chỗ giữ chỗ= "'Vui lòng nhập' + col.name" >
      
       nếu như = "col.type === 'radio'" >
         "flexX" >
         vì = "radio trong col.data" v-model= "gửiDữ liệu[col.key]" :nhãn= "radio.label" >{{radio.name}}
        
      
       nếu như = "col.type === 'chọn'" >
         "gửiDữ liệu[col.key]" chỗ giữ chỗ= "Xin hãy chọn" >
          
           TRONG- vì = "tùy chọn trong col.data"
           :chìa khóa= "tùy chọn.giá trị"
           :nhãn= "tùy chọn.nhãn"
           :giá trị= "tùy chọn.giá trị" >
          
        
      
    
  
   "chân trang" lớp= "hộp thoại-chân trang" >
     "dialogShow = sai" >Hủy
     "sơ đẳng" @nhấp= "xác nhận" >OK
  

Nội dung của cửa sổ bật lên được hiển thị dựa trên dữ liệu đến. Định dạng dữ liệu như sau.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
cột: [{
   tên: 'Hộp nhập liệu' ,
   chìa khóa: 'ccc' , // Các trường tương ứng khi gửi
   kiểu: 'đầu vào' , // kiểu
   Yêu cầu: ĐÚNG VẬY // Có cần thiết không?
}, {
   tên: 'Nút radio' ,
   chìa khóa: 'aaaa' ,
   kiểu: 'radio' ,
   dữ liệu: [{
     nhãn: '1' ,
     tên: 'Vạn Lý Trường Thành'
   }, {
     nhãn: '2' ,
     tên: 'Trường An'
   }],
   Yêu cầu: ĐÚNG VẬY
}, {
   tên: 'Hộp thả xuống' ,
   chìa khóa: 'bbb' ,
   kiểu: 'lựa chọn' ,
   dữ liệu: [{
     giá trị: 'Lựa chọn 1' ,
     nhãn: 'Bánh vàng'
   }, {
     giá trị: 'Lựa chọn 2' ,
     nhãn: 'Sữa đôi da'
   }],
   Yêu cầu: ĐÚNG VẬY
}],

Dữ liệu thành phần và đạo cụ.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
dữ liệu() {
   trở lại {
     gửiDữ liệu: {}, //Gửi thu thập dữ liệu
     hộp thoạiHiển thị: SAI
   }
},
đạo cụ: {
   // Hiện/ẩn cửa sổ bật lên
   hộp thoạiCó thể nhìn thấy: {
     loại: Số,
     mặc định : 0
   },
   // Tiêu đề cửa sổ bật lên
   tiêu đề: Chuỗi,
   // Kiểu tùy chỉnh
   customClass: Chuỗi,
   //cột dữ liệu
   cột: {
     loại: Mảng,
     mặc định : () => []
   },
   // Truyền vào giá trị ban đầu khi chỉnh sửa
   dữ liệu: {
     loại: Đối tượng,
     mặc định : () => {}
   }
},

Giám sát dữ liệu thành phần.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
đồng hồ: {
   dialogVisible(val) {
     nếu như (giá trị > 0) {
       cái này .hộp thoạiHiển thị = ĐÚNG VẬY
     }
   },
   dữ liệu: {
     xử lý (val) {
       cái này .submitData = giá trị
     },
     ngay lập tức: ĐÚNG VẬY
   },
   gửiDữ liệu: {
     // Để giải quyết vấn đề chuyển nút radio để ẩn các phần tử khác
     // Khi thành phần cha giám sát sự thay đổi giá trị của nút radio, nó có thể sửa đổi giá trị của cols để ẩn và hiển thị phần tử.
     trình xử lý() {
       cái này .$phát( 'thay đổi' , cái này .submitData)
     },
     sâu: ĐÚNG VẬY
   }
}

Gửi dữ liệu và xác minh.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
xác nhận() {
   // Xác minh các trường bắt buộc
   hãy để isMust = cái này .cols.filter(mục => mục.isRequire).map(mục => mục.key)
   Đối tượng.keys( cái này .submitData).forEach(khóa => {
     hãy để index = isMust.indexOf(key)
     nếu như ((chỉ số > -1) && cái này .submitData[khóa] !== '' && !! cái này .submitData[khóa]) {
       isMust.splice(chỉ số, 1)
     }
   })
   nếu như (isMust.length > 0) {
     Hiển thịMặc địnhMẹo( 'Xin lưu ý các trường bắt buộc!' , '' , 3)
     trở lại
   }
   cái này .$phát( 'hoàn thành' , cái này .submitData)
   cái này .hộp thoạiHiển thị = SAI
}

Mã ở đây.

Điều này kết thúc bài viết này về việc triển khai các cửa sổ bật lên phổ quát vue+elementui (mới + chỉnh sửa). Để biết thêm nội dung cửa sổ bật lên vue elementui có liên quan, vui lòng tìm kiếm các bài viết trước của tôi hoặc tiếp tục duyệt qua các bài viết liên quan sau đây. có thể Hãy ủng hộ tôi nhiều hơn trong tương lai nhé! .

Liên kết gốc: https://segmentfault.com/a/1190000038853581.

Cuối cùng, bài viết này về việc triển khai cửa sổ bật lên phổ quát vue+elementui (mới + chỉnh sửa) kết thúc tại đây. Nếu bạn muốn biết thêm về cách triển khai cửa sổ bật lên phổ quát vue+elementui (mới + chỉnh sửa), vui lòng Tìm kiếm các bài viết của CFSDN hoặc tiếp tục duyệt các bài viết liên quan. Tôi hy vọng bạn sẽ ủng hộ blog của tôi trong tương lai! .

35 4 0
Đề xuất bài viết: Lá cờ đỏ năm sao tung bay trong gió, một bức tranh có độ nét cao Tôi mong muốn cùng tuổi trẻ của chúng ta cùng bảo vệ Trung Quốc trong thời đại thịnh vượng này.
Đề xuất bài viết: Chi tiết và ví dụ về cấu hình tường lửa CentOS
Đề xuất bài viết: Hình nền có chữ, cô gái độc đoán, đen trắng buồn bã, việc kết thúc chương trình luôn là điều khó tránh khỏi, vậy tại sao bạn lại phải sợ hãi?
Đề xuất bài viết: Ứng dụng WeChat onShareTimeline() thực hiện chia sẻ trong Khoảnh khắc
qq735679552
Hồ sơ

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá taxi Didi miễn phí
Phiếu giảm giá taxi Didi
Các bài viết phổ biến trên toàn bộ trang web
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress