当前位置：首页 > 软件库 > 手机/移动开发 > >

nativescript-vue-multi-drawer

授权协议 MIT License

开发语言 JavaScript TypeScript

所属分类手机/移动开发

软件类型开源软件

地区不详

投递者申屠裕

操作系统 iOS

开源组织无

适用人群未知

软件概览

NativeScript-Vue Multi Drawer

A plugin which provides a drawer component that supports multiple drawers.

All drawers are optional, and can be configured individually.

Features:

drawers on left, right, top and bottom
swipe to open
swipe to close
tap outside to close
progressively dim main content as the drawer is opened

Quick Start

$ npm i --save nativescript-vue-multi-drawer

// main.js
import Vue from 'nativescript-vue'
...
+ import MultiDrawer from 'nativescript-vue-multi-drawer'
+ Vue.use(MultiDrawer)

Optionally set default options by passing options when installing the plugin:

Vue.use(MultiDrawer, { 
  // override any option here
  // for example enable debug mode
  debug: true
})

For the available options check the source of defaultOptions

<MultiDrawer>
  <StackLayout slot="left">
    <Label text="Im in the left drawer" />  
  </StackLayout>
  <StackLayout slot="right">
    <Label text="Im in the right drawer" />  
  </StackLayout>
  <StackLayout slot="top">
    <Label text="Im in the top drawer" />  
  </StackLayout>
  <StackLayout slot="bottom">
    <Label text="Im in the bottom drawer" />  
  </StackLayout>
  
  <Frame /> <!-- main content goes into the default slot -->
</MultiDrawer>

The component will only enable drawers that have contents in them, so if you only need a left and a right side drawer, you can just remove the top and bottom slots and it will work as expected.

Opening a drawer from code

Assign a ref to the Drawer component

<MultiDrawer ref="drawer" />

And use this.$refs.drawer.open(side) where side is a string: left, right, top or bottom.

Using v-model to toggle the drawer

The drawer can be opened through v-model. This is useful as it allows controlling the drawer state with Vue's reactivity system. For example, the value of v-model could easily come from a vuex store.

<MultiDrawer v-model="drawerState" />

export default {
  data() {
    return {
      drawerState: false // closed
    }
  },
  
  methods: {
    doStuff() {
      // do stuff
      this.drawerState = 'left' // this will open the left drawer
    }
  }
}

使用案例

封装组件——抽屉drawer（vue+element）

<template> <el-drawer :title="title" :size='size' :visible.sync="showDrawer" ref='drawer' destroy-on-close :before-close='dbeforeClo
vue swiper animate如何使用

需要注意的是： animate的动画在一加载的时候，所有动画都加载完毕，所以翻到后面swiper页面时设置的delay就看不到了。使用“swiper-animate-effect”，每切换一帧都能看到对应的时延，即动画从0时刻开始。 1.先安装： npm install animate.css --save 2、下载animate.js包打开链接： https://www.swiper.com.
vue-awesome-swiper的使用方法

安装 npm install vue-awesome-swiper@3 --save-dev 简单基本配置 <template> <div class="recommendPage"> <swiper :options="swiperOption" ref="mySwiper"> <swiper-slide>I'm Slide 1</swiper-slide>
VUE组件中的 Drawer 抽屉实现代码

因为项目中用的是 element-ui 框架，而这个框架并没有抽屉组件，所以自己实现一个，具体代码如下： drawer.vue {{ title }} x export default { props: { // 是否打开 display: { type: boolean }, // 标题 title: { type: string, default: '标题' }, // 是否显示关闭按钮 cl
【Drawer】VUE3写出自己的Drawer组件

最近项目中有DrawerUI需求，看来Element的组件发现并不太适合自己的项目,于是就自己动手写了一个，有需要的小伙伴直接拿源码研究。 {{title}} <div class=“drawer__icon” @click=“emit(‘close’)”> <div class=“mantle” v-if=“mantle” @click=“emit(‘close’)”>
vue-awesome-swiper组件

vue-awesome-swiper组件在Vue中，vue-awesome-swiper组件在开发中经常使用的，它可以作轮播图也可以作滚动。无限循环滚动，分页器可以点击选择，文章内容滚动等效果安装： npm install vue-awesome-swiper --save 全局引入： import Vue from 'vue' import VueAwesomeSwiper from 'v
Vue 封装导入弹框(el-drawer)模板

1.封装子组件 <template>  <el-drawer title="" :visible.sync="importDrawer" :direction="importDirection" :wrapperClosable="importDrawerWarapper" :destroy-on-close="destroyImport" :siz

nativescript-vue-multi-drawer

NativeScript-Vue Multi Drawer

Quick Start

Opening a drawer from code

Using v-model to toggle the drawer

同类工具

相关阅读

相关文章

相关问答

相关文档