抽屉组件（vue/wx）-基于vue编写类似elementUi组件，基于小程序语法写类似ivew组件

最新推荐文章于 2024-05-22 11:22:58 发布
最新推荐文章于 2024-05-22 11:22:58 发布
阅读量7.9k 收藏 3
点赞数 1
分类专栏： vue 小程序 mpvue es6 js 文章标签： 小程序组件开发 vue组件开发 element ivew
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012045958/article/details/83385847
版权
vue 同时被 3 个专栏收录
4 篇文章 0 订阅
订阅专栏
js
4 篇文章 0 订阅
订阅专栏
es6
3 篇文章 0 订阅
订阅专栏

抽屉组件（vue/wx）

  • （vue与微信两种实现方式）
  • 基于vue编写类似elementUi组件
  • 基于小程序语法写类似ivew组件
  1. 基于vue语法写组件（涉及：父子组件传值props，子父组件方法传递：this.$emit）
  2. 基于微信语法写组件（涉及：父子组件传值properties，子父方法传递：this.triggerEvent）

备注：

  • 编写vue组件经常遇到多层级组件的关系嵌套，数据传递，采用边界处理provide（顶层组件抛出），和inject（底层组件注入接收）
  • 编写小程序同理对于多层级组件，数据传递，采用relations-》type，回调中this.getRelationNodes(‘path/to/custom-li’)获取子组件循环)
效果图vue：

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

效果图wx：

在这里插入图片描述在这里插入图片描述

以下代码例子Vue：demo.vue

<template>
  <cb-page title="Drawer 抽屉">
    <cb-button @click="showLeft = true" color="light"  >默认左侧</cb-button>
    <cb-button @click="showLefta = true" >左侧</cb-button>
    <cb-button @click="showRight = true"  color="light" >右侧默认</cb-button>
    <cb-button @click="showRighta = true"  >右侧</cb-button>
    <cb-drawer
      :open.sync="showLeft"
      :close-by-out-side-click="true"
      @change="changeClick">
      <p>默认左侧</p>
    </cb-drawer>
    <cb-drawer
      :open.sync="showLefta">
      <p>左侧</p>
      <cb-button @click="showLefta = false" >关闭</cb-button>
    </cb-drawer>
    <cb-drawer
      position="right"
      :open.sync="showRight"
      :close-by-out-side-click="true">
      <p>右侧默认侧</p>
    </cb-drawer>
    <cb-drawer
      position="right"
      :open.sync="showRighta">
      <p>右侧</p>
      <cb-button @click="showRighta = false"  >关闭</cb-button>
    </cb-drawer>
  </cb-page>
</template>
<script>
  export default {
    name: 'drawer',
    data() {
      return {
        showLeft: false,
        showLefta: false,
        showRight: false,
        showRighta: false
      }
    },
    methods: {
      changeClick() {
        console.log('hell draw');
      }
    }
  }
</script>
<style scoped lang="less">
</style>

组件代码compdraw.vue：

<template>
  <div class="cb-drawer">
    <div v-if="open"
         :class="position === 'left' ? (open ? 'cb-drawer-open-mode': 'cb-drawer-close-mode') : ( open ? 'cb-drawer-open-mode-right': 'cb-drawer-close-mode-right')"
         @click="modeClick">
    </div>
    <div  :class="position === 'left' ? (open ? 'cb-drawer-open-content' : 'cb-drawer-close-content') : (open ? 'cb-drawer-open-content-right' :'cb-drawer-close-content-right') ">
      <slot></slot>
    </div>
  </div>
</template>
<script>
  export default {
    componentName: "cb-drawer",
    props: {
      //控制遮罩是否可以点击隐藏抽屉组件
      closeByOutSideClick: {
        type: Boolean,
        default: false
      },
      //抽屉滑动方向
      position: {
        type: String,
        default: 'left'
      },
      width: {
        type: String,
        default: '50'
      },
      //抽屉遮罩层是否显示
      open: {
        type: Boolean
      }
    },
    methods: {
      modeClick() {
        if (this.closeByOutSideClick) {
          this.$emit('update:open',false);
          this.$emit('change');
        } 
      }
    }
  }
