GVKun编程网logo

Ant Design Vue封装a-drawer（vue 封装 axios）

17

如果您想了解AntDesignVue封装a-drawer的相关知识，那么本文是一篇不可错过的文章，我们将对vue封装axios进行全面详尽的解释，并且为您提供关于AndroidMaterialDesi

如果您想了解Ant Design Vue封装a-drawer的相关知识，那么本文是一篇不可错过的文章，我们将对vue 封装 axios进行全面详尽的解释，并且为您提供关于Android Material Design系列之Navigation Drawer、ant design of vue 使用记录、Ant Design Pro 使用更多 Ant Design of Vue 组件、ant design vue - 表格 (待更的有价值的信息。

本文目录一览：

Ant Design Vue封装a-drawer（vue 封装 axios）

Ant Design Vue封装a-drawer（vue 封装 axios）

1.创建子组件

<template>
    <a-drawer
        :title="drawerInfo.customTitle"
        :placement="placement"
        :closable="drawerInfo.showCloseIcon"
        :visible="drawerInfo.visible"
        @close="onClose"
        :width="drawerInfo.width"
        :maskClosable="drawerInfo.clickmaskFlag"
    >
        <div clang="cont-all">
            <slot></slot>
        </div>
    </a-drawer>
</template>
<script lang="ts">
import { defineComponent,reactive,watch } from 'vue'
export default defineComponent({
    props: {
        // 从那个方向打开
        openlocal: {
            type: String,default: 'right',},// 宽度
        width: {
            type: String,default: '461px',// 标题
        customTitle: {
            type: String,required: true,// 是否展示抽屉
        showMskFalg: {
            type: Boolean,default: false,// 显示关闭图标
        showCloseflag: {
            type: Boolean,default: true,// 	点击蒙层是否允许关闭
        clickmaskFlag: {
            type: Boolean,setup(props,{ emit }) {
        const drawerInfo = reactive({
            placement: props.openlocal,//打开的方向
            width: props.width,//宽度
            customTitle: props.customTitle,//标题
            visible: props.showMskFalg,//默认关闭
            showCloseIcon: props.showCloseflag,//closable
            clickmaskFlag: props.clickmaskFlag,//	点击蒙层是否允许关闭
        })
        // 点击遮罩层或右上角叉或取消按钮的回调
        function onClose() {
            emit('otherHander')
        }
        // 监听打开或者关闭
        watch(props,({ showMskFalg }) => {
            drawerInfo.visible = showMskFalg
        })
        return {
            drawerInfo,onClose,}
    },})
</script>

2封装时的注意点

showMskFalg这个参数是控制抽屉是否展开的一个变量
默认这个值是关闭的
由于这个值是有父级传递过来的
我们需要对这个值进行监听
于是便有了
监听打开或者关闭
watch(props,({ showMskFalg }) => {
   drawerInfo.visible = showMskFalg
})
他表示的是监听props中的showMskFalg这个值

3.使用组件

<a-button type="primary" @click="showDrawer">Open</a-button>
<drawer-com
      openlocal="right"
      @otherHander="otherHander"
      :showCloseflag="comInfo.showCloseflag"
      customTitle="新建目录"
      :showMskFalg="comInfo.showMskFalg"
></drawer-com>

let comInfo = reactive({
    showMskFalg: false,//默认关闭
    showCloseflag: true,//没有关闭图标
})

// 打开抽屉
function showDrawer() {
    comInfo.showMskFalg = true
}
// 关闭抽屉
function otherHander() {
    comInfo.showMskFalg = false
}

Android Material Design系列之Navigation Drawer

Android Material Design系列之Navigation Drawer

从今天开始，我们讲一个关于Material Design风格控件系列的文章。个人认为Material Design风格还是非常漂亮和好看的。关于Material Design的控件，从今天这篇开始一个一个的讲，希望能够对大家有所帮助。

Material Design系列控件，我们今天就先从侧滑菜单栏开始，侧滑菜单栏通过名字我们就知道包含两部分，一部分是侧滑（DrawerLayout），一部分是导航菜单栏(NavigationView)。DrawerLayout包含NavigationView，一设置侧滑菜单栏就形成了。因为建立一个侧滑菜单很简单，在用Android Studio新建项目时，最后选择Navigation Drawer Activity或者在新建Activity时选择Navigation Drawer Activity，就出来了。今天我们讲一下它们的自定义配置。

DrawerLayout布局

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 xmlns:tools="http://schemas.android.com/tools"
 android:id="@+id/drawer_layout"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:fitsSystemWindows="true"
 tools:openDrawer="start">

 <include
 layout="@layout/app_bar_main"
 android:layout_width="match_parent"
 android:layout_height="match_parent" />

 <android.support.design.widget.NavigationView
 android:id="@+id/nav_view"
 android:layout_width="wrap_content"
 android:layout_height="match_parent"
 android:layout_gravity="start"
 android:fitsSystemWindows="true"
 app:headerLayout="@layout/nav_header_main"
 app:menu="@menu/activity_main_drawer" />

</android.support.v4.widget.DrawerLayout>

从上面的布局代码中我们就看出来了，DrawerLayout包含NavigationView，中间的include先不管，那是toolbar，咱改天详细讲。新建完项目，自带的布局效果是这样的，如下：
这里写图片描述

从图中，我们可以看到菜单列表，这个菜单列表是我们刚开始建项目时自动生成的，系统默认的，我们需要定制这个菜单变成我们自己的。其实就是要用到了NavigationView。

NavigationView

NavigationView分为两部分，一部分是headerLayout，一部分是menu。headerLayout就是对应菜单的顶部部分，一般用来显示用户信息什么的，menu则对应实际的菜单选项。我们从上面的布局代码中可以看出分别对应的就是 app:headerLayout和app:menu。

headerLayout

布局代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:padding="16dp"
 android:theme="@style/ThemeOverlay.AppCompat.Dark"
 android:background="?attr/colorPrimaryDark"
 android:gravity="center"
 android:orientation="vertical">

 <ImageView
 android:id="@+id/head_iv"
 android:layout_width="60dp"
 android:layout_height="60dp"
 android:layout_marginTop="30dp"
 android:background="@drawable/head" />

 <TextView
 android:text="非著名程序员"
 android:layout_marginTop="10dp"
 android:textColor="#ffffff"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content" />

</LinearLayout>

menu

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

 <group android:checkableBehavior="single">
 <item
 android:id="@+id/nav_home"
 android:icon="@drawable/nav_icon_home"
 android:title="Home" />
 <item
 android:id="@+id/nav_favorite"
 android:icon="@drawable/nav_icon_favorite"
 android:title="收藏" />
 <item
 android:id="@+id/nav_followers"
 android:icon="@drawable/nav_icon_followers"
 android:title="群组" />

 <item
 android:id="@+id/nav_settings"
 android:icon="@drawable/nav_icon_settings"
 android:title="设置" />
 </group>

 <item android:title="分享和反馈">
 <menu>
 <item
 android:id="@+id/nav_share"
 android:icon="@drawable/nav_icon_my_shares"
 android:title="分享" />
 <item
 android:id="@+id/nav_feedback"
 android:icon="@drawable/nav_icon_feedback"
 android:title="意见反馈" />
 </menu>
 </item>

</menu>

代码实现

初始化相关控件

里面的Toolbar和FloatingActionButton稍后我们在这个系列讲，对DrawerLayout和NavigationView进行了声明和初始化。

 //toolbar的设置，稍后讲这个控件
 Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
 setSupportActionBar(toolbar);

 //悬浮按钮控件，稍后讲这个控件
 FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
 fab.setOnClickListener(new View.OnClickListener() {
 @Override
 public void onClick(View view) {
 Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
 .setAction("Action", null).show();
 }
 });

 //设置DrawerLayout
 DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
 ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
 this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
 drawer.setDrawerListener(toggle);
 toggle.syncState();

 //设置NavigationView
 NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
 navigationView.setNavigationItemSelectedListener(this);

侧滑菜单中选项按钮的点击事件

MainActivity实现了NavigationView.OnNavigationItemSelectedListener这个监听事件，然后在实现的监听方法里判断点击事件。
方法如下：

@Override
 public boolean onNavigationItemSelected(MenuItem item) {
 int id = item.getItemId();

 if (id == R.id.nav_home) {
 Toast.makeText(this, "home", Toast.LENGTH_SHORT).show();
 } else if (id == R.id.nav_favorite) {
 Toast.makeText(this, "收藏", Toast.LENGTH_SHORT).show();
 } else if (id == R.id.nav_followers) {
 Toast.makeText(this, "群组", Toast.LENGTH_SHORT).show();
 } else if (id == R.id.nav_settings) {
 Toast.makeText(this, "设置", Toast.LENGTH_SHORT).show();
 } else if (id == R.id.nav_share) {
 Toast.makeText(this, "分享", Toast.LENGTH_SHORT).show();
 } else if (id == R.id.nav_feedback) {
 Toast.makeText(this, "意见反馈", Toast.LENGTH_SHORT).show();
 }

 DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
 drawer.closeDrawer(GravityCompat.START);
 return true;
 }

记得实现了监听，别忘了设置监听：navigationView.setNavigationItemSelectedListener(this);
到这里就讲完了。做完之后的效果图如下：
这里写图片描述
噢，忘了，你们肯定会问，如果点击侧滑上面的头像，怎么实现呢？

headerLayout上的控件实现

如果要实现headerLayout上的控件的点击，那就得这样做了，如下：

View navHeaderView = navigationView.inflateHeaderView(R.layout.header_layout);

ImageView headIv = (ImageView) navHeaderView.findViewById(R.id.head_iv);
headIv.setOnClickListener(new View.OnClickListener() {
 @Override
 public void onClick(View view) {
 Toast.makeText(MainActivity.this, "点击我的头像", Toast.LENGTH_SHORT).show();
 }
});

但是这样做了之后，就相当于在navigationView上又添加了一个headerlayou布局，所以这时，我们需要在布局文件中把

app:headerLayout="@layout/header_layout"

这行代码去掉，否则会重复的。

主题和配色

上面用到的主题和颜色，我们可以在资源文件中配置。
比如color中：

<?xml version="1.0" encoding="utf-8"?>
<resources>
 <color name="colorPrimary">#3F51B5</color>
 <color name="colorPrimaryDark">#303F9F</color>
 <color name="colorAccent">#FF4081</color>
</resources>

比如style中：

<resources>

 <!-- Base application theme. -->
 <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
 <!-- Customize your theme here. -->
 <item name="colorPrimary">@color/colorPrimary</item>
 <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
 <item name="colorAccent">@color/colorAccent</item>
 </style>

 <style name="AppTheme.NoActionBar">
 <item name="windowActionBar">false</item>
 <item name="windowNoTitle">true</item>
 </style>

 <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />

 <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />

</resources>

在这里配置成自己想要实现的主题和颜色即可。这回是真讲完了。是不是很简单，赶紧试一试去吧。

欢迎关注微信公众号：非著名程序员（smart_android），每天每周定时推送原创技术文章。所有技术文章， 均会在微信订阅号首发，关注微信公众号可以及时获得技术文章推送。

ant design of vue 使用记录

ant design of vue 使用记录

1、a-select 获取选项文本并设置默认

设置 labelInValue 属性，获取到的 value 会成为 {key:string, label:string};

<a-select labelInValue placeholder="选择区间" v-decorator="[''numberSelect'', { initialValue: { key: ''0'', label: ''大于等于'' } rules: [{ required: false }]}]">
    <a-select-option value="0">大于等于</a-select-option>
    <a-select-option value="1">大于</a-select-option>
    <a-select-option value="2">小于等于</a-select-option>
    <a-select-option value="3">小于</a-select-option>
</a-select>

2、日期组件汉化

<template>
  <a-locale-provider :locale="zh_CN">
    <div id="app">
      <router-view/>
    </div>
  </a-locale-provider>
</template>
<script>
import zh_CN from ''ant-design-vue/lib/locale-provider/zh_CN'';
export default {
  data () {
    return {
      zh_CN
    }
  }
}
</script>

3、table rowKey 设置

<a-table :columns="columns" :dataSource="data" bordered :pagination="pagination" @change="onChange" :loading="loading" :rowKey="record => record.report_id">
</a-table>

4、时间组件（回显问题）

<a-form-item label="时间范围">
    <a-range-picker size="small" format="YYYY-MM-DD" v-decorator="[''search_param'', { initialValue: 
         search_param, rules: [{ type: ''array'', required: true, message: ''请选择时间！'' }]}]"/>
</a-form-item>

这玩意儿真是，按官网介绍一个 moment 应该是可以设置默认值的，然鹅我用了 ts，引入之后一直提示我 moment.d.ts 文件有问题，wtf，一顿操作之后放弃；换一个方法回显。


(this as any).dataForm.validateFields((err: any, values: any) => {
   if (!err) {
      const rangeValue:any = values[''search_param'']
      search_param: rangeValue[0].format(''YYYY-MM-DD'') + '','' + rangeValue[1].format(''YYYY-MM-DD'')
   }
})

5、table 组件 pc 端自适应问题，当宽度变小出现滚动条

设置 scroll 属性 设置横向或纵向滚动，也可用于指定滚动区域的宽和高，建议为 x 设置一个数字，如果要设置为 true，需要配合样式 .ant-table td { white-space: nowrap; }

6、左侧 menu 自适应且点击可隐藏

<a-layout-sider :trigger="null" collapsible :collapsed="collapsed" style="background: #fff"
      breakpoint="lg"
      collapsedWidth="80"
      @breakpoint="onBreakpoint"
    >
</a-layout-sider>

将文档中的 v-model="collapsed"  改成 :collapsed="collapsed"，其次通过 @breakpoint 方法绑定自适应改变方法传递值给父组件

7、ant design of vue 中 moment 对 typescript 支持情况

因我使用的是 ts，在使用时 node_modules 中的 moment 支持 ts 文件会报错（说没有 export Moment 模块），然后我改成下方代码，死马当活马医吧，先让他不报错再说。。。

import Moment from ''moment'';
interface Moment{}

8、今天发现 ant design 一个很傻屌的地方，我们需求是有个滚动，然后我取巧使用了跑马灯（carousel）组件，然后需要调整一下自动切换时间，查看 api 没有。。。我勒个槽，然后绝望准备换一个方法实现时，发现下方有一行小字，更多参数可参考：vc-slick props  找到了 autoplaySpeed。。然后设置时间。ok

 

 

 

 

 

 

 

 

 

Ant Design Pro 使用更多 Ant Design of Vue 组件

Ant Design Pro 使用更多 Ant Design of Vue 组件

  • 因为  Ant Design Pro 是按需加载的，Ant Design of Vue 中的部分组件未默认引用，故需要手工添加到项目中。
  1. 这里以 Pagination 这个分页组件为例。首先在项目中找到文件 \src\core\lazy_lib\components_use.js
  3. 增加如下两个代码 
    import {
.....
// 增加
Pagination
} from ''ant-design-vue''
    // 增加
Vue.use(Pagination)
  4. 至此，页面中即可使用该组件

ant design vue - 表格 (待更

ant design vue - 表格 (待更

过滤器:就是筛选

 filters: [

            { text: '全部',value: '' },

            { text: '通过',value: '通过' },

            { text: '拒绝',value: '拒绝' },

            { text: '待处理',value: '待处理' },

          ],

          onFilter: (value,record) => record.condition.indexOf(value) === 0,

 

部分渲染

前提

scopedSlots: {customrender: 'state'}

  <a slot="action" href="javascript:;" @click="onEdit(record)">查看</a>

   <a slot="action" href="javascript:;" @click="visible = true" >备注</a>

             

排序

  // 排列变化

          onFilter: (value,record) => record.address.indexOf(value) === 0,

          sorter: (a,b) => a.address - b.address,

          //  sorter: (a,b) => a.address.length - b.address.length,

          // 可有可无 还是在这里吧 好像是可以倒转切换的 虽然没有ta 也可以切换

          sortDirections: ['descend','ascend'],

 

今天关于Ant Design Vue封装a-drawer和vue 封装 axios的介绍到此结束，谢谢您的阅读，有关Android Material Design系列之Navigation Drawer、ant design of vue 使用记录、Ant Design Pro 使用更多 Ant Design of Vue 组件、ant design vue - 表格 (待更等更多相关知识的信息可以在本站进行查询。

本文标签：

上一篇Ant Design Vue照片墙a-upload（vue照片墙插件）

下一篇Ant Design Vue中TreeSelect详解（ant design vue tree）

相关文章