首页 > 其他分享 >前端Vue仿美团右侧侧边栏弹框筛选框popup alert

前端Vue仿美团右侧侧边栏弹框筛选框popup alert

时间:2023-07-16 20:37:36浏览次数:46  
标签:Vue false name popShow alert popup 筛选 selArr id

随着技术的发展,开发的复杂度也越来越高,传统开发方式将一个系统做成了整块应用,经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改,造成牵一发而动全身。

通过组件化开发,可以有效实现单独开发,单独维护,而且他们之间可以随意的进行组合。大大提升开发效率低,降低维护成本。

今天给大家介绍的一款组件仿美团右侧侧边栏弹框筛选框popup alert;附源码下载地址 https://ext.dcloud.net.cn/plugin?id=13602

效果图如下:

实现代码如下

cc-rightPopup

使用方法


<!-- pop-show:是否显示弹框  color:主题色 classList:分类数组 @sureClick:筛选确认 @hideClick:隐藏事件  -->

<cc-rightPopup :pop-show="popShow" :colors="colors" :classList="classList" @sureClick="sureClick"

@hideClick="hideright"></cc-rightPopup>

// 隐藏处理

hideright() {

this.popShow = false;

},

// 筛选确认

sureClick(paramDict, selArr) {

this.popShow = false;

uni.showModal({

title: '筛选数据',

    content: '筛选价格数据 = ' + JSON.stringify(paramDict) + ' 筛选按钮数据= ' + JSON.stringify(selArr)

})

}

HTML代码实现部分


<template>

<view class="content">

<button style="margin: 60px 90px;" @click="showPopClick">点击弹框</button>

<!-- pop-show:是否显示弹框  color:主题色 classList:分类数组 @sureClick:筛选确认 @hideClick:隐藏事件  -->

<cc-rightPopup :pop-show="popShow" :colors="colors" :classList="classList" @sureClick="sureClick"

@hideClick="hideright"></cc-rightPopup>

</view>

</template>

<script>

export default {

data() {

return {

colors: '#fa436a',

popShow: false,

classList: [{

name: '营业事件',

id: 1,

child: [{

name: '0-5时',

id: 2

}, {

name: '5-10时',

id: 3

}, {

name: '10-14时',

id: 2

}, {

name: '14-18时',

id: 3

}, {

name: '18-22时',

id: 2

}, {

name: '22-24时',

id: 3

}]

}, {

name: '用餐人数',

id: 2,

child: [{

name: '单人餐',

id: 1

}, {

name: '双人餐',

id: 2

}, {

name: '3-4人餐',

id: 2

},

{

name: '5-10人餐',

id: 2

}

]

}],

}

},

methods: {

showPopClick() {

this.popShow = true;

},

hideright() {

this.popShow = false;

},

sureClick(paramDict, selArr) {

this.popShow = false;

uni.showModal({

title: '筛选数据',

content: '筛选价格数据 = ' + JSON.stringify(paramDict) + ' 筛选按钮数据= ' + JSON.stringify(selArr)

})

}

}

}

</script>

<style>

page {

background-color: #f2f2f2;

margin-bottom: 50px;

}

</style>

标签:Vue,false,name,popShow,alert,popup,筛选,selArr,id
From: https://www.cnblogs.com/ccVue/p/17558453.html

相关文章

  • vue-day22--v-text指令
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><title>过滤器</title><scripttype=......
  • vue项目ios真机测试
    如何实现“Vue项目iOS真机测试”简介在开发Vue项目时,我们通常需要进行测试来确保项目在不同平台上的兼容性和稳定性。本文将为刚入行的开发者介绍如何在iOS设备上进行Vue项目的真机测试。流程下面是实现Vue项目iOS真机测试的整体流程:步骤说明步骤一环境准备步骤......
  • vue3axios怎么用
    Vue3中使用axios在Vue3中,可以使用axios来进行网络请求。axios是一个基于Promise的HTTP客户端,可以用于浏览器和Node.js,非常便捷和强大。安装axios在开始之前,首先需要安装axios。可以通过npm或者yarn来安装:npminstallaxios引入axios在Vue3中,可以使用import来引入axios:impor......
  • vue3axiosjwt拦截器
    实现Vue3axiosjwt拦截器介绍在Vue3项目中使用axios进行网络请求时,我们经常需要在每次请求中添加JWT令牌(JSONWebToken)以进行身份验证。为了简化这个过程,我们可以使用axios的拦截器来实现自动添加JWT令牌的功能。本文将指导你如何使用Vue3、axios和JWT来实现拦截器。整体流程......
  • vue.js 只能输入大写字母
    如何实现Vue.js只能输入大写字母本文将向刚入行的开发者介绍如何使用Vue.js实现只允许输入大写字母的输入框效果。我们将使用Vue.js的指令和事件处理来达到这个目标。实现流程下面是实现该功能的步骤,我们将逐一介绍每个步骤的实现细节。步骤描述1.创建Vue......
  • vue.js 如何查看引用的css
    在Vue.js中,我们可以通过以下几种方式来查看引用的CSS。一、浏览器开发者工具浏览器的开发者工具是一个非常有用的工具,我们可以使用它来查看页面中引用的所有CSS文件。下面是在Chrome浏览器中如何使用开发者工具查看引用的CSS。打开你的Vue.js应用并访问需要查看的页面。右键单......
  • vue.js - 不同参数同时请求同一个接口接口
    Vue.js-不同参数同时请求同一个接口接口概述在Vue.js中,我们可以使用Axios库来发送HTTP请求。当我们需要根据不同参数来请求同一个接口时,可以通过以异步的方式来实现。本文将教你如何使用Vue.js和Axios来实现这个功能。步骤下面是实现该功能的步骤:步骤描述1在Vue组......
  • vue+axios实现输入框多条件搜索功能
    Vue+Axios实现输入框多条件搜索功能在现代的Web开发中,搜索功能是一个非常重要的特性。用户们希望能够根据自己的需求输入多个条件来筛选出所需要的数据。Vue.js是一个流行的JavaScript框架,可以轻松地实现这样的功能。而Axios是一个基于Promise的HTTP库,可以方便地与后端进行数据......
  • vue node.js
    实现“VueNode.js”教程简介在本教程中,我将向你介绍如何使用Vue和Node.js创建一个完整的Web应用程序。Vue是一个流行的JavaScript框架,用于构建用户界面;而Node.js是一个基于JavaScript的运行时环境,用于构建服务器端应用程序。整体流程下面是实现“VueNode.js”的步骤:步骤......
  • 解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
    解决VueAxios跨域问题(预检请求)一、问题描述在前后端分离开发中,前端通过Vue框架发起Ajax请求时,如果请求的URL与前端所在的域名不一致,就会触发浏览器的跨域机制。其中一种常见的跨域问题是"RequestMethod:OPTIONS",也称为预检请求。在本文中,我们将说明如何解决这个问题。二、......