</script>

<style scoped lang="less">
  @import "../../mp/cb-drawer/cb-drawer";
  .cb-drawer-open-content,.cb-drawer-close-content{
    padding: 30px 0px 0px 0px;
  }
  .cb-drawer-open-content-right,.cb-drawer-close-content-right{
    padding: 30px 0px 0px 0px;
  }
</style>

组件less：

.cb-drawer{
  &-close-content,&-open-content, &-close-content-right,&-open-content-right, &-close-mode ,&-open-mode,&-close-mode-right,&-open-mode-right{
    position: fixed;
    top: 0;
    height: 100%;
  }
  &-close-content,&-open-content,&-close-content-right,&-open-content-right{
    width: 50%;
    background: #fff;
    z-index: 99
  }
  &-open-mode,&-close-mode,&-close-mode-right,&-open-mode-right{
    background: #222222;
    opacity: 0.8;
    z-index: 9;
    width: 100%;
    right: 0;
    left: 0;
  }
  &-close-content{
    opacity:0;
    left: 0%;
    transform: translate3d(-100%, 0, 0);
    transition: all .5s;
  }
  &-open-content{
    opacity:1;
    left: 0%;
    transform: translate3d(0, 0, 0);
    transition:all  .5s;
  }
  &-close-content-right{
    right: -50%;
    transition: right .5s;
  }
  &-open-content-right{
    right: 0;
    transition: right .5s;
  }
  &-close-mode{
    opacity:0;
    transition: opacity .5s;
  }
  &-open-mode{
    opacity: 0.7;
    transition: opacity .5s;
  }
  &-close-mode-right{
    opacity:0;
    transition: opacity .5s;
  }
  &-open-mode-right{
    opacity: 0.7;
    transition: opacity .5s;
  }
}

WX小程序例子：demo.wxml

<view class="draw">
    <button bind:tap="showLeft = true">左边默认</button>
    <button bind:tap="showLefta = true" type="warn">左边</button>

    <button bind:tap="showRight = true">右边默认</button>
    <button bind:tap="showRighta = true" type="warn">右边</button>

    <view>
      <draw open="showLeft" closeByOutSideClick="{{true}}">
        <text>单击遮罩层关闭</text>
      </draw>
    </view>

    <view>
      <draw  open="showLefta">
        <text>单击遮罩层关闭</text>
        <button bind:tap="showLefta = true" type="warn">关闭</button>
      </draw>
    </view>

    <view>
      <draw  closeByOutSideClick="{{true}}" open="showRight" position="{{'right'}}">
        <text>单击遮罩层关闭</text>
      </draw>
    </view>

    <view>
      <draw  position="{{'right'}}" open="showRighta">
        <text>单击遮罩层关闭</text>
        <button bind:tap="showRighta = false" type="warn">关闭</button>
      </draw>
    </view>
</view>

WX小程序例子：Demo.js

// pages/draw/draw.js
Page({
  data: {
      showLeft:false,
      showLeft1:false,
      showRight:false,
      showRight1:false
  }
})

WX小程序组件：draw.js

Component({
  externalClasses: ['cb-class'],
  properties: {
    //控制遮罩是否可以点击隐藏抽屉组件
    closeByOutSideClick: {
      type: Boolean,
      value: false
    },
    //抽屉滑动方向
    position: {
      type: String,
      value: 'left'
    },
    //抽屉遮罩层是否显示
    open: {
      type: Boolean
    }
  },
  methods: {
    modeClick() {
      if (this.data.closeByOutSideClick) {
        this.triggerEvent('updateopen',false);
        let myOptionEvent={}
        this.triggerEvent('change');
      } else {
        return;
      }
    }
  }
});

WX小程序组件：draw.wxml

<view class="cb-drawer">
  <view  wx:if = "{{open}}"  class="{{position === 'left' ? (open ? 'cb-drawer-open-mode': 'cb-drawer-close-mode' ):( open ? 'cb-drawer-open-mode-right' : 'cb-drawer-close-mode-right')}}" bind:tap = "modeClick"></view>
  <view class = "{{ position === 'left' ? ( open ? 'cb-drawer-open-content' : 'cb-drawer-close-content') : ( open ? 'cb-drawer-open-content-right' : 'cb-drawer-close-content-right')}}">
    <slot></slot>
  </view>
</view>
林先生_YJL
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue-sku-form:基于 Vue & ElementUI 的电商 SKU 表单配置组件
05-29
Vue-Sku-Form 是一个专为电商领域设计的前端组件，它基于 Vue.js 框架和 ElementUI 组件库，旨在提供一个高度可配置的 SKU（Stock Keeping Unit，库存单位）表单生成器。在电商网站中，SKU 通常用于唯一标识商品的...
微信小程序开发教程-抽屉菜单
大灰狼的小绵羊哥哥的博客
01-13 3048
抽屉菜单是app上常见的菜单设计方式，典型的抽屉菜单如下图所示 下面展示如何基于微信小程序实现抽屉菜单,最终效果如下图所示：  页面包含一个主页和抽屉菜单页，为了实现滑动效果，页面采用absolute布局，代码如下  index.wxml view id='id-main-page' class='main-page' animation='{{animationDat
使用Vue3写一个抽屉Drawer组件
留白声的博客
03-12 911
使用vue3编写抽屉组件，抽屉动画流畅
vue3+element plus封装一个Drawer抽屉组件
最新发布
qq_38210427的博客
05-22 540
开发思路是，关闭和打开抽屉组件的方法定义在子组件中并使用defineExpose方法将子组件的方法暴露给父组件，但是vue3的用法与vue2又不同，记录下本次使用vue3基于element plus封装的一个抽屉组件。在父组件中调用子组件暴露出来的打开或关闭方法，通过emit将处理结果反馈给父组件。在开发中，我们经常使用vue2封装一些弹窗、抽屉组件，思路清楚后开始写代码。
[vue3] 定义图库抽屉组件
沫洺的博客
10-31 1896
定义图库抽屉组件
微信小程序——抽屉（左侧菜单）
wy313622821的博客
07-14 2973
效果图： 封装好的左侧抽屉组件，需要的同学可以到这里拿： https://download.csdn.net/download/wy313622821/20278190
VUE组件 之 Drawer 抽屉
YUSIR 完美CODING世界
11-08 6592
一、源码地址 https://github.com/imxiaoer/DrawerForVue 二、效果图 三、具体代码 drawer.vue <template> <div class="drawer"> <div :class="maskClass" @click="closeByMask"></div&gt...
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
10-14
主要介绍了VUE使用 wx-open-launch-app 组件开发微信打开APP功能,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
vue-mini-weather:基于Vue开发的迷你实时天气预报组件
05-14
基于Vue框架开发的一款迷你天气预报展示的小组件，目前只支持中国大陆的天气预报，原因在更新公告中有，有问题请提 :package: 安装 2021.04.24 因为刚上传到npm仓库没多久，可能其他镜像库还没有镜像过去，所以要...
vue-element-admin:基于vue+elementUI的后台管理系统模板
05-30
vue-element-adminA Vue.js projectBuild Setup# install dependenciesnpm install# serve with hot reload at localhost:8080npm run dev# build for production with minificationnpm run build# build for ...
基于vue-upload-component封装一个图片上传组件的示例
01-19
先到https://www.npmjs.com/search?q=vue+upload上搜索有关上传的控件，没有完全满足需求的组件，过滤后找到 vue-upload-component 组件，功能基本都有，自定义也比较灵活，就以以此进行二次开发。 预览 因为项目是...
微信小程序实战之自定义抽屉菜单（7）
08-30
主要为大家详细介绍了微信小程序实战之自定义抽屉菜单效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序实用小组件：抽屉层实现属性选择或时间选择
03-15
实现了抽屉层来选择所需属性或者日期 可用于商品的属性选择，，自定义日期选择，，或者其他类型的自定义功能选择。 此处是实现了对于属性的选择，可自己布局按钮或者输入框或者其他什么需要的。   此处实现了对于时间的选择，，做了一个判断，，获取当前时间来和所需时间判断，然后决定是否可点击，的样式   此demo是借鉴了另外一位大大的抽屉层样式，然后自己在上面进行了布局和扩展，提供给需要的人 代码和布局也比较简单，另外水平有限，勿怪。 免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请
uniapp-vue-微信小程序 可拖动底部抽屉
YaRuu的博客
03-28 1802
微信小程序 要求：底部上划到一定位置 停止，我用的是hbuildX插件实现，插件比较简单，具体使用往下看。插件下载到hbuildX里的需要的项目里，就可以直接用了。
uniapp小程序—实现下滑关闭抽屉(包含上下左右滑动)
hzqzzz的博客
12-29 2659
这个组件有些多余的地方我没删，可以自行扩展。以下附带移动端的上下左右滑动，可以借鉴实现小程序的左右滑动。
Element组件浅尝辄止1：抽屉组件
渣渣砖
08-10 1439
平时开发中涉及弹窗的情景，一般都会选用dialog组件，其内部封装的相当优雅，方便我们使用；但是当你的文本内容或表单很长, 亦或是你需要临时展示一些图标或文档，Dialog组件可能并不满足我们的需求，这时可以用抽屉组件Drawer来解决问题。
使用小程序实现侧屏抽屉、页中页效果
商务合作 / 项目定制 / 学习交流。个人vx：lovely_wml
09-26 4296
抽屉菜单是现在移动端网页、App都很常见的设计，这里将用小程序来实现这一效果。小程序提供了一系列触摸触发的事件，我们可以在这些事件上绑定自定义的响应，即可达到打开关闭菜单的操作效果。
vue3+element-plus+ts封装可拖拽抽屉组件
qq_41578263的博客
09-12 547
可拖拽控制高度的抽屉组件
vue2实现一个抽屉组件封装
weixin_43845137的博客
04-25 613
【代码】vue2实现一个抽屉组件封装。
@vue/cli-plugin-typescript
01-03
@vue/cli-plugin-typescript是一个Vue CLI的插件，用于在Vue项目中集成TypeScript。它提供了一些命令和配置，使得在Vue项目中使用TypeScript变得更加方便。 要安装@vue/cli-plugin-typescript插件，可以使用以下命令： ```shell vue add typescript ``` 安装完成后，你的Vue项目将会集成TypeScript支持。它会自动为你的项目添加一些必要的配置文件和依赖项。 在安装完@vue/cli-plugin-typescript插件后，你可以在Vue项目中使用TypeScript编写代码。例如，你可以在Vue组件中使用TypeScript的装饰器语法来定义组件的属性和方法。 下面是一个使用@vue/cli-plugin-typescript插件的示例： 在child.vue文件中，你可以使用TypeScript的装饰器语法来定义Vue组件： ```typescript <template> <div> <p>{{ testProvide }}</p> <p>{{ testProvide2 }}</p> </div> </template> <script lang='ts'> import { Vue, Component, Inject } from "vue-property-decorator" @Component export default class Child extends Vue { @Inject() readonly testProvide!: string @Inject() readonly testProvide2!: string mounted() { console.log("this.testProvide", this.testProvide) } } </script> ``` 在上面的示例中，我们使用了`@Component`装饰器来定义Child组件，并使用`@Inject()`装饰器来注入父组件中提供的属性。 通过以上步骤，你就可以在Vue项目中使用TypeScript编写代码了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